/*========================================================
    VBlink HR CONSULTANTS
    SERVICES HEADER CSS
    GRID-BASED VERSION
    NO FLEXBOX
    SIMPLE ☰ / × MENU BUTTON
========================================================*/


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:#0f172a;
    background:#f7faff;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
}

.container{
    width:min(1240px,92%);
    margin:0 auto;
}


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

.site-header{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:10000;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(37,99,235,.08);

    box-shadow:
        0 8px 25px rgba(15,23,42,.06);

    transition:
        background .35s ease,
        box-shadow .35s ease;
}


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

.site-header.shrink{
    background:rgba(255,255,255,.96);

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


/*========================================================
    DECORATIVE BOTTOM LINE
========================================================*/

.site-header::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2563eb,
            #7c3aed,
            transparent
        );

    opacity:.35;

    pointer-events:none;
}


/*========================================================
    HEADER INNER
    CSS GRID
========================================================*/

.header-inner{

    position:relative;

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items:center;

    column-gap:25px;

    min-height:90px;

    transition:
        min-height .35s ease;
}

.site-header.shrink .header-inner{
    min-height:68px;
}


/*========================================================
    BRAND
========================================================*/

.brand{

    display:grid;

    grid-template-columns:auto auto;

    align-items:center;

    column-gap:16px;

    min-width:0;

    white-space:nowrap;
}


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

.logo-wrapper{

    position:relative;

    width:74px;
    height:74px;

    display:grid;

    place-items:center;
}


/*========================================================
    ANIMATED LOGO RING
========================================================*/

.logo-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
        conic-gradient(
            #2563eb,
            #60a5fa,
            #7c3aed,
            #2563eb
        );

    padding:3px;

    animation:
        rotateRing 8s linear infinite;
}


/*========================================================
    INNER RING
========================================================*/

.logo-ring::before{

    content:"";

    position:absolute;

    inset:3px;

    border-radius:50%;

    background:#ffffff;
}


@keyframes rotateRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


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

.brand-logo{

    position:relative;

    width:52px;
    height:52px;

    border-radius:50%;

    object-fit:contain;

    background:#ffffff;

    padding:5px;

    z-index:2;

    transition:
        transform .35s ease;
}

.brand:hover .brand-logo{
    transform:scale(1.08);
}


/*========================================================
    BRAND TEXT
========================================================*/

.brand-text{

    display:grid;

    grid-template-rows:auto auto;

    align-content:center;

    min-width:0;
}


.brand-name{

    font-size:1.30rem;

    font-weight:800;

    color:#0f172a;

    letter-spacing:.3px;

    line-height:1.2;
}


.brand-tagline{

    margin-top:4px;

    font-size:.82rem;

    color:#64748b;

    font-weight:500;

    line-height:1.2;
}


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

.main-nav{

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:max-content;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:0;
}


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

.nav-item{

    position:relative;

    display:grid;

    place-items:center;

    padding:14px 20px;

    border-radius:14px;

    font-size:.94rem;

    font-weight:700;

    color:#1e293b;

    overflow:hidden;

    z-index:1;

    transition:
        color .35s ease,
        transform .35s ease;
}


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

.nav-item span{

    position:relative;

    z-index:3;
}


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

.nav-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    transform:scaleX(0);

    transform-origin:left;

    border-radius:14px;

    z-index:1;

    transition:
        transform .35s ease;
}


/*========================================================
    NAVIGATION BOTTOM LINE
========================================================*/

.nav-item::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:6px;

    width:0;
    height:3px;

    border-radius:20px;

    background:#60a5fa;

    transform:translateX(-50%);

    z-index:4;

    transition:
        width .35s ease;
}


.nav-item:hover{

    color:#ffffff;

    transform:translateY(-3px);
}


.nav-item:hover::before{
    transform:scaleX(1);
}


.nav-item:hover::after{
    width:60%;
}


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

.nav-item.active{
    color:#ffffff;
}

.nav-item.active::before{
    transform:scaleX(1);
}

.nav-item.active::after{
    width:60%;
}


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

.header-actions{

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:max-content;

    align-items:center;

    gap:16px;

    justify-content:end;
}


/*========================================================
    PHONE LINK
========================================================*/

