/* =========================================================================
   CLASSWALA — HOMEPAGE MODERN REDESIGN  (v3)
   =========================================================================
   Ye file style.css ke BAAD load hoti hai (include.blade.php mein already
   linked hai). Ye sirf CSS hai — koi Blade loop, koi PHP variable, koi form
   ya modal ka logic touch nahi hua. Sirf look & feel upgrade hui hai.

   v3 mein fix hua:
   - Mobile menu (offcanvas) tootne wala bug FIX — root cause: .navbar par
     backdrop-filter tha, aur mobile menu navbar ke andar hi position:fixed
     element hai. CSS spec ke rule se, filter/backdrop-filter ancestor
     apne fixed descendants ke liye naya "containing block" bana deta hai
     — isse mobile menu poori screen ke bajaye sirf navbar ke andar hi
     confine ho raha tha aur tuta hua dikh raha tha. Ab backdrop-filter
     hata diya hai, menu solid background ke saath poori screen par
     normally slide hota hai.
   - Footer wapas LIGHT design mein (dark accha nahi lag raha tha)
   - Offcanvas panel ko explicit solid white background diya (extra safety)

   Agar kabhi purani (template-jaisi) design wapas chahiye ho, bas
   include.blade.php se is file ki <link> line hata do — sab kuch turant
   pehle jaisa ho jayega, kyunki humne kuch delete nahi kiya, sirf ek
   extra "skin" upar chadhayi hai.

   Ye file PURI TARAH purani custom-enhance.css ki jagah leti hai (same
   filename, replace kar dena).
   ========================================================================= */

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

:root {
    --heading-font: 'Plus Jakarta Sans', 'Lato', sans-serif;
    --ink: #0F1B24;
    --ink-soft: #4B5D6B;
    --surface: #FFFFFF;
    --surface-tint: #F6FAFC;
    --border-soft: rgba(15, 40, 60, 0.09);
    --shadow-soft: 0 10px 30px -12px rgba(15, 40, 60, 0.14);
    --shadow-lift: 0 20px 40px -16px rgba(15, 40, 60, 0.22);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
}


/* =========================================================================
   0. GLOBAL FOUNDATION
   ========================================================================= */
html {
    scroll-behavior: smooth;
}

#home,
#features,
#about-us,
#pricing,
#faq,
#contact-us {
    scroll-margin-top: 96px;
}

::selection {
    background: var(--primary-color);
    color: #fff;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Headline-type elements move to the new display font — this single change
   is what makes the page stop feeling like a stock template */
.commonTitle,
.commonDesc,
.sectionTitle span,
.sectionTitle .greenText,
.features .card span,
.pricing .textDiv .title,
.whyBestTextWrapper p,
.customPack .title,
.ourApp .text .title,
footer .linksWrapper .title,
.getInTouch .infoWrapper div:last-child span:first-child,
.formModal .modal-title,
.formModal .rightSide .headingWrapper span,
.school-logo-owl-carousel h6,
.commonBtn,
.commonBtn-reset,
.pricing .pricingBtn,
.tab span:first-child {
    font-family: var(--heading-font);
}

.commonBtn,
.commonBtn-reset,
.pricing .pricingBtn {
    letter-spacing: 0.2px;
}

a {
    transition: color 0.2s ease;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--surface-tint);
}

::-webkit-scrollbar-thumb {
    background: rgba(56, 163, 165, 0.35);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 163, 165, 0.6);
}

.commonBtn,
.commonBtn-reset,
.pricing .pricingBtn {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
        background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.commonBtn:hover,
.commonBtn-reset:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.commonBtn:active,
.commonBtn-reset:active {
    transform: translateY(0);
}

.commonBtn {
    border-radius: 50px !important;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.28);
}


/* =========================================================================
   1. HEADER — sticky nav + bottom border
   ========================================================================= */
/* NOTE: backdrop-filter jaanbujhkar navbar par NAHI use kiya — offcanvas
   (mobile menu) navbar ke andar hi DOM mein hai aur woh position:fixed hai.
   Agar ancestor (.navbar) par filter/backdrop-filter/transform lagaya jaye
   to CSS spec ke hisaab se woh fixed descendant ka naya "containing block"
   ban jata hai — jisse mobile menu screen ke bajaye navbar ke andar hi
   confine ho jata hai aur tuta hua dikhta hai. Isi wajah se pehle mobile
   menu open karne par design tut raha tha — fix kar diya hai. */
