/*
 Theme Name:   Travelify New
 Theme URI:    
 Description:  Travelify Child Theme for I.E. Sergio Martinez
 Author:       Admin
 Template:     travelify
 Version:      1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --azul-verdad: #12304C;
    --azul-libertad: #0071BC;
    --azul-modernidad: #75CAF9;
    --rojo-amor: #EB2325;
    --blanco-paz: #F5FAFC;
    --amarillo-oportunidad: #FFF013;
    --verde-campo: #00B050;
}

body, p, li, a, span, h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
}

body {
    background-color: var(--blanco-paz) !important;
}

/* TOP BAR */
.insermar-topbar {
    background-color: #333;
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
}
.insermar-topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.insermar-topbar a {
    color: #fff !important;
    text-decoration: none;
    margin-right: 20px;
}
.insermar-topbar a:hover {
    color: var(--amarillo-oportunidad) !important;
}

/* HEADER AREA */
.insermar-header-main {
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.insermar-header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.insermar-logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}
.insermar-logo-container img {
    max-width: 70px;
    height: auto;
}
.insermar-logo-container h1 {
    font-size: 24px;
    font-weight: 700 !important;
    color: var(--azul-verdad);
    margin: 0;
    line-height:1;
}

/* NAVIGATION (Pills) */
#main-nav {
    background: transparent !important;
    border: none !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
}
#main-nav ul {
    display: flex;
    gap: 10px;
}
#main-nav ul li {
    border: none !important;
}
#main-nav ul li a {
    background-color: var(--azul-verdad) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    transition: 0.3s;
    border: none !important;
}
#main-nav ul li:first-child a {
    background-color: var(--amarillo-oportunidad) !important;
    color: var(--azul-verdad) !important;
}
#main-nav ul li a:hover {
    background-color: var(--rojo-amor) !important;
    color: #fff !important;
}

/* HERO SECTION */
.insermar-hero {
    position: relative;
    background-image: url('https://iesergiomartinez-planetarica.edu.co/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-28-at-11.20.52-AM-1.jpeg');
    background-size: cover;
    background-position: center;
    padding: 150px 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}
.insermar-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 113, 188, 0.75);
}
.insermar-hero-content {
    position: relative;
    z-index: 2;
}
.insermar-hero-content h1 {
    font-size: 56px;
    font-weight: 900 !important;
    margin-bottom: 10px;
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.insermar-hero-content p {
    font-size: 22px;
    margin-bottom: 30px;
    font-weight: 500 !important;
}
.insermar-hero-btn {
    display: inline-block;
    background-color: var(--amarillo-oportunidad);
    color: var(--azul-verdad) !important;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700 !important;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.insermar-hero-btn:hover {
    background-color: var(--azul-verdad);
    color: #fff !important;
}

/* Hide original header clutter */
#branding {
    display: none !important;
}

/* Submenu Improvements */
#main-nav ul li { position: relative; }
#main-nav ul li ul { background-color: var(--blanco-paz) !important; border: 1px solid #eaeaea; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 10px 0; margin-top: 15px; display: none; position: absolute; z-index: 999; min-width: 200px; }
#main-nav ul li:hover > ul { display: block; animation: fadeIn 0.3s ease-in-out; }
#main-nav ul li ul li a { background-color: transparent !important; color: var(--azul-verdad) !important; padding: 10px 20px !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 500 !important; display: block; text-transform: none; text-align: left; }
#main-nav ul li ul li a:hover { background-color: var(--azul-modernidad) !important; color: #fff !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsiveness */
@media (max-width: 900px) {
    .insermar-header-main .container, .insermar-topbar .container { flex-direction: column; text-align: center; gap: 10px; }
    #main-nav ul { flex-wrap: wrap; justify-content: center; gap: 5px; }
    .insermar-hero-content h1 { font-size: 36px; }
    .topbar-contact, .topbar-social { display: flex; flex-direction: column; align-items: center; gap: 5px; }
}

/* Navbar Layout Fixes for Pills */
#main-nav ul li { display: flex; align-items: stretch; }
#main-nav ul li a { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; padding: 10px 20px !important; height: auto !important; min-height: 40px !important; box-sizing: border-box; }


.insermar-btn-dark { background-color: var(--azul-verdad) !important; color: #fff !important; }
.insermar-btn-dark:hover { background-color: var(--rojo-amor) !important; color: #fff !important; }