/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE MENU DRAWER
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET & SMALL DESKTOP (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

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

    .hero-content {
        text-align: center;
    }

    .hero-logo-vert img {
        margin: 0 auto 20px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .education-columns-layout,
    .education-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

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

    .certification-widget {
        grid-column: span 2;
    }

    .cta-banner {
        flex-direction: column;
        text-align: center;
    }

    .service-feature-block,
    .service-feature-block.reverse {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .services-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE DEVICES (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header .site-branding img,
    .site-header .custom-logo-link img,
    .site-header img.site-logo-white {
        height: 48px !important;
        max-height: 48px !important;
        max-width: 190px !important;
        width: auto !important;
    }

    .site-section {
        padding: 60px 0;
    }

    .hero-section.hero-home-centered {
        padding: 25px 0 0 0 !important;
        overflow: visible !important;
    }

    .hero-center-content {
        padding-bottom: 16px !important;
        margin: 0 auto !important;
    }

    .hero-center-content .hero-logo-vert img {
        max-width: 320px;
        margin-bottom: 0 !important;
    }

    .hero-tagline {
        font-size: 0.95rem !important;
        letter-spacing: 1.2px !important;
        margin: -32px 0 0 0 !important;
    }

    .hero-bottom-fascia {
        height: 28px !important;
    }

    .services-section {
        background-attachment: scroll !important;
    }

    .services-header-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
        margin-bottom: 40px;
    }

    .services-header-text,
    .services-header-text .section-title,
    .services-header-text .section-subtitle {
        text-align: center !important;
    }

    .services-header-image img {
        margin: 0 auto;
        max-height: 220px;
    }

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

    .hero-content h1,
    .hero-content .section-subtitle {
        text-align: center !important;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }

    /* Mobile Drawer Navigation (No Overlap with Header & Pinned X Close Button) */
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 1010 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    .site-navigation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: var(--color-deep-dark) !important;
        background-image: radial-gradient(circle at 50% 30%, rgba(18, 58, 61, 0.98), #092426 85%) !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 110px 24px 40px !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, visibility 0.4s ease !important;
        z-index: 1000 !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
        overflow-y: auto !important;
    }

    .site-navigation.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-menu {
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .nav-menu li a {
        font-size: 1.15rem !important;
        display: inline-block !important;
        padding: 12px 28px !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    .header-lang-switcher {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        margin-top: 35px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .services-promo-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services-promo-grid img {
        height: 240px;
    }

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

    .certification-widget {
        grid-column: span 1;
    }

    .btn-eqwos {
        width: 100%;
        padding: 14px 28px;
    }

    .testimonial-card {
        padding: 30px 22px !important;
    }

    .testimonial-quote {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .testimonials-controls {
        gap: 16px !important;
        margin-top: 18px !important;
    }

    .testimonials-nav-prev,
    .testimonials-nav-next {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
    }

    /* Services Page Mobile Overrides */
    .service-feature-block,
    .service-feature-block.reverse {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        margin-top: 24px !important;
        margin-bottom: 30px !important;
    }

    .service-feature-block .service-feature-text,
    .service-feature-block.reverse .service-feature-text {
        order: 1 !important;
        width: 100% !important;
    }

    .service-feature-block .hero-image-wrapper,
    .service-feature-block.reverse .hero-image-wrapper {
        order: 2 !important;
        width: 100% !important;
    }

    .service-feature-text h4 {
        font-size: 1.2rem !important;
        margin-top: 24px !important;
        margin-bottom: 10px !important;
    }

    .service-feature-text p {
        font-size: 0.98rem !important;
        line-height: 1.75 !important;
        margin-bottom: 16px !important;
    }

    .section-title-wrapper {
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    .section-title-wrapper .section-title,
    .section-title-wrapper .section-subtitle {
        text-align: center !important;
    }

    .services-quick-links {
        justify-content: center !important;
        gap: 10px !important;
        margin: 20px 0 25px !important;
    }

    .services-quick-links a {
        font-size: 0.82rem !important;
        padding: 6px 14px !important;
    }

    .services-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 30px 0 !important;
    }

    .services-gallery-grid img {
        height: 160px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .hero-image-wrapper {
        width: 100% !important;
    }

    .hero-image-wrapper img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .page-hero-banner {
        min-height: 260px !important;
        padding: 60px 20px !important;
        background-position: center center !important;
    }

    .page-hero-banner h1,
    .page-hero-banner h1.page-hero-title {
        font-size: 2.4rem !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .page-hero-banner .page-hero-subtitle {
        font-size: 0.95rem !important;
        letter-spacing: 1.2px !important;
        text-align: center !important;
    }

    .articles-intro-section {
        padding: 40px 0 10px !important;
    }

    .articles-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .articles-intro-image {
        max-width: 240px !important;
    }

    .font-quote {
        font-size: 1.25rem !important;
        border-left: none !important;
        border-top: 2px solid var(--color-primary);
        padding-left: 0 !important;
        padding-top: 16px !important;
        text-align: center !important;
    }

    .articles-intro-content .hero-description p {
        font-size: 1rem !important;
        text-align: left !important;
    }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE DEVICES (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .page-hero-banner {
        min-height: 220px !important;
        padding: 50px 16px !important;
    }

    .page-hero-banner h1,
    .page-hero-banner h1.page-hero-title {
        font-size: 2rem !important;
    }

    .services-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .services-gallery-grid img {
        height: 220px !important;
    }

    .services-quick-links a {
        width: 100% !important;
        text-align: center !important;
    }
}