:root { 
            --mediterranean-blue: #0E4B7F; 
            --valencia-orange: #FF6B35; 
            --olive-green: #6B8E23; 
            --soil-brown: #8B4513; 
            --sky-blue: #87CEEB; 
            --digital-grey: #4A4A4A; 
            --light-sand: #FFF8E1; 
            --water-blue: #4A90E2; 
            --success-green: #52C41A; 
        } 
 
   
 
         
        /* Hero Section */ 
        .hero-about { 
          
            padding: 6rem 5% 4rem; 
            background: linear-gradient(135deg, #E8F5E9 0%, #E1F5FE 50%, var(--light-sand) 100%); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .hero-about::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='dots' x='0' y='0' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%230E4B7F' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23dots)'/%3E%3C/svg%3E"); 
        } 
 
        .hero-waves { 
            position: absolute; 

        bottom: 0; 
            left: 0; 
            width: 100%; 
            height: 100px; 

        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='white' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); 
        } 
 

        .hero-about-content { 
			display:block;
			min-height: calc(60vh - 70px);
            max-width: 1200px; 
            margin: 0 auto; 
            text-align: center; 
            position: relative; 
            z-index: 1; 
        } 
 
        .hero-about-content h1 { 
            font-size: 3.5rem; 
            font-weight: 800; 
            margin-bottom: 1.5rem; 
            background: linear-gradient(135deg, var(--olive-green), var(--mediterranean-blue)); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            animation: fadeInUp 0.8s ease; 
        } 
 
        @keyframes fadeInUp { 
            from { 
                opacity: 0; 
                transform: translateY(30px); 
            } 
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
 
        .hero-about-content p { 
            font-size: 1.3rem; 
            color: var(--digital-grey); 
            max-width: 800px; 
            margin: 0 auto; 
            opacity: 0.9; 
            animation: fadeInUp 0.8s ease 0.2s both; 
        } 
 
        /* Mission Section */ 
        .mission-section { 
            padding: 5rem 5%; 
            background: white; 
        } 
 
        .mission-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 4rem; 
            align-items: center; 
        } 
 
        .mission-text h2 { 
            font-size: 2.5rem; 
            margin-bottom: 1.5rem; 
            color: var(--mediterranean-blue); 
        } 
 
        .mission-text p { 
            font-size: 1.1rem; 
            line-height: 1.8; 
            color: var(--digital-grey); 
            margin-bottom: 1.5rem; 
        } 
 
        .mission-values { 
            display: grid; 
            gap: 1.5rem; 
        } 
 
        .value-item { 
            display: flex; 
            align-items: start; 
            gap: 1rem; 
            padding: 1rem; 
            border-radius: 15px; 
            transition: all 0.3s ease; 
            cursor: pointer; 
        } 
 
        .value-item:hover { 
            background: var(--light-sand); 
            transform: translateX(10px); 
        } 
 
        .value-icon { 
            width: 40px; 
            height: 40px; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 10px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            flex-shrink: 0; 
        } 
 
        .value-text h4 { 
            font-size: 1.1rem; 
            margin-bottom: 0.3rem; 
            color: var(--digital-grey); 
        } 
 
        .value-text p { 
            font-size: 0.95rem; 
            color: var(--digital-grey); 
            opacity: 0.8; 
        } 
 
        /* Mission Visual */ 
        .mission-visual { 
            position: relative; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        } 
 
        .circular-chart { 
            width: 400px; 
            height: 400px; 
            position: relative; 
            animation: rotate 20s linear infinite; 
        } 
 
        @keyframes rotate { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(360deg); } 
        } 
 
        .chart-center { 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            text-align: center; 
            background: white; 
            padding: 2rem; 
            border-radius: 50%; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
            width: 200px; 
            height: 200px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            animation: counter-rotate 20s linear infinite; 
        } 

        @keyframes counter-rotate { 
            from { transform: translate(-50%, -50%) rotate(0deg); } 
            to { transform: translate(-50%, -50%) rotate(-360deg); } 
        } 
 
        .chart-value { 
            font-size: 3rem; 
            font-weight: 800; 
            color: var(--mediterranean-blue); 
        } 
 
        .chart-label { 
            font-size: 0.9rem; 
            color: var(--digital-grey); 
            opacity: 0.7; 
        } 
 
        /* Team Section */ 
        .team-section { 
            padding: 5rem 5%; 
            background: var(--light-sand); 
        } 
 
        .team-container { 
            justify-items: center;
            max-width: 1200px; 
            margin: 0 auto; 
        } 
 
        .team-header { 
            text-align: center; 
            margin-bottom: 4rem; 
        } 
 
        .team-header h2 { 
            font-size: 2.5rem; 
            margin-bottom: 1rem; 
            color: var(--mediterranean-blue); 
        } 
 
        .team-header p { 
            font-size: 1.1rem; 
            color: var(--digital-grey); 
            opacity: 0.9; 
        } 
 
        .team-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 2rem; 
            margin-bottom: 3rem; 
        } 
 
        .founder-card { 
            width: 250px;
            background: white; 
            border-radius: 20px; 
            padding: 2rem; 
            text-align: center; 
            position: relative; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            overflow: hidden; 
        } 
 
        .founder-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 4px; 
            background: linear-gradient(90deg, var(--valencia-orange), var(--mediterranean-blue)); 
            transform: scaleX(0); 
            transition: transform 0.3s ease; 
        } 
 
        .founder-card:hover::before { 
            transform: scaleX(1); 
        } 
 
        .founder-card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
        } 
 
        .founder-avatar { 
            width: 120px; 
            height: 120px; 
            margin: 0 auto 1.5rem; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 3rem; 
            color: white; 
            position: relative; 
        } 