.phone-link{

    display:grid;

    grid-template-columns:auto auto;

    align-items:center;

    column-gap:10px;

    padding:5px 14px;

    border-radius:40px;

    background:#ffffff;

    border:1px solid rgba(37,99,235,.10);

    box-shadow:
        0 8px 20px rgba(37,99,235,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.phone-link:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 30px rgba(37,99,235,.15);
}


/*========================================================
    PHONE ICON
========================================================*/

.phone-icon-btn{

    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#ffffff;

    animation:
        ringPhone 1.6s infinite;
}


.phone-icon-btn svg{

    width:18px;
    height:18px;

    fill:currentColor;
}


@keyframes ringPhone{

    0%{
        transform:rotate(0deg);
    }

    10%{
        transform:rotate(-12deg);
    }

    20%{
        transform:rotate(12deg);
    }

    30%{
        transform:rotate(-12deg);
    }

    40%{
        transform:rotate(12deg);
    }

    50%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(0deg);
    }

}


/*========================================================
    APPLY BUTTON
========================================================*/

.apply-btn{

    position:relative;

    display:grid;

    place-items:center;

    padding:12px 18px;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#ffffff;

    font-size:.82rem;

    font-weight:700;

    overflow:hidden;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.apply-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:40%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:
        left .8s ease;
}


.apply-btn:hover::before{
    left:130%;
}


.apply-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 40px rgba(37,99,235,.30);
}


/*========================================================
    APPLY BUTTON PULSE
========================================================*/

.apply-btn.pulse-cta{
    animation:
        applyPulse 2s infinite;
}


@keyframes applyPulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(37,99,235,.45);
    }

    70%{
        box-shadow:
            0 0 0 18px rgba(37,99,235,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(37,99,235,0);
    }

}


/*========================================================
    SIMPLE HAMBURGER BUTTON
    Uses ☰ character
    NO SPANS
    NO FLEXBOX
========================================================*/

.menu-toggle{

    display:none;

    position:relative;

    width:48px;
    height:48px;

    padding:0;
    margin:0;

    border:0;
    outline:0;

    border-radius:14px;

    background:#ffffff;

    color:#0f172a;

    cursor:pointer;

    z-index:10003;

    font-family:
        Arial,
        sans-serif;

    font-size:30px;

    font-weight:700;

    line-height:48px;

    text-align:center;

    vertical-align:middle;

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

    transition:
        background .30s ease,
        color .30s ease,
        box-shadow .30s ease,
        transform .25s ease;
}


/*========================================================
    HAMBURGER HOVER
========================================================*/

.menu-toggle:hover{

    background:#2563eb;

    color:#ffffff;

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

    transform:translateY(-2px);
}


/*========================================================
    ACTIVE MENU BUTTON
    JavaScript changes ☰ → ×
========================================================*/

.menu-toggle.active{

    background:#ffffff;

    color:#0f172a;
}


.menu-toggle.active:hover{

    background:#2563eb;

    color:#ffffff;
}


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

.mobile-menu-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(15,23,42,.65);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:10001;
}

.mobile-menu-overlay.active{
    opacity:1;
    visibility:visible;
}


/*========================================================
    RIGHT SIDE DRAWER
========================================================*/

.mobile-nav{
    position:fixed;

    top:0;
    right:-340px;

    width:320px;
    max-width:90%;

    height:100vh;

    background:#ffffff;

    display:grid;
    grid-template-rows:auto 1fr auto;

    transition:right .40s ease;

    z-index:10002;

    overflow-y:auto;

    box-shadow:
        -8px 0 30px rgba(0,0,0,.18);
}

.mobile-nav.active{
    right:0;
}


/*========================================================
    MOBILE NAVIGATION HEADER
========================================================*/

.mobile-nav-header{

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    padding:5px 24px;

    border-bottom:
        1px solid rgba(37,99,235,.08);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}


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

.mobile-logo{

    width:58px;
    height:58px;

    object-fit:contain;

    background:#ffffff;

    border-radius:16px;

    padding:5px;
}


/*========================================================
    DRAWER CLOSE BUTTON
========================================================*/

.close-menu{
    width:42px;
    height:42px;

    padding:0;
    margin:0;

    border:none;

    border-radius:50%;

    display:grid;
    place-items:center;

    cursor:pointer;

    font-size:28px;
    line-height:1;

    font-family:Arial,sans-serif;

    color:#ffffff;

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

    transition:
        transform .30s ease,
        background .30s ease,
        color .30s ease;
}

