/* ============================================================
   0. EXTERNAL IMPORTS & FONTS
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
   
   /* ============================================================
      1. VARIABLES & GENERAL RESET
      ============================================================ */
   
   :root {
       /* Main colors */
       --color-primario: #54a4de;
       --color-texto-oscuro: #1a1a1a;
       --color-texto-claro: #4b5563;
       --color-fondo-claro: #F0F7FF;
       --color-fondo-gris: #f8f9fa;
       --color-borde-claro: #f5f5f5;
       
       /* Additional unified colors */
       --aboutus1-primary: #14A8E1;
       --aboutus1-primary-dark: #0A6888;
       --aboutus1-yellow: #F8C72F;
       --aboutus1-red: #E1455C;
       --aboutus1-green: #4DAC5E;
       --metodo-primary: #14A8E1;
       --metodo-primary-dark: #0A6888;
       --metodo-success: #4DAC5E;
       --metodo-warning: #F8C72F;
       --metodo-danger: #E1455C;
       
       /* Shadows */
       --sombra-suave: 0 8px 25px rgba(0, 0, 0, 0.12);
       --sombra-hover: 0 12px 30px rgba(0, 0, 0, 0.15);
       
       /* Other values */
       --border-radius: 12px;
       --contenedor-max: 1200px;
   }
   
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body, h1, h2, h3, p, a, span, div {
       font-family: 'Inter', sans-serif !important;
   }
   
   body {
       font-family: 'Inter', sans-serif;
       margin: 0;
       padding: 0;
       background-color: #ffffff;
       color: #333;
   }
   
   /* ============================================================
      2. GENERAL STYLES & CONTAINERS
      ============================================================ */
   
   .container {
       max-width: var(--contenedor-max);
       margin: 0 auto;
       padding: 0 20px;
   }
   
   /* Class for elements hidden but accessible for screen readers */
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
   }
   
   /* ============================================================
      3. HERO SECTION
      ============================================================ */
   
   .hero-section {
       position: relative;
       padding: 150px 0 60px;
       overflow: visible;
       width: 100%;
       max-width: 100%;
       background-color: var(--color-fondo-claro);
   }
   
   .hero-container {
       display: flex !important;
       align-items: center !important;
       justify-content: space-between !important;
       position: relative;
       padding: 30px 0;
       max-width: 98% !important;
       margin: 0 auto !important;
       gap: 40px !important;
       margin-top: 40px !important;
   }
   
   /* Decorative elements (diamonds) */
   .hero-container::before,
   .hero-container::after {
       content: "";
       position: absolute;
       width: 120px;
       height: 120px;
       transform: rotate(45deg);
       z-index: 1;
   }
   
   .hero-content, .hero-image-wrapper {
       position: relative;
       z-index: 2;
   }
   
   /* Text container - IMPROVED PROPORTIONS */
   .hero-content {
       flex: 1 !important;
       padding-left: 40px !important;
       padding-right: 20px !important;
       max-width: 50% !important;          
       margin-right: 20px !important;
       overflow: visible !important;
   }
   
   /* Main title styles */
   .hero-title {
       font-size: 2.4rem;
       font-weight: 700;
       margin-bottom: 20px;
       line-height: 1.2;
       display: flex;
       flex-direction: column;
   }
   
   .hero-title .highlight {
       color: var(--color-primario);
       font-size: inherit;
       font-family: 'DM Sans', sans-serif !important;
       font-weight: 700 !important;
   }
   
   .hero-title .normal-text {
       color: var(--color-texto-oscuro);
   }
   
   .hero-title .title-line {
       display: block;
       width: 100%;
       margin-bottom: 5px;
   }
   
   /* Subtitle styles */
   .hero-subtitle {
       font-size: 1.1rem;
       line-height: 1.6;
       color: #4B5563;
       margin-bottom: 30px;
   }
   
   /* HERO IMAGE - CORRECT PROPORTIONS */
   .hero-image-wrapper {
       flex: 1 !important;                 
       padding: 0 !important;
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;     
       max-width: 100% !important;          
       margin-top: 0 !important;           
   }
   
   .hero-image {
       /* PROPORTIONED DIMENSIONS */
       width: 100% !important;             
       height: auto !important;            
       max-width: none !important;         
       max-height: 1000px !important;      
       
       /* PROPORTIONAL SCALING */
       transform: scale(1.2) !important;   
       
       /* VISUAL STYLES */
       object-fit: cover !important;       
       border: 3px solid var(--color-borde-claro) !important;
       border-radius: var(--border-radius) !important;
       box-shadow: var(--sombra-suave), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
       transition: box-shadow 0.3s ease, border-color 0.3s ease !important; 
       display: block !important;
   }
   
   .hero-image:hover {
       border-color: #e6e6e6 !important;
       box-shadow: var(--sombra-hover), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
       transform: scale(1.22) !important;
   }
   
   /* Hero section buttons */
   .hero-buttons {
       margin-top: 25px;
       display: flex;
       gap: 15px;
       margin-left: 0;
       padding-left: 0;
   }
   
   .hero-btn {
       padding: 12px 24px;
       border-radius: 11px;
       text-decoration: none;
       font-weight: 500;
       text-align: center;
       min-width: 160px;
       display: inline-block;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .primary-btn {
       background-color: var(--color-primario);
       color: white;
       border: 1px solid var(--color-primario);
   }
   
   .primary-btn:hover {
       background-color: #4a94ce;
       color:white;
   }
   
   .outline-btn {
       background-color: transparent;
       color: var(--color-primario);
       border: 1px solid var(--color-primario);
   }
   
   .outline-btn:hover {
       background-color: var(--color-primario);
       color: white;
   }
   
   /* ============================================================
      4. INSTITUTIONS SECTION
      ============================================================ */
   
   .institutions-section {
       max-width: 98% !important;
       width: 98% !important;
       padding: 0 !important;
       margin: 40px auto 60px !important;
       text-align: center !important;
   }
   
   .institutions-section .container {
       max-width: 98% !important;
       width: 98% !important;
       padding: 0 10px !important;
       margin: 0 auto !important;
       display: flex !important;
       flex-direction: column !important;
       align-items: center !important;
   }
   
   .institutions-header {
       max-width: 90% !important;
       width: 90% !important;
       margin: 0 auto 30px !important;
       text-align: center !important;
   }
   
   .institutions-title {
       font-size: 2.2rem;
       font-weight: 700;
       margin-bottom: 15px;
       line-height: 1.2;
   }
   
   .institutions-title .big-number {
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--color-primario);
   }
   
   .institutions-title-dark {
       color: var(--color-texto-oscuro);
   }
   
   .institutions-title-blue {
       color: var(--color-primario);
   }
   
   .institutions-subtitle {
       font-size: 1rem;
       line-height: 1.6;
       color: var(--color-texto-claro);
       margin-bottom: 20px;
   }
   
   .logo-showcase {
       max-width: 90% !important;
       width: 90% !important;
       margin: 0 auto !important;
       overflow: hidden !important;
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;
   }
   
   .large-image-container {
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;
       max-width: 100% !important;
       width: 100% !important;
       text-align: center !important;
       overflow: hidden !important;
   }
   
   .empresas-image-large {
       max-width: 90% !important;
       width: auto !important;
       height: auto !important;
       max-height: none !important;
       display: block !important;
       margin: 0 auto !important;
   }
   
   /* ============================================================
      5. LOGOS SECTION
      ============================================================ */
   
   .logos-section {
       padding: 1rem 0;
   }
   
   .section-title {
       text-align: center;
       font-size: 1.5rem;
       font-weight: bold;
       margin-bottom: 2rem;
   }
   
   /* Responsive logo grid */
   .logo-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1.5rem;
       justify-items: center;
   }
   
   /* Tablets: 3 columns */
   @media (min-width: 768px) {
       .logo-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   /* Medium screens: 4 columns */
   @media (min-width: 992px) {
       .logo-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   /* Large screens: 8 columns */
   @media (min-width: 1200px) {
       .logo-grid {
           grid-template-columns: repeat(8, 1fr);
       }
   }
   
   .logo-item {
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: white;
       border-radius: 8px;
       padding: 1rem;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: box-shadow 0.3s ease;
       width: 100%;
       height: 100px;
   }
   
   .logo-item:hover {
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
   
   .logo-img {
       max-width: 100%;
       max-height: 80px;
       object-fit: contain;
   }
   
   /* ============================================================
      6. ACTIVE METHODOLOGIES SECTION
      ============================================================ */
   
   .metodologias-section {
       padding: 60px 0;
       background-color: var(--color-fondo-gris);
   }
   
   .metodologias-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 30px;
       margin-top: 40px;
       perspective: 1000px;
   }
   
   @media (min-width: 1280px) {
       .metodologias-grid {
           grid-template-columns: repeat(5, 1fr);
       }
   }
   
   .metodologia-card {
       background-color: #fff;
       border-radius: var(--border-radius);
       padding: 30px;
       transition: all 0.3s ease;
       border: none;
       height: 100%;
       display: flex;
       flex-direction: column;
       box-shadow: var(--sombra-suave), 0 0 0 1px rgba(0, 0, 0, 0.05);
       transform-style: preserve-3d;
       transform: translateZ(0);
   }
   
   .metodologia-card:hover {
       transform: translateY(-10px);
       box-shadow: var(--sombra-hover), 0 0 0 1px rgba(0, 0, 0, 0.08);
   }
   
   .icon-wrapper {
       width: 60px;
       height: 60px;
       border-radius: var(--border-radius);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 20px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       transform: translateZ(10px);
   }
   
   .metodologia-card h3 {
       margin-top: 5px;
       margin-bottom: 5px;
       font-weight: 700;
       transform: translateZ(5px);
   }
   
   .metodologia-subtitle {
       margin-top: -5px;
       transform: translateZ(5px);
   }
   
   .metodologia-card p {
       color: var(--color-texto-claro);
       line-height: 1.6;
       transform: translateZ(5px);
   }
   
   /* ============================================================
      7. PLATFORM SECTION - 
      ============================================================ */
   
   .platform-section {
       padding: 80px 0;
       background: radial-gradient(circle, #F6FBFF 0%, #BDECFF 100%);
   }
   
   /* HERO WITH TEXT AND DASHBOARD IMAGE */
   .platform-hero-container {
       display: flex;
       align-items: center;
       gap: 60px;
       margin-bottom: 60px;
   }
   
   .platform-text-content {
       flex: 1;
       max-width: 45%;
   }
   
   .platform-main-title {
       font-size: 2.3rem;
       font-weight: 700;
       line-height: 1.2;
       color: #0A6888;
       margin-bottom: 25px;
   }
   
   .platform-description {
       font-size: 1.1rem;
       line-height: 1.6;
       color: var(--color-texto-claro);
   }
   
   .platform-dashboard-wrapper {
       flex: 1;
       max-width: 55%;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       height: 400px;
       padding: 20px;
   }
   
   .platform-dashboard-image {
       width: 75%;
       height: auto;
       max-width: 100%;
       border-radius: var(--border-radius);
       box-shadow: var(--sombra-suave);
       position: absolute;
       top: 50px;
       left: 0;
   }
   
   .platform-dashboard-image.front {
       width: 75%;
       top: -5px;
       left: 40%;
       z-index: 2;
       box-shadow: var(--sombra-hover);
   }
   
   /* 4 MODULES GRID */
   .platform-modules-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 409px));
       gap: 20px 20px;
       justify-content: center;
       max-width: calc(100% - 40px);
       margin: 0 auto;
       width: 100%;
   }
   
   .platform-module-card {
       border-radius: 10.48px;
       padding: 20px 25px;
       box-shadow: var(--sombra-suave);
       transition: all 0.3s ease;
       width: 100%;
       max-width: 409px;
       height: 212px;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       margin: 0 auto;
   }
   @media (min-width: 992px) {
    .platform-modules-grid {
        row-gap: 2rem !important;
        margin-bottom: 3rem !important;
    }
}
   .platform-module-card:hover {
       transform: translateY(-5px);
       box-shadow: var(--sombra-hover);
   }
   
   /* CARD COLORS */
   .platform-module-card.experiencias-ia {
       background-color: #F0FBFF;
       border: 1.05px solid #54A4DE;
   }
   
   .platform-module-card.skill-tracker {
       background-color: #EFEFFF;
       border: 1.05px solid #7670FF;
   }
   
   .size-6 {
       width: 24px;
       height: 24px;
   }
   
   .platform-module-card.proyectos {
       background-color: #E8FFEC;
       border: 1.05px solid #5AB26A;
   }
   
   .platform-module-card.practicas {
       background-color: #FFF2FC;
       border: 1.05px solid #DA3C78;
   }
   
   .platform-module-title {
       display: flex;          
       align-items: center;    
       gap: 8px;
       font-size: 1.3rem;
       font-weight: 700;
       margin-bottom: 15px;
       line-height: 1.3;
   }
   
   .platform-module-card.experiencias-ia .platform-module-title {
       color: #54A4DE;
   }
   
   .platform-module-card.skill-tracker .platform-module-title {
       color: #7670FF;
   }
   
   .platform-module-card.proyectos .platform-module-title {
       color: #5AB26A;
   }

   
   .platform-module-card.practicas .platform-module-title {
       color: #DA3C78;
   }
   
   .platform-module-text {
    color: var(--color-texto-claro);
    font-size: 1rem;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1rem;
    display: block; /* <--- questa è la chiave */
}

   
   /* ============================================================
      8. LEARNING TYPES SECTION
      ============================================================ */
   

   .learning-types {
       padding: 40px 0;
   }
   
   .container-types {
       max-width: 80%;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   .hero1-image {
       position: relative;
       margin-bottom: 64px;
       border-radius: 24px;
       overflow: hidden;
   }
   
   .hero1-image img {
       width: 100%;
       height: 400px;
       object-fit: cover;
   }
   
   .hero1-content {
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, rgba(10, 104, 136, 0.9), transparent);
       display: flex;
       align-items: center;
       padding: 48px;
   }
   
   .hero1-content h2 {
       color: #fff;
       font-size: 2rem;
       font-weight: 600;
       margin-bottom: 25px;
       text-align: left;
       max-width: 800px;
       line-height: 1.2;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
       font-family: 'DM Sans', sans-serif !important;
   }
   
   /* BADGE FOR "HIGH IMPACT" */
   .hero1-content h2 .highlight-impact {
       background-color: #046C8E;
       color: white !important;
       font-weight: 600;
       font-family: 'DM Sans', sans-serif !important;
       padding: 8px 16px;
       border-radius: 8px;
       display: inline-block;
       text-shadow: none;
   }
   
   .hero1-content p {
       color: rgba(255, 255, 255, 0.9);
       font-size: 1.25rem;
       max-width: 600px;
   }
   
   /* Experience Cards */
   .exp-learning-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 30px;
   }
   
   .exp-learning-header {
       text-align: left;
       margin-bottom: 30px;
       margin-top: 20px;
   }
   
   .exp-learning-header:lang(he) {
       text-align: right;
   }
   
   .exp-learning-title {
       font-size: 1.5rem;
       color: #2d3748;
       margin-bottom: 15px;
       font-weight: 600;
   }
   
   .exp-learning-subtitle {
       font-size: 1.3rem;
       color: #4a5568;
       line-height: 1.6;
       max-width: 600px;
       margin-bottom: 0;
   }
   
   .exp-learning-cards-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 20px;
       margin: 0 auto 20px auto;
       width: 100%;
       max-width: 1400px;
       padding: 0 30px;
   }
   
   .exp-learning-card {
       background: white;
       border-radius: 15px;
       padding: 15px 10px;
       text-align: center;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       min-height: 300px;
       max-height: 300px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
       border: 2px solid transparent;
       transition: box-shadow 300ms ease-out, border-color 300ms ease-out, transform 0.3s ease;
       will-change: transform;
   }
   
   .exp-learning-card:hover {
       transform: scale(1.03);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }
   
   .exp-learning-card-reto {
       background: #CFF2FF;
       border-color: #00A8E3;
   }
   
   .exp-learning-card-proyecto {
       background: #D5FFDD;
       border-color: #5AB26A;
   }
   
   .exp-learning-card-caso {
       background: #FFE2D4;
       border-color: #E78B65;
   }
   
   .exp-learning-card-servicio {
       background: #FFF7E5;
       border-color: #F8C731;
   }
   
   .exp-learning-card-hackaton {
       background: #FFE3ED;
       border-color: #E46B54;
   }
   
   .exp-learning-card-content {
       transition: all 300ms ease-out;
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }
   
   .exp-learning-card-question {
       font-family: 'Inter', sans-serif;
       font-weight: 500;
       font-size: 16px;
       line-height: 115%;
       letter-spacing: -1.9%;
       text-align: center;
       width: 100%;
       max-width: 100%;
       min-height: 40px;
       margin: 0 auto 20px auto;
       color: #2d3748;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .exp-learning-card-image {
       width: 100%;
       max-width: 150px;
       height: 100px;
       margin: 0 auto 10px;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       transition: transform 300ms ease-out;
   }
   
   /* Experience card images */
   .exp-learning-image-reto {
       background-image: url('/pro/images/card-reto.png');
   }
   
   .exp-learning-image-proyecto {
       background-image: url('/pro/images/card-proyecto.png');
   }
   
   .exp-learning-image-caso {
       background-image: url('/pro/images/card-caso.png');
   }
   
   .exp-learning-image-servicio {
       background-image: url('/pro/images/servicios.png');
   }
   
   .exp-learning-image-hackaton {
       background-image: url('/pro/images/hackathon.png');
   }
   /* Aggiungi queste media queries al tuo CSS esistente */