.founder-avatar img{
            width: 120px; 
            height: 120px;
    
}
        .founder-avatar::after { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            border-radius: 50%; 
            border: 3px solid var(--sky-blue); 
            opacity: 0.3; 
            animation: pulse 2s infinite; 
        } 
 
        @keyframes pulse { 
            0%, 100% { transform: scale(1); opacity: 0.3; } 
            50% { transform: scale(1.1); opacity: 0.1; } 
        } 
 
        .founder-name { 
            font-size: 1.3rem; 
            font-weight: 700; 
            margin-bottom: 0.3rem; 
            color: var(--digital-grey); 
        } 
 
        .founder-role { 
            font-size: 1rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
            font-weight: 500; 
        } 
 
        .founder-bio { 
            font-size: 0.9rem; 
            line-height: 1.6; 
            color: var(--digital-grey); 
            opacity: 0.8; 
            margin-bottom: 1rem; 
        } 
 
        .founder-links { 
            display: flex; 
            justify-content: center; 
            gap: 1rem; 
        } 
 
        .founder-links a { 
            width: 35px; 
            height: 35px; 
            border-radius: 50%; 
            background: #f0f0f0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--digital-grey); 
            text-decoration: none; 
            transition: all 0.3s ease; 
            font-size: 0.8rem; 
        } 
 
        .founder-links a:hover { 
            background: var(--mediterranean-blue); 
            color: white; 
            transform: translateY(-3px); 
        } 
 
        /* Journey Timeline */ 
        .timeline-section { 
            padding: 5rem 5%; 
            background: white; 
            position: relative; 
        } 
 
        .timeline-container { 
            max-width: 1000px; 
            margin: 0 auto; 
        } 
 
        .timeline-header { 
            text-align: center; 
            margin-bottom: 4rem; 
        } 
 
        .timeline-header h2 { 
            font-size: 2.5rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
        } 
 
        .timeline { 
            position: relative; 
            padding: 2rem 0; 
        } 
 
        .timeline::before { 
            content: ''; 
            position: absolute; 
            left: 50%; 
            top: 0; 
            bottom: 0; 
            width: 2px; 
            background: linear-gradient(180deg, var(--valencia-orange), var(--mediterranean-blue)); 
            transform: translateX(-50%); 
        } 
 
        .timeline-item { 
            display: flex; 
            align-items: center; 
            margin-bottom: 3rem; 
            position: relative; 
            opacity: 0; 
            animation: slideIn 0.6s ease forwards; 
        } 
 
        .timeline-item:nth-child(1) { animation-delay: 0.2s; } 
        .timeline-item:nth-child(2) { animation-delay: 0.4s; } 
        .timeline-item:nth-child(3) { animation-delay: 0.6s; } 
        .timeline-item:nth-child(4) { animation-delay: 0.8s; } 
        .timeline-item:nth-child(5) { animation-delay: 1s; } 
 
        @keyframes slideIn { 
            from { 
                opacity: 0; 
                transform: translateX(-50px); 
            } 
            to { 
                opacity: 1; 
                transform: translateX(0); 
            } 
        } 
 
        .timeline-item:nth-child(even) { 
            flex-direction: row-reverse; 
        } 
 
        .timeline-item:nth-child(even) { 
            animation-name: slideInRight; 
        } 
 
        @keyframes slideInRight { 
            from { 
                opacity: 0; 
                transform: translateX(50px); 
            } 
            to { 
                opacity: 1; 
                transform: translateX(0); 
            } 
        } 
 
        .timeline-content { 
            flex: 1; 
            padding: 2rem; 
            background: linear-gradient(135deg, #ffffff, #f8f9fa); 
            border-radius: 20px; 
            position: relative; 
            transition: all 0.3s ease; 
            border: 1px solid rgba(0,0,0,0.05); 
        } 
 
        .timeline-item:nth-child(odd) .timeline-content { 
            margin-right: 2rem; 
            text-align: right; 
        } 
 
        .timeline-item:nth-child(even) .timeline-content { 
            margin-left: 2rem; 
        } 
 
        .timeline-content:hover { 
            transform: scale(1.02); 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
        } 

        .timeline-dot { 
            width: 20px; 
            height: 20px; 
            background: white; 
            border: 4px solid var(--mediterranean-blue); 
            border-radius: 50%; 
            position: absolute; 
            left: 50%; 
            transform: translateX(-50%); 
            z-index: 10; 
        } 
 
        .timeline-date { 
            font-size: 0.9rem; 
            color: var(--valencia-orange); 
            font-weight: 600; 
            margin-bottom: 0.5rem; 
        } 
 
        .timeline-title { 
            font-size: 1.2rem; 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
        } 
 
        .timeline-description { 
            font-size: 0.95rem; 
            color: var(--digital-grey); 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
 
        /* Company Culture Section */ 
        .culture-section { 
            padding: 5rem 5%; 
            background: linear-gradient(135deg, #f5f5f5, #ffffff); 
        } 
 
        .culture-container { 
            max-width: 1200px; 
            margin: 0 auto; 
        } 
 
        .culture-header { 
            text-align: center; 
            margin-bottom: 3rem; 
        } 
 
        .culture-header h2 { 
            font-size: 2.5rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
        } 
 
        .culture-grid { 
			justify-items: center;
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
        } 
 
        .culture-card { 
            width: 250px;
            background: white; 
            border-radius: 20px; 
            padding: 2rem; 
            text-align: center; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .culture-card::before { 
            content: ''; 
            position: absolute; 
            top: -100%; 
            left: -100%; 
            width: 300%; 
            height: 300%; 
            background: radial-gradient(circle, var(--valencia-orange) 0%, transparent 70%); 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        } 
 
        .culture-card:hover::before { 
            opacity: 0.05; 
        } 
 
        .culture-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
        } 
 
        .culture-icon { 
            width: 70px; 
            height: 70px; 
            margin: 0 auto 1rem; 
            background: linear-gradient(135deg, var(--olive-green), var(--mediterranean-blue)); 
            border-radius: 20px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 2rem; 
        } 
 
        .culture-title { 
            font-size: 1.2rem; 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
        } 
 
        .culture-text { 
            color: var(--digital-grey); 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
 
        /* Interactive Statistics */ 
        .stats-visual { 
            padding: 5rem 5%; 
            background: linear-gradient(135deg, var(--mediterranean-blue), var(--olive-green)); 
            color: white; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .stats-visual::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            left: -50%; 
            width: 200%; 
            height: 200%; 
            background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); 
            background-size: 50px 50px; 
            animation: moveGrid 20s linear infinite; 
        } 
 
        @keyframes moveGrid { 
            0% { transform: translate(0, 0); } 
            100% { transform: translate(50px, 50px); } 
        } 
 
        .stats-content { 
            max-width: 1200px; 
            margin: 0 auto; 
            position: relative; 
            z-index: 1; 
        } 
 
        .stats-header { 
            text-align: center; 
            margin-bottom: 3rem; 
        } 
 
        .stats-header h2 { 
            font-size: 2.5rem; 
            margin-bottom: 1rem; 
        } 
 
        .stats-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 2rem; 
        } 
 
        .stat-box { 
            text-align: center; 
            padding: 2rem; 
            background: rgba(255,255,255,0.1); 
            border-radius: 20px; 
            backdrop-filter: blur(10px); 
            transition: all 0.3s ease; 
            cursor: pointer; 
        } 
 
        .stat-box:hover { 
            transform: translateY(-10px); 
            background: rgba(255,255,255,0.15); 
        } 
 
        .stat-icon { 
            font-size: 3rem; 
            margin-bottom: 1rem; 
        } 
 
        .stat-number { 
            font-size: 2.5rem; 
            font-weight: 800; 
            margin-bottom: 0.5rem; 
        } 
 
        .stat-label { 
            font-size: 1rem; 
            opacity: 0.9; 
        } 
 
        /* Partners & Recognition */ 
        .partners-section { 
            
            padding: 5rem 5%; 
            background: white; 
        } 
 
        .partners-container { 
            justify-content: center;
            
            max-width: 1200px; 
            margin: 0 auto; 
        } 
 
        .partners-header { 
            text-align: center; 
            margin-bottom: 3rem; 
        } 
 
        .partners-header h2 { 
            font-size: 2rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
        } 
 
        .partners-logos { 
          
            display: grid; 
            grid-template-columns: repeat(5, 1fr); 
            gap: 2rem; 
            align-items: center; 
        } 
 
        .partner-logo { 
            background: #f5f5f5; 
            border-radius: 15px; 
            padding: 2rem; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100px; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .partner-logo::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        } 
 
        .partner-logo:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
        } 
 
        .partner-logo:hover::before { 
            opacity: 0.1; 
        } 
 
        .partner-name { 
            font-weight: 600; 
            color: var(--digital-grey); 
            opacity: 0.7; 
            position: relative; 
            z-index: 1; 
        } 
         @media (max-width:1000px){
            .mission-container { 
                display: flex;
                flex-direction: column;
                justify-content: center;
                justify-items: center;
            }
            .team-grid { 
                    display: grid; 
                    grid-template-columns: repeat(3, 1fr); 
                    gap: 2rem; 
                    margin-bottom: 3rem; 
                } 

        }
        @media (max-width:950px){
             .team-grid { 
                    display: grid; 
                    grid-template-columns: repeat(2, 1fr); 
                    gap: 2rem; 
                    margin-bottom: 3rem; 
                } 
             .culture-container {
                 justify-items: center;

            }
             .culture-grid { 
             grid-template-columns: repeat(2, 1fr); 
            }
            .stats-grid { 
                    grid-template-columns: repeat(2, 1fr); 
                } 
        }
        @media (max-width:620px){
             .team-grid { 
                    display: grid; 
                    grid-template-columns: repeat(1, 1fr); 
                    gap: 2rem; 
                    margin-bottom: 3rem; 
                } 
            .culture-grid { 
             grid-template-columns: repeat(1, 1fr); 
            }
             .stats-grid { 
                    grid-template-columns: repeat(1, 1fr); 
                } 
            .partners-logos { 
                                grid-template-columns: repeat(3, 1fr); 
                } 
        }
        @media (max-width:450px){
            .partners-logos { 
                               grid-template-columns: repeat(2, 1fr);    
                } 
        }
        /* Footer */ 
        footer { 
            background: var(--digital-grey); 
            color: white; 
            padding: 4rem 5% 2rem; 
        } 
 
        .footer-content { 
            max-width: 1400px; 
            margin: 0 auto; 
        } 
 
        .footer-grid { 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr 1fr; 
            gap: 3rem; 
            margin-bottom: 3rem; 
        } 
 
        .footer-brand h3 { 
            font-size: 1.8rem; 
            margin-bottom: 1rem; 
        } 
 
        .footer-brand p { 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
 
        .footer-links h4 { 
            margin-bottom: 1rem; 
            font-size: 1.1rem; 
        } 
 
        .footer-links ul { 
            list-style: none; 
        } 
 
        .footer-links li { 
            margin-bottom: 0.5rem; 
        } 
 
        .footer-links a { 
            color: white; 
            text-decoration: none; 
            opacity: 0.8; 
            transition: opacity 0.3s ease; 
        } 
 
        .footer-links a:hover { 
            opacity: 1; 
        } 
 
        .footer-bottom { 
            padding-top: 2rem; 
            border-top: 1px solid rgba(255, 255, 255, 0.1); 
            text-align: center; 
            opacity: 0.7; 
        }