/* =========================================================
   SCPM AYURVEDA
   FORCE RESPONSIVE NAVBAR
   Works on 1920 / 1600 / 1440 / 1366 / 1280 / Mobile
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 9999;

    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


/* =========================================================
   NAVBAR INNER
========================================================= */

.navbar-inner {

    width: 100%;

    /*
       Fluid width:
       Desktop par side space automatically adjust hoga
    */
    max-width: 1900px;

    margin: 0 auto;

    min-height: 86px;

    padding-left: clamp(18px, 2.5vw, 55px);
    padding-right: clamp(18px, 2.5vw, 55px);

    display: grid;

    /*
       Logo | Menu | Apply
    */
    grid-template-columns:
        minmax(150px, auto)
        minmax(0, 1fr)
        minmax(110px, auto);

    align-items: center;

    column-gap: clamp(18px, 2vw, 45px);
}


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

.logo {

    display: flex;

    align-items: center;
    justify-content: flex-start;

    width: max-content;
    max-width: 100%;

    flex-shrink: 0;

    line-height: 0;
}


.logo-img {

    display: block;

    width: auto;

    /*
       Desktop logo automatically controlled
    */
    height: clamp(48px, 4vw, 68px);

    max-width: 210px;

    object-fit: contain;

    flex-shrink: 0;
}


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

.nav-links {

    width: 100%;
    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    /*
       Items ko ek line me fit karne ki koshish
    */
    flex-wrap: nowrap;

    gap: clamp(12px, 1.35vw, 28px);

    min-height: 60px;
}


/* =========================================================
   NAV LINK
========================================================= */

.nav-links a {

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    /*
       Important:
       text ko ek hi word me break nahi hone dena
    */
    white-space: nowrap;

    flex: 0 1 auto;

    padding: 10px 0;

    color: #24332b;

    font-family:
        "Jost",
        Arial,
        sans-serif;

    font-size: clamp(11px, 0.72vw, 14px);

    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


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

.nav-links a:hover {

    color: #e86f18;

    transform: translateY(-1px);
}


/* =========================================================
   ACTIVE LINK
========================================================= */

.nav-links a.active-link {

    color: #e86f18;

    font-weight: 700;
}


.nav-links a.active-link::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 1px;

    width: 24px;
    height: 2px;

    border-radius: 20px;

    background: #e86f18;

    transform: translateX(-50%);
}


/* =========================================================
   APPLY NOW AREA
========================================================= */

.nav-cta {

    display: flex;

    justify-content: flex-end;
    align-items: center;

    min-width: 0;

    flex-shrink: 0;
}


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