.close-menu:hover{
    transform:rotate(90deg);

    background:#ffffff;

    color:#2563eb;
}


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

.mobile-nav ul{

    list-style:none;

    padding:10px;

    margin:0;

    display:grid;

    align-content:start;

    gap:10px;
}


.mobile-nav li{
    margin:0;
}


.mobile-nav li a{

    display:grid;

    grid-template-columns:auto 1fr;

    align-items:center;

    column-gap:14px;

    padding:15px 18px;

    border-radius:14px;

    color:#1e293b;

    font-weight:600;

    font-size:1rem;

    background:#f8fbff;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;
}


.mobile-nav li a:hover{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#ffffff;

    transform:translateX(6px);
}


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

.mobile-footer{

    padding:14px;

    border-top:
        1px solid rgba(37,99,235,.08);

    background:#f8fbff;

    display:grid;

    gap:16px;
}


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

.mobile-phone{

    display:grid;

    place-items:center;

    padding:5px;

    border-radius:14px;

    background:#ffffff;

    color:#2563eb;

    font-weight:700;

    box-shadow:
        0 8px 18px rgba(37,99,235,.08);

    transition:
        background .30s ease,
        color .30s ease;
}


.mobile-phone:hover{

    background:#2563eb;

    color:#ffffff;
}


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

.mobile-apply-btn{

    display:grid;

    place-items:center;

    padding:5px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#ffffff;

    font-weight:700;

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

    transition:
        transform .30s ease;
}


.mobile-apply-btn:hover{

    transform:translateY(-3px);
}


/*========================================================
    MOBILE SOCIAL ICONS
========================================================*/

.mobile-social{

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:46px;

    justify-content:center;

    gap:14px;
}


.mobile-social a{

    width:46px;
    height:46px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#ffffff;

    color:#2563eb;

    box-shadow:
        0 8px 20px rgba(37,99,235,.08);

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;
}


.mobile-social a:hover{

    background:#2563eb;

    color:#ffffff;

    transform:translateY(-5px);
}


/*========================================================
    LARGE TABLET
========================================================*/

@media (max-width:1100px){

    .main-nav{

        gap:6px;
    }


    .nav-item{

        padding:6px 7px;

        font-size:.88rem;
    }


    .phone-number{

        display:none;
    }


    .apply-btn{

        padding:12px 18px;
    }

}


/*========================================================
    TABLET
========================================================*/

@media (max-width:900px){

    .header-inner{

        grid-template-columns:
            1fr auto;

        min-height:74px;
    }


    .main-nav{

        display:none;
    }


    .header-actions{

        display:none;
    }


    /* Show simple ☰ button */

    .menu-toggle{

        display:block;
    }


    .logo-wrapper{

        width:56px;
        height:56px;
    }


    .brand-logo{

        width:46px;
        height:46px;
    }


    .brand-name{

        font-size:1.05rem;
    }


    .brand-tagline{

        font-size:.75rem;
    }
	
	.mobile-nav{
        top:0px;
        height:calc(100vh - 74px);
    }

}


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

@media (max-width:576px){

    .container{

        width:94%;
    }


    .header-inner{

        min-height:68px;

        column-gap:12px;
    }


    .brand{

        column-gap:10px;
    }


    .logo-wrapper{

        width:50px;
        height:50px;
    }


    .brand-logo{

        width:42px;
        height:42px;
    }


    .brand-name{

        font-size:.95rem;
    }


    .brand-tagline{

        display:none;
    }


    /* Simple ☰ button */

    .menu-toggle{

        width:44px;
        height:44px;

        border-radius:12px;

        font-size:27px;

        line-height:44px;
    }


    .mobile-nav{
        top:0px;
        height:calc(100vh - 68px);
    }


    .mobile-nav li a{

        font-size:.95rem;

        padding:14px 16px;
    }


    .mobile-phone,
    .mobile-apply-btn{

        font-size:.92rem;
    }

}


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

@media (max-width:380px){

    .brand-name{

        font-size:.88rem;
    }


    .logo-wrapper{

        width:46px;
        height:46px;
    }


    .brand-logo{

        width:38px;
        height:38px;
    }


    .menu-toggle{

        width:42px;
        height:42px;

        font-size:25px;

        line-height:42px;
    }


   .mobile-nav{
        top:0px;
        height:calc(100vh - 68px);
    }

}