/* ==========================================================
   WISH Bangladesh - Responsive Stylesheet (Clean & Organized)
   Ordered: Large Desktops -> Desktops -> Tablets -> Mobile
   ========================================================== */

/* ----------------------------------------------------------
   1. EXTRA EXTRA LARGE (Max 1400px)
   ---------------------------------------------------------- */
@media (max-width: 1400px) {
    .sl-testimonial-slider { padding: 0 56px; }
    .sl-quote-text  { font-size: 1.15rem; }
    .sl-school-logo { max-height: 115px; }
}

/* ----------------------------------------------------------
   2. EXTRA LARGE DESKTOPS (1200px - 1399.98px)
   ---------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-nav .nav-link {
        font-size: 18px;
    }

    .site-nav .dropdown-item {
        padding: 0.1rem 1rem;
        font-size: 18px;
        height: 43.7px;
    }

    .hero-title {
        font-size: var(--point-48);
        line-height: 56px;
    }

    .watch-text {
        margin-top: 81px;
    }

    .offer-inset ul li {
        font-size: 20px;
    }

    .offer-card h3 {
        font-size: 25px;
    }

    .founder-caption {
        font-size: 18px;
        line-height: 20px;
        height: 49px;
    }

    .stat-label {
        font-size: 19px;
    }
}

@media (max-width: 1200px) {
    .sl-testimonial-heading { font-size: 2.5rem; }
    .sl-testimonial-slider  { padding: 0 48px; }
    .sl-testimonial-inner   { gap: 36px; }
    .sl-photo-col           { flex: 0 0 44%; width: 44%; }
    .sl-quote-box           { padding: 2.4rem 2.4rem 2rem; }
    .sl-quote-text          { font-size: 1.08rem; }
    .sl-school-logo         { max-height: 100px; }
}

/* ----------------------------------------------------------
   3. LARGE DESKTOPS / TABLET LANDSCAPE (992px - 1199.98px)
   ---------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-title {
        font-size: 2.6rem;
    }

    .site-nav-links {
        gap: 0.15rem;
    }

    .site-nav .nav-link {
        padding: 0.5rem 0.7rem !important;
        font-size: 1rem;
    }
}

/* ----------------------------------------------------------
   4. MEDIUM BREAKPOINT - TABLETS (Max 991.98px)
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Base & Typography */
    .hero-title {
        font-size: 2.4rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .site-nav-drawer {
        width: 55%;
    }

    /* Path & SEL */
    .path-step-icon {
        width: 120px;
        height: 90px;
    }

    .path-step-icon img {
        width: 150px;
    }

    .path-step-heading {
        font-size: 19px;
    }

    .sel-intro {
        font-size: var(--point-16-5);
    }

    .sel-icons-row {
        row-gap: 1.6rem;
    }

    .sel-icon {
        width: 76px;
        height: 76px;
    }

    .sel-icon img {
        width: 40px;
        height: 40px;
    }

    .sel-footer-main {
        font-size: 1.3rem;
    }

    /* Offers */
    .offer-card-body {
        min-height: 0;
    }

    .offer-inset {
        clip-path: none;
        border-radius: 12px;
        padding: 1.4rem;
    }

    .offer-icon {
        flex: 0 0 80px;
    }

    .offer-icon img {
        width: 70px;
        height: 70px;
    }

    /* Testimonials Slider */
    .sl-testimonial-heading  { font-size: 2.1rem; }
    .sl-testimonial-slider   { padding: 0 38px; }
    .sl-testimonial-inner    { gap: 24px; }
    .sl-photo-col            { flex: 0 0 46%; width: 46%; }
    .sl-quote-box            { padding: 1.8rem 1.6rem 1.6rem; }
    .sl-quote-text           { font-size: 1rem; line-height: 1.7; }
    .sl-client-caption strong{
        /*font-size: 1rem; */
    }
    .sl-client-caption span  { font-size: 0.88rem; }
    .sl-school-logo          { max-height: 80px; }
    .sl-arrow svg            { width: 30px; height: 30px; }

    /* Compounds & Trusted */
    .compounds-banner h2 {
        font-size: 1.3rem;
    }

    .compounds-icon {
        position: absolute;
        top: -30px;
        left: 48%;
    }

    .stat-icon {
        width: 65px;
        height: 65px;
    }

    .stat-icon img {
        width: 40px;
        height: 40px;
    }

    .stat-number {
        font-size: 2.4rem;
    }

    /* Logos Slider */
    .logos-section {
        padding: 50px 0 60px;
    }

    .slider-section-title {
        font-size: 1.8rem !important;
    }

    .logos-carousel-wrapper { gap: 0.75rem; }
    .logos-carousel { gap: 2rem; }

    .logo-item {
        flex: 0 0 calc(50% - 0.5rem);
        padding: 0.5rem;
    }

    .logo-placeholder {
        /*min-height: 220px;*/
    }
    .logo-placeholder img {
        /*height: 170px; */
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Footer */
    .footer-social { justify-content: flex-start; }
    .site-footer .text-md-end { text-align: left !important; }
    .footer-bottom { justify-content: flex-start; }
}

/* ----------------------------------------------------------
   5. TABLET PORTRAIT / LARGE PHONES (Max 767.98px)
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section {
        /*padding: 45px 0;*/
    }

    .hero {
        padding: 60px 0 60px;
        text-align: center;
    }

    .hero-title {
        font-size: 2rem;
        margin-top: 40px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .site-nav-drawer {
        width: 65%;
    }

    /* Path V2 */
    .offer-inset ul li {
        font-weight: normal;
    }
    .path-title-band { padding: 32px 0 28px; }
    .path-body-band  { padding: 36px 0 44px; }
    .path-steps-row  { flex-direction: column; gap: 2.4rem; }

    .path-step-item {
        padding: 0 1rem;
        border-bottom: 1px dotted #e2dfdf;
        padding-bottom: 15px;
    }

    .path-step-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .path-step-item + .path-step-item::before { display: none; }
    .path-step-icon { width: 120px; height: 90px; }
    .path-step-icon img { width: 150px; }
    .path-step-heading { font-size: 19px; }
    .path-step-desc { font-size: 20px; }

    /* SEL Section Grid Layout */
    .sel-title-band {
        padding: 32px 0 28px;
        margin-top: 0 !important;
    }
    .sel-body-band  {
        padding: 20px 0;
    }
    .sel-intro {
        font-size: var(--point-15);
        margin-bottom: 1.8rem;
        padding: 0 10px;
    }

    .sel-icons-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        row-gap: 12px;
        margin-bottom: 1.8rem;
        padding: 0 10px;
    }

    .sel-icon-item {
        flex: none;
        min-width: 0;
        margin-bottom: 0;
        padding: 18px 10px 16px;
        border: 1px solid #e6e4d8;
        border-radius: 10px;
        background: transparent;
    }

    .sel-icon-item:last-child {
        grid-column: 1 / -1;
    }

    .sel-icon-item + .sel-icon-item::before { display: none; }
    .sel-icon { width: 56px; height: 56px; margin: 0 auto 0.6rem; }
    .sel-icon img { width: 30px; height: 30px; }
    .sel-icon-label { font-size: 16px; }

    .sel-footer-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 20px 1.2rem;
        margin-left: 10px;
        margin-right: 10px;
    }

    .sel-footer-icon { width: 70px; height: 70px; }
    .sel-footer-divider {
        display: block;
        width: 100%;
        height: 1px;
        align-self: stretch;
        background: #b9cdb6;
    }
    .sel-footer-text { flex: none; width: 100%; }
    .sel-footer-lead { font-size: var(--point-15); margin-bottom: 0.4rem; }
    .sel-footer-main { font-size: 1.2rem; }

    /* Testimonial Slider Stack */
    .sl-testimonial-section { padding: 48px 0 56px; }
    .sl-testimonial-heading { font-size: 1.85rem; }
    .sl-testimonial-slider  { padding: 0; }
    .sl-testimonial-slide   { display: flex; }

    .sl-testimonial-inner {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .sl-photo-col { flex: none; width: 100%; }
    .sl-client-photo { aspect-ratio: auto; height: 620px; }
    .sl-client-photo img { object-position: center 15%; }

    .sl-quote-col { align-items: stretch; }
    .sl-quote-box {
        border-top: 3px solid var(--sl-gold);
        /*overflow-y: auto;*/
        padding: 1.6rem 1.4rem;
    }

    .sl-quote-text { font-size: 1rem; margin-bottom: 1.4rem; }
    .sl-school-logo {
        max-height: 60px !important;
        transform: scale(2) !important;
    }

    .sl-arrow { display: none; }
    .sl-dots  { margin-top: 20px; }

    /* Compounds & Logos */
    .compounds-mid { padding-top: 33px; }
    .compounds-icon {
        width: 66px;
        height: 66px;
        top: -33px;
        font-size: 1.6rem;
    }
    .compound-item { flex-direction: row; }

    .logos-section { padding: 40px 0 20px; }
    .slider-section-title { font-size: 1.5rem !important; }
    .logos-section .section-title { margin-bottom: 1.5rem; }

    .logos-carousel-wrapper { gap: 0.5rem; padding: 0 8px; }
    .logos-carousel { gap: 2rem; }

    .logo-item {
        flex: 0 0 100%;
        padding: 0.75rem;
    }

    .logo-placeholder {
        /*min-height: 260px;*/
        /*padding: 2.5rem;*/
        /*border-radius: 16px;*/
    }

    .logo-placeholder img {
        /*height: 200px;*/
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .stat-card {
        min-width: 140px;
        padding: 1.5rem 1.2rem;
        flex: 0 0 calc(50% - 1rem);
        max-width: 100%;
    }
      .trusted-box-section {
          padding: 40px 0;
      }
    .trusted-stats { gap: 1rem; }
    .stat-number { font-size: 1.8rem; }

    /* Institutional Partner */
    .partner-title-band { padding: 22px 0 20px; }
    .partner-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .partner-body-band { padding: 32px 0 36px; }
    .partner-logo img { max-width: 200px; }
    .partner-caption { font-size: var(--point-15); }

    /* Mobile Nav Drawer Text */
    .site-nav-links-mobile .nav-link {
        font-size: 14px;
        letter-spacing: 0;
    }

    .footer-copyright-wrap,
    .footer-bottom {
        text-align: center;
        justify-content: center;
    }

    .footer-logo { height: 82px; }
}

/* ----------------------------------------------------------
   6. MOBILE / SMALL SCREEN PHONES (< 640px & < 576px)
   ---------------------------------------------------------- */
@media (max-width: 640px) {
    .container, .container-fluid, .row {
        max-width: none !important;
    }

    .section {
        /*padding: 36px 0;*/
    }

    .hero { padding: 50px 0 50px; text-align: center; }
    .hero-title { font-size: 2.2rem; margin-top: 80px; }
    .hero-sub { font-size: 0.95rem; }
    .hero-buttons { justify-content: center; flex-wrap: wrap; }

    .section-title { font-size: 32px; font-weight: 800; }
    .path-step { padding: 0; }
    .path-section .section-title { font-size: 32px; font-weight: 800; }

    .brand-logo { height: 46px; }
    .site-nav-drawer { width: 82%; max-width: none; }

    .btn-coral-custom { width: 70%; }
    .offer-card h3 { font-size: 22px !important; }

    .founder-caption {
        /*height: 52px !important;*/
    }

    .compounds-card { border-radius: 10px; }
    .compound-item-box { border-radius: 6px; }
    .compound-item-box h4 { font-size: 18px !important; }
    .compounds-banner h2 { margin: 10px auto 1.75rem !important; }

    .compounds-icon {
        width: 84px;
        height: 84px;
        top: -8% !important;
    }

    .compounds-mid { padding-top: 50px; }

    .trusted-stats {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .stat-card {
        flex: 0 0 100%;
        border-radius: 8px;
        min-width: unset;
        padding: 0.9rem 1.2rem;
    }

    .stat-icon { width: 55px; height: 55px; }
    .stat-icon img { width: 35px; height: 35px; }
    .stat-number { font-size: 2rem; }
    .trusted-section .section-title { font-size: 1.7rem; }
    .trusted-sub { font-size: 24px; }

    .testimonial-section .btn-olive { margin-top: 24px; width: 70%; }
    .testimonial-box p { font-size: 24px; line-height: 30px; }

    .video-frame video { height: 260px !important; }

    .watch-text {
        font-size: 20px;
        text-align: center;
    }

    .sel-footer-main { font-size: 1.1rem; }
    .sel-icon {
        width: 56px;
        height: 56px;
        overflow: hidden;
    }

    .sel-icon img {
        width: 30px;
        height: 30px;
        object-fit: cover;
        transform: scale(2);
        transform-origin: center;
    }

    .footer-logo { height: 80px; }
    .footer-social { justify-content: center !important; }
}

@media (max-width: 575.98px) {
    .offer-card-body {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .offer-icon {
        flex: 0 0 auto;
        justify-content: center;
        width: 100%;
        display: flex;
    }

    .offer-icon img { width: 100px; height: 80px; }
    .offer-inset { padding: 1.2rem; }
    .offer-title { font-size: 2rem; }

    .offer-card {
        padding: 1.3rem 1.3rem 1.5rem;
        border-radius: 12px;
    }

    .testimonial-box-image { padding: 1rem 1.6rem !important; }
}

/* ----------------------------------------------------------
   7. SMALL & EXTRA SMALL MOBILES (480px, 430px, 414px, 375px, 360px)
   ---------------------------------------------------------- */
@media (max-width: 480px) {
    .sl-testimonial-heading   { font-size: 1.6rem; }
    .sl-client-photo          { height: 420px; }
    .sl-quote-box             { padding: 1.4rem 1.1rem; }
    .sl-quote-text            { font-size: 0.95rem; line-height: 1.65; }
    .sl-client-caption strong {
        /*font-size: 0.95rem; */
    }
    .sl-client-caption span   { font-size: 0.82rem; }

    .slider-section-title { font-size: 1.3rem !important; }
    .logo-placeholder {
        /*min-height: 240px;*/
    }
    .logo-placeholder img {
        /*height: 180px;*/
    }

    .carousel-arrow {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
    }
}

@media (max-width: 430px), (max-width: 414px), (max-width: 375px) {
    .hero-title {
        font-size: 1.9rem;
    }

    .watch-text {
        font-size: 20px;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .sl-testimonial-heading { font-size: 1.4rem; }
    .sl-quote-text          { font-size: 0.88rem; }
}