/*==================================================
    GERMAINE TRAINING INSTITUTE
    RESPONSIVE STYLESHEET
==================================================*/

/*==========================
    LARGE (<=1200px)
==========================*/

@media(max-width:1200px){

    .schools-grid{ grid-template-columns:repeat(2,1fr); }
    .why-grid{ grid-template-columns:repeat(2,1fr); }
    .highlights-grid{ grid-template-columns:repeat(2,1fr); }
    .partners-grid{ grid-template-columns:repeat(3,1fr); }
    .team-grid{ grid-template-columns:repeat(3,1fr); }
    .gallery-grid{ grid-template-columns:repeat(3,1fr); }
    .journey-timeline{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
    .journey-arrow{ display:none; }

}

/*==========================
    PREMIUM HEADER — RESPONSIVE
==========================*/

@media(max-width:1100px){

    .mega-menu{ width:min(760px, 90vw); grid-template-columns:repeat(3,1fr); }
    .mega-menu-feature{ display:none; }

}

@media(max-width:992px){

    .branding-contact{ display:none; }
    .branding-location{ display:none; }

    .branding-inner{
        grid-template-columns:1fr auto;
        padding:16px 20px;
    }

    .brand-logo-group{ justify-self:start; }
    .brand-logo-img{ height:50px; }
    .brand-name{ font-size:1.1rem; }
    .brand-tagline{ font-size:.74rem; }

    header#header.sticky .branding-inner{ padding:10px 20px; }
    header#header.sticky .brand-logo-img{ height:42px; }

    .navbar-inner{ justify-content:flex-end; padding:10px 20px; }

}

@media(max-width:768px){

    .utility-bar{ display:none; }

}

@media(max-width:576px){

    .branding-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
    .brand-logo-group{ justify-self:center; }
    .branding-right{ justify-self:center; }

    header#header.sticky .branding-right .apply-btn{ padding:10px 20px; font-size:.8rem; }

}

/*==========================
    TABLET (<=992px)
==========================*/

@media(max-width:992px){

    .container{ padding:0 20px; }

    .hero-container{
        grid-template-columns:1fr;
        gap:50px;
        padding-top:20px;
    }

    .hero-image{
        max-width:420px;
        margin:0 auto;
    }

    .hero-content > p{ max-width:100%; }

    .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
    .stat-card{ border-right:none; border-bottom:1px solid rgba(255, 255, 255, .14); padding-bottom:20px; }

    .welcome-grid{ grid-template-columns:1fr; gap:70px; }
    .welcome-images{ max-width:460px; margin:0 auto; padding:0 0 40px 40px; }

    .two-col{ grid-template-columns:1fr; gap:40px; }
    .two-col.reverse .two-col-media{ order:-1; }

    .values-grid{ grid-template-columns:repeat(2,1fr); }
    .team-grid{ grid-template-columns:repeat(2,1fr); }
    .news-grid{ grid-template-columns:repeat(2,1fr); }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
    .contact-info-grid{ grid-template-columns:1fr 1fr; }

    .cta-container{ flex-direction:column; text-align:center; padding:44px 30px; }
    .cta-content p{ margin:0 auto; }

    .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 30px; }

}

/*==========================
    MOBILE (<=768px)
==========================*/

@media(max-width:768px){
    .hero-image{

    max-width:100%;

}

.hero-image-slider{

    height:440px;

}

.hero-info-card{

    position:relative;

    left:0;

    bottom:0;

    width:100%;

    margin-top:20px;

}


    .announcement-container{ flex-direction:column; text-align:center; gap:10px; }

    .hero{ min-height:auto; padding:40px 0 0; }
    .hero-buttons{ flex-direction:column; align-items:stretch; }
    .hero-buttons a{ text-align:center; }
    .hero-features{ flex-direction:column; gap:12px; }

    .floating-card{ display:none; }

    .stats-grid{ grid-template-columns:1fr 1fr; }

    .highlights-grid,
    .why-grid,
    .schools-grid,
    .partners-grid,
    .team-grid,
    .news-grid,
    .values-grid,
    .contact-info-grid,
    .gallery-grid,

    .journey-timeline{ grid-template-columns:1fr 1fr; }

    .footer-grid{ grid-template-columns:1fr; gap:34px; }

    .newsletter-container{ flex-direction:column; text-align:center; }
    .newsletter-form{ max-width:100%; }

    .footer-bottom-content{ flex-direction:column; text-align:center; gap:8px; }

    .form-row{ grid-template-columns:1fr; gap:0; }

    .whatsapp{ width:50px; height:50px; font-size:1.35rem; right:16px; bottom:16px; }
    .back-to-top{ width:42px; height:42px; right:16px; bottom:78px; }

}

/*==========================
    SMALL MOBILE (<=576px)
==========================*/

@media(max-width:576px){
 .hero-image-slider{

    height:320px;

}

.hero-info-card{

    padding:20px;

}

.slider-dots{

    margin-top:15px;

}

    .container{ padding:0 18px; }

    .section-heading{ margin-bottom:40px; }

    .hero-content h1{ font-size:2rem; }

    .stats-grid,
    .highlights-grid,
    .why-grid,
    .schools-grid,
    .partners-grid,
    .team-grid,
    .news-grid,
    .values-grid,
    .contact-info-grid,
    .gallery-grid,
    .journey-timeline{
        grid-template-columns:1fr;
    }

    .gallery-item.wide{ grid-column:span 1; }
    .gallery-item.tall{ grid-row:span 1; }

    .welcome-images{ padding:0 0 34px 26px; }
    .experience-box{ padding:16px 18px; right:0; }
    .experience-box h2{ font-size:1.6rem; }

    .cta-container{ padding:32px 22px; }

    .form-card{ padding:28px 22px; }

}

/*==========================
    COURSE CATALOG RESPONSIVE
==========================*/

@media(max-width:1200px){
    .category-grid{ grid-template-columns:repeat(3,1fr); }
}

@media(max-width:992px){
    .catalog-grid{ grid-template-columns:repeat(2,1fr); }
    .category-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:768px){
    .catalog-toolbar{ position:static; }
    .catalog-search,
    .category-intro-search{ max-width:100%; }
    .catalog-grid{ grid-template-columns:1fr; }
    .category-grid{ grid-template-columns:1fr 1fr; gap:16px; }
}

@media(max-width:576px){
    .category-grid{ grid-template-columns:1fr; }
}

/*==========================
    EXTRA SMALL (<=400px)
==========================*/

@media(max-width:400px){

    .logo img{ height:44px; }

    .hero-content h1{ font-size:1.7rem; }

    .btn-primary,
    .btn-secondary{ padding:14px 22px; font-size:.88rem; }

}

/* Schools Grid */

@media(max-width:992px){

    .school-list{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .school-list{
        grid-template-columns:1fr;
    }

}
/*==========================
    INDUSTRY RECOGNITION + TESTIMONIAL + THEME TOGGLE
==========================*/

@media(max-width:768px){

    .ir-heading h2{ font-size:1rem; padding:0 10px; }

    .testimonial-slide p{ font-size:1rem; }

    .testimonial-compact{ padding:44px 24px 30px; }

}

@media(max-width:480px){

    .nav-buttons{ gap:8px; }

    .theme-toggle,
    .search-btn{ width:38px; height:38px; font-size:.95rem; }

    .logo-item{ width:104px; height:68px; padding:10px 14px; }

}