/* ==================================================
   MOBILE NAV
================================================== */

.mobile-nav{

    display:none;

    position:absolute;

    top:90px;

    right:20px;

    width:220px;

    background:#ffffff;

    border-radius:16px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.12);

    overflow:hidden;

    z-index:999;
}

.mobile-nav.active{

    display:block;
}

.mobile-nav a{

    display:block;

    padding:16px 20px;

    color:#111827;

    text-decoration:none;

    font-weight:600;

    border-bottom:1px solid #f1f5f9;
}

.mobile-nav a:last-child{

    border-bottom:none;
}

.mobile-nav a:hover{

    background:#f8fafc;

    color:var(--primary);
}



/* ==================================================
   RESET
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==================================================
   VARIABLES
================================================== */

:root{

    /*--primary:#007F4F;*/
    
    --primary:#0F8A6C;

    --text:#111827;

    --white:#ffffff;

}

/* ==================================================
   BODY
================================================== */

body{

    font-family:'Inter',sans-serif;

    background:#ffffff;

    color:var(--text);
}

/* ==================================================
   CONTAINER
================================================== */

.container{

    width:90%;

    max-width:1280px;

    margin:auto;
}

/* ==================================================
   HEADER
================================================== */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    background:
    rgba(255,255,255,.95);

    backdrop-filter:
    blur(12px);

    border-bottom:
    1px solid #e5e7eb;
}

/* ==================================================
   HEADER CONTAINER
================================================== */

.header-container{

    height:100px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

/* ==================================================
   LOGO
================================================== */

.logo img{

    height:70px;

    width:auto;
}

/* ==================================================
   MENU
================================================== */

.desktop-nav ul{

    display:flex;

    gap:60px;

    list-style:none;
}

.desktop-nav a{

    text-decoration:none;

    color:#111827;

    font-weight:600;

    position:relative;
}

/* =========================================
   MENU HOVER
========================================= */

.desktop-nav a:hover{

    color:var(--primary);
}

.desktop-nav a:hover::after{

    width:24px;
}

.desktop-nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-12px;

    width:0;

    height:3px;

    background:var(--primary);

    border-radius:10px;

    transform:translateX(-50%);

    transition:all .3s ease;
}

.desktop-nav a.active{

    color:var(--primary);
}

.desktop-nav a.active::after{

    width:24px;
}



/* ==================================================
   WHATSAPP BUTTON
================================================== */

.header-whatsapp{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:var(--primary);

    color:#ffffff;

    text-decoration:none;

    padding:16px 28px;

    border-radius:14px;

    font-weight:600;

    transition:.3s;
}

.header-whatsapp:hover{

    transform:translateY(-2px);
}

.header-whatsapp img{

    width:24px;

    height:24px;

    object-fit:contain;
}

/* ==================================================
   MOBILE BUTTON
================================================== */

.menu-toggle{

    display:none;

    width:60px;

    height:60px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#ffffff;

    font-size:28px;

    cursor:pointer;
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:767px){

    .desktop-nav{

        display:none;
    }

    .header-whatsapp{

        display:none;
    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;
    }

    .header{

        height:90px;
    }

    .header-container{

        height:90px;
    }

    .logo img{

        height:58px;
    }
}