/* ================================================================
   IT Work Center — Mobile Responsive CSS (v2)
   Bootstrap 5 companion — fills gaps Bootstrap doesn't handle
   Breakpoints: 991px | 767px | 575px | 375px
================================================================ */

/* ── Prevent horizontal overflow globally ── */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ── min-w-0 helper (Bootstrap missing) ── */
.min-w-0 { min-width: 0 !important; }

/* ================================================================
   TOP NAVBAR
================================================================ */
@media (max-width: 767px) {
    .bg-dark .contact-item span { font-size: 12px; }
}

/* ================================================================
   MAIN NAVBAR
================================================================ */
@media (max-width: 991px) {
    nav.navbar { margin-top: 12px !important; }
    nav.navbar .container {
        border-radius: 20px !important;
        padding: 12px 20px !important;
    }
}
@media (max-width: 575px) {
    nav.navbar { margin-top: 8px !important; }
    nav.navbar .container {
        border-radius: 16px !important;
        padding: 10px 14px !important;
    }
    .navbar-brand img { height: 34px !important; }
}

/* ================================================================
   HERO SECTION
================================================================ */
@media (max-width: 767px) {
    .hero-para-premium { font-size: 14.5px !important; }
    .hero-floating-badge { padding: 8px 12px !important; gap: 8px !important; }
    .hero-floating-badge-1 { top: 8% !important; left: -5px !important; }
    .hero-floating-badge-2 { bottom: 5% !important; right: -5px !important; }
    .h-badge-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; }
    .h-badge-info h5 { font-size: 11px !important; }
    .h-badge-info p  { font-size: 10px !important; }
}

/* ================================================================
   ABOUT SECTION & ABOUT US PAGE
================================================================ */
.about-feature-text { word-break: break-word; overflow-wrap: break-word; }

@media (max-width: 991px) {
    .about-stats-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 30px 20px !important;
        gap: 24px 16px !important;
    }
    .about-stat-item + .about-stat-item::before { display: none !important; }
}

@media (max-width: 767px) {
    .about-section-premium { text-align: center; }
    .about-eyebrow { justify-content: center; }
    .about-lead { margin-left: auto !important; margin-right: auto !important; }
    .about-img-frame img { height: 260px !important; }
    .about-stats-badge { right: 8px !important; bottom: 8px !important; padding: 12px 16px !important; }
    .about-stats-badge .stat-num { font-size: 24px !important; }
    .about-accent-block { display: none; }
    .about-cta-btn { width: 100%; justify-content: center !important; }
    .about-feature-item { text-align: left; padding: 14px 16px !important; }
    
    .about-feature-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .about-stats-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 24px 14px !important;
        margin: 30px 0 !important;
        border-radius: 16px !important;
    }
    .about-stat-number { font-size: 28px !important; }
    .about-stat-label  { font-size: 11.5px !important; }
}

