/* ============================================================
   PARADIGM INSTITUTE — COMPREHENSIVE MOBILE RESPONSIVENESS
   Designed for all screens including Infinix Hot 50i (360×800)
   ============================================================ */

/* ── 1. RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ── 2. MODERNISED HAMBURGER BUTTON ──────────────────────── */

/* Hide the default Bootstrap toggler icon (the three-bar SVG) */
.navbar-toggler-icon {
    display: none !important;
}

/* The custom toggler wraps three .icon-bar spans */
.navbar .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 8px 0;
    border: none;
    border-radius: 10px;
    background: transparent;      /* no blue — fully transparent */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.3s ease, transform 0.2s ease;
    outline: none;
    position: relative;
    overflow: hidden;
}

/* Subtle dark tint on hover */
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.06);
    outline: none;
    box-shadow: none;
}

/* ── THREE DOTS – black circles, stacked vertically ── */
.navbar .navbar-toggler .icon-bar {
    display: block;
    width: 7px;
    height: 7px;
    background-color: #111111;    /* solid black dots */
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s ease,
                transform        0.35s cubic-bezier(0.23, 1, 0.32, 1),
                opacity          0.25s ease;
    position: relative;
    transform-origin: center;
}

/* Stack dots vertically */
.navbar .navbar-toggler {
    flex-direction: column !important;
    gap: 5px !important;
}

/* Active: outer dots collapse inward, middle dot pulses */
.navbar .navbar-toggler.active .icon-bar:nth-of-type(1) {
    transform: translateY(12px) scale(0.6);
    opacity: 0;
}

.navbar .navbar-toggler.active .icon-bar:nth-of-type(2) {
    transform: scale(1.3);
    background-color: #07294d;
}

.navbar .navbar-toggler.active .icon-bar:nth-of-type(3) {
    transform: translateY(-12px) scale(0.6);
    opacity: 0;
}