.navbar {
    background-color: #F4FBFF;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 4px 24px rgba(15, 40, 60, 0.05);
}

.navbar .navLogo img.logo,
footer .companyInfoWrapper img.logo {
    height: 42px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 575px) {

    .navbar .navLogo img.logo,
    footer .companyInfoWrapper img.logo {
        height: 32px;
        max-width: 135px;
    }
}

@media screen and (min-width: 1200px) {
    .navbar ul.listItems>li>a {
        position: relative;
        padding: 6px 2px;
        font-weight: 600;
    }

    .navbar ul.listItems>li>a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0%;
        height: 2px;
        border-radius: 4px;
        background-color: var(--primary-color);
        transition: width 0.25s ease;
    }

    .navbar ul.listItems>li>a:hover::after {
        width: 100%;
    }

    .navbar .dropdown-toggle {
        font-weight: 600;
    }
}

.navbar .loginBtnsWrapper .commonBtn.redirect-login,
.navbar .offcanvas-body .commonBtn.redirect-login {
    background-color: transparent !important;
    color: var(--secondary-color) !important;
    border: 1.5px solid var(--secondary-color1) !important;
    box-shadow: none;
}

.navbar .loginBtnsWrapper .commonBtn.redirect-login:hover,
.navbar .offcanvas-body .commonBtn.redirect-login:hover {
    background-color: var(--secondary-color1) !important;
    color: #fff !important;
}

.navbar .loginBtnsWrapper .commonBtn:not(.redirect-login),
.navbar .offcanvas-body .commonBtn:not(.redirect-login) {
    box-shadow: 0 10px 22px -8px rgba(86, 204, 153, 0.6);
}

.navbar .hamburg span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background-color: rgba(56, 163, 165, 0.1);
    transition: background-color 0.2s ease;
}

.navbar .hamburg span:hover {
    background-color: rgba(56, 163, 165, 0.2);
}

.navbar .hamburg i {
    color: var(--secondary-color1);
}


/* =========================================================================
   2. MOBILE MENU (offcanvas) — full redesign
   ========================================================================= */
.offcanvas.offcanvas-end {
    width: min(86vw, 380px) !important;
    background-color: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    border: none;
}

.navbar .offcanvas-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(135deg, rgba(56, 163, 165, 0.08), rgba(33, 86, 121, 0.06));
}

.navbar .offcanvas-header img {
    height: 36px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.navbar .offcanvas-header .btn-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    background-size: 12px;
    opacity: 1;
    transition: background-color 0.2s ease;
}

.navbar .offcanvas-header .btn-close:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.navbar .offcanvas-body {
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
}

.navbar .offcanvas .listItems {
    margin-top: 0 !important;
}

.navbar .offcanvas .listItems li {
    margin: 0 !important;
    border-bottom: 1px solid var(--border-soft);
}

.navbar .offcanvas .listItems li:last-child {
    border-bottom: none;
}