@media (max-width: 480px) {
    .about-stats-strip {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

@media (max-width: 575px) {
    .about-feature-item { flex-direction: row !important; align-items: flex-start !important; }
    .about-feature-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; flex-shrink: 0; }
    .about-feature-icon i { font-size: 16px !important; }
    .about-feature-text h4 { font-size: 14px !important; }
    .about-feature-text p  { font-size: 12.5px !important; }
}

/* ================================================================
   COURSES GRID
================================================================ */
.featured-courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1199px) { .featured-courses-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .featured-courses-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 575px)  { .featured-courses-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

@media (max-width: 767px) {
    .fc-img-wrap { height: 140px !important; }
    .fc-body { padding: 12px 12px 14px !important; }
    .fc-title { font-size: 13.5px !important; line-height: 1.25 !important; margin-bottom: 6px !important; }
    .fc-desc  { font-size: 11.5px !important; line-height: 1.4 !important; margin-bottom: 10px !important; }
    .fc-duration-badge { font-size: 9px !important; padding: 2px 8px !important; top: 8px !important; left: 8px !important; }
    .fc-btn { font-size: 11.5px !important; padding: 8px 0 !important; }
}

/* ================================================================
   CATEGORIES SECTION
================================================================ */
@media (max-width: 575px) {
    .course-card-item { height: 150px !important; }
    .cate-image-box { height: 70px !important; }
    .cate-image-box img { max-height: 54px !important; }
    .course-title-text { font-size: 0.75rem !important; min-height: 36px !important; }
}

/* ================================================================
   MENTOR SWIPER SLIDER
================================================================ */
@media (max-width: 767px) {
    .mentor-img-wrapper { height: 240px !important; }
    .mentor-info { padding: 16px !important; }
    .mentor-name { font-size: 16px !important; }
}

/* ================================================================
   STATS / COUNTER
================================================================ */
@media (max-width: 767px) {
    .stats-wrapper-premium { padding: 36px 0 !important; }
    .stat-card-premium { padding: 20px 12px !important; }
    .stat-card-premium .stat-number { font-size: 28px !important; }
    .stat-card-premium .stat-title  { font-size: 12px !important; }
    .stat-icon-wrap { width: 54px !important; height: 54px !important; margin-bottom: 12px !important; }
    .stat-icon-wrap img { width: 26px !important; height: 26px !important; }
}

/* ================================================================
   BLOG SECTION & BLOG PAGES
================================================================ */
@media (max-width: 767px) {
    .blog-hero { height: 180px !important; border-radius: 0 0 16px 16px !important; }
    .blog-hero-content h1 { font-size: 24px !important; }
    .featured-blog-card { border-radius: 16px !important; margin-bottom: 24px !important; }
    .featured-img-wrap { min-height: 190px !important; height: 190px !important; }
    .featured-body { padding: 18px 16px !important; }
    .featured-title { font-size: 18px !important; margin-bottom: 10px !important; }
    .featured-desc { font-size: 13px !important; margin-bottom: 16px !important; }
    .article-card { border-radius: 14px !important; }
    .article-img-wrap { height: 170px !important; }
    .article-body { padding: 16px !important; }
    .article-title { font-size: 15px !important; min-height: auto !important; margin-bottom: 8px !important; }
    .article-desc { font-size: 12.5px !important; min-height: auto !important; margin-bottom: 14px !important; }
    .sidebar-widget { padding: 18px !important; border-radius: 14px !important; margin-bottom: 20px !important; }
}

/* ================================================================
   FAQ ACCORDION
================================================================ */
@media (max-width: 767px) {
    .faq-card-wrapper { border-radius: 16px !important; }
    .faq-acc-heading { font-size: 22px !important; }
    .accordion-premium .accordion-button {
        font-size: 13px !important;
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .accordion-premium .accordion-body {
        padding: 0 16px 16px 16px !important;
        font-size: 13px !important;
    }
    .accordion-premium .accordion-item-number { display: none !important; }
}

/* ================================================================
   JOIN SECTION (student cards)
================================================================ */
@media (max-width: 767px) {
    .student-body-1, .student-body-2 { min-height: 180px; }
}

/* ================================================================
   FOOTER
================================================================ */
@media (max-width: 767px) {
    .footer-premium .col-lg-3 { margin-bottom: 24px; }
    .footer-bottom-bar { margin-top: 0 !important; }
    .footer-heading-premium::after { left: 50%; transform: translateX(-50%); }
}

/* ================================================================
   COOKIE BANNER
================================================================ */
@media (max-width: 575px) {
    .cookie-banner-container { padding: 12px 14px !important; }
    .cookie-badge-icon { display: none !important; }
    .cookie-btn-group {
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-top: 10px;
        justify-content: space-between !important;
    }
    .cookie-btn-reject, .cookie-btn-accept {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 13px !important;
    }
    .cookie-btn-close { align-self: flex-start; margin-top: -30px; }
    .cookie-title { font-size: 14px !important; }
    .cookie-desc  { font-size: 12px !important; }
}

/* ================================================================
   WHATSAPP FLOAT & MODAL CLASH FIX
================================================================ */
.whatsapp-float-btn {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.modal-open .whatsapp-float-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.7) !important;
}

@media (max-width: 575px) {
    .whatsapp-float { bottom: 70px !important; right: 14px !important; }
}

/* ================================================================
   SECTION SPACING REDUCTIONS
================================================================ */
@media (max-width: 767px) {
    section.py-5 { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
    .pt-5 { padding-top: 1.8rem !important; }
    .pb-5 { padding-bottom: 1.8rem !important; }
}

/* ================================================================
   FORM INPUTS — prevent iOS zoom (font must be ≥16px)
================================================================ */
@media (max-width: 575px) {
    input, select, textarea { font-size: 16px !important; }
}