/* ===================================================
   IOTA Mobile Responsive Styles (max-width: 767px)
   Based on Figma Mobile Design - 390px viewport
   =================================================== */

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

    /* ===== HEADER / NAV ===== */
    .elementor .header-style {
        position: absolute !important;
    }

    .elementor .annbar-style {
        flex-direction: column !important;
    }

    .elementor .ann-main-s {
        height: auto !important;
        padding: 10px 16px !important;
        border-radius: 0 !important;
    }

    .elementor .ann-text-s {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .elementor .ann-login-s {
        width: 55px !important;
        height: 68px !important;
        margin-inline-start: 0 !important;
        border-radius: 0 !important;
    }

    .elementor .login-text-s {
        font-size: 0 !important;
        /* Hide text, show icon only on mobile */
    }

    .elementor .nav-row-s {
        height: 68px !important;
        padding-block-start: 12px !important;
        padding-block-end: 12px !important;
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    .elementor .nav-links-s {
        display: none !important;
    }

    .elementor .nav-cta-s {
        display: none !important;
    }

    .elementor .nav-logo-s {
        width: 104px !important;
        height: 44px !important;
    }

    /* Sticky header mobile */
    .elementor .header-style.iota-sticky .nav-row-s {
        height: 56px !important;
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    /* ===== HERO SECTION ===== */
    .elementor .hero-exp-s {
        height: 600px !important;
    }

    .elementor .hero-typo-s {
        padding-block-start: 140px !important;
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    .elementor .hero-welcome-s {
        font-size: 16px !important;
    }

    .elementor .hero-iota-s {
        font-size: 60px !important;
        letter-spacing: 4px !important;
        margin-block-start: -8px !important;
    }

    .elementor .hero-uni-s {
        font-size: 28px !important;
        letter-spacing: 2px !important;
    }

    .elementor .hero-uni-wrap-s {
        inset-block-start: 260px !important;
    }

    .elementor .hero-college-s {
        font-size: 48px !important;
        letter-spacing: 4px !important;
        margin-block-start: 40px !important;
    }

    .elementor .hero-bar-s {
        width: 282px !important;
        inset-block-start: 420px !important;
        inset-inline-start: 50% !important;
        transform: translateX(-50%);
    }

    /* Hero student figures - smaller & repositioned */
    .elementor .fig-left-s {
        width: 100px !important;
        height: 260px !important;
        inset-block-start: 200px !important;
        inset-inline-start: 20px !important;
    }

    .elementor .fig-center-s {
        width: 95px !important;
        height: 250px !important;
        inset-block-start: 230px !important;
        inset-inline-start: 180px !important;
    }

    .elementor .fig-right-s {
        width: 90px !important;
        height: 270px !important;
        inset-block-start: 190px !important;
        inset-inline-start: 270px !important;
    }

    /* Hero nav arrows */
    .elementor .hero-nav-s {
        padding-inline-start: 12px !important;
        padding-inline-end: 12px !important;
    }

    .elementor .arrow-l-s,
    .elementor .arrow-r-s {
        width: 14px !important;
        height: 24px !important;
    }

    /* Hero counter/wizard */
    .elementor .hero-wz-s {
        inset-block-start: 460px !important;
        inset-inline-start: 40px !important;
    }

    .elementor .hero-counter-s {
        width: 200px !important;
        height: 65px !important;
    }

    /* ===== WHY CARDS SECTION ===== */
    .elementor .why-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        margin-block-start: -20px !important;
    }

    .elementor .why-card-s,
    .elementor .why-card-focus-s {
        flex: none !important;
        width: 100% !important;
        max-width: 310px !important;
        height: auto !important;
        min-height: 240px !important;
        margin-inline-start: 0 !important;
        margin-block-end: 0 !important;
        padding: 24px !important;
    }

    .elementor .card-title-s {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .elementor .card-desc-s {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    /* ===== CAMPUS SECTION ===== */
    .elementor .campus-section-s {
        flex-direction: column !important;
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-block-start: 40px !important;
        padding-block-end: 40px !important;
        gap: 32px !important;
    }

    .elementor .campus-left-s {
        flex: none !important;
        width: 100% !important;
    }

    .elementor .campus-heading-s {
        width: 100% !important;
        font-size: 28px !important;
    }

    .elementor .campus-tag-s {
        width: auto !important;
        font-size: 14px !important;
    }

    .elementor .campus-desc-s {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .elementor .campus-right-s {
        flex: none !important;
        width: 100% !important;
        flex-direction: column !important;
    }

    .elementor .img-col-left-s {
        width: 100% !important;
    }

    .elementor .campus-img1-s {
        width: 100% !important;
        height: 250px !important;
    }

    .elementor .campus-img3-s {
        width: 100% !important;
        height: 180px !important;
    }

    .elementor .campus-vid-wrap-s {
        width: 100% !important;
        height: 300px !important;
        margin-block-start: 0 !important;
        margin-inline-start: 0 !important;
    }

    .elementor .campus-cta-s {
        width: 100% !important;
        max-width: 310px !important;
        justify-content: center !important;
    }

    /* ===== MBA SECTION ===== */
    .elementor .mba-section-s {
        height: auto !important;
        flex-direction: column !important;
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-block-start: 40px !important;
        padding-block-end: 60px !important;
        gap: 32px !important;
    }

    .elementor .mba-left-s {
        flex: none !important;
        width: 100% !important;
    }

    .elementor .mba-img-s {
        width: 100% !important;
        height: 250px !important;
    }

    .elementor .mba-card-outer-s {
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
        inset-inline-end: auto !important;
        inset-block-end: auto !important;
        margin-block-start: -30px !important;
        margin-inline: auto !important;
    }

    .elementor .mba-card-inner-s {
        width: 100% !important;
        height: auto !important;
        padding: 20px 24px !important;
    }

    .elementor .mba-right-s {
        align-items: center !important;
    }

    .elementor .mba-heading-s {
        font-size: 28px !important;
        text-align: center !important;
    }

    .elementor .mba-desc-s {
        width: 100% !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    .elementor .mba-tag-s {
        font-size: 14px !important;
    }

    .elementor .mba-cta-s {
        width: 100% !important;
        max-width: 310px !important;
    }

    /* ===== PROGRAMMES SECTION ===== */
    .elementor .prog-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-block-start: 40px !important;
        padding-block-end: 40px !important;
    }

    .elementor .prog-header-s {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-start !important;
    }

    .elementor .prog-heading-s {
        font-size: 28px !important;
        text-align: start !important;
    }

    .elementor .prog-desc-s {
        width: 100% !important;
        text-align: start !important;
        font-size: 14px !important;
    }

    .elementor .prog-grid-s {
        width: 100% !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    .elementor .prog-card-s {
        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
    }

    /* ===== TESTIMONIALS SECTION ===== */
    .elementor .tst-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-block-start: 40px !important;
        padding-block-end: 40px !important;
    }

    .elementor .tst-top-s {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .elementor .tst-left-s {
        width: 100% !important;
        min-width: unset !important;
    }

    .elementor .tst-heading-s {
        width: 100% !important;
        font-size: 28px !important;
    }

    .elementor .tst-desc-s {
        width: 100% !important;
        font-size: 14px !important;
    }

    .elementor .tst-cards-s {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .elementor .tst-card-s {
        width: 280px !important;
        min-width: 280px !important;
    }

    .elementor .tst-quote-text-s {
        width: 100% !important;
        font-size: 14px !important;
    }

    /* ===== SPIRIT SECTION ===== */
    .elementor .spirit-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-block-start: 40px !important;
        padding-block-end: 40px !important;
    }

    .elementor .spirit-img-s {
        width: 100% !important;
        height: auto !important;
    }

    .elementor .spirit-text-s {
        width: 100% !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    /* ===== STORIES SECTION ===== */
    .elementor .stories-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    .elementor .stories-instax1-s,
    .elementor .stories-instax2-s,
    .elementor .stories-instax3-s {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        inset-block-start: auto !important;
        inset-inline-start: auto !important;
    }

    /* ===== NEWS SECTION ===== */
    .elementor .news-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-block-start: 40px !important;
        padding-block-end: 40px !important;
    }

    /* ===== HOW TO APPLY ===== */
    .elementor .apply-section-s,
    .elementor .how-to-apply-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    /* ===== CTA BANNER ===== */
    .elementor .cta-banner-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    .elementor .cta-banner-heading-s {
        font-size: 28px !important;
    }

    .elementor .cta-banner-desc-s {
        font-size: 14px !important;
    }

    .elementor .cta-banner-btn-s {
        width: 100% !important;
        max-width: 310px !important;
    }

    /* ===== FOOTER ===== */
    .elementor .footer-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

    .elementor .footer-col1-s,
    .elementor .footer-col2-s,
    .elementor .footer-col3-s,
    .elementor .footer-col4-s {
        width: 100% !important;
        flex: none !important;
    }

    .elementor .footer-newsletter-s {
        width: 100% !important;
    }

    .elementor .footer-copyright-s {
        font-size: 12px !important;
        text-align: center !important;
    }

    /* ===== GLOBAL MOBILE TYPOGRAPHY ===== */
    .elementor .campus-heading-s,
    .elementor .mba-heading-s,
    .elementor .prog-heading-s,
    .elementor .tst-heading-s,
    .elementor .cta-banner-heading-s {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    /* ===== HIDE DROPDOWN ON MOBILE (use hamburger instead) ===== */
    .iota-dropdown {
        display: none !important;
    }

    /* ===== WHATSAPP & BACK TO TOP - smaller on mobile ===== */
    .iota-wa-widget {
        bottom: 70px !important;
        right: 16px !important;
    }

    .iota-wa-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .iota-wa-tooltip {
        display: none !important;
    }

    .iota-btt {
        right: 22px !important;
        bottom: 16px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* ===== FIND PROGRAMME SECTION ===== */
    .elementor .find-programme-section-s {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
    }

}

/* ===== TABLET (768px - 1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .elementor .nav-row-s {
        padding-inline-start: 40px !important;
        padding-inline-end: 40px !important;
    }

    .elementor .hero-iota-s {
        font-size: 80px !important;
    }

    .elementor .hero-college-s {
        font-size: 70px !important;
    }

    .elementor .why-section-s {
        padding-inline-start: 40px !important;
        padding-inline-end: 40px !important;
    }

    .elementor .why-card-s,
    .elementor .why-card-focus-s {
        flex: 1 1 300px !important;
    }

    .elementor .campus-section-s {
        padding-inline-start: 40px !important;
        padding-inline-end: 40px !important;
    }

    .elementor .mba-section-s {
        padding-inline-start: 40px !important;
        padding-inline-end: 40px !important;
    }

    .elementor .prog-section-s {
        padding-inline-start: 40px !important;
        padding-inline-end: 40px !important;
    }

    .elementor .prog-grid-s {
        width: 100% !important;
    }

    .elementor .prog-card-s {
        width: calc(50% - 12px) !important;
    }

    .elementor .tst-section-s {
        padding-inline-start: 40px !important;
    }

    .elementor .spirit-section-s {
        padding-inline-start: 40px !important;
        padding-inline-end: 40px !important;
    }

    .elementor .spirit-img-s {
        width: 100% !important;
        height: auto !important;
    }
}