.navbar .offcanvas .listItems li>a,
.navbar .offcanvas .listItems li .dropdown-toggle {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.navbar .offcanvas .listItems li>a:hover,
.navbar .offcanvas .listItems li .dropdown-toggle:hover {
    color: var(--primary-color) !important;
    padding-left: 8px;
}

.navbar .offcanvas .listItems .dropdown-menu {
    position: static !important;
    border: none;
    box-shadow: none;
    background-color: rgba(56, 163, 165, 0.06);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    margin-bottom: 8px;
    transform: none !important;
}

.navbar .offcanvas-body .commonBtn {
    width: 100%;
    margin-top: 14px;
    text-align: center;
}


/* =========================================================================
   3. HERO SECTION — modern SaaS look with soft gradient blobs
   ========================================================================= */
.heroSection {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #F4FBFF 0%, #EAF6FB 100%);
}

.heroSection::before,
.heroSection::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

.heroSection::before {
    width: 420px;
    height: 420px;
    background: var(--primary-color);
    top: -180px;
    right: -120px;
}

.heroSection::after {
    width: 320px;
    height: 320px;
    background: var(--secondary-color1);
    bottom: -140px;
    left: -100px;
    opacity: 0.22;
}

.heroSection .colorBg,
.heroSection .linesBg,
.heroSection .container {
    position: relative;
    z-index: 1;
}

.heroSection .colorBg {
    background-color: transparent;
}

.commonTag,
.heroSection .commonTitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(86, 204, 153, 0.14);
    border: 1px solid rgba(86, 204, 153, 0.35);
    padding: 8px 18px !important;
    border-radius: 50px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.commonDesc {
    line-height: 1.2;
    font-size: clamp(28px, 4.4vw, 46px);
    color: var(--ink);
    /* fallback: agar background-clip:text browser support na kare */
    background: linear-gradient(100deg, var(--ink) 35%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .commonDesc {
        background: none;
        -webkit-text-fill-color: var(--ink);
    }
}

.commonText {
    line-height: 1.65;
    font-weight: 500;
    color: var(--ink-soft) !important;
    max-width: 90%;
}

.heroSection .heroImg {
    position: relative;
}

.heroSection .heroImg::before {
    content: '';
    position: absolute;
    inset: 6% 8%;
    background: radial-gradient(circle, rgba(86, 204, 153, 0.18), transparent 70%);
    z-index: -1;
    border-radius: 50%;
}

.heroSection .heroImg img {
    filter: drop-shadow(0 24px 34px rgba(33, 86, 121, 0.18));
}

.heroSection .topRated {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.heroSection .textWrapper {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
}

@media screen and (max-width: 575px) {
    .heroSection .flex_column_start {
        text-align: center;
        align-items: center;
    }

    .heroSection .commonText {
        max-width: 100%;
    }

    .heroSection .flex_column_start .d-flex {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .heroSection .flex_column_start .d-flex .commonBtn {
        width: 100%;
        margin: 0 !important;
    }

    .heroSection::before {
        width: 260px;
        height: 260px;
        top: -100px;
        right: -80px;
    }

    .heroSection::after {
        width: 200px;
        height: 200px;
    }
}


/* =========================================================================
   4. FEATURES — icon-badge cards
   ========================================================================= */
.features .sectionTitle {
    margin-bottom: 4px;
}

.features .card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.features .card::before {
    width: 5px;
    border-radius: 0 6px 6px 0;
}

.features .card>div:first-child {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(86, 204, 153, 0.16), rgba(33, 86, 121, 0.1));
}

.features .card img {
    width: 26px;
}

.features .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: transparent;
}

.features .card:hover>div:first-child {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color1));
}

.features .card:hover>div:first-child img {
    filter: brightness(0) invert(1);
}


/* =========================================================================
   5. SECTION TITLES — modern eyebrow style
   ========================================================================= */
.sectionTitle::before,
.sectionTitle::after {
    display: none;
}

.sectionTitle span {
    position: relative;
    padding-bottom: 16px;
}

.sectionTitle span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color1));
}

.sectionTitle .greenText {
    display: inline-block;
    background: rgba(86, 204, 153, 0.14);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700 !important;
}


/* =========================================================================
   6. SCHOOL LOGOS CAROUSEL
   ========================================================================= */
.school-logo-owl-carousel .card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.school-logo-owl-carousel .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.school-logo-owl-carousel img {
    box-shadow: 0 6px 16px rgba(15, 40, 60, 0.12);
}

.school-logo-owl-carousel h6 {
    color: var(--ink);
    font-weight: 700;
}


/* =========================================================================
   7. FEATURE DEEP-DIVE TABS (studyManagement / right-feature-section)
   ========================================================================= */
.right-feature-section,
.studyManagement {
    background: linear-gradient(180deg, #F6FFFB 0%, #EFFBF6 100%);
}

.tabs .tab {
    border-radius: var(--radius-sm);
}

.tabs .active {
    border-radius: var(--radius-sm);
}

.tabs .active::after {
    border-radius: 6px;
}

.content img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
}


/* =========================================================================
   8. ABOUT US (whyBest)
   ========================================================================= */
.whyBest .whyBestTextWrapper::before {
    border-radius: 6px;
}

.listWrapper span i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(86, 204, 153, 0.16);
    font-size: 14px;
}

.whyBest img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
}


/* =========================================================================
   9. PRICING — refined cards + ribbon
   ========================================================================= */
