/* 
 * responsive.css - Améliorations responsive pour Cyber High Training
 * Version: 2.0 - CORRIGÉE
 * Compatible avec Tailwind CSS
 */

/* ==========================================================================
   1. CORRECTION NAVIGATION MOBILE PRIORITAIRE
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Navbar container */
    .navbar {
        padding: 0.75rem 1rem !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Conteneur principal navbar */
    .navbar .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Flex layout navbar */
    .navbar .flex.justify-between {
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    /* Logo/Titre plus petit */
    .navbar .flex.items-center a {
        font-size: 1.25rem !important;
        white-space: nowrap !important;
        max-width: 200px !important;
    }
    
    /* Masquer le menu desktop */
    .navbar .hidden.md\\:flex {
        display: none !important;
    }
    
    /* Bouton hamburger visible */
    .navbar .md\\:hidden {
        display: block !important;
    }
    
    #menu-toggle {
        background: none !important;
        border: none !important;
        padding: 0.5rem !important;
        font-size: 1.5rem !important;
        color: #374151 !important;
        cursor: pointer !important;
        z-index: 1001 !important;
    }
    
    /* Menu mobile déroulant */
    #mobile-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
        border-top: 1px solid #e5e7eb !important;
        z-index: 999 !important;
    }
    
    /* Menu fermé par défaut */
    #mobile-menu.collapse-menu {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    /* Menu ouvert */
    #mobile-menu.expand-menu {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: all 0.3s ease !important;
    }
    
    /* Liens menu mobile */
    #mobile-menu .flex.flex-col {
        padding: 1rem !important;
    }
    
    #mobile-menu a {
        padding: 0.875rem 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        color: #374151 !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        transition: color 0.3s !important;
    }
    
    #mobile-menu a:hover {
        color: #dc2626 !important;
    }
    
    #mobile-menu a:last-child {
        border-bottom: none !important;
    }
    
    /* Bouton CTA dans menu mobile */
    #mobile-menu .btn-primary {
        margin-top: 1rem !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.875rem !important;
        border-radius: 0.5rem !important;
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   2. BANNIÈRES HERO RESPONSIVE
   ========================================================================== */

/* Section Hero générale */
.section:first-of-type,
#accueil {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 6rem; /* Compenser la navbar fixe */
}

@media (max-width: 768px) {
    /* Hero plus compact sur mobile */
    .section:first-of-type,
    #accueil {
        min-height: 90vh;
        padding-top: 5rem;
        padding-bottom: 3rem;
    }
    
    /* Réorganiser le contenu hero en colonne sur mobile */
    .flex.flex-col.md\\:flex-row {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* Texte en premier sur mobile */
    .md\\:w-1\\/2:first-child {
        order: 1 !important;
        margin-bottom: 2rem !important;
    }
    
    .md\\:w-1\\/2:last-child {
        order: 2 !important;
        margin-top: 0 !important;
    }
}