/* Active button gets a gold background (open state) */
.navbar .navbar-toggler.active {
    background: linear-gradient(135deg, #ffc600 0%, #e6a800 100%);
}

.navbar .navbar-toggler.active .icon-bar {
    background-color: #07294d;    /* dark dots on gold */
}

/* ── 3. NAVIGATION – MOBILE MENU PANEL ───────────────────── */
@media (max-width: 991.98px) {

    /* Force the nav column to span full width so toggler reaches the right edge */
    .navigation .row > [class*='col-'],
    .navigation-2 .row > [class*='col-'] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .navbar {
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
    }

    /* Logo stays on the left */
    .navbar-brand {
        flex-shrink: 0;
        margin-right: 0;   /* no auto — toggler uses margin-left: auto instead */
    }

    .navbar-brand img {
        max-height: 44px;
        width: auto;
    }

    /* Hamburger pinned to far RIGHT edge */
    .navbar .navbar-toggler {
        margin-left: auto !important;
        margin-right: 0  !important;
        flex-shrink: 0;
    }

    /* Mobile nav collapse panel */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #07294d;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 15px 40px rgba(7, 41, 77, 0.4);
        z-index: 9999;
        padding: 16px 0 24px;
        border-top: 3px solid #ffc600;
        max-height: 85vh;
        overflow-y: auto;
    }

    .navbar-collapse::-webkit-scrollbar { width: 4px; }
    .navbar-collapse::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
    .navbar-collapse::-webkit-scrollbar-thumb { background: #ffc600; border-radius: 2px; }

    .navbar .navbar-nav {
        padding: 0 16px;
    }

    .navigation .navbar .navbar-nav li,
    .navigation-2 .navbar .navbar-nav li {
        margin-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .navigation .navbar .navbar-nav li:last-child,
    .navigation-2 .navbar .navbar-nav li:last-child {
        border-bottom: none;
    }

    .navigation .navbar .navbar-nav li a,
    .navigation-2 .navbar .navbar-nav li a {
        color: #ffffff !important;
        font-size: 15px;
        font-weight: 600;
        padding: 13px 12px !important;
        display: block;
        letter-spacing: 0.2px;
        transition: color 0.2s ease, padding-left 0.2s ease;
        border-radius: 8px;
    }

    .navigation .navbar .navbar-nav li a:hover,
    .navigation-2 .navbar .navbar-nav li a:hover {
        color: #ffc600 !important;
        padding-left: 18px !important;
    }

    .navigation .navbar .navbar-nav li a.active,
    .navigation-2 .navbar .navbar-nav li a.active {
        color: #ffc600 !important;
    }

    .navigation .navbar .navbar-nav li .sub-menu {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        right: auto;
        transition: none;
        transform: none;
        background: rgba(0,0,0,0.25);
        border-radius: 10px;
        margin: 4px 0 8px;
        padding: 4px 0;
        box-shadow: none;
    }

    .navigation .navbar .navbar-nav li .sub-menu li a {
        font-size: 13.5px;
        padding: 10px 20px !important;
        color: rgba(255,255,255,0.85) !important;
        font-weight: 500;
    }

    .navigation .navbar .navbar-nav li .sub-menu li a:hover {
        color: #ffc600 !important;
        padding-left: 26px !important;
    }

    .navigation .navbar .navbar-nav li a .sub-nav-toggler {
        position: absolute;
        padding: 5px 10px;
        background: rgba(255,198,0,0.15);
        border: 1px solid rgba(255,198,0,0.3);
        border-radius: 6px;
        top: 8px;
        right: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;
    }

    .navigation .navbar .navbar-nav li a .sub-nav-toggler:hover {
        background: rgba(255,198,0,0.3);
    }

    .navigation .navbar .navbar-nav li a .sub-nav-toggler i {
        color: #ffc600;
        font-size: 12px;
    }

    .navigation .container,
    .navigation-2 .container {
        position: relative;
    }

    .navigation,
    .navigation-2 {
        position: sticky !important;
        top: 0;
        z-index: 1000;
    }

    .navigation-2.navigation .navbar {
        padding: 10px 0 !important;
    }

    .navigation-2.navigation.sticky .navbar {
        padding: 8px 0 !important;
    }
}

/* ── 4. HEADER TOP BAR – MOBILE ──────────────────────────── */
@media (max-width: 767.98px) {
    .header-top {
        display: none !important;
    }

    .header-top.tuition-header-open {
        display: block !important;
        padding: 10px 0;
    }
}

/* ── 5. HERO / SLIDER – MOBILE ───────────────────────────── */
@media (max-width: 767.98px) {
    .enhanced-slider {
        min-height: 380px;
    }

    .enhanced-slider-content {
        width: calc(100% - 20px) !important;
        bottom: 10px !important;
        padding: 14px 14px 18px !important;
        border-radius: 14px !important;
    }

    .enhanced-slider-content h1 {
        font-size: 1.15rem !important;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .slider-buttons {
        gap: 8px !important;
        margin-top: 12px !important;
        flex-wrap: wrap;
    }

    .slider-buttons .main-btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
        border-radius: 5px !important;
    }
}

@media (max-width: 480px) {
    .enhanced-slider {
        min-height: 320px;
    }

    .enhanced-slider-content h1 {
        font-size: 1rem !important;
    }

    .slider-buttons .main-btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
}

/* ── 6. SECTION TITLES – MOBILE ─────────────────────────── */
@media (max-width: 575.98px) {
    .section-title h2 {
        font-size: 22px !important;
        line-height: 1.3;
    }

    .section-title span {
        font-size: 14px !important;
    }
}

/* ── 7. CARDS & COURSES – MOBILE ─────────────────────────── */
@media (max-width: 575.98px) {
    .singel-course {
        margin-bottom: 20px;
    }

    .singel-course .cont {
        padding: 16px 16px;
    }

    .singel-course h4 {
        font-size: 1rem !important;
    }
}

/* ── 8. HIGHLIGHT / PREMIUM CARDS – MOBILE ───────────────── */
@media (max-width: 767.98px) {
    .premium-highlights {
        padding: 36px 0 28px;
    }

    .highlight-card {
        min-height: 0;
        margin-bottom: 16px;
    }
}

/* ── 9. DIRECTOR MESSAGE – MOBILE ───────────────────────── */
@media (max-width: 767.98px) {
    .director-message-content h2 {
        font-size: 1.5rem !important;
    }

    .director-message-content p {
        font-size: 0.95rem !important;
    }

    .director-image {
        margin-bottom: 24px;
    }
}

/* ── 10. VIDEO SECTION – MOBILE ──────────────────────────── */
@media (max-width: 767.98px) {
    .video-container,
    .video-player {
        height: 220px !important;
        min-height: 220px !important;
    }

    .video-play-button {
        width: 58px;
        height: 58px;
    }

    .video-play-button i {
        font-size: 22px;
    }

    .video-title-box h3 {
        font-size: 1.1rem !important;
    }
}

/* ── 11. FEATURES – MOBILE ───────────────────────────────── */
@media (max-width: 575.98px) {
    .feature ul li .singel-feature {
        text-align: center;
    }

    .feature ul li .singel-feature .icon {
        float: none;
        display: block;
        margin: 0 auto 14px;
        padding-right: 0;
    }

    .feature ul li .singel-feature .cont {
        width: 100%;
        float: none;
        margin-top: 0;
    }
}

/* ── 12. TESTIMONIALS – MOBILE ───────────────────────────── */
@media (max-width: 767.98px) {
    .singel-testimonial {
        padding: 22px 18px 18px;
        min-height: 0;
    }

    .singel-testimonial .testimonial-text {
        font-size: 14px !important;
    }
}

/* ── 13. EVENTS – MOBILE ─────────────────────────────────── */
@media (max-width: 575.98px) {
    .singel-event-list {
        display: block !important;
    }

    .singel-event-list .event-thum {
        width: 100% !important;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }

    .singel-event-list .event-cont {
        width: 100% !important;
        padding-left: 0 !important;
        padding-top: 16px !important;
    }
}

/* ── 14. PAGE BANNER – MOBILE ────────────────────────────── */
@media (max-width: 767.98px) {
    #page-banner {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .page-banner-cont h2 {
        font-size: 26px !important;
        line-height: 1.3;
    }
}

/* ── 15. FOOTER – MOBILE ─────────────────────────────────── */
@media (max-width: 767.98px) {
    .footer-about {
        padding-right: 0;
        margin-bottom: 24px;
    }

    .footer-about p {
        font-size: 14px;
    }
}

/* ── 16. CONTACT PAGE – MOBILE ───────────────────────────── */
@media (max-width: 575.98px) {
    .contact-from {
        padding: 22px 16px !important;
    }

    .contact-address {
        padding: 0 16px 20px !important;
    }
}

/* ── 17. ABOUT PAGE – MOBILE ─────────────────────────────── */
@media (max-width: 767.98px) {
    .about-bg {
        width: 100% !important;
        position: relative !important;
        margin-bottom: 24px;
    }
}

/* ── 18. BLOG – MOBILE ───────────────────────────────────── */
@media (max-width: 575.98px) {
    .blog-details .cont {
        padding: 14px 14px !important;
    }

    .blog-details .cont h3 {
        font-size: 20px !important;
    }

    .singel-blog .blog-cont {
        padding: 16px 16px !important;
    }

    .singel-blog .blog-cont a h3 {
        font-size: 20px !important;
    }
}

/* ── 19. COURSES PAGE FILTERS – MOBILE ───────────────────── */
@media (max-width: 575.98px) {
    .courses-top-search {
        text-align: center;
    }

    .courses-search {
        float: none !important;
        display: block;
        width: 100%;
    }

    .courses-search input {
        width: 100% !important;
    }

    .courses-top-search .nav {
        float: none !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 12px;
    }
}

/* ── 20. SIDEBAR – MOBILE ────────────────────────────────── */
@media (max-width: 767.98px) {
    .saidbar {
        margin-top: 30px;
    }
}

/* ── 21. STAFF DIRECTORY – MOBILE ────────────────────────── */
@media (max-width: 575.98px) {
    .staff-filter-bar {
        flex-direction: column;
        border-radius: 14px;
        padding: 14px;
        gap: 12px;
    }

    .staff-filter-buttons {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .staff-filter-btn {
        font-size: 12px;
        padding: 7px 14px;
    }

    .staff-search-box {
        max-width: 100%;
        width: 100%;
    }

    .staff-stat-card {
        padding: 14px 16px;
        gap: 12px;
    }

    .staff-stat-card .stat-info h3 {
        font-size: 22px !important;
    }

    .staff-modal-dialog {
        border-radius: 14px;
        margin: 10px;
    }

    .staff-modal-photo-wrap {
        width: 100%;
        height: 200px;
    }

    .staff-modal-photo-wrap img {
        min-height: 200px;
        object-fit: cover;
    }

    .staff-modal-info {
        padding: 16px 16px;
        min-width: 0;
    }

    .staff-modal-info h3 {
        font-size: 18px !important;
    }

    .staff-modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .staff-modal-actions .main-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── 22. PROGRAMS / INNER PAGES – MOBILE ─────────────────── */
@media (max-width: 767.98px) {
    .corses-singel-left {
        padding: 18px 16px !important;
    }

    .corses-singel-left .title h3 {
        font-size: 20px !important;
    }

    .corses-tab .nav .nav-item {
        width: 50%;
        flex-basis: 50%;
    }

    .corses-tab .nav .nav-item a {
        font-size: 13px !important;
        padding: 10px 8px;
    }

    .course-features {
        margin-top: 24px;
    }
}

/* ── 23. APPLY SECTION – MOBILE ──────────────────────────── */
@media (max-width: 767.98px) {
    .apply-color-1 {
        border-radius: 10px 10px 0 0 !important;
    }

    .apply-color-2 {
        border-radius: 0 0 10px 10px !important;
    }

    .apply .apply-cont {
        padding: 24px 16px !important;
    }
}

/* ── 24. GENERAL PADDING TIGHTENING ON PHONES ────────────── */
@media (max-width: 575.98px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .row > [class*='col-'] {
        padding-left: 8px;
        padding-right: 8px;
    }

    #course-part,
    #teachers-part,
    #publication-part,
    #testimonial,
    #news-part,
    #about-page,
    #courses-part,
    #event-page,
    #blog-page,
    #contact-page {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* ── 25. BUTTONS – MOBILE ────────────────────────────────── */
@media (max-width: 575.98px) {
    .main-btn {
        padding: 12px 22px !important;
        font-size: 13px !important;
        letter-spacing: 0.4px;
    }
}

/* ── 26. SEARCH BOX – MOBILE ─────────────────────────────── */
@media (max-width: 575.98px) {
    .search-box .serach-form input {
        width: 75% !important;
        font-size: 14px;
    }

    .search-box .serach-form button {
        left: 75% !important;
    }
}

/* ── 27. PREVENT HORIZONTAL OVERFLOW ─────────────────────── */
body {
    overflow-x: hidden;
}

@media (max-width: 767.98px) {
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── 28. EXTRA-SMALL PHONES (Infinix Hot 50i, ≤ 360px) ───── */
@media (max-width: 360px) {

    .navbar .navbar-toggler {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        margin-left: auto !important;
        margin-right: 0  !important;
        gap: 4px !important;
    }

    .navbar .navbar-toggler .icon-bar {
        width: 6px;
        height: 6px;
    }

    .navbar-brand img {
        max-height: 36px;
    }

    .enhanced-slider {
        min-height: 280px;
    }

    .enhanced-slider-content h1 {
        font-size: 0.9rem !important;
        line-height: 1.35;
    }

    .slider-buttons .main-btn {
        padding: 6px 10px !important;
        font-size: 10.5px !important;
    }

    .section-title h2 {
        font-size: 18px !important;
    }

    .main-btn {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }

    .page-banner-cont h2 {
        font-size: 22px !important;
    }

    .staff-filter-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* ── 29. HARD OVERRIDE: Toggler always at far right ──────── */
/* Belt-and-suspenders rule — covers all Bootstrap/theme overrides */
@media (max-width: 991.98px) {
    .navbar > .navbar-toggler {
        order: 99;              /* always last flex item = rightmost */
        margin-left: auto !important;
        margin-right: 0 !important;
        position: relative;     /* don't let it shift with position tricks */
        right: 0;
    }

    /* Ensure the navbar brand is always first (leftmost) */
    .navbar > .navbar-brand {
        order: 1;
        margin-right: 0;
    }

    /* Ensure collapse panel doesn't take flex space */
    .navbar > .navbar-collapse {
        order: 50;
        flex-basis: 100%;
    }
}