.pricing {
    background: linear-gradient(180deg, #F4FBFF 0%, #FFFFFF 100%);
}

.pricing .pricingBox {
    background-color: var(--surface);
    border-width: 2px;
    box-shadow: var(--shadow-soft);
}

.pricing .pricingBox:hover {
    box-shadow: var(--shadow-lift);
}

.pricing .premium {
    background: linear-gradient(160deg, #DDEEFA, #C9DDEB);
    box-shadow: var(--shadow-lift);
}

.pricing .pricingBtn {
    font-weight: 700;
}

.pricing .pricingBox .badge {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    font-weight: 700;
}


/* =========================================================================
   10. CUSTOM PACKAGE CTA BANNER
   ========================================================================= */
.customPack .wrapper {
    background: linear-gradient(120deg, var(--secondary-color), var(--secondary-color1));
    position: relative;
    overflow: hidden;
}

.customPack .row {
    background: transparent;
    position: relative;
    z-index: 1;
}

.customPack .wrapper::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -100px;
    right: -60px;
}

.customPack .commonBtn {
    border-radius: 50px;
}


/* =========================================================================
   11. FAQ ACCORDION
   ========================================================================= */
.faqs .accordion-item {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 14px rgba(15, 40, 60, 0.05);
}

.faqs .accordion-button {
    font-weight: 600;
    padding: 18px 20px;
}

.faqs .accordion-body {
    padding: 4px 20px 22px;
}


/* =========================================================================
   12. CONTACT ("getInTouch")
   ========================================================================= */
.getInTouch {
    background: linear-gradient(180deg, #F4FBFF 0%, #FFFFFF 100%);
}

.getInTouch .card {
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--border-soft);
}

.getInTouch input,
.getInTouch textarea {
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.getInTouch input:focus,
.getInTouch textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(86, 204, 153, 0.18);
}

.getInTouch .commonBtn {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-soft);
}

.getInTouch .infoWrapper {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: var(--radius-md);
}

.getInTouch .infoWrapper:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.getInTouch .infoWrapper .icon {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color1));
}


/* =========================================================================
   13. DOWNLOAD APP CTA
   ========================================================================= */
.ourApp .ourAppImg {
    filter: drop-shadow(0 20px 30px rgba(33, 86, 121, 0.14));
}

.ourApp .storeImgs img {
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ourApp .storeImgs img:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}


/* =========================================================================
   14. FOOTER — light, modern (dark version didn't look good — reverted)
   ========================================================================= */
footer {
    position: relative;
    background: linear-gradient(180deg, #EFF7FA 0%, #E3EEF3 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(15, 40, 60, 0.05);
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color1), var(--secondary-color));
}

footer .commonDesc {
    color: var(--ink-soft) !important;
}

footer .linksWrapper span a {
    color: var(--ink) !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

footer .linksWrapper span a:hover {
    color: var(--secondary-color1) !important;
    padding-left: 4px;
}

footer .linksWrapper .title {
    color: var(--secondary-color) !important;
}

footer .socialIcons span,
footer .socialIcons span i {
    color: var(--secondary-color1) !important;
}

footer .iconsWrapper {
    transition: transform 0.2s ease;
}

footer .iconsWrapper:hover {
    transform: translateX(3px);
}

footer .iconsWrapper span:last-child {
    color: var(--ink) !important;
}

footer hr {
    border-color: var(--border-soft);
    opacity: 1;
}

footer .copyright {
    color: var(--ink-soft) !important;
}


/* =========================================================================
   15. REGISTRATION MODAL — polish
   ========================================================================= */
.formModal .rightSide {
    box-shadow: var(--shadow-lift);
}

.formModal .rightSide .formWrapper .inputWrapper input:not(.custom-select-search-input),
.formModal .rightSide .formWrapper .inputWrapper textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formModal .rightSide .formWrapper .inputWrapper input:not(.custom-select-search-input):focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(86, 204, 153, 0.18);
}

.formModal .modalfooter .commonBtn {
    border-radius: 50px !important;
}


/* =========================================================================
   16. SMALL-SCREEN FIT & FINISH (≤ 400px devices)
   ========================================================================= */
@media screen and (max-width: 400px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .commonBtn {
        padding: 12px 22px;
        font-size: 15px;
    }

    .heroSection::before,
    .heroSection::after {
        display: none;
    }
}