@media (max-width: 768px) {
    .container-types {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .hero1-content {
        padding: 24px 20px;
        background: linear-gradient(to bottom, rgba(10, 104, 136, 0.9), rgba(10, 104, 136, 0.7));
        text-align: center;
    }
    
    .hero1-content h2 {
        font-size: 1.8rem;
        max-width: 100%;
        text-align: center;
    }
    
    .hero1-content p {
        font-size: 1rem;
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container-types {
        padding: 0 10px;
    }
    
    .hero1-content {
        padding: 20px 15px;
    }
    
    .hero1-content h2 {
        font-size: 1.5rem;
        line-height: 1.25;
    }
    
    .hero1-content p {
        font-size: 0.9rem;
    }
}
/* Trova queste regole esistenti nel tuo CSS e AGGIUNGI queste righe: */

@media (max-width: 768px) {
    /* Aggiungi questa regola alla media query esistente */
    .container-types {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Aggiungi text-align alle regole esistenti */
    .hero1-content {
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    /* Aggiungi questa regola alla media query esistente */
    .container-types {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}
   /* ============================================================
      9. AUDIENCE BENEFITS & TABS SECTION
      ============================================================ */
   
   .audience-tabs {
       display: flex;
       justify-content: center;
       margin-bottom: 48px;
   }
   
   .tab-button {
       background-color: #f3f4f6;
       border: none;
       padding: 12px 24px;
       margin: 0 4px;
       border-radius: 9999px;
       cursor: pointer;
       transition: all 0.3s ease;
       font-family: 'Inter', sans-serif;
       font-weight: 500;
   }
   
   .tab-button.active {
       background-color: #14A8E1;
       color: #fff;
       box-shadow: 0 2px 4px rgba(20, 168, 225, 0.3);
   }
   
   .audience-content {
       display: flex;
       align-items: center;
       gap: 48px;
   }
   
   .audience-benefits {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   
   .benefit-item {
       display: flex;
       align-items: center;
       gap: 16px;
       padding: 16px;
       background-color: #fff;
       border-radius: 12px;
       margin-bottom: 16px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
   }
   
   .benefit-item:hover {
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
   
   .benefit-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: #14A8E1;
   }
   
   .audience-image {
       flex: 1;
       position: relative;
   }
   
   .audience-image::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(to bottom right, rgba(20, 168, 225, 0.2), transparent);
       border-radius: 24px;
       transform: rotate(3deg);
   }
   
   .audience-image img {
       width: 100%;
       height: 400px;
       object-fit: cover;
       border-radius: 24px;
       transform: rotate(-3deg);
       transition: transform 0.5s ease;
   }
   
   .audience-image:hover img {
       transform: rotate(0);
   }
   
   /* ============================================================
      10. SOLUTIONS SECTION
      ============================================================ */
   
   .section-sol {
       margin-top: 100px;
       margin-bottom: 100px;
   }
   
   /* Tab styles */
   .tab-button {
       background-color: #f5f5f5;
       border: none;
       border-radius: 30px;
       padding: 10px 20px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .tab-button i {
       margin-right: 8px;
   }
   
   .tab-button.active {
       background-color: #0a6888;
       color: white;
   }
/* ============================================================
   IMPACT SECTION - SOLO RESPONSIVE MOBILE/TABLET
  
   MOBILE - LAYOUT A 1 COLONNA
   ============================================================ */

   @media (max-width: 768px) {
    /* Container sezione impatto */
    .section-imp {
        padding: 50px 0 !important;
        /* Mantieni background originale - non forzare colori */
    }
    
    /* Grid delle statistiche - 1 colonna mobile */
    .stats-grid-imp {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        height: auto !important;
        padding: 0 20px !important;
        max-width: 400px !important;
        margin: 0 auto 40px auto !important;
    }
    
    /* Carte statistiche mobile */
    .stat-card {
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        padding: 20px !important;
        margin: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Icone mobile */
    .stat-card .icon-wrapper {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 15px auto !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Titoli numeri mobile */
    .stat-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    .stat-card h3 .number {
        font-size: 32px !important;
        display: block !important;
        font-weight: 700 !important;
    }
    
    .stat-card h3 .plus-symbol {
        font-size: 32px !important;
        font-weight: 700 !important;
    }
    
    .stat-card h3 .countries-text {
        font-size: 32px !important;
        font-weight: 700 !important;
    }
    
    /* Descrizioni mobile */
    .stat-card p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
        text-align: center !important;
        margin: 0 !important;
    }
}

/* ============================================================
   MOBILE PICCOLI - SOTTO 480px
   ============================================================ */

@media (max-width: 480px) {
    .section-imp {
        padding: 40px 0 !important;
    }
    
    .stats-grid-imp {
        gap: 20px !important;
        padding: 0 15px !important;
        max-width: 350px !important;
    }
    
    .stat-card {
        min-height: 160px !important;
        padding: 18px !important;
    }
    
    .stat-card .icon-wrapper {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 12px !important;
        font-size: 18px !important;
    }
    
    .stat-card h3 .number,
    .stat-card h3 .plus-symbol,
    .stat-card h3 .countries-text {
        font-size: 28px !important;
    }
    
    .stat-card p {
        font-size: 0.85rem !important;
        padding: 0 8px !important;
    }
}

/* ============================================================
   TABLET - LAYOUT A 2 COLONNE (769px - 992px)
   ============================================================ */

@media (min-width: 769px) and (max-width: 992px) {
    .section-imp {
        padding: 60px 0 !important;
    }
    
    .stats-grid-imp {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        height: auto !important;
        margin-bottom: 40px !important;
        padding: 0 20px !important;
    }
    
    /* Per tablet, la terza carta va centrata sotto */
    .stat-card:nth-child(3) {
        grid-column: 1 / -1 !important;
        max-width: 50% !important;
        margin: 0 auto !important;
    }
    
    .stat-card {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        padding: 22px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .stat-card .icon-wrapper {
        width: 55px !important;
        height: 55px !important;
        margin-bottom: 16px !important;
        font-size: 22px !important;
    }
    
    .stat-card h3 .number,
    .stat-card h3 .plus-symbol,
    .stat-card h3 .countries-text {
        font-size: 36px !important;
    }
}

/* ============================================================
   LAYOUT ORIZZONTALE TABLET
   ============================================================ */

/* iPad orizzontale specifico */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
    .stats-grid-imp {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        padding: 0 30px !important;
    }
    
    .stat-card:nth-child(3) {
        grid-column: auto !important;
        max-width: 100% !important;
    }
    
    .stat-card {
        min-height: 180px !important;
        padding: 20px !important;
    }
}



/* Se ci sono problemi con il titolo della sezione */
@media (max-width: 768px) {
    .section-imp h2 {
        font-size: 1.8rem !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 480px) {
    .section-imp h2 {
        font-size: 1.6rem !important;
        margin-bottom: 25px !important;
        padding: 0 15px !important;
    }
}
/* ============================================================
   SEZIONE "LO QUE CAMBIA" - RESPONSIVE
   ============================================================ */

/* Stili base per la sezione (se non esistono già) */
.comparison-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #2C5F7D 0%, #1E4A5F 100%);
    color: white;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.comparison-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.comparison-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.comparison-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.comparison-card.without h3 {
    color: #FF6B6B;
}

.comparison-card.with h3 {
    color: #4ECDC4;
}

.comparison-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-card li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.5;
}

.comparison-card li i {
    margin-right: 12px;
    margin-top: 2px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.comparison-card.without li i {
    color: #FF6B6B;
}

.comparison-card.with li i {
    color: #4ECDC4;
}

/* ============================================================
   RESPONSIVE MOBILE - LAYOUT VERTICALE
   ============================================================ */

@media (max-width: 768px) {
    .comparison-section {
        padding: 50px 0 !important;
    }
    
    /* Titolo principale mobile */
    .comparison-section h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 20px !important;
        margin-bottom: 30px !important;
    }
    
    /* Grid a 1 colonna su mobile */
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 30px !important;
        padding: 0 20px !important;
    }
    
    /* Carte mobile */
    .comparison-card {
        padding: 25px 20px !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
    }
    
    .comparison-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 18px !important;
        text-align: center !important;
    }
    
    .comparison-card li {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        padding-right: 10px !important;
    }
    
    .comparison-card li i {
        margin-right: 10px !important;
        font-size: 1rem !important;
        margin-top: 1px !important;
    }
}

/* ============================================================
   MOBILE PICCOLI - SOTTO 480px
   ============================================================ */

@media (max-width: 480px) {
    .comparison-section {
        padding: 40px 0 !important;
    }
    
    .comparison-section h2 {
        font-size: 1.6rem !important;
        padding: 0 15px !important;
        margin-bottom: 25px !important;
    }
    
    .comparison-grid {
        gap: 18px !important;
        padding: 0 15px !important;
    }
    
    .comparison-card {
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }
    
    .comparison-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }
    
    .comparison-card li {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
        padding-right: 8px !important;
    }
    
    .comparison-card li i {
        margin-right: 8px !important;
        font-size: 0.95rem !important;
    }
}

/* ============================================================
   TABLET - LAYOUT ORIGINALE MA ADATTATO
   ============================================================ */

@media (min-width: 769px) and (max-width: 992px) {
    .comparison-section {
        padding: 60px 0 !important;
    }
    
    .comparison-section h2 {
        font-size: 2rem !important;
        padding: 0 30px !important;
        margin-bottom: 35px !important;
    }
    
    /* Mantieni 2 colonne ma con gap ridotto */
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
        padding: 0 30px !important;
    }
    
    .comparison-card {
        padding: 25px !important;
        border-radius: 14px !important;
    }
    
    .comparison-card h3 {
        font-size: 1.4rem !important;
        margin-bottom: 18px !important;
    }
    
    .comparison-card li {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }
}

/* ============================================================
   MIGLIORAMENTI ACCESSIBILITÀ
   ============================================================ */

/* Focus states per navigazione da tastiera */
@media (max-width: 768px) {
    .comparison-card:focus {
        outline: 2px solid #4ECDC4;
        outline-offset: 2px;
    }
    
    /* Contrasto migliorato per mobile */
    .comparison-card {
        background: rgba(255, 255, 255, 0.15) !important;
    }
    
    .comparison-card.without {
        border-left: 4px solid #FF6B6B !important;
    }
    
    .comparison-card.with {
        border-left: 4px solid #4ECDC4 !important;
    }
}

/* ============================================================
   ANIMAZIONI OPZIONALI PER MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .comparison-card {
        animation: fadeInUp 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .comparison-card:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .comparison-card:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Riduci animazioni per utenti con preferenze di accessibilità */
@media (prefers-reduced-motion: reduce) {
    .comparison-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
   /* ============================================================
      11. EXPERIENCE GRID SECTION
      ============================================================ */
   
   .experience-grid {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: 32px;
   }
   
   .experience-card {
       background-color: #fff;
       border-radius: 16px;
       padding: 32px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       transition: all 0.5s ease;
       position: relative;
       overflow: hidden;
   }
   
   .experience-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
   }
   
   .experience-icon {
       width: 80px;
       height: 80px;
       border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 32px;
       margin-bottom: 24px;
       transition: all 0.5s ease;
   }
   
   .experience-card:hover .experience-icon {
       transform: rotate(0) scale(1.1);
   }
   
   .experience-card h4 {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 16px;
       transition: color 0.3s ease;
   }
   
   .experience-card p {
       color: #666;
       margin-bottom: 24px;
   }
   
   .experience-button {
       width: 100%;
       padding: 12px 24px;
       border-radius: 12px;
       border: none;
       color: #fff;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s ease;
       opacity: 0;
       transform: translateY(16px);
       font-family: 'Inter', sans-serif;
   }
   
   .experience-card:hover .experience-button {
       opacity: 1;
       transform: translateY(0);
   }
   
   /* ============================================================
      12. IMPACT SECTION
      ============================================================ */
   
   .section-imp {
       background-color: #F0F9FF;
       padding: 80px 0;
   }
   
   .stats-grid-imp {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 22px;
       height: 300px;
   }
   
   .stat-card {
       width: 80%;
       height: 100%;
       background-color: #fff;
       border-radius: 12px;
       padding: 24px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
   }
   
   .stat-card .icon-wrapper {
       width: 64px;
       height: 64px;
       border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 16px;
       font-size: 24px;
       transform: rotate(-12deg);
       transition: transform 0.3s ease;
   }
   
   .stat-card:hover .icon-wrapper {
       transform: rotate(0);
   }
   
   .stat-card h3 {
       font-size: 1.25rem;
       margin-bottom: 12px;
       font-weight: 600;
   }
   
   .impact-description {
       max-width: 768px;
       margin: 64px auto 0;
       text-align: center;
   }
   
   .impact-description p {
       font-size: 1.125rem;
       color: #666;
   }
   
   /* Colors for + symbol and numbers */
   .stat-card h3 .plus-symbol {
       color: #2d3748; 
       font-size: 40px; 
   }
   
   .stat-card h3 .number {
       color: #04A9E3;
       font-size: 40px; 
   }
   
   .stat-card h3 .countries-text {
       color: #04A9E3; 
       font-size: 40px; 
   }
   
   /* ============================================================
      13. PURPOSE SECTION
      ============================================================ */
 /* ============================================================
   PURPOSE SECTION - COMPLETE FIX
   ============================================================ */

.purpose-section {
    padding: 80px 0;
    background-color: #fff;
    margin-bottom: 4rem;
}

.purpose-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.purpose-section h2 {
    font-size: 2.5rem;
    color: #0a6888;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 700;
    line-height: 1.2;
}

.purpose-flow {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Cambiato da flex-start a stretch */
    position: relative;
    margin-top: 64px;
    gap: 20px;
}

/* Línea de conexión entre las cards */
.purpose-flow::before {
    content: '';
    position: absolute;
    top: 80px; /* Posición de la línea a la altura de los iconos */
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(to right, #E1455C, #14A8E1, #FDB913, #4DAC5E, #0A6888);
    transform: translateY(-50%);
    z-index: 0;
}

.purpose-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 18%;
    text-align: center;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 220px; /* Altezza minima fissa */
    height: auto;
}

.purpose-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Contenedores de iconos con colores específicos para cada step */
.purpose-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    font-size: 24px;
    transition: transform 0.3s ease;
    z-index: 3;
    position: relative;
}

.purpose-card:hover .purpose-icon-wrapper {
    transform: rotate(0);
}

/* Colores específicos para cada step */
.purpose-card:nth-child(1) .purpose-icon-wrapper {
    background-color: #fde8e8;
    color: #E1455C;
}

.purpose-card:nth-child(2) .purpose-icon-wrapper {
    background-color: #e8f3ff;
    color: #14A8E1;
}

.purpose-card:nth-child(3) .purpose-icon-wrapper {
    background-color: #fef7e6;
    color: #FDB913;
}

.purpose-card:nth-child(4) .purpose-icon-wrapper {
    background-color: #e6f4ea;
    color: #4DAC5E;
}

.purpose-card:nth-child(5) .purpose-icon-wrapper {
    background-color: #eef0f5;
    color: #0A6888;
}

.purpose-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: center;
}

/* Colores para los títulos */
.purpose-card:nth-child(1) h3 {
    color: #E1455C;
}

.purpose-card:nth-child(2) h3 {
    color: #14A8E1;
}

.purpose-card:nth-child(3) h3 {
    color: #FDB913;
}

.purpose-card:nth-child(4) h3 {
    color: #4DAC5E;
}

.purpose-card:nth-child(5) h3 {
    color: #0A6888;
}

.purpose-card p {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1; /* Il testo occupa lo spazio rimanente */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design para Purpose Section */
@media (max-width: 991.98px) {
    .purpose-flow {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
        gap: 20px;
    }

    .purpose-card {
        width: auto !important;
        min-width: 0;
        flex: none !important;
        margin: 0;
    }

    .purpose-card p {
        white-space: normal !important;
        text-align: center;
        width: 100%;
        min-width: 0;
    }

    .purpose-flow::before {
        display: none;
    }

    .purpose-section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    .purpose-card {
        padding: 20px;
    }

    .purpose-card h3 {
        font-size: 1.1rem;
    }

    .purpose-card p {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .purpose-section h2 {
        font-size: 1.75rem;
        padding: 0 20px;
    }

    .purpose-icon-wrapper {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
}
   /* ============================================================
      14. WHY CHOOSE US SECTION
      ============================================================ */
   
   .why-choose-us {
       padding: 80px 0;
       background-color: #f0f9ff;
   }
   
   .why-choose-us h2 {
       font-size: 2.5rem;
       color: #0A6888;
       text-align: center;
       margin-bottom: 10px;
       font-weight: bold;
   }
   
   .why-choose-us .brand-name {
       color: #14A8E1;
       font-weight: 600;
   }
   
   .why-choose-us .highlight-text {
       color: #14A8E1;
       font-weight: 600;
   }
   
   .why-choose-us h3 {
       text-align: center;
       color: #0A6888;
       font-size: 1.2rem;
       line-height: 1.6;
       margin-bottom: 40px;
   }
   
   .why-choose-us .features {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 30px;
       margin-top: 40px;
   }
   
   .why-choose-us .feature {
       background-color: #fff;
       padding: 30px;
       border-radius: 10px;
       text-align: center;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .why-choose-us .feature:hover {
       transform: translateY(-10px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   }
   
   .why-choose-us .feature i {
       font-size: 3rem;
       color: #14A8E1;
       margin-bottom: 20px;
   }
   
   .why-choose-us .feature h3 {
       font-size: 1.5rem;
       color: #333;
       margin-bottom: 15px;
       text-align: center;
   }
   
   .why-choose-us .feature p {
       font-size: 1rem;
       color: #666;
       line-height: 1.6;
       text-align: center;
   }
   
   /* Bottom message styles */
   .bottom-message {
       text-align: center;
       padding-top: 4rem;
       padding-right: 1rem;
       padding-bottom: 8rem;
       padding-left: 1rem;
       background-color: #f0f9ff;
       border-radius: 8px;
   }
   
   .bottom-message-text {
       font-size: 2rem;
       line-height: 1.4;
       color: #0A6888;
       font-weight: 500;
       max-width: 900px;
       margin: 0 auto;
       position: relative;
   }
   
   .bottom-message-text::before,
   .bottom-message-text::after {
       content: '"';
       font-size: 3rem;
       color: #14A8E1;
       position: absolute;
       opacity: 0.3;
   }
   
   .bottom-message-text::before {
       top: -20px;
       left: -20px;
   }
   
   .bottom-message-text::after {
       bottom: -40px;
       right: -20px;
   }
   
   /* ============================================================
      15. COMPARISON SECTION
      ============================================================ */
   
   .comparison-section {
       background-color: #0A6888;
       padding: 80px 0;
       color: white;
   }
   
   .comparison-section h2 {
       color: white;
       text-align: center;
       margin-bottom: 50px;
       font-size: 2.5rem;
   }
   
   .comparison-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 30px;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   @media (min-width: 768px) {
       .comparison-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .comparison-card {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 15px;
       padding: 30px;
   }
   
   .comparison-card h3 {
       font-size: 1.5rem;
       margin-bottom: 20px;
       color: white;
   }
   
   .comparison-card.without h3 {
       color: #FFA3A3;
   }
   
   .comparison-card.with h3 {
       color: #69DB7C;
   }
   
   .comparison-card ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   .comparison-card ul li {
       display: flex;
       align-items: flex-start;
       margin-bottom: 20px;
       line-height: 1.5;
   }
   
   .comparison-card ul li i {
       margin-right: 15px;
       margin-top: 4px;
   }
   
   .comparison-card.without ul li i {
       color: #FFA3A3;
   }
   
   .comparison-card.with ul li i {
       color: #69DB7C;
   }
   
   /* ============================================================
      16. INTEGRATION SECTION
      ============================================================ */
   
   .integration-section {
       position: relative;
       overflow: hidden;
       padding: 5rem 0;
       background: linear-gradient(180deg, #F0F9FF 0%, #E1F5FE 100%);
   }
   
   /* Grid Layout */
   .integration-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 4rem;
       align-items: center;
       position: relative;
       z-index: 10;
   }
   
   /* Left Content */
   .integration-content-left {
       display: flex;
       flex-direction: column;
       gap: 2rem;
   }
   
   .integration-content-spacing {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   /* Main Title */
   .integration-main-title {
       font-size: 2.5rem;
       font-weight: 700;
       color: #0A6888;
       line-height: 1.2;
       margin-bottom: 1rem;
   }
   
   .integration-main-title__highlight {
       position: relative;
       display: inline-block;
       white-space: nowrap;
   }
   
   /* Description */
   .integration-description {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .integration-description-primary {
       font-size: 1.25rem;
       color: #374151;
       line-height: 1.6;
   }
   
   .integration-description-primary strong {
       color: #0A6888;
   }
   
   .integration-description-secondary {
       font-size: 1.125rem;
       color: #6b7280;
   }
   
   /* Benefits */
   .integration-benefits {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       margin-top: 1rem;
   }
   
   .integration-benefit-card {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(8px);
       border-radius: 0.75rem;
       border: 1px solid rgba(34, 168, 221, 0.2);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .integration-benefit-card:hover {
       transform: translateY(-3px);
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   }
   
   .integration-benefit-card__icon {
       flex-shrink: 0;
       width: 3rem;
       height: 3rem;
       background-color: #0A6888;
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       box-shadow: 0 4px 6px rgba(10, 104, 136, 0.2);
   }
   
   .integration-benefit-card__icon svg {
       width: 1.5rem;
       height: 1.5rem;
   }
   
   .integration-benefit-card__title {
       font-weight: 600;
       color: #0A6888;
       margin-bottom: 0.25rem;
   }
   
   .integration-benefit-card__description {
       font-size: 0.875rem;
       color: #6b7280;
   }
   
   /* CTA Buttons */
   .integration-cta-buttons {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       margin-top: 1rem;
   }
   
   @media (min-width: 640px) {
       .integration-cta-buttons {
           flex-direction: row;
       }
   }
   
   .integration-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 1rem 2rem;
       border-radius: 5px;
       font-weight: 600;
       font-size: 1rem;
       cursor: pointer;
       transition: all 0.3s ease;
       border: none;
       text-decoration: none;
   }
   
   .integration-btn--primary {
       background-color: #0A6888;
       color: white;
       box-shadow: 0 4px 10px rgba(10, 104, 136, 0.3);
   }
   
   .integration-btn--primary:hover {
       background-color: #085670;
       box-shadow: 0 6px 15px rgba(10, 104, 136, 0.4);
   }
   
   .integration-btn--secondary {
       border: 2px solid #0A6888;
       color: #0A6888;
       background: transparent;
   }
   
   .integration-btn--secondary:hover {
       background-color: rgba(10, 104, 136, 0.1);
   }
   
   .integration-btn__icon {
       width: 1.25rem;
       height: 1.25rem;
       margin-left: 0.5rem;
       transition: transform 0.3s ease;
   }
   
   .integration-btn--primary:hover .integration-btn__icon {
       transform: translateX(0.25rem);
   }
   
   /* Right Content */
   .integration-content-right {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   .integration-image {
       position: relative;
       margin-bottom: 2rem;
       width: 100%;
   }
   
   .integration-image__img {
       width: 100%;
       height: auto;
       object-fit: contain;
       display: block;
   }
   
   .integration-info {
       text-align: center;
       width: 100%;
       margin-top: 1rem;
   }
   
   .integration-info__title {
       font-size: 1.5rem;
       font-weight: 700;
       color: #0A6888;
       margin-bottom: 0.5rem;
       text-align: center;
   }
   
   .integration-info__description {
       color: #6b7280;
       text-align: center;
       white-space: nowrap;
   }
   
   /* ============================================================
      17. SUCCESS STORIES SECTION
      ============================================================ */
   
   .success-stories {
       background-color: #f0f9ff;
       padding: 80px 0;
   }
   
   .success-stories h2 {
       color: #0A6888;
       margin-bottom: 48px;
       font-size: 2.5rem;
       text-align: center;
       font-weight: bold;
   }
   
   .stories-carousel {
       position: relative;
       max-width: 1000px;
       margin: 0 auto 60px;
   }
   
   .carousel-button {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background-color: #ffffff;
       border: 1px solid #E5E7EB;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       color: #14A8E1;
       cursor: pointer;
       z-index: 10;
       transition: all 0.3s ease;
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   }
   
   .carousel-button:hover {
       background-color: #14A8E1;
       color: #ffffff;
       border-color: #14A8E1;
   }
   
   .carousel-button.prev {
       left: -20px;
   }
   
   .carousel-button.next {
       right: -20px;
   }
   
   .stories-container {
       overflow: hidden;
   }
   
   .story-slide {
       display: flex;
       transition: transform 0.5s ease;
   }
   
   .story-card {
       flex: 0 0 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0;
       background-color: #fff;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       min-height: 400px;
       height: auto;
       overflow: visible;
   }
   
   .story-content {
       padding: 40px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       height: auto;
       max-height: 450px;
       overflow-y: auto;
       padding-right: 10px;
   }
   
   .story-quote {
       font-size: 1.25rem;
       color: #333;
       margin-bottom: 24px;
       position: relative;
       font-style: italic;
       padding-left: 40px;
   }
   
   .story-quote::before {
       content: '';
       position: absolute;
       top: -10px;
       left: -10px;
       width: 40px;
       height: 40px;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314A8E1'%3E%3Cpath d='M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z'/%3E%3C/svg%3E");
       background-size: contain;
       background-repeat: no-repeat;
       opacity: 0.2;
   }
   
   .story-author {
       font-weight: bold;
       color: #0A6888;
       margin-bottom: 4px;
   }
   
   .story-role, .story-institution {
       color: #666;
       margin: 0;
   }
   
   .story-image {
       position: relative;
       height: 100%;
   }
   
   .story-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .story-image::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(to bottom, rgba(10, 104, 136, 0.2), transparent);
   }
   
   .stories-dots {
       display: flex;
       justify-content: center;
       margin-top: 30px;
   }
   
   .story-dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background-color: #D1D5DB;
       margin: 0 6px;
       padding: 0;
       border: none;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .story-dot:hover {
       background-color: #14A8E1;
   }
   
   .story-dot.active {
       background-color: #14A8E1;
       transform: scale(1.2);
   }
   
   .learn-more-btn {
       display: inline-block;
       background-color: #14A8E1;
       color: white;
       padding: 12px 24px;
       border-radius: 5px;
       text-decoration: none;
       margin-top: 24px;
       font-weight: bold;
       border: none;
       cursor: pointer;
       transition: none;
   }
   
   .learn-more-btn:hover {
       background-color: #14A8E1;
       color: white;
   }
/* Sostituisci la tua media query esistente con questa: */

@media (max-width: 768px) {
    /* Hide only "Learn More" button on mobile */
    .story-card .btn,
    .story-card button,
    .story-card a.btn,
    .stories-container .btn,
    .stories-container button,
    .stories-container a.btn,
    .success-stories .story-card .btn,
    .success-stories .story-card button,
    .success-stories .story-card a.btn,
    .learn-more-btn {  /* ← AGGIUNGI QUESTA RIGA */
        display: none !important;
    }
}
   /* Modal Styles */
   .modal {
       display: none;
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgba(0,0,0,0.4);
   }
   
   .modal-content {
       background-color: #fefefe;
       margin: 10% auto;
       padding: 30px;
       border: none;
       width: 80%;
       max-width: 600px;
       border-radius: 10px;
       box-shadow: 0 8px 16px rgba(20, 168, 225, 0.1);
   }
   
   .modal-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       padding-bottom: 15px;
       border-bottom: 1px solid rgba(20, 168, 225, 0.1);
   }
   
   .modal-header h3 {
       color: #0A6888;
       font-size: 1.8rem;
       margin: 0;
       font-weight: 600;
   }
   
   .close-modal {
       color: #666;
       font-size: 28px;
       font-weight: 300;
       cursor: pointer;
       background: none;
       border: none;
       padding: 0;
       transition: color 0.2s ease;
   }
   
   .close-modal:hover,
   .close-modal:focus {
       color: #14A8E1;
       text-decoration: none;
   }
   
   .modal-body {
       color: #666;
       line-height: 1.6;
   }
   
   .modal-body h4 {
       color: #14A8E1;
       margin-top: 25px;
       margin-bottom: 15px;
       font-size: 1.2rem;
       font-weight: 500;
   }
   
   .modal-body ul {
       list-style-type: none;
       padding-left: 20px;
       margin-top: 15px;
   }
   
   .modal-body li {
       margin-bottom: 12px;
       display: flex;
       align-items: flex-start;
       position: relative;
       padding-left: 15px;
   }
   
   .modal-body li::before {
       content: '•';
       color: #14A8E1;
       font-weight: bold;
       position: absolute;
       left: 0;
   }
   
   /* ============================================================
      18. METHODOLOGY SECTION (FROM FILE 4)
      ============================================================ */
   
   /* Methodology section specific positioning for iPad */
   section.metodo-pt-32.metodo-pb-16.metodo-bg-white {
       padding-top: 8rem;
       padding-bottom: 4rem;
       background-color: white;
   }
   
   .metodo-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1rem;
   }
   
   .metodo-mx-auto {
       margin-left: auto;
       margin-right: auto;
   }
   
   .metodo-px-4 {
       padding-left: 1rem;
       padding-right: 1rem;
   }
   
   /* Typography */
   .metodo-text-4xl {
       font-size: 2.25rem;
       line-height: 2.5rem;
   }
   
   .metodo-text-2xl {
       font-size: 1.5rem;
       line-height: 2rem;
   }
   
   .metodo-text-xl {
       font-size: 1.25rem;
       line-height: 1.75rem;
   }
   
   .metodo-font-bold {
       font-weight: 700;
   }
   
   .metodo-text-primary-dark {
       color: #0A6888;
   }
   
   .metodo-text-gray-600 {
       color: #4B5563;
   }
   
   .metodo-text-gray-700 {
       color: #374151;
   }
   
   /* Spacing */
   .metodo-mb-12 {
       margin-bottom: 3rem;
   }
   
   .metodo-mb-24 {
       margin-bottom: 6rem;
   }
   
   .metodo-mb-4 {
       margin-bottom: 1rem;
   }
   
   .metodo-mb-6 {
       margin-bottom: 1.5rem;
   }
   
   /* Tabs */
   .metodo-tabs {
       display: flex;
       justify-content: center;
       margin: 2rem 0;
   }
   
   .metodo-tabs-container {
       display: inline-flex;
       background-color: #f8f9fa;
       padding: 0.5rem;
       border-radius: 50px;
       gap: 0.5rem;
       box-shadow: 0 2px 10px rgba(0,0,0,0.05);
   }
   
   .metodo-tab-button {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.25rem;
       border: none;
       background: none;
       border-radius: 25px;
       color: #666;
       cursor: pointer;
       transition: all 0.3s ease;
       font-size: 0.875rem;
       white-space: nowrap;
   }
   
   .metodo-tab-button.active {
       background-color: white;
       color: #14A8E1;
       box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   }
   
   .metodo-tab-button:hover:not(.active) {
       color: #14A8E1;
   }
   
   .metodo-tab-icon {
       width: 1.25rem;
       height: 1.25rem;
   }
   
   .metodo-tab-content {
       display: none;
   }
   
   .metodo-tab-content.active {
       display: block;
   }
   
   /* Grid layouts */
   .metodo-grid {
       display: grid;
   }
   
   .metodo-md-grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   
   .metodo-gap-8 {
       gap: 2rem;
   }
   
   /* Cards */
   .metodo-bg-white {
       background-color: white;
   }
   
   .metodo-rounded-2xl {
       border-radius: 1rem;
   }
   
   .metodo-p-8 {
       padding: 2rem;
   }
   
   .metodo-shadow-lg {
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   }
   
   /* Flex utilities */
   .metodo-flex {
       display: flex;
   }
   
   .metodo-items-center {
       align-items: center;
   }
   
   .metodo-justify-center {
       justify-content: center;
   }
   
   .metodo-gap-3 {
       gap: 0.75rem;
   }
   
   /* Width/Height utilities */
   .metodo-w-16 {
       width: 4rem;
   }
   
   .metodo-h-16 {
       height: 4rem;
   }
   
   .metodo-w-2 {
       width: 0.5rem;
   }
   
   .metodo-h-2 {
       height: 0.5rem;
   }
   
   .metodo-rounded-full {
       border-radius: 9999px;
   }
   
   /* Text alignment */
   .metodo-text-center {
       text-align: center;
   }
   
   .metodo-max-w-4xl {
       max-width: 56rem;
   }
   
   /* Method Cards */
   .method-cards-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 2rem;
       margin-top: 3rem;
   }
   
   .method-card {
       background: #F0FBFF;
       border-radius: 1rem;
       padding: 2rem;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
   }
   
   .method-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   }
   
   .method-card-header {
       text-align: center;
       margin-bottom: 2rem;
   }
   
   .method-card-title {
       color: #0a6888;
       font-size: 1.5rem;
       font-weight: bold;
       margin-bottom: 0.5rem;
   }
   
   .method-card-subtitle {
       color: #6b7280;
       font-size: 0.875rem;
       margin-bottom: 1rem;
   }
   
   .method-card-phases {
       color: #6b7280;
       font-size: 0.875rem;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }
   
   .method-card-clock {
       width: 1.25rem;
       height: 1.25rem;
       color: #9ca3af;
   }
   
   /* Journey section */
   .journey-container {
       position: relative;
       background: linear-gradient(to bottom right, #f0f9ff, white);
       border-radius: 24px;
       padding: 3rem 4rem;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       overflow: visible;
       margin-bottom: 5rem;
       margin-left: 1rem;
       margin-right: 1rem;
   }
   
   .journey-bg-pattern {
       position: absolute;
       inset: 0;
       background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
       background-size: 16px 16px;
       opacity: 0.05;
   }
   
   .journey-connection {
       display: none;
   }
   
   /* Impact grid for methodology section */
   .metodo-impact-grid {
       display: flex !important;
       flex-direction: row !important;
       justify-content: space-between !important;
       gap: 2rem !important;
       margin-top: 3rem !important;
       width: 100% !important;
   }
   
   .metodo-impact-section {
       flex: 1 1 49% !important;
       max-width: 49% !important;
       background-color: #F0FBFF !important;
       padding: 2rem !important;
       border-radius: 1rem !important;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
   }
   
   .metodo-impact-title {
       font-size: 1.5rem !important;
       margin-bottom: 1.5rem !important;
       text-align: center !important;
       width: 100% !important;
       display: block !important;
       color: #0A6888;
   }
   
   .metodo-impact-list {
       display: flex !important;
       flex-direction: column !important;
       gap: 1rem !important;
   }
   
   .metodo-impact-item {
       display: flex !important;
       align-items: center !important;
       gap: 0.75rem !important;
       font-size: 1rem !important;
       line-height: 1.5 !important;
   }
   
   .metodo-impact-section:hover {
       transform: translateY(-5px) !important;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
       transition: all 0.3s ease !important;
   }
   
   /* ============================================================
      19. PLATFORM BE SECTION 
      ============================================================ */
   
   .platformbe-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1rem;
   }
   
   /* Hero Section */
   .platformbe-hero-section {
       position: relative;
       height: 80vh;
       background: linear-gradient(to bottom right, #0A6888, #14A8E1);
       overflow: hidden;
       color: white;
   }
   
   .platformbe-bg-grid-pattern {
       position: absolute;
       inset: 0;
       background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
       background-size: 20px 20px;
       opacity: 0.1;
   }
   
   .platformbe-hero-content {
       height: 100%;
       display: flex;
       align-items: center;
       margin-top: 12rem;
   }
   
   .platformbe-hero-text {
       max-width: 42rem;
       position: relative;
       z-index: 10;
       color: white;
   }
   
   .platformbe-hero-title {
       font-size: 3rem;
       font-weight: 700;
       margin-bottom: 1.5rem;
   }
   
   .platformbe-hero-description {
       font-size: 1.25rem;
       opacity: 0.9;
       margin-bottom: 2rem;
       color: white;
   }
   
   .platformbe-button-group {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
   }
   
   .platformbe-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 2rem;
       border-radius: 0.75rem;
       font-weight: 500;
       cursor: pointer;
       transition: background-color 0.3s;
       border: none;
   }
   
   .platformbe-btn-primary {
       background-color: white;
       color: #0A6888;
   }
   
   .platformbe-btn-primary:hover {
       background-color: rgba(255, 255, 255, 0.9);
   }
   
   .platformbe-btn-secondary {
       background-color: rgba(255, 255, 255, 0.1);
       color: white;
   }
   
   .platformbe-btn-secondary:hover {
       background-color: rgba(255, 255, 255, 0.2);
   }
   
   /* Purpose Section */
   .platformbe-purpose-section {
       padding: 6rem 0;
       background-color: white;
   }
   
   .platformbe-section-title {
       font-size: 2.25rem;
       font-weight: 700;
       color: #0A6888;
       text-align: center;
       margin-bottom: 4rem;
   }
   
   .platformbe-features-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 3rem;
   }
   
   @media (min-width: 768px) {
       .platformbe-features-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   .platformbe-feature-item {
       text-align: center;
   }
   
   .platformbe-feature-icon {
       width: 4rem;
       height: 4rem;
       margin: 0 auto 1.5rem;
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       transform: rotate(-12deg);
       transition: transform 0.3s;
   }
   
   .platformbe-feature-icon:hover {
       transform: rotate(0);
   }
   
   .platformbe-feature-icon svg {
       width: 2rem;
       height: 2rem;
   }
   
   .platformbe-feature-title {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 1rem;
   }
   
   .platformbe-feature-description {
       color: #4b5563;
   }
   
   /* Benefits Section */
   .platformbe-benefits-section {
       padding: 3rem 0 6rem;
       background-color: #F0F9FF;
   }
   
   .platformbe-benefits-section .platformbe-section-title {
       margin-bottom: 2rem;
   }
   
   .platformbe-benefits-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 3rem;
   }
   
   @media (min-width: 768px) {
       .platformbe-benefits-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .platformbe-benefit-card {
       background-color: white;
       border-radius: 1rem;
       padding: 1.5rem;
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   }
   
   .platformbe-benefit-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       margin-bottom: 1rem;
   }
   
   .platformbe-benefit-icon {
       width: 3rem;
       height: 3rem;
       background-color: rgba(20, 168, 225, 0.1);
       border-radius: 0.75rem;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .platformbe-benefit-icon svg {
       width: 1.5rem;
       height: 1.5rem;
       color: #14A8E1;
   }
   
   .platformbe-benefit-title {
       font-size: 1.5rem;
       font-weight: 700;
   }
   
   .platformbe-benefit-list {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .platformbe-benefit-item {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
   }
   
   .platformbe-check-icon {
       width: 1.5rem;
       height: 1.5rem;
       background-color: rgba(77, 172, 94, 0.1);
       border-radius: 9999px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   
   .platformbe-check-icon svg {
       width: 1rem;
       height: 1rem;
       color: #4DAC5E;
   }
   
   .platformbe-benefit-text {
       color: #4b5563;
   }
   
   /* How it works Section */
   .platformbe-how-section {
       padding: 6rem 0;
       background-color: white;
   }
   
   .platformbe-video-container {
       max-width: 64rem;
       margin: 0 auto;
   }
   
   .platformbe-video-player {
       position: relative;
       aspect-ratio: 16 / 9;
       background-color: #111827;
       border-radius: 1rem;
       overflow: hidden;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       margin-bottom: 2rem;
   }
   
   .platformbe-video-player video {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .platformbe-video-controls {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .platformbe-play-button {
       background-color: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(4px);
       padding: 1rem;
       border-radius: 9999px;
       border: none;
       cursor: pointer;
       transition: background-color 0.3s;
   }
   
   .platformbe-play-button:hover {
       background-color: rgba(255, 255, 255, 0.3);
   }
   
   .platformbe-play-button svg {
       width: 2rem;
       height: 2rem;
       color: white;
   }
   
   .platformbe-video-nav {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1rem;
   }
   
   .platformbe-video-nav-button {
       padding: 1rem;
       border-radius: 0.75rem;
       text-align: left;
       transition: all 0.3s;
       border: none;
       cursor: pointer;
   }
   
   .platformbe-video-nav-button.platformbe-active {
       background-color: #14A8E1;
       color: white;
   }
   
   .platformbe-video-nav-button:not(.platformbe-active) {
       background-color: #f9fafb;
   }
   
   .platformbe-video-nav-button:not(.platformbe-active):hover {
       background-color: #f3f4f6;
   }
   
   /* AI Section */
   .platformbe-ai-section {
       padding: 6rem 0;
       background: linear-gradient(to bottom right, #0A6888, #14A8E1);
       color: white;
   }
   
   .platformbe-ai-content {
       max-width: 64rem;
       margin: 0 auto;
       text-align: center;
       color: white;
   }
   
   .platformbe-ai-icon {
       width: 4rem;
       height: 4rem;
       margin: 0 auto 2rem;
       animation: platformbe-pulse 2s infinite;
   }
   
   @keyframes platformbe-pulse {
       0%, 100% {
           opacity: 1;
       }
       50% {
           opacity: 0.5;
       }
   }
   
   .platformbe-ai-title {
       font-size: 2.25rem;
       font-weight: 700;
       margin-bottom: 1.5rem;
       color: white;
   }
   
   .platformbe-ai-description {
       font-size: 1.25rem;
       margin-bottom: 3rem;
       opacity: 0.9;
       color: white;
   }
   
   .platformbe-ai-features {
       display: grid;
       grid-template-columns: 1fr;
       gap: 2rem;
       margin-bottom: 3rem;
       color: white;
   }
   
   /* ============================================================
      20. SERVICES SECTION
      ============================================================ */
   
   .min-h-screen {
       min-height: 100vh;
   }
   
   .pt-20 {
       padding-top: 5rem;
   }
   
   .py-24 {
       padding-top: 6rem;
       padding-bottom: 6rem;
   }
   
   /* Gradientes y colores */
   .bg-gradient-primary {
       background: linear-gradient(to bottom right, #0A6888, #14A8E1);
   }
   
   .bg-light-blue {
       background-color: #F0F9FF;
   }
   
   .text-primary-dark {
       color: #0A6888;
   }
   
   .text-primary {
       color: #14A8E1;
   }
   
   .text-success {
       color: #4DAC5E;
   }
   
   .text-warning {
       color: #F8C72F;
   }
   
   .text-danger {
       color: #E1455C;
   }
   
   /* Tarjetas y elementos */
   .service-card {
       background-color: white;
       border-radius: 1rem;
       padding: 2rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       transition: all 0.3s;
       height: 100%;
   }
   
   .service-card:hover {
       box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
   }
   
   .icon-container {
       width: 4rem;
       height: 4rem;
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       transform: rotate(-12deg);
       transition: transform 0.3s;
   }
   
   .service-card:hover .icon-container {
       transform: rotate(0);
   }
   
   .icon-container svg {
       width: 2rem;
       height: 2rem;
   }
   
   .feature-item {
       display: flex;
       align-items: center;
       margin-bottom: 0.75rem;
   }
   
   .feature-item i {
       margin-right: 0.75rem;
   }
   
   /* Journey steps */
   .journey-step {
       background-color: white;
       border-radius: 0.75rem;
       padding: 1.5rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       transition: all 0.3s;
       position: relative;
       height: 100%;
       margin-bottom: 1.5rem;
   }
   
   .journey-step:hover {
       box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
       transform: translateY(-0.5rem);
   }
   
   .step-number {
       position: absolute;
       top: -1rem;
       left: -1rem;
       width: 2rem;
       height: 2rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: bold;
       font-size: 0.875rem;
   }
   
   .journey-icon {
       width: 4rem;
       height: 4rem;
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
       transform: rotate(-12deg);
       transition: transform 0.3s;
   }
   
   .journey-step:hover .journey-icon {
       transform: rotate(0);
   }
   
   /* Why BeChallenge */
   .feature-box {
       background-color: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(4px);
       padding: 2rem;
       border-radius: 0.75rem;
       height: 100%;
       margin-bottom: 1.5rem;
   }
   
   /* Botones */
   .btn-primary-custom {
       background-color: #14A8E1;
       color: white;
       padding: 0.75rem 2rem;
       border-radius: 0.75rem;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       border: none;
       transition: background-color 0.3s;
   }
   
   .btn-primary-custom:hover {
       background-color: #0A6888;
       color: white;
       text-decoration: none;
   }
   
   .btn-primary-custom i {
       margin-left: 0.5rem;
   }
   
   .btn-white-custom {
       background-color: white;
       color: #0A6888;
       padding: 0.75rem 2rem;
       border-radius: 0.75rem;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       border: none;
       transition: background-color 0.3s;
   }
   
   .btn-white-custom:hover {
       background-color: rgba(255, 255, 255, 0.9);
       color: #0A6888;
       text-decoration: none;
   }
   
   .btn-white-custom i {
       margin-left: 0.5rem;
   }
   
   /* Ajustes para Bootstrap 4 */
   .display-5 {
       font-size: 2.5rem;
       font-weight: 300;
       line-height: 1.2;
   }
   
   .opacity-90 {
       opacity: 0.9;
   }
   
   .opacity-80 {
       opacity: 0.8;
   }
   
   /* Aseguramos que el texto en secciones con fondo azul sea blanco */
   .bg-gradient-primary h1,
   .bg-gradient-primary h2,
   .bg-gradient-primary h3,
   .bg-gradient-primary p,
   .bg-gradient-primary .lead {
       color: white;
   }
   
   .feature-box h3,
   .feature-box p {
       color: white;
   }
   
   /* ============================================================
      21. CONTACT SECTION
      ============================================================ */
   
   .contact-container {
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1rem;
   }
   
   .contact-text-center {
       text-align: center;
   }
   
   .contact-mx-auto {
       margin-left: auto;
       margin-right: auto;
   }
   
   .contact-space-y-2 > * + * {
       margin-top: 0.5rem;
   }
   
   .contact-space-y-4 > * + * {
       margin-top: 1rem;
   }
   
   .contact-space-y-6 > * + * {
       margin-top: 1.5rem;
   }
   
   .contact-mb-2 {
       margin-bottom: 0.5rem;
   }
   
   .contact-mb-4 {
       margin-bottom: 1rem;
   }
   
   .contact-mb-6 {
       margin-bottom: 1.5rem;
   }
   
   .contact-mb-8 {
       margin-bottom: 2rem;
   }
   
   .contact-mb-12 {
       margin-bottom: 3rem;
   }
   
   .contact-mt-8 {
       margin-top: 2rem;
   }
   
   .contact-mt-24 {
       margin-top: 6rem;
   }
   
   .contact-py-3 {
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
   }
   
   .contact-py-24 {
       padding-top: 6rem;
       padding-bottom: 6rem;
   }
   
   .contact-px-4 {
       padding-left: 1rem;
       padding-right: 1rem;
   }
   
   .contact-p-6 {
       padding: 1.5rem;
   }
   
   .contact-p-8 {
       padding: 2rem;
   }
   
   .contact-w-full {
       width: 100%;
   }
   
   .contact-max-w-3xl {
       max-width: 48rem;
   }
   
   .contact-max-w-4xl {
       max-width: 56rem;
   }
   
   .contact-rounded-xl {
       border-radius: 0.75rem;
   }
   
   .contact-rounded-2xl {
       border-radius: 1rem;
   }
   
   .contact-rounded-full {
       border-radius: 9999px;
   }
   
   .contact-shadow-lg {
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   }
   
   .contact-shadow-xl {
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   }
   
   /* Typography */
   .contact-text-sm {
       font-size: 0.875rem;
   }
   
   .contact-text-lg {
       font-size: 1.125rem;
   }
   
   .contact-text-xl {
       font-size: 1.25rem;
       color: white;
   }
   
   .contact-text-2xl {
       font-size: 1.5rem;
   }
   
   .contact-text-3xl {
       font-size: 1.875rem;
   }
   
   .contact-text-5xl {
       font-size: 3rem;
   }
   
   .contact-font-medium {
       font-weight: 500;
   }
   
   .contact-font-bold {
       font-weight: 700;
   }
   
   /* Colors */
   .contact-text-white {
       color: #fff;
   }
   
   .contact-text-gray-600 {
       color: #4B5563;
   }
   
   .contact-text-primary {
       color: #14A8E1;
   }
   
   .contact-text-primary-dark {
       color: #0A6888;
   }
   
   .contact-text-success {
       color: #4DAC5E;
   }
   
   .contact-bg-white {
       background-color: #fff;
   }
   
   .contact-bg-primary {
       background-color: #14A8E1;
   }
   
   .contact-bg-primary-light {
       background-color: #F0F9FF;
   }
   
   .contact-bg-success-light {
       background-color: rgba(77, 172, 94, 0.1);
   }
   
   .contact-wrapper {
       min-height: 100vh;
       padding-top: 5rem;
   }
   
   /* Hero section */
   .contact-hero {
       position: relative;
       padding: 6rem 0;
       background: #0088b4;
       overflow: hidden;
   }
   
   .contact-hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-image: radial-gradient(circle, #fff 1px, transparent 1px);
       background-size: 30px 30px;
       opacity: 0.1;
   }
   
   .contact-hero-content {
       position: relative;
       z-index: 10;
   }
   
   /* Contact cards */
   .contact-grid {
       display: grid;
       gap: 2rem;
   }
   
   .contact-gap-6 {
       gap: 1.5rem;
   }
   
   .contact-gap-8 {
       gap: 2rem;
   }
   
   @media (min-width: 768px) {
       .contact-grid-cols-3 {
           grid-template-columns: repeat(3, 1fr);
       }
       
       .contact-grid-cols-2 {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .contact-card {
       background-color: #fff;
       border-radius: 1rem;
       padding: 2rem;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }
   
   .contact-card:hover {
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
       transform: translateY(-4px);
   }
   
   .contact-card-icon-container {
       width: 4rem;
       height: 4rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       transform: rotate(-12deg);
       transition: transform 0.3s ease;
   }
   
   .contact-card:hover .contact-card-icon-container {
       transform: rotate(0);
   }
   
   .contact-card-icon {
       width: 2rem;
       height: 2rem;
   }
   
   .contact-card-title {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }
   
   .contact-card-description {
       color: #6B7280;
       margin-bottom: 1.5rem;
       font-size: 0.95rem;
   }
   
   .contact-card-action {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       color: #14A8E1;
       font-weight: 500;
       cursor: pointer;
       transition: color 0.3s ease;
       border: none;
       background: none;
       padding: 0;
       font-size: 1rem;
   }
   
   .contact-card-action:hover {
       color: #0A6888;
   }
   
   .contact-card-action svg {
       transition: transform 0.3s ease;
   }
   
   .contact-card-action:hover svg {
       transform: translateX(4px);
   }
   
   /* Form styles */
   .contact-form-group {
       margin-bottom: 1.5rem;
   }
   
   .contact-form-label {
       display: block;
       font-size: 0.875rem;
       font-weight: 500;
       color: #4B5563;
       margin-bottom: 0.5rem;
   }
   
   .contact-form-control {
       width: 100%;
       padding: 0.75rem 1rem;
       padding-left: 3rem;
       border-radius: 0.75rem;
       border: 1px solid #E5E7EB;
       outline: none;
       transition: all 0.3s ease;
       font-size: 1rem;
   }
   
   .contact-form-control:focus {
       border-color: #14A8E1;
       box-shadow: 0 0 0 3px rgba(20, 168, 225, 0.2);
   }
   
   .contact-form-select {
       width: 100%;
       padding: 0.75rem 1rem;
       border-radius: 0.75rem;
       border: 1px solid #E5E7EB;
       outline: none;
       transition: all 0.3s ease;
       font-size: 1rem;
       appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 1rem center;
       background-size: 1em;
   }
   
   .contact-form-select:focus {
       border-color: #14A8E1;
       box-shadow: 0 0 0 3px rgba(20, 168, 225, 0.2);
   }
   
   .contact-form-textarea {
       width: 100%;
       padding: 0.75rem 1rem;
       border-radius: 0.75rem;
       border: 1px solid #E5E7EB;
       outline: none;
       transition: all 0.3s ease;
       min-height: 120px;
       font-size: 1rem;
       font-family: inherit;
   }
   
   .contact-form-textarea:focus {
       border-color: #14A8E1;
       box-shadow: 0 0 0 3px rgba(20, 168, 225, 0.2);
   }
   
   .contact-input-group {
       position: relative;
   }
   
   .contact-input-icon {
       position: absolute;
       left: 1rem;
       top: 50%;
       transform: translateY(-50%);
       color: #9CA3AF;
   }
   
   .contact-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       border-radius: 0.75rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s ease;
       border: none;
       font-size: 1rem;
   }
   
   .contact-btn-primary {
       background-color: #14A8E1;
       color: white;
   }
   
   .contact-btn-primary:hover {
       background-color: #0A6888;
   }
   
   .contact-btn-link {
       background: none;
       color: #14A8E1;
       padding: 0;
   }
   
   .contact-btn-link:hover {
       color: #0A6888;
   }
   
   /* FAQ section */
   .contact-faq-item {
       background-color: #F0F9FF;
       border-radius: 0.75rem;
       padding: 1.5rem;
   }
   
   /* Success message */
   .contact-success-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 4rem;
       height: 4rem;
       background-color: rgba(77, 172, 94, 0.1);
       border-radius: 9999px;
       color: #4DAC5E;
       margin-bottom: 1.5rem;
   }
   
   /* Negative margin for cards */
   .contact-cards-container {
       position: relative;
       z-index: 20;
       margin-top: -8rem;
   }
   
   /* Hide the success message by default */
   #contactSuccessMessage {
       display: none;
   }
   
   .contact-send-button {
       background-color: #14A8E1;
       color: white;
       padding: 0.75rem 1.5rem;
       border-radius: 0.75rem;
       font-weight: 500;
       border: none;
       cursor: pointer;
       transition: background-color 0.3s ease;
       width: 100%;
       font-size: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }
   
   .contact-send-button:hover {
       background-color: #0A6888;
   }
   
   .contact-send-button svg {
       transition: transform 0.3s ease;
   }
   
   .contact-send-button:hover svg {
       transform: translateX(4px);
   }
   
   .contact-section {
       padding: 6rem 0;
   }
   
   .contact-section-white {
       background-color: #fff;
   }
   
   .contact-section-light {
       background-color: #F0F9FF;
   }
   
   /* ============================================================
      22. ABOUT US SECTION - UNIFICATO COMPLETO
      ============================================================ */
   
   /* Base Utility Classes */
   .aboutus1-min-h-screen {
       min-height: 100vh;
   }
   
   
   .aboutus1-text-white-90 {
       color: rgba(255, 255, 255, 0.9);
   }
   
   .aboutus1-text-white-80 {
       color: rgba(255, 255, 255, 0.8);
   }
   
   .aboutus1-text-gray-600 {
       color: #4B5563;
   }
   
   .aboutus1-text-gray-700 {
       color: #374151;
   }
   
   .aboutus1-text-yellow {
       color: var(--aboutus1-yellow) !important;
   }
   
   .aboutus1-bg-gradient-primary {
       background: linear-gradient(to bottom right, var(--aboutus1-primary-dark), var(--aboutus1-primary));
   }
   
   .aboutus1-bg-light-blue {
       background-color: #F0F9FF;
   }
   
   .aboutus1-rounded-3xl {
       border-radius: 1.5rem;
   }
   
   .aboutus1-rounded-2xl {
       border-radius: 1rem;
   }
   
   .aboutus1-shadow-xl {
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   }
   
   .aboutus1-shadow-lg {
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   }
   
   .aboutus1-transition-all {
       transition: all 0.5s;
   }
   
   .aboutus1-transition-transform {
       transition: transform 0.3s;
   }
   
   .aboutus1-transform {
       transform: translateZ(0);
   }
   
   .aboutus1-rotate-3 {
       transform: rotate(3deg);
   }
   
   .aboutus1-rotate-neg3 {
       transform: rotate(-3deg);
   }
   
   .aboutus1-rotate-neg12 {
       transform: rotate(-12deg);
   }
   
   .aboutus1-hover-rotate-0:hover {
       transform: rotate(0);
   }
   
   .aboutus1-hover-scale-105:hover {
       transform: scale(1.05);
   }
   
   .aboutus1-scale-105 {
       transform: scale(1.05);
   }
   
   .aboutus1-inset-0 {
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
   }
   
   .aboutus1-z-10 {
       z-index: 10;
   }
   
   .aboutus1-z-20 {
       z-index: 20;
   }
   
   .aboutus1-object-cover {
       object-fit: cover;
   }
   
   .aboutus1-aspect-square {
       aspect-ratio: 1;
   }

   /* Hero Section */
   .aboutus1-hero-section {
       position: relative;
       height: 100vh;
       overflow: hidden;
   }
   
   .aboutus1-hero-section video {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .aboutus1-bg-gradient-overlay {
       background: linear-gradient(to bottom, rgba(10, 104, 136, 0.9), rgba(20, 168, 225, 0.9));
       mix-blend-mode: multiply;
   }
   
   .aboutus1-hero-title {
       font-size: 3.75rem;
       font-weight: 700;
       line-height: 1.2;
   }
   
   .aboutus1-hero-subtitle {
       font-size: 1.5rem;
       line-height: 1.5;
   }
   
   .aboutus1-btn-hero {
       background-color: white;
       color: var(--aboutus1-primary-dark);
       padding: 0.75rem 2rem;
       border-radius: 0.75rem;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       border: none;
       transition: background-color 0.3s;
   }
   
   .aboutus1-btn-hero:hover {
       background-color: rgba(255, 255, 255, 0.9);
       color: var(--aboutus1-primary-dark);
       text-decoration: none;
   }
   
   .aboutus1-wave-divider {
       height: 100px;
       transform: rotate(180deg);
   }
   
   /* Mission Section */
   .aboutus1-section-title {
       font-size: 2.5rem;
       font-weight: 700;
       line-height: 1.2;
       color: var(--aboutus1-primary-dark);
   }
   
   .aboutus1-section-lead {
       font-size: 1.25rem;
       line-height: 1.5;
   }
   
   .aboutus1-mission-points {
       display: flex !important;
       flex-direction: column !important;
       gap: 1rem !important;
       align-items: flex-start !important;
       text-align: left !important;
   }
   
   .aboutus1-mission-point {
       display: flex !important;
       align-items: center !important;
       gap: 0.75rem !important;
       font-size: 1.1rem !important;
       text-align: left !important;
       width: 100% !important;
   }
   
   .aboutus1-mission-point i {
       color: var(--aboutus1-yellow);
       width: 20px !important;
       height: 20px !important;
       min-width: 20px !important;
       flex-shrink: 0 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }
   
   .aboutus1-mission-point span {
       flex: 1 !important;
       text-align: left !important;
   }
   
   /* Values Section */
   .aboutus1-value-card {
       background-color: white;
       border-radius: 1rem;
       padding: 2rem;
       height: 100%;
       transition: all 0.5s;
       border: none !important;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
   }
   
   .aboutus1-value-card:hover {
       transform: translateY(-8px) !important;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
   }
   
   .aboutus1-value-card[data-value="0"] {
       background-color: #FFEFF5 !important;
   }
   
   .aboutus1-value-card[data-value="1"] {
       background-color: #E0F7FF !important;
   }
   
   .aboutus1-value-card[data-value="2"] {
       background-color: #EEFFF1 !important;
   }
   
   .aboutus1-icon-container {
       width: 4rem;
       height: 4rem;
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       transform: rotate(-12deg);
       transition: transform 0.3s;
   }
   
   .aboutus1-value-card:hover .aboutus1-icon-container {
       transform: rotate(0);
   }
   
   .aboutus1-value-title {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 1rem;
   }
   
   /* Stats Section */
   .aboutus1-stat-icon {
       width: 3rem;
       height: 3rem;
       color: #BBEDFF;
       margin-bottom: 1.5rem;
   }
   
   .aboutus1-stat-number {
       font-size: 2.5rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }
   
   .aboutus1-stat-label {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }
   
   /* Team Section */
   .aboutus1-team-grid {
       display: flex !important;
       justify-content: center !important;
       gap: 1.5rem !important;
       flex-wrap: wrap !important;
       margin: 0 auto !important;
       max-width: 100% !important;
   }
   
   .aboutus1-team-member-container {
       flex: 0 0 18% !important;
       max-width: 18% !important;
       min-width: 200px !important;
   }
   
   .aboutus1-team-member {
       position: relative;
       transition: all 0.3s ease !important;
       cursor: pointer !important;
   }
   
   .aboutus1-team-member:hover {
       transform: translateY(-8px) !important;
   }
   
   .aboutus1-team-figure {
       position: relative !important;
       overflow: hidden !important;
       border-radius: 1rem !important;
       margin-bottom: 1rem !important;
   }
   
   .aboutus1-team-image {
       width: 100% !important;
       height: 300px !important;
       object-fit: cover !important;
       border-radius: 1rem;
       transition: transform 0.3s ease !important;
   }
   
   .aboutus1-team-member:hover .aboutus1-team-image {
       transform: scale(1.05) !important;
   }
   
   .aboutus1-team-overlay {
       display: none;
   }
   
   .aboutus1-team-icon-container {
       display: none;
   }
   
   .aboutus1-team-info {
       text-align: center !important;
   }
   
   .aboutus1-team-name {
       font-size: 1.25rem !important;
       font-weight: 600 !important;
       margin-bottom: 0.5rem !important;
       color: #0a6888 !important;
       margin-top: 1.5rem;
   }
   
   .aboutus1-team-role {
       color: #6b7280 !important;
       font-size: 1rem !important;
       margin: 0 !important;
   }
   
   /* Location Section */
   .aboutus1-location-card {
       position: relative;
       overflow: hidden;
       border-radius: 1rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       height: 100%;
   }
   
   .aboutus1-location-image-container {
       height: 16rem;
       overflow: hidden;
   }
   
   .aboutus1-location-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s;
   }
   
   .aboutus1-location-card:hover .aboutus1-location-image {
       transform: scale(1.1);
   }
   
   .aboutus1-location-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
   }
   
   .aboutus1-location-city {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 0.25rem;
   }
   
   /* CTA Section */
   .aboutus1-cta-icon {
       width: 4rem;
       height: 4rem;
       color: var(--aboutus1-primary);
       margin-bottom: 1.5rem;
   }
   
   .aboutus1-btn-primary-custom {
       background-color: var(--aboutus1-primary);
       color: white;
       padding: 0.75rem 2rem;
       border-radius: 0.75rem;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       border: none;
       transition: background-color 0.3s;
   }
   
   .aboutus1-btn-primary-custom:hover {
       background-color: var(--aboutus1-primary-dark);
       color: white;
       text-decoration: none;
   }
   
   .aboutus1-btn-outline-primary-custom {
       background-color: transparent;
       color: var(--aboutus1-primary);
       padding: 0.75rem 2rem;
       border-radius: 0.75rem;
       font-weight: 500;
       border: 2px solid var(--aboutus1-primary);
       transition: all 0.3s;
   }
   
   .aboutus1-btn-outline-primary-custom:hover {
       background-color: rgba(20, 168, 225, 0.1);
       color: var(--aboutus1-primary);
       text-decoration: none;
   }
   
   /* ============================================================
      23. CTA SECTION (COMMON TO ALL TABS)
      ============================================================ */
   
   .cta-explora-section {
       padding: 90px 20px;
       background: white;
       position: relative;
       overflow: hidden;
   }
   
   .cta-explora-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 15px;
       position: relative;
       z-index: 10;
   }
   
   .cta-explora-row {
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   .cta-explora-col {
       max-width: 800px;
       text-align: center;
   }
   
   .cta-explora-icon-wrapper {
       display: flex;
       justify-content: center;
       margin-bottom: 40px;
       opacity: 0;
       animation: fadeInUp 0.8s ease-out 0.2s forwards;
   }
   
   .cta-explora-icon {
       width: 80px !important;
       height: 80px !important;
       filter: drop-shadow(0 4px 8px rgba(10, 104, 136, 0.2));
   }
   
   .cta-explora-heading {
       font-size: 44px;
       font-weight: 700 !important;
       color: #0A6888 !important;
       margin-bottom: 30px;
       line-height: 1.2;
       opacity: 0;
       animation: fadeInUp 0.8s ease-out 0.4s forwards;
   }
   
   .cta-explora-description {
       font-size: 1.25rem;
       color: #6C757D !important;
       margin-bottom: 50px;
       max-width: 600px;
       margin-left: auto;
       margin-right: auto;
       opacity: 0;
       animation: fadeInUp 0.8s ease-out 0.6s forwards;
       line-height: 1.6;
   }
   
   .btn-primary-custom {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       background: #14A8E1;
       color: white;
       padding: 18px 32px;
       border-radius: 12px;
       text-decoration: none;
       font-weight: 600;
       font-size: 1.1rem;
       box-shadow: 0 10px 30px rgba(10, 104, 136, 0.3);
       transition: all 0.3s ease;
       opacity: 0;
       animation: fadeInUp 0.8s ease-out 0.8s forwards;
       position: relative;
       overflow: hidden;
       border: none;
   }
   
   .btn-primary-custom::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
       transition: left 0.5s;
   }
   
   .btn-primary-custom:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 40px rgba(10, 104, 136, 0.4);
       color: white;
       text-decoration: none;
       background: linear-gradient(135deg, #085670 0%, #064558 100%);
   }
   
   .btn-primary-custom:hover::before {
       left: 100%;
   }
   
   .btn-primary-custom i {
       width: 20px;
       height: 20px;
       transition: transform 0.3s ease;
   }
   
   .btn-primary-custom:hover i {
       transform: translateX(5px);
   }
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ============================================================
      24. RESPONSIVE DESIGN - COMPREHENSIVE
      ============================================================ */
   
   /* RESPONSIVE MEDIA QUERIES AND UNIFIED ADJUSTMENTS */
   
   /* Responsive adjustments for general sections */
   .section {
       padding: 20px 0;
   }
   
   .section.transformational-impact {
       padding-top: 20px;
       padding-bottom: 40px;
   }
   
   /* H2 responsive styles */
   h2 {
       color: #0a6888;
       font-size: 2.5rem;
       margin-bottom: 25px;
       text-align: center;
       font-weight: 700;
       line-height: 1.2;
   }
   
   /* Desktop and larger screens - Integration positioning */
   @media (min-width: 1200px) {
       .integration-info__title {
           margin-left: 14rem;
       }
       
       .integration-info__description {
           margin-left: 12rem;
       }
       
       .platform-modules-grid {
           grid-template-columns: repeat(4, 360px);
           gap: 15px;
           max-width: 90%;
       }
       
       .platform-module-card {
           max-width: 360px;
           height: 220px;
       }
       
       .platform-dashboard-wrapper {
           height: 350px;
           padding: 15px;
       }
       
       .platform-dashboard-image.front {
           left: 50%;
           width: 68%;
           top: 10px;
       }
       
       .logo-grid {
           grid-template-columns: repeat(8, 1fr);
       }
   
       h2 {
           font-size: 2.25rem;
       }
   }
   
   /* Responsive design for hero image */
   @media (min-width: 1600px) {
       .hero-image {
           max-height: 620px !important;
       }
   }
   
   @media (min-width: 1400px) {
       .hero-image {
           max-height: 580px !important;
       }
   }
   
   @media (max-width: 1200px) {
       .hero-content {
           padding-left: 40px !important;
       }
       
       .hero-image {
           max-height: 500px !important;
       }
   
       .hero1-content h2 {
           font-size: 2rem;
       }
       
       .hero1-content p {
           font-size: 1.1rem;
       }
   
       h2 {
           font-size: 2rem;
       }
   }
   
   /* Tablets */
   @media (max-width: 992px) {
       .hero-section {
           padding: 60px 0 40px;
       }
       
       .hero-container {
           flex-direction: column-reverse !important;
           gap: 30px !important;
       }
       
       .hero-content {
           padding-right: 0 !important;
           padding-left: 0 !important;
           margin-bottom: 0 !important;
           margin-right: 0 !important;
           text-align: center !important;
           flex: 1 !important;
           max-width: 100% !important;
       }
       
       .hero-content div[style*="font-size"] {
           font-size: 2rem !important;
           line-height: 1.3 !important;
       }
       
       .hero-content div > div {
           white-space: normal !important;
           overflow-wrap: break-word !important;
           word-wrap: break-word !important;
           hyphens: auto !important;
           font-size: 1.8rem !important;
           padding-left: 10px !important;
           padding-right: 10px !important;
       }
       
       .hero-image-wrapper {
           flex: 1 !important;
           width: 100% !important;
           max-width: 100% !important;
           margin-top: 20px !important;
           padding-top: 0 !important;
       }
       
       .hero-image {
           max-height: 420px !important;
           margin: 0 auto !important;
           margin-top: 0 !important;
       }
       
       .hero-container::before {
           top: -10px;
           left: -10px;
           width: 80px;
           height: 80px;
       }
       
       .hero-container::after {
           bottom: -10px;
           right: -10px;
           width: 80px;
           height: 80px;
       }
       
       .hero-buttons {
           justify-content: center;
       }
       
       .empresas-image-large {
           max-width: 95% !important;
       }
       
       .institutions-title {
           font-size: 1.8rem;
       }
       
       .institutions-title .big-number {
           font-size: 2.2rem;
       }
       
       .platform-hero-container {
           flex-direction: column;
           gap: 40px;
           text-align: center;
       }
       
       .platform-text-content,
       .platform-dashboard-wrapper {
           max-width: 100%;
       }
       
       .platform-main-title {
           font-size: 2.4rem;
       }
       
       .platform-dashboard-wrapper {
           height: 300px;
           padding: 10px;
       }
       
       .platform-dashboard-image.front {
           left: 55%;
           width: 65%;
           top: 20px;
       }
       
       .platform-modules-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 15px;
           max-width: 800px;
       }
       
       .platform-module-card {
           height: 180px;
           padding: 18px 22px;
       }
       
       /* Experience cards responsive */
       .exp-learning-cards-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 15px;
           padding: 0 25px;
       }
   
       .exp-learning-card {
           min-height: 260px;
           max-height: 260px;
       }
   
       .exp-learning-card-image {
           max-width: 140px;
           height: 95px;
       }
       
       /* Audience benefits mobile centering */
       .audience-benefits {
           text-align: center;
       }
       
       #audience-description {
           font-size: 1.3rem !important;
       }
       
       /* Integration section tablet */
       .integration-main-title {
           font-size: 2.25rem;
       }
       
       .integration-section {
           padding: 4rem 0;
       }
       
       .integration-grid {
           grid-template-columns: 1fr;
           gap: 3rem;
       }
       
       .integration-cta-buttons {
           flex-direction: column;
           gap: 1rem;
           align-items: center;
       }
       
       .integration-btn {
           width: 100%;
           max-width: 300px;
       }
       
       /* Method cards tablet */
       .method-cards-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       
       /* Methodology tabs tablet */
       .metodo-tabs-container {
           flex-direction: column;
           border-radius: 1rem;
           width: 100%;
           max-width: 300px;
       }
   
       .metodo-tab-button {
           width: 100%;
           justify-content: flex-start;
       }
   
       /* Learning Types responsive */
       .learning-types {
           padding: 60px 0;
       }
       
       .hero1-image {
           margin-bottom: 48px;
       }
       
       .hero1-content {
           padding: 36px;
       }
       
       .hero1-content h2 {
           font-size: 2rem;
           max-width: 500px;
       }
       
       .hero1-content p {
           font-size: 1rem;
           max-width: 500px;
       }
   
       /* Purpose Section responsive */
       .purpose-flow {
           flex-direction: column;
           align-items: stretch;
           padding: 0 20px;
           gap: 20px;
       }
   
       .purpose-card {
           width: auto !important;
           min-width: 0;
           flex: none !important;
           margin: 0;
       }
   
       .purpose-card p {
           white-space: normal !important;
           text-align: left;
           width: 100%;
           min-width: 0;
       }
   
       .purpose-flow::before {
           display: none;
       }
   
       h2 {
           font-size: 2rem;
       }
   }
   
   /* iPad specific */
   @media only screen 
   and (min-device-width: 768px) 
   and (max-device-width: 1024px) {
       .hero-section {
           padding: 80px 20px 50px !important;
       }
       
       .hero-container {
           padding: 20px !important;
           max-width: 95% !important;
           margin: 0 auto !important;
           margin-top: 20px !important;
       }
       
       .hero-content {
           padding-left: 20px !important;
           padding-right: 20px !important;
           margin-right: 0 !important;
           max-width: 100% !important;
           margin-top: 20px !important;
       }
       
       .hero-content div[style*="font-size"] {
           font-size: 1.9rem !important;
           line-height: 1.3 !important;
           margin-left: 10px !important;
           margin-right: 10px !important;
           margin-top: 15px !important;
       }
       
       .hero-image-wrapper {
           margin-top: 30px !important;
           padding: 0 20px !important;
       }
       
       .hero-image {
           max-height: 380px !important;
           max-width: 90% !important;
           margin: 0 auto !important;
       }
       
       /* Methodology section iPad positioning */
       section.metodo-pt-32.metodo-pb-16.metodo-bg-white {
           padding-top: 150px !important;
           margin-top: 30px !important;
       }
       
       section.metodo-pt-32.metodo-pb-16.metodo-bg-white > .metodo-container {
           padding-top: 30px !important;
       }
       
       section.metodo-pt-32.metodo-pb-16.metodo-bg-white h2.metodo-text-4xl {
           margin-top: 20px !important;
       }
   }
   
   /* Mobile */
   @media (max-width: 768px) {
       .hero-section {
           padding: 40px 0;
       }
       
       .hero-content div[style*="font-size"] {
           font-size: 1.7rem !important;
           line-height: 1.3 !important;
       }
       
       .hero-content div > div {
           margin-bottom: 8px !important;
           font-size: 1.6rem !important;
           line-height: 1.3 !important;
           padding-left: 5px !important;
           padding-right: 5px !important;
       }
       
       .hero-subtitle {
           font-size: 1rem !important;
           padding-left: 10px !important;
           padding-right: 10px !important;
       }
       
       .hero-image {
           max-height: 300px !important;
       }
       
       .institutions-title {
           font-size: 1.6rem;
       }
       
       .institutions-title .big-number {
           font-size: 2rem;
       }
       
       .metodologias-grid {
           grid-template-columns: 1fr;
       }
       
       .logo-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       
       .platform-section {
           padding: 60px 0;
       }
       
       .platform-main-title {
           font-size: 2rem;
           margin-bottom: 20px;
       }
       
       .platform-description {
           font-size: 1rem;
       }
       
       .platform-modules-grid {
           grid-template-columns: 1fr;
           gap: 15px;
           max-width: 100%;
       }
       
       .platform-module-card {
           height: 170px;
           padding: 16px 20px;
           max-width: 100%;
       }
       
       .platform-dashboard-wrapper {
           height: 250px;
           padding: 5px;
       }
       
       .platform-dashboard-image.front {
           left: 55%;
           width: 70%;
           top: 30px;
       }
       
       .platform-module-title {
           font-size: 1.1rem;
           margin-bottom: 10px;
       }
       
       .platform-module-text {
           font-size: 0.9rem;
           line-height: 1.4;
       }
       
       /* Experience cards mobile */
       .exp-learning-header {
           margin-top: 10px;
           margin-bottom: 25px;
       }
   
       .exp-learning-cards-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 15px;
           padding: 0 20px;
       }
   
       .exp-learning-card {
           min-height: 280px;
           max-height: 280px;
           padding: 20px 15px;
       }
   
       .exp-learning-card-question {
           font-size: 16px;
           min-height: 50px;
       }
   
       .exp-learning-card-image {
           max-width: 120px;
           height: 80px;
       }
       
       /* Mobile responsive fixes */
       .section {
           padding: 1rem 1rem !important;
           margin-top: 30px;
           margin-bottom: 0 !important;
       }
       
       .container {
           padding-left: 15px;
           padding-right: 15px;
       }
       
       .audience-content {
           margin-bottom: 0.5rem;
       }
       
       .section h2 {
           margin-bottom: 1rem !important;
           margin-top: 30px;
       }
       
       .stats-grid {
           margin-bottom: 1rem !important;
       }
       
       .impact-description {
           margin-top: 1rem !important;
       }
       
       .impact-description p {
           margin-bottom: 1rem !important;
       }
       
       /* Hide only "Learn More" button on mobile */
       .story-card .btn,
       .story-card button,
       .story-card a.btn,
       .stories-container .btn,
       .stories-container button,
       .stories-container a.btn,
       .success-stories .story-card .btn,
       .success-stories .story-card button,
       .success-stories .story-card a.btn {
           display: none !important;
       }
       
       /* Improve carousel readability on mobile */
       .story-card {
           padding: 1.5rem !important;
           margin-bottom: 1rem !important;
           text-align: left !important;
           height: auto !important;
           min-height: auto !important;
           grid-template-columns: 1fr;
       }
       
       .story-card h3 {
           font-size: 1.2rem !important;
           margin-bottom: 0.8rem !important;
           line-height: 1.4 !important;
       }
       
       .story-card p {
           font-size: 0.95rem !important;
           line-height: 1.5 !important;
           margin-bottom: 0.8rem !important;
           overflow: visible !important;
           text-overflow: unset !important;
           white-space: normal !important;
       }
       
       .stories-container {
           padding: 0 10px !important;
       }
       
       .story-content {
           height: auto !important;
           max-height: none !important;
           overflow: visible !important;
           padding: 30px;
       }
       
       .stories-carousel {
           margin-bottom: 1.5rem !important;
           height: auto !important;
       }
       
       .story-image {
           height: 200px;
       }
       
       /* Integration section mobile */
       .integration-main-title {
           font-size: 1.875rem;
       }
       
       .integration-section {
           padding: 3rem 0;
           margin: 2rem 0;
       }
       
       .integration-grid {
           grid-template-columns: 1fr;
           gap: 3rem;
       }
       
       .integration-info {
           text-align: center;
           padding-right: 0;
       }
       
       .integration-info__title {
           margin-left: 0;
           text-align: center;
       }
       
       .integration-info__description {
           margin-left: 0;
           white-space: normal;
           text-align: center;
       }
       
       .integration-benefit-card {
           padding: 0.75rem;
       }
       
       .integration-cta-buttons {
           flex-direction: column;
           gap: 1rem;
           align-items: center;
       }
       
       .integration-btn {
           padding: 0.75rem 1.5rem;
           width: 100%;
           max-width: 280px;
           text-align: center;
       }
       
       /* Learning types responsive */
       .learning-types {
           padding: 40px 0;
       }
       
       .hero1-image {
           margin-bottom: 32px;
       }
       
       .hero1-image img {
           height: 300px;
       }
       
       .hero1-content {
           padding: 24px;
           background: linear-gradient(to bottom, rgba(10, 104, 136, 0.9), rgba(10, 104, 136, 0.6));
       }
       
       .hero1-content h2 {
           font-size: 1.8rem;
           max-width: 100%;
       }
       
       .hero1-content p {
           font-size: 0.9rem;
           max-width: 100%;
       }
       
       .bottom-message-text {
           font-size: 1.5rem;
       }
   
       .bottom-message-text::before,
       .bottom-message-text::after {
           font-size: 2rem;
       }
   
       .bottom-message-text::before {
           top: -15px;
           left: -10px;
       }
   
       .bottom-message-text::after {
           bottom: -30px;
           right: -10px;
       }
       
       /* Method cards mobile */
       .method-cards-grid {
           grid-template-columns: 1fr;
       }
       
       /* Modal mobile */
       .modal-content {
           width: 90%;
           margin: 15% auto;
           padding: 20px;
       }
   
       .modal-header h3 {
           font-size: 1.5rem;
       }
   
       .modal-body h4 {
           font-size: 1.1rem;
       }
       
       /* CTA section mobile */
       .cta-explora-section {
           padding: 80px 20px;
       }
       
       .cta-explora-icon {
           width: 60px !important;
           height: 60px !important;
       }
       
       .cta-explora-icon-wrapper {
           margin-bottom: 30px;
       }
       
       .cta-explora-heading {
           margin-bottom: 20px;
       }
       
       .cta-explora-description {
           font-size: 1.1rem;
           margin-bottom: 40px;
       }
       
       .btn-primary-custom {
           padding: 16px 28px;
           font-size: 1rem;
           width: 100%;
           max-width: 280px;
       }
       
       /* Tab mobile centering */
       .tab-button {
           width: 100%;
           max-width: 250px;
           margin-bottom: 8px;
           text-align: center;
       }
   
       .audience-tabs {
           flex-direction: column;
           align-items: center;
           margin-bottom: 1rem !important;
       }
       
       /* Methodology mobile impact grid */
       .metodo-impact-grid {
           flex-direction: column !important;
           gap: 1.5rem !important;
       }
       
       .metodo-impact-section {
           max-width: 100% !important;
           flex: 1 1 100% !important;
       }
   
       /* Purpose card mobile responsive */
       .purpose-card {
           padding: 20px;
       }
   
       .purpose-card h3 {
           font-size: 1.1rem;
       }
   
       .purpose-card p {
           font-size: 0.85rem;
           line-height: 1.5;
       }
   
       h2 {
           font-size: 1.75rem;
           padding: 0 20px;
       }
   
       /* Stats grid mobile */
       .stats-grid, 
       .experience-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   
       /* AboutUs mobile */
       .aboutus1-team-member {
           margin-bottom: 2rem;
       }
   }
   
   /* Small mobile */
   @media (max-width: 480px) {
       .hero-section {
           padding: 30px 0;
       }
       
       .hero-content div[style*="font-size"] {
           font-size: 1.5rem !important;
           line-height: 1.25 !important;
       }
       
       .hero-content div > div {
           font-size: 1.4rem !important;
           line-height: 1.25 !important;
           margin-bottom: 6px !important;
       }
       
       .hero-subtitle {
           font-size: 0.9rem !important;
           margin-bottom: 20px !important;
       }
       
       .hero-image {
           max-height: 250px !important;
       }
       
       .hero-buttons {
           flex-direction: column;
           gap: 10px;
       }
       
       .hero-btn {
           width: 100%;
       }
       
       .platform-main-title {
           font-size: 1.8rem;
       }
       
       .platform-module-card {
           height: 160px;
           padding: 15px 18px;
       }
       
       .platform-module-title {
           font-size: 1rem;
           margin-bottom: 8px;
       }
       
       .platform-module-text {
           font-size: 0.85rem;
       }
       
       .platform-dashboard-wrapper {
           height: 200px;
       }
       
       .platform-dashboard-image.front {
           left: 15%;
           width: 75%;
           top: 40px;
       }
       
       /* Experience cards small mobile */
       .exp-learning-cards-grid {
           grid-template-columns: 1fr;
           gap: 20px;
           padding: 0 15px;
       }
   
       .exp-learning-card {
           min-height: 300px;
           max-height: 300px;
       }
   
       .exp-learning-card-image {
           max-width: 150px;
           height: 100px;
       }
       
       .section {
           padding: 0.5rem 0.5rem !important;
           margin-top: 5px;
           margin-bottom: 0 !important;
       }
       
       .section h2 {
           margin-bottom: 0.8rem !important;
           margin-top: 0 !important;
           font-size: 1.4rem;
       }
       
       #audience-description {
           margin-bottom: 0.8rem !important;
       }
       
       .stats-grid {
           margin-bottom: 0.8rem !important;
       }
       
       .stat-card {
           margin-bottom: 1rem !important;
       }
       
       .impact-description {
           margin-top: 0.8rem !important;
       }
       
       .impact-description p {
           margin-bottom: 0.8rem !important;
       }
       
       .story-card {
           padding: 1.2rem !important;
           margin-bottom: 0.8rem !important;
       }
       
       .story-card h3 {
           font-size: 1.1rem !important;
           margin-bottom: 0.6rem !important;
       }
       
       .story-card p {
           font-size: 0.9rem !important;
           line-height: 1.4 !important;
           margin-bottom: 0.6rem !important;
       }
       
       .stories-container {
           padding: 0 5px !important;
       }
       
       .success-stories h2 {
           font-size: 1.3rem !important;
           margin-bottom: 1rem !important;
       }
       
       .integration-section {
           padding: 2rem 0;
       }
       
       .integration-main-title {
           font-size: 1.5rem;
       }
       
       .integration-description-primary {
           font-size: 1.125rem;
       }
       
       .integration-info__title {
           font-size: 1.25rem;
           margin-left: 0;
           text-align: center;
       }
       
       .integration-info__description {
           font-size: 0.9rem;
           margin-left: 0;
           text-align: center;
           white-space: normal;
       }
       
       .integration-cta-buttons {
           flex-direction: column;
           gap: 1rem;
           align-items: center;
       }
       
       .integration-btn {
           width: 100%;
           max-width: 250px;
           padding: 0.75rem 1rem;
           font-size: 0.9rem;
       }
       
       /* Learning types small mobile */
       .learning-types {
           padding: 30px 0;
       }
       
       .hero1-image {
           margin-bottom: 24px;
           border-radius: 16px;
       }
       
       .hero1-image img {
           height: 250px;
       }
       
       .hero1-content {
           padding: 20px;
       }
       
       .hero1-content h2 {
           font-size: 1.5rem;
       }
       
       .hero1-content p {
           font-size: 0.85rem;
       }
       
       /* CTA section small mobile */
       .cta-explora-section {
           padding: 60px 15px;
       }
       
       .cta-explora-heading {
           font-size: 1.875rem;
       }
       
       .cta-explora-description {
           font-size: 1rem;
           margin-bottom: 30px;
       }
       
       .btn-primary-custom {
           padding: 14px 24px;
           font-size: 0.95rem;
           max-width: 250px;
       }
   
       /* Stats grid mobile small */
       .stats-grid,
       .experience-grid {
           grid-template-columns: 1fr;
       }
   
       /* AboutUs small mobile */
       .aboutus1-hero-section {
           padding-top: 120px !important;
           min-height: 100vh !important;
       }
       
       .aboutus1-hero-section .container {
           padding-top: 2rem !important;
           padding-left: 1rem !important;
           padding-right: 1rem !important;
       }
       
       .aboutus1-hero-title {
           font-size: 2rem !important;
           margin-bottom: 1.5rem !important;
           line-height: 1.2 !important;
           white-space: normal !important;
       }
       
       .aboutus1-hero-subtitle {
           font-size: 1rem !important;
           margin-bottom: 2rem !important;
           max-width: 100% !important;
           height: auto !important;
       }
       
       .aboutus1-btn-hero {
           font-size: 0.9rem !important;
           padding: 0.75rem 1.5rem !important;
           width: 100% !important;
           max-width: 280px !important;
       }
       
       .aboutus1-section-title {
           font-size: 1.75rem !important;
           padding: 0 1rem !important;
       }
       
       .aboutus1-section-lead {
           font-size: 1rem !important;
           padding: 0 1rem !important;
       }
       

       
       .aboutus1-value-card {
           padding: 1.5rem !important;
           margin-bottom: 1.5rem !important;
       }
       
       .aboutus1-icon-container {
           width: 3rem !important;
           height: 3rem !important;
           margin-bottom: 1rem !important;
       }
       
       .aboutus1-value-title {
           font-size: 1.1rem !important;
           margin-bottom: 0.75rem !important;
       }
       
       .aboutus1-mission-point {
           font-size: 0.95rem !important;
           gap: 0.5rem !important;
       }
       
       .aboutus1-mission-point i {
           width: 18px !important;
           height: 18px !important;
           min-width: 18px !important;
       }
       
       .aboutus1-team-member-container {
           flex: 0 0 100% !important;
           max-width: 100% !important;
       }
       
       .aboutus1-team-image {
           height: 250px !important;
       }
       
       .aboutus1-team-name {
           font-size: 1.1rem !important;
       }
       
       .aboutus1-team-role {
           font-size: 0.9rem !important;
       }
       
       .aboutus1-location-image-container {
           height: 12rem !important;
       }
       
       .aboutus1-location-city {
           font-size: 1.25rem !important;
       }
       
       .aboutus1-stat-number {
           font-size: 2rem !important;
       }
       
       .aboutus1-stat-label {
           font-size: 1rem !important;
       }
   
       h2 {
           font-size: 1.5rem;
           margin-bottom: 20px;
       }
   }
   
   /* Medium screens responsive adjustments */
   @media (min-width: 768px) and (max-width: 1024px) {
       .stats-grid, 
       .experience-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       
       .hero1-content h2 {
           font-size: 2.5rem;
       }
       
       .story-card {
           grid-template-columns: 1fr 1fr;
       }
       
       .story-image {
           height: auto;
       }
   
       /* AboutUs medium screens */
       .aboutus1-hero-section {
           padding-top: 100px !important;
           min-height: 100vh !important;
       }
       
       .aboutus1-hero-section .container {
           padding-top: 2rem !important;
           padding-left: 1.5rem !important;
           padding-right: 1.5rem !important;
       }
       
       .aboutus1-hero-title {
           font-size: 2.5rem !important;
           margin-bottom: 1.5rem !important;
           white-space: normal !important;
       }
       
       .aboutus1-hero-subtitle {
           font-size: 1.25rem !important;
           margin-bottom: 2rem !important;
           max-width: 100% !important;
           height: auto !important;
       }
       
       .aboutus1-btn-hero {
           font-size: 1rem !important;
           padding: 0.875rem 1.75rem !important;
       }
       
       .aboutus1-section-title {
           font-size: 2rem !important;
       }
       
       .aboutus1-section-lead {
           font-size: 1.125rem !important;
       }
       

       
       .aboutus1-value-card {
           padding: 2rem !important;
       }
       
       .aboutus1-mission-point {
           font-size: 1rem !important;
       }
       
       .aboutus1-team-member-container {
           flex: 0 0 45% !important;
           max-width: 45% !important;
       }
       
       .aboutus1-team-grid {
           gap: 1rem !important;
       }
       
       .aboutus1-team-image {
           height: 280px !important;
       }
   }
   
   /* Large screens for stats grid */
   @media (min-width: 1024px) {
       .stats-grid, 
       .experience-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   /* Section responsive adjustments */
   @media (max-width: 991.98px) {
       .section {
           padding: 20px 0;
       }
   }
   
   @media (max-width: 767.98px) {
       .section {
           padding: 15px 0;
       }
   }
   section[aria-labelledby="presence-heading"] {
    margin-bottom: 5rem !important;
    padding-bottom: 3rem !important;
}
   /* ============================================================
      25. VERY LARGE SCREENS
      ============================================================ */
   
   @media (min-width: 2000px) {
       .container,
       section .container,
       .hero-section .container,
       div.container,
       .comparison-section .container,
       .success-stories .container,
       .learning-types .container,
       .why-choose-us .container,
       .purpose-flow,
       .integration-section .container {
           max-width: 98% !important;
           width: 98% !important;
           margin-left: auto !important;
           margin-right: auto !important;
           padding-left: 10px !important;
           padding-right: 10px !important;
       }
       
       .hero-container {
           max-width: 98% !important;
           width: 98% !important;
       }
       
       .hero-content {
           max-width: 55% !important;
       }
       
       .hero-image-wrapper {
           max-width: 45% !important;
       }
       
       .hero-image {
           max-height: 700px !important;
       }
       
       .institutions-section,
       .institutions-section .container {
           max-width: 98% !important;
           width: 98% !important;
       }
       
       .institutions-header,
       .logo-showcase {
           max-width: 90% !important;
           width: 90% !important;
       }
       
       .empresas-image-large {
           max-width: 90% !important;
           width: auto !important;
           height: auto !important;
           max-height: none !important;
           transform: scale(1.05) !important;
           margin: 0 auto !important;
       }
       
       .platform-modules-grid {
           grid-template-columns: repeat(4, 360px);
           gap: 25px;
           max-width: 80%;
       }
       
       .platform-module-card {
           width: 360px;
           max-width: 409px;
           height: 212px;
           padding: 20px 25px;
       }
       
       .platform-dashboard-wrapper {
           height: 450px;
           padding: 25px;
       }
       
       .platform-dashboard-image.front {
           left: 55%;
       }
       
       .comparison-grid,
       .stories-carousel,
       .stories-container,
       .experience-grid,
       .features {
           max-width: 100% !important;
       }
       
       .integration-info__title {
           margin-left: 18rem;
       }
       
       .integration-info__description {
           margin-left: 16rem;
       }
       
       .integration-main-title__highlight {
           white-space: nowrap;
       }
       
       /* CTA section large screens integration */
       .cta-explora-section .cta-explora-container {
           max-width: 98% !important;
           width: 98% !important;
           margin-left: auto !important;
           margin-right: auto !important;
       }
       
       /* Methodology impact grid large screens - FORCE FLEX LAYOUT */
       .metodo-impact-grid {
           display: flex !important;
           flex-direction: row !important;
           grid-template-columns: unset !important;
           grid-template-rows: unset !important;
           grid: unset !important;
           gap: 4rem !important;
           width: 90% !important;
           max-width: 2400px !important;
           margin-left: auto !important;
           margin-right: auto !important;
           margin-top: 4rem !important;
           margin-bottom: 4rem !important;
           justify-content: center !important;
           align-items: stretch !important;
       }
       
       .metodo-impact-section {
           width: 45% !important;
           flex: 0 0 45% !important;
           max-width: 45% !important;
           background-color: #F0FBFF !important;
           padding: 3.5rem !important;
           border-radius: 1.5rem !important;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
           margin: 0 !important;
           display: block !important;
           position: relative !important;
       }
       
       .metodo-impact-title {
           font-size: 2.8rem !important;
           text-align: center !important;
           margin-bottom: 2.5rem !important;
           display: block !important;
           width: 100% !important;
       }
       
       .metodo-impact-list {
           display: flex !important;
           flex-direction: column !important;
           gap: 1.8rem !important;
       }
       
       .metodo-impact-item {
           display: flex !important;
           align-items: center !important;
           gap: 1.2rem !important;
           margin-bottom: 1rem !important;
       }
       
       .metodo-impact-item i,
       .metodo-impact-item [data-lucide] {
           flex-shrink: 0 !important;
           transform: scale(1.8) !important;
           margin-right: 0.5rem !important;
       }
       
       .metodo-impact-item span {
           font-size: 1.6rem !important;
           line-height: 1.5 !important;
       }
   
       /* AboutUs large screens */
       body {
           font-size: 22px !important;
       }
       
       .container {
           max-width: 1900px !important;
           padding-left: 3rem !important;
           padding-right: 3rem !important;
       }
       
       .aboutus1-hero-section {
           min-height: 80vh !important;
           overflow: hidden !important;
       }
       
       .aboutus1-hero-section .container {
           max-width: none !important;
           width: 100% !important;
           padding-left: 5rem !important;
           padding-right: 5rem !important;
       }
       
       .aboutus1-hero-title {
           font-size: 5rem !important;
           margin-bottom: 2rem !important;
           line-height: 1.1 !important;
           white-space: nowrap !important;
           max-width: 100% !important;
           text-align: center !important;
           padding: 0 !important;
       }
        
       .aboutus1-hero-subtitle {
           font-size: 2.2rem !important;
           line-height: 1.5 !important;
           margin-bottom: 3rem !important;
           margin-left: auto !important;
           margin-right: auto !important;
           text-align: center !important;
           max-width: 70% !important;
           display: -webkit-box !important;
           -webkit-line-clamp: 2 !important;
           -webkit-box-orient: vertical !important;
           overflow: hidden !important;
           text-overflow: ellipsis !important;
           height: calc(2.2rem * 1.5 * 2) !important;
       }
       
       .aboutus1-btn-hero {
           font-size: 1.5rem !important;
           padding: 1.3rem 2.5rem !important;
           border-radius: 0.6rem !important;
           display: inline-flex !important;
           align-items: center !important;
           gap: 1rem !important;
           transition: all 0.3s ease !important;
           font-weight: 600 !important;
           margin-top: 1rem !important;
       }
       
       .aboutus1-btn-hero i {
           width: 1.8rem !important;
           height: 1.8rem !important;
       }
   }
   
   /* Extremely large screens */
   @media (min-width: 2600px) {
       .container,
       section .container,
       .hero-section .container,
       div.container,
       .comparison-section .container,
       .success-stories .container,
       .learning-types .container,
       .why-choose-us .container,
       .integration-section .container {
           max-width: 2500px !important;
           width: 99% !important;
       }
       
       .hero-container {
           max-width: 2500px !important;
           width: 99% !important;
       }
       
       .hero-image {
           max-height: 800px !important;
       }
       
       .institutions-section,
       .institutions-section .container {
           max-width: 2500px !important;
           width: 99% !important;
       }
       
       .empresas-image-large {
           transform: scale(1.1) !important;
       }
       
       .cta-explora-section .cta-explora-container {
           max-width: 2500px !important;
           width: 99% !important;
       }
       
       .integration-info__title {
           margin-left: 20rem;
       }
       
       .integration-info__description {
           margin-left: 18rem;
       }
       
       .integration-main-title__highlight {
           white-space: nowrap;
       }
       
       .metodo-impact-grid {
           max-width: 2800px !important;
           gap: 5rem !important;
       }
       
       .metodo-impact-section {
           padding: 4.5rem !important;
       }
       
       .metodo-impact-title {
           font-size: 3.2rem !important;
       }
       
       .metodo-impact-item span {
           font-size: 2rem !important;
       }
       
       .metodo-impact-item i,
       .metodo-impact-item [data-lucide] {
           transform: scale(2.2) !important;
       }
   }
   
   /* Specific adjustments for large screen positioning */
   @media screen and (min-width: 1800px) {
       .hero-section .container .hero-container .hero-image-wrapper {
           margin-top: -30px !important;
           transform: none !important;
           position: relative !important;
           top: -20px !important;
       }
   }
   
   @media screen and (min-width: 2000px) {
       .hero-section .container .hero-container .hero-image-wrapper {
           margin-top: -40px !important;
           transform: none !important;
           position: relative !important;
           top: -30px !important;
       }
   }
   
   /* ============================================================
      26. ADDITIONAL UTILITY CLASSES
      ============================================================ */
   
   /* Color Classes */
   .blue {
       color: #14a8e1 !important;
   }
   
   .green {
       color: #4dac5e !important;
   }
   
   .red {
       color: #e1455c !important;
   }
   
   .yellow {
       color: #F8C72F !important;
   }
   
   /* Desktop Centering Fix */
   .container,
   .aboutus1-container {
       margin-left: auto !important;
       margin-right: auto !important;
   }
   
   @media (min-width: 1200px) {
       .container,
       .aboutus1-container {
           margin: 0 auto !important;
       }
   }
   
   /* Safari Support Fix */
   @supports not ((-webkit-line-clamp: 2) and (-webkit-box-orient: vertical)) {
       .aboutus1-hero-subtitle {
           overflow: visible !important;
           display: block !important;
           max-height: none !important;
           min-height: calc(2.2rem * 1.5 * 2) !important;
       }
   }
   
   /* Enhanced Animations & Effects */
   .aboutus1-transition-all {
       transition: all 0.3s ease-in-out !important;
   }
   
   .aboutus1-hover-rotate-0:hover {
       transform: rotate(0deg) !important;
   }
   
   .aboutus1-value-card:hover,
   .aboutus1-team-member:hover,
   .aboutus1-location-card:hover {
       transform: translateY(-0.7rem) !important;
       box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
   }
   
   p,
   .aboutus1-section-lead,
   .aboutus1-text-gray-600,
   .aboutus1-text-white-80 {
       letter-spacing: 0.01em !important;
   }
   
   h1,
   h2,
   h3,
   h4,
   .aboutus1-hero-title,
   .aboutus1-section-title,
   .aboutus1-value-title {
       letter-spacing: -0.02em !important;
   }
   
   [data-lucide] {
       stroke-width: 1.5px !important;
   }
   
   /* ============================================================
      END OF UNIFIED CSS FILE
      ============================================================ */