/* =====================================================
HEADER.CSS
PART 1
Base + Desktop
===================================================== */


/* =========================
ROOT
========================= */

:root{

    --bg:#050816;
    --card:#081122;
    --card-2:#0d1833;

    --primary:#2563EB;
    --primary-light:#60A5FA;

    --text:#ffffff;
    --muted:#CBD5E1;

    --border:rgba(255,255,255,.08);

    --radius:18px;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    padding-top:82px;

}

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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:
    rgba(5,8,22,.96);

    border-bottom:
    1px solid var(--border);

    box-shadow:
    0 12px 35px rgba(0,0,0,.28);

}

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

.header-container{

    max-width:1280px;

    margin:auto;

    height:82px;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.site-logo{

    text-decoration:none;

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:34px;

    font-weight:700;

    letter-spacing:2px;

    white-space:nowrap;

}

.site-logo span{

    color:var(--primary-light);

}

/* =========================
NAVIGATION
========================= */

.site-nav{

    display:flex;

    align-items:center;

    gap:42px;

}

.site-nav a{

    position:relative;

    text-decoration:none;

    color:var(--muted);

    font-size:15px;

    font-weight:500;

    transition:.35s;

}

.site-nav a:hover{

    color:#fff;

}

.site-nav>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-7px;

    width:0;

    height:2px;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--primary-light));

    transition:.35s;

}

.site-nav>a:hover::after{

    width:100%;

}

/* =========================
DESKTOP ACTIONS
========================= */

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

.action-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    border:
    1px solid rgba(96,165,250,.18);

    background:
    linear-gradient(
    180deg,
    #102145,
    #081122);

    transition:.35s;

}

.action-btn:hover{

    color:#fff;

    transform:translateY(-3px);

    border-color:var(--primary-light);

    box-shadow:
    0 10px 25px rgba(37,99,235,.28);

}

.action-btn.whatsapp:hover{

    border-color:#22C55E;

    box-shadow:
    0 10px 25px rgba(34,197,94,.30);

}

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

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:none;

    cursor:pointer;

    position:relative;

}

.menu-toggle span{

    position:absolute;

    left:10px;

    width:26px;

    height:2px;

    background:#fff;

    transition:.35s;

}

.menu-toggle span:nth-child(1){

    top:14px;

}

.menu-toggle span:nth-child(2){

    top:22px;

}

.menu-toggle span:nth-child(3){

    top:30px;

}

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

.mobile-actions{

    display:none;

}

/* =========================
OVERLAY
========================= */

.menu-overlay{

    display:none;

}

/* =====================================================
HEADER.CSS
PART - 2
Responsive + Mobile Menu
===================================================== */

@media (max-width:991px){

    /* HEADER */

    .header-container{

        height:76px;

        padding:0 18px;

    }

    body{

        padding-top:76px;

    }

    /* LOGO */

    .site-logo{

        font-size:28px;

        letter-spacing:1px;

    }

    /* HIDE DESKTOP */

    .header-actions{

        display:none;

    }

    /* SHOW HAMBURGER */

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        z-index:10003;

    }

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

    .site-nav{

        position:fixed;

        top:76px;

        right:0;

        width:min(82vw,320px);

        height:calc(100dvh - 76px);

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:28px 24px;

        background:#081122;

        border-left:1px solid rgba(255,255,255,.08);

        box-shadow:-20px 0 45px rgba(0,0,0,.45);

        overflow-y:auto;

        -webkit-overflow-scrolling:touch;

        transform:translateX(100%);

        transition:transform .35s ease;

        z-index:10002;

    }

    /* OPEN */

    .site-nav.active{

        transform:translateX(0);

    }

    /* LINKS */

    .site-nav > a{

        width:100%;

        padding:16px 0;

        font-size:17px;

        border-bottom:1px solid rgba(255,255,255,.06);

    }

    .site-nav > a::after{

        display:none;

    }

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




    /* =========================
       OVERLAY
    ========================= */

    .menu-overlay{

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.45);

        opacity:0;

        visibility:hidden;

        transition:.35s;

        z-index:10001;

    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;

    }

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

    .menu-toggle.active span:nth-child(1){

        transform:translateY(8px) rotate(45deg);

    }

    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }

    .menu-toggle.active span:nth-child(3){

        transform:translateY(-8px) rotate(-45deg);

    }

}

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

@media (max-width:480px){

    .site-logo{

        font-size:23px;

    }

    .header-container{

        padding:0 15px;

    }

    .site-nav{

        width:100%;

        padding:24px 20px;

    }

    .site-nav > a{

        font-size:16px;

        padding:15px 0;

    }

}