/* Titres hero responsifs */
@media (max-width: 640px) {
    .section h1,
    .text-4xl.md\\:text-5xl,
    .md\\:text-6xl {
        font-size: 2.25rem !important; /* 36px */
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .text-2xl.md\\:text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .section p.text-lg {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Boutons hero responsifs */
@media (max-width: 640px) {
    .flex.flex-wrap.gap-4:has(.btn-primary) {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .section .btn-primary,
    .section .btn-secondary {
        width: 100% !important;
        max-width: 280px !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Zone visuelle hero */
@media (max-width: 768px) {
    .cybersecurity-bg {
        padding: 1rem !important;
        margin-top: 2rem !important;
    }
    
    .cybersecurity-bg .bg-white {
        padding: 1.5rem !important;
        min-height: 300px !important;
    }
    
    .grid.grid-cols-2.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .grid-cols-2 > div {
        padding: 0.75rem !important;
    }
}

/* Badges hero */
@media (max-width: 640px) {
    .inline-block.px-4.py-2.bg-red-600,
    .inline-block.px-4.py-2.bg-red-100 {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .grid.grid-cols-3.gap-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .text-2xl.font-bold {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
   3. TYPOGRAPHIE RESPONSIVE GÉNÉRALE
   ========================================================================== */

@media (max-width: 640px) {
    h1:not(.section h1), 
    .text-4xl:not(.section .text-4xl), 
    .text-5xl, 
    .text-6xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2, .text-3xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h3, .text-2xl {
        font-size: 1.5rem !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
    }
    
    .text-lg {
        font-size: 1rem !important;
    }
    
    p, li {
        line-height: 1.6;
    }
}

/* ==========================================================================
   4. ESPACEMENTS RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .section:not(:first-of-type) {
        padding: 3rem 1rem !important;
    }
    
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .gap-8 {
        gap: 1rem !important;
    }
    
    .gap-6 {
        gap: 0.75rem !important;
    }
    
    .gap-4 {
        gap: 0.5rem !important;
    }
}

/* ==========================================================================
   5. GRILLES RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
    .grid-cols-2:not(.grid.grid-cols-2.gap-4) {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid > * {
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   6. BOUTONS RESPONSIVE GÉNÉRAUX
   ========================================================================== */

@media (max-width: 640px) {
    .btn-primary:not(.section .btn-primary), 
    .btn-secondary:not(.section .btn-secondary) {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin-bottom: 0.75rem !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .flex.gap-4:has(.btn-primary, .btn-secondary):not(.section .flex) {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
}

/* ==========================================================================
   7. FORMULAIRES RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    input, select, textarea {
        font-size: 16px !important; /* Évite le zoom iOS */
        padding: 0.875rem !important;
    }
    
    label {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
}

/* ==========================================================================
   8. CARTES ET COMPOSANTS
   ========================================================================== */

@media (max-width: 640px) {
    .card {
        margin-bottom: 1.5rem !important;
        padding: 1.5rem !important;
    }
    
    .pricing-card {
        margin-bottom: 2rem !important;
        transform: none !important;
    }
    
    .pricing-card::before {
        display: none !important;
    }
}

/* ==========================================================================
   9. SECTION VISION CORRIGÉE
   ========================================================================== */

@media (max-width: 768px) {
    #vision {
        position: relative !important;
        overflow: visible !important;
        background: white !important;
        padding: 3rem 1rem !important;
    }
    
    #vision h2,
    #vision h3,
    #vision p,
    #vision span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        position: static !important;
        display: block !important;
    }
    
    #vision .card {
        background: white !important;
        border-radius: 1rem !important;
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        position: static !important;
        transform: none !important;
        overflow: visible !important;
    }
    
    #vision .grid-cols-1.md\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    #vision .rounded-full {
        width: 4rem !important;
        height: 4rem !important;
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 1rem auto !important;
        position: static !important;
    }
    
    #vision .text-xl {
        font-size: 1.25rem !important;
        font-weight: bold !important;
        margin-bottom: 1rem !important;
        color: #1f2937 !important;
    }
    
    #vision p {
        color: #6b7280 !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
    
    #vision ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #vision li {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
        color: #6b7280 !important;
    }
    
    #vision li .fas {
        color: #22c55e !important;
        margin-right: 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   10. TIMELINE CORRECTIONS CIBLÉES
   ========================================================================== */

@media (max-width: 768px) {
    /* Supprimer seulement les lignes de timeline problématiques */
    .timeline::before,
    .timeline-line::before {
        display: none !important;
    }
    
    .timeline-item {
        padding-left: 1.5rem !important;
    }
    
    .timeline-dot {
        left: 0 !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.75rem !important;
    }
    
    .timeline-content {
        width: calc(100% - 2rem) !important;
        margin-left: 2rem !important;
    }
    
    .timeline-content::before {
        display: none !important;
    }
}

/* ==========================================================================
   11. WIDGETS ET EMBEDS
   ========================================================================== */

@media (max-width: 768px) {
    #my-cal-inline-rdv,
    #my-cal-inline-30min,
    #my-cal-inline-pme {
        height: 600px !important;
        min-height: 500px !important;
    }
}

/* ==========================================================================
   12. IMAGES ET MÉDIAS
   ========================================================================== */

img {
    max-width: 100%;
    height: auto;
    border-radius: inherit;
}

@media (max-width: 768px) {
    .hero-image {
        margin-top: 2rem !important;
    }
}

/* ==========================================================================
   13. NOTIFICATIONS
   ========================================================================== */

@media (max-width: 640px) {
    #form-notification {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
        transform: translateY(-100px) !important;
    }
    
    #form-notification.show {
        transform: translateY(0) !important;
    }
}

/* ==========================================================================
   14. OPTIMISATIONS TACTILES
   ========================================================================== */

@media (max-width: 768px) {
    button,
    .btn-primary,
    .btn-secondary,
    a[class*="btn"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .flex > button + button,
    .flex > a + a {
        margin-left: 0.75rem !important;
    }
}

/* ==========================================================================
   15. ÉCRANS TRÈS PETITS (<375px)
   ========================================================================== */

@media (max-width: 374px) {
    .section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .section h1 {
        font-size: 2rem !important;
    }
    
    .btn-primary,
    .btn-secondary {
        min-height: 48px !important;
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   16. TABLETTE (768px - 1024px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .section:first-of-type,
    #accueil {
        min-height: 80vh;
        padding-top: 4rem;
    }
    
    .text-4xl.md\\:text-5xl {
        font-size: 3rem !important;
    }
    
    .cybersecurity-bg {
        padding: 1.5rem !important;
    }
    
    .cybersecurity-bg .bg-white {
        padding: 2rem !important;
        min-height: 350px !important;
    }
}

/* ==========================================================================
   17. ACCESSIBILITÉ MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .gradient-text {
        color: #0891b2 !important;
    }
    
    .btn-primary,
    .btn-secondary {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .flex.gap-4 > *:not(:last-child) {
        margin-bottom: 0.75rem !important;
    }
}

/* ==========================================================================
   18. PERFORMANCE MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    /* Désactiver animations coûteuses */
    .float-animation,
    .pulse-animation,
    .rotate-animation {
        animation: none !important;
    }
    
    .card:hover {
        transform: translateY(-2px) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Simplifier les arrière-plans */
    .cyber-pattern {
        background-image: none !important;
    }
    
    .shadow-2xl,
    .shadow-xl,
    .shadow-lg {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
}

/* ==========================================================================
   19. CORRECTIONS GÉNÉRALES
   ========================================================================== */

@media (max-width: 768px) {
    /* Éviter les débordements horizontaux */
    body,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Espacement pour navbar fixe */
    body {
        padding-top: 0 !important;
    }
    
    /* Restaurer contenu AOS */
    [data-aos] {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    
    /* Sections vides */
    .section:empty {
        display: none !important;
    }
    
    .container:empty {
        display: none !important;
    }
}

/* 
 * Correction spécifique des 4 blocs dans la zone hero
 * À ajouter à la fin de votre responsive.css
 */

/* ==========================================================================
   CORRECTION BLOCS HERO ZONE VISUELLE
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. CONTENEUR PRINCIPAL DE LA ZONE VISUELLE */
    .cybersecurity-bg {
        padding: 0.5rem !important;
        margin-top: 1rem !important;
    }
    
    /* 2. CARTE BLANCHE PRINCIPALE PLUS COMPACTE */
    .cybersecurity-bg .bg-white {
        padding: 1rem !important;
        min-height: 200px !important; /* Encore plus petit */
        border-radius: 1rem !important;
    }
    
    /* 3. HEADER DE LA CARTE (Logo + titre + badge) */
    .cybersecurity-bg .flex.items-center.justify-between {
        margin-bottom: 0.75rem !important;
    }
    
    .cybersecurity-bg .flex.items-center .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
        margin-right: 0.5rem !important;
    }
    
    .cybersecurity-bg h3 {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    .cybersecurity-bg .text-xs.px-3.py-1 {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* 4. BARRE DE PROGRESSION */
    .cybersecurity-bg .h-1 {
        height: 0.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* 5. GRILLE DES 4 BLOCS PRINCIPAUX */
    .cybersecurity-bg .grid.grid-cols-2.gap-4 {
        grid-template-columns: 1fr 1fr !important; /* Garder 2 colonnes sur mobile */
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* 6. CHAQUE BLOC INDIVIDUEL */
    .cybersecurity-bg .grid-cols-2 > div {
        padding: 0.5rem !important;
        border-radius: 0.5rem !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        min-height: auto !important;
    }
    
    /* 7. ICÔNES DANS LES BLOCS */
    .cybersecurity-bg .grid-cols-2 .fas {
        font-size: 0.875rem !important;
        margin-right: 0.375rem !important;
        color: #dc2626 !important;
    }
    
    /* 8. TITRES DES BLOCS */
    .cybersecurity-bg .grid-cols-2 .text-sm.font-semibold {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.2 !important;
    }
    
    /* 9. DESCRIPTIONS DES BLOCS */
    .cybersecurity-bg .grid-cols-2 .text-xs {
        font-size: 0.7rem !important;
        color: #6b7280 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    
    /* 10. STATISTIQUES EN BAS (3 colonnes) */
    .cybersecurity-bg .grid.grid-cols-3.gap-4 {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        gap: 0.25rem !important;
    }
    
    .cybersecurity-bg .grid-cols-3 > div {
        text-align: center !important;
        padding: 0.25rem !important;
    }
    
    .cybersecurity-bg .text-2xl.font-bold {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.125rem !important;
        color: #19a8c2 !important;
    }
    
    .cybersecurity-bg .text-xs.text-gray-500 {
        font-size: 0.65rem !important;
        color: #9ca3af !important;
    }
    
    /* 11. FOOTER DE LA CARTE */
    .cybersecurity-bg .flex.items-center.justify-between:last-child {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .cybersecurity-bg .text-sm.text-gray-600 {
        font-size: 0.7rem !important;
    }
    
    .cybersecurity-bg .text-sm.font-semibold {
        font-size: 0.75rem !important;
    }
    
    /* 12. OPTIMISATIONS SPÉCIFIQUES DES 4 BLOCS */
    .cybersecurity-bg .grid-cols-2 > div:nth-child(1) {
        /* Devenir Analyste Cyber */
    }
    
    .cybersecurity-bg .grid-cols-2 > div:nth-child(2) {
        /* CyberStart PME */
    }
    
    .cybersecurity-bg .grid-cols-2 > div:nth-child(3) {
        /* Accompagnement */
    }
    
    .cybersecurity-bg .grid-cols-2 > div:nth-child(4) {
        /* Résultat */
    }
}

/* ==========================================================================
   VERSION ENCORE PLUS COMPACTE POUR TRÈS PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 375px) {
    
    /* Carte principale encore plus petite */
    .cybersecurity-bg .bg-white {
        padding: 0.75rem !important;
        min-height: 180px !important;
    }
    
    /* Grille 2x2 devient 1x4 sur très petit écran */
    .cybersecurity-bg .grid.grid-cols-2.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 0.375rem !important;
    }
    
    /* Blocs en une colonne */
    .cybersecurity-bg .grid-cols-2 > div {
        padding: 0.375rem !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .cybersecurity-bg .grid-cols-2 .text-sm.font-semibold {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
        margin-left: 0.25rem !important;
    }
    
    .cybersecurity-bg .grid-cols-2 .text-xs {
        display: none !important; /* Masquer la description sur très petit écran */
    }
    
    /* Stats en 3 colonnes serrées */
    .cybersecurity-bg .grid-cols-3 > div {
        padding: 0.125rem !important;
    }
    
    .cybersecurity-bg .text-2xl.font-bold {
        font-size: 1rem !important;
    }
    
    .cybersecurity-bg .text-xs.text-gray-500 {
        font-size: 0.6rem !important;
    }
}

/* ==========================================================================
   ALTERNATIVE : SIMPLIFICATION COMPLÈTE SUR MOBILE
   ========================================================================== */

@media (max-width: 480px) {
    
    /* Option : Masquer complètement la zone visuelle sur très petit mobile */
    .cybersecurity-bg {
        display: none !important;
    }
    
    /* Ou la remplacer par une version ultra-simple */
    .cybersecurity-bg.simple-mobile {
        display: block !important;
        background: none !important;
        padding: 0 !important;
    }
    
    .cybersecurity-bg.simple-mobile .bg-white {
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
        padding: 1rem !important;
        text-align: center !important;
        min-height: auto !important;
    }
    
    .cybersecurity-bg.simple-mobile .grid {
        display: none !important;
    }
    
    .cybersecurity-bg.simple-mobile::after {
        content: "Formation Premium Cybersécurité" !important;
        display: block !important;
        font-weight: 600 !important;
        color: #dc2626 !important;
        font-size: 0.875rem !important;
    }
}

/* ==========================================================================
   OPTIMISATION PERFORMANCE BLOCS
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Éviter les reflows sur les blocs */
    .cybersecurity-bg .grid-cols-2 > div {
        contain: layout style !important;
        will-change: auto !important;
    }
    
    /* Optimiser les transitions */
    .cybersecurity-bg * {
        transition: none !important;
    }
    
    /* Simplifier les arrière-plans */
    .cybersecurity-bg .bg-opacity-80 {
        background-color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* ==========================================================================
   CLASSE HELPER POUR TESTER
   ========================================================================== */

/* Ajoutez class="compact-hero" au conteneur pour tester */
@media (max-width: 768px) {
    
    .compact-hero .cybersecurity-bg .bg-white {
        min-height: 150px !important;
        padding: 0.5rem !important;
    }
    
    .compact-hero .cybersecurity-bg .grid-cols-2 > div {
        padding: 0.25rem !important;
        font-size: 0.7rem !important;
    }
    
    .compact-hero .cybersecurity-bg .text-sm {
        font-size: 0.7rem !important;
    }
    
    .compact-hero .cybersecurity-bg .text-xs {
        font-size: 0.6rem !important;
    }
}