.nav-cta .btn-gold {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 105px;

    min-height: 44px;

    padding:
        0 clamp(13px, 1.1vw, 22px);

    border-radius: 10px;

    white-space: nowrap;

    color: #ffffff;

    background: #e86f18;

    border: 1px solid #e86f18;

    font-family:
        "Jost",
        Arial,
        sans-serif;

    font-size: clamp(11px, 0.75vw, 14px);

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(232, 111, 24, 0.18);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.nav-cta .btn-gold:hover {

    background: #bd5410;

    border-color: #bd5410;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(232, 111, 24, 0.25);
}


/* =========================================================
   BURGER
========================================================= */

.burger {

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;
}


.burger span {

    display: block;

    width: 23px;
    height: 2px;

    border-radius: 10px;

    background: #173126;

    transition: 0.25s ease;
}


/* =========================================================
   STICKY / SCROLLED
========================================================= */

.navbar.scrolled {

    position: sticky;

    top: 0;

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(14px);

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


.navbar.scrolled .navbar-inner {

    min-height: 76px;
}


/* =========================================================
   LARGE DESKTOP
   1920 / 1800 / 1680
========================================================= */

@media (min-width: 1600px) {

    .navbar-inner {

        padding-left: 40px;
        padding-right: 40px;

        column-gap: 35px;
    }

    .nav-links {

        gap: 22px;
    }

    .nav-links a {

        font-size: 13px;
    }

}


/* =========================================================
   22-INCH / 1440–1600 DESKTOP
========================================================= */

@media (min-width: 1350px) and (max-width: 1599px) {

    .navbar-inner {

        padding-left: 25px;
        padding-right: 25px;

        column-gap: 24px;
    }

    .nav-links {

        gap: 16px;
    }

    .nav-links a {

        font-size: 12px;
    }

    .logo-img {

        max-width: 190px;
    }

    .nav-cta .btn-gold {

        min-width: 100px;

        padding-left: 15px;
        padding-right: 15px;
    }

}


/* =========================================================
   NORMAL LAPTOP / 1280–1349
========================================================= */

@media (min-width: 1100px) and (max-width: 1349px) {

    .navbar-inner {

        padding-left: 18px;
        padding-right: 18px;

        column-gap: 15px;
    }

    .logo-img {

        max-width: 165px;

        height: 55px;
    }

    .nav-links {

        gap: 11px;
    }

    .nav-links a {

        font-size: 10.5px;
    }

    .nav-cta .btn-gold {

        min-width: 90px;

        min-height: 40px;

        padding-left: 11px;
        padding-right: 11px;

        font-size: 11px;
    }

}


/* =========================================================
   SMALL DESKTOP / TABLET LANDSCAPE
========================================================= */

@media (min-width: 901px) and (max-width: 1099px) {

    .navbar-inner {

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

        padding-left: 14px;
        padding-right: 14px;

        column-gap: 10px;
    }

    .logo-img {

        max-width: 145px;

        height: 50px;
    }

    .nav-links {

        gap: 8px;
    }

    .nav-links a {

        font-size: 9.5px;

        letter-spacing: -0.1px;
    }

    .nav-cta .btn-gold {

        min-width: 82px;

        min-height: 38px;

        padding-left: 8px;
        padding-right: 8px;

        font-size: 10px;
    }

}


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

@media (max-width: 900px) {

    .navbar-inner {

        min-height: 72px;

        display: flex;

        justify-content: space-between;
        align-items: center;

        padding:
            8px 16px;
    }


    /* Logo LEFT */

    .logo {

        order: 1;
    }


    .logo-img {

        height: 50px;

        max-width: 165px;
    }


    /* Apply RIGHT */

    .nav-cta {

        order: 2;

        margin-left: auto;

        margin-right: 8px;
    }


    .nav-cta .btn-gold {

        min-width: 88px;

        min-height: 40px;

        padding:
            0 12px;

        font-size: 11px;
    }


    /* Burger */

    .burger {

        display: flex;

        order: 3;

        flex-shrink: 0;
    }


    /* Mobile Menu */

    .nav-links {

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        background: #ffffff;

        border-top: 1px solid rgba(0,0,0,0.06);

        box-shadow:
            0 15px 35px rgba(0,0,0,0.10);

        transition:
            max-height 0.35s ease;
    }


    .nav-links.active {

        max-height: 85vh;

        overflow-y: auto;
    }


    .nav-links a {

        width: 100%;

        min-height: 48px;

        padding:
            13px 22px;

        justify-content: flex-start;

        font-size: 14px;

        white-space: normal;

        border-bottom:
            1px solid rgba(0,0,0,0.05);
    }


    .nav-links a.active-link::after {

        display: none;
    }

}


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

@media (max-width: 600px) {

    .navbar-inner {

        min-height: 66px;

        padding:
            7px 12px;
    }


    .logo-img {

        height: 44px;

        max-width: 145px;
    }


    .nav-cta {

        margin-right: 2px;
    }


    .nav-cta .btn-gold {

        min-width: 78px;

        min-height: 37px;

        padding:
            0 9px;

        font-size: 10px;

        border-radius: 8px;
    }


    .burger {

        width: 40px;
        height: 40px;
    }

}


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

@media (max-width: 380px) {

    .navbar-inner {

        padding-left: 8px;
        padding-right: 8px;
    }


    .logo-img {

        height: 40px;

        max-width: 125px;
    }


    .nav-cta .btn-gold {

        min-width: 70px;

        padding-left: 7px;
        padding-right: 7px;

        font-size: 9px;
    }


    .burger {

        width: 36px;
    }

}


/* =========================================================
   EMERGENCY OVERFLOW PROTECTION
========================================================= */

.navbar,
.navbar-inner,
.logo,
.logo-img,
.nav-links,
.nav-cta {

    max-width: 100%;
}


/*
   Kisi bhi condition me page horizontally
   scroll nahi karega.
*/

body {

    overflow-x: hidden !important;
}


/*
   Images viewport se bahar nahi jayengi.
*/

img {

    max-width: 100%;
    height: auto;
}



/* =========================================================
   NAV MENU - FINAL GAP FIX
========================================================= */

@media (min-width: 901px) {

    .navbar-inner {
        display: grid !important;

        grid-template-columns:
            max-content
            minmax(0, 1fr)
            max-content !important;

        align-items: center !important;

        column-gap: 30px !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 25px !important;
        padding-right: 25px !important;
    }


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

    .nav-links {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: center !important;

        flex-wrap: wrap !important;

        /*
          Har menu item ke beech gap
        */
        column-gap: 22px !important;

        row-gap: 8px !important;

        width: 100% !important;

        min-width: 0 !important;
    }


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

    .nav-links a {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        flex: 0 0 auto !important;

        margin: 0 !important;

        padding: 8px 2px !important;

        white-space: nowrap !important;

        line-height: 1.2 !important;

        position: relative !important;
    }


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

    .logo {

        flex-shrink: 0 !important;

        width: max-content !important;

        max-width: none !important;
    }


    .logo-img {

        width: auto !important;

        height: 70px !important;

        max-width: 230px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       APPLY NOW
    ===================================================== */

    .nav-cta {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        flex-shrink: 0 !important;

        width: max-content !important;
    }


    .nav-cta .btn-gold {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        min-width: 110px !important;

        min-height: 44px !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;
    }
}


/* =========================================================
   1400+ SCREEN
   More comfortable gap
========================================================= */

@media (min-width: 1400px) {

    .nav-links {
        column-gap: 25px !important;
        row-gap: 9px !important;
    }

    .nav-links a {
        font-size: 13px !important;
    }
}


/* =========================================================
   1600+ SCREEN
========================================================= */

@media (min-width: 1600px) {

    .nav-links {
        column-gap: 29px !important;
        row-gap: 10px !important;
    }

    .nav-links a {
        font-size: 14px !important;
    }
}


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

@media (max-width: 900px) {

    .nav-links {
        flex-direction: column !important;

        flex-wrap: nowrap !important;

        column-gap: 0 !important;

        row-gap: 0 !important;
    }

    .nav-links a {
        width: 100% !important;

        justify-content: flex-start !important;

        padding: 13px 22px !important;

        white-space: normal !important;
    }
}