: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 */ 
        .contact-hero { 
            
            padding: 4rem 5%; 
            background: linear-gradient(135deg, var(--sky-blue) 0%, var(--light-sand) 100%); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .contact-hero::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            right: -20%; 
            width: 60%; 
            height: 200%; 
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); 
            animation: float 10s ease-in-out infinite; 
        } 
 
        @keyframes float { 
            0%, 100% { transform: translateY(0) rotate(0deg); } 
            50% { transform: translateY(-30px) rotate(10deg); } 
        } 
 
        .hero-con-content { 
            max-width: 800px; 
            margin: 0 auto; 
            text-align: center; 
            position: relative; 
            z-index: 1; 
        } 
 
        .hero-con-content h1 { 
            font-size: 3rem; 
            font-weight: 800; 
            margin-bottom: 1rem; 
            background: linear-gradient(135deg, var(--mediterranean-blue), var(--valencia-orange)); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        } 
 
        .hero-con-content p { 
            font-size: 1.2rem; 
            color: var(--digital-grey); 
            opacity: 0.9; 
        } 
 
        /* Main Contact Section */ 
        .contact-main { 
           
            padding: 5rem 5%; 
            background: white; 
        } 
 
        .contact-container { 
             align-content: center;
            align-items: center;
            justify-content: center;
            justify-items: center;
            max-width: 1200px; 
            margin: 0 auto; 
         
           
        } 
 
        /* Contact Info Side */ 
        .contact-info { 
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
            padding: 1rem; 
        } 
 
        .info-card { 
            margin: 2rem;
            text-align-last: center;
            justify-content: center;
            justify-items: center;
            float: left;
            background: var(--light-sand); 
            border-radius: 20px; 
            padding: 1rem; 
            margin-bottom: 2rem; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .info-card::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; 
        } 
 
        .info-card:hover::before { 
            opacity: 0.05; 
        } 
 
        .info-card:hover { 
            transform: translateX(10px); 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
        } 
 
        .info-icon { 
            width: 50px; 
            height: 50px; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 15px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.5rem; 
            margin-bottom: 1rem; 
        } 
 
        .info-title { 
            font-size: 1.2rem; 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
        } 
 
        .info-text { 
            color: var(--digital-grey); 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
 
        .info-link { 
            color: var(--mediterranean-blue); 
            text-decoration: none; 
            font-weight: 500; 
            transition: color 0.3s ease; 
        } 
 
        .info-link:hover { 
            color: var(--valencia-orange); 
        } 
 
        /* Contact Form */ 
        .contact-form-wrapper { 
            
            min-width: 350px;
            width:fit-content;
            height: min-content;
            justify-items: center;
            background: white; 
            border-radius: 30px; 
            padding: 3rem; 
            box-shadow: 0 20px 60px rgba(0,0,0,0.1); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .contact-form-wrapper::before { 
            content: ''; 
            position: absolute; 
            top: -100px; 
            right: -100px; 
            width: 200px; 
            height: 200px; 
            background: radial-gradient(circle, var(--valencia-orange), transparent); 
            opacity: 0.1; 
        } 
 
        .form-header { 
            margin-bottom: 2rem; 
        } 
 
        .form-header h2 { 
            font-size: 2rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 0.5rem; 
        } 
 
        .form-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 1.5rem; 
            margin-bottom: 1.5rem; 
        } 
 
        .form-group { 
            position: relative; 
            
        } 
 
        .form-group.full-width { 
            grid-column: span 2; 
        } 
 
        .form-label { 
            display: block; 
            
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
            font-weight: 500; 
            font-size: 0.95rem; 
        } 
 
        .form-input { 
            width: 100%; 
            padding: 1rem 1.2rem; 
            border: 2px solid #e0e0e0; 
            border-radius: 15px; 
            font-size: 1rem; 
            transition: all 0.3s ease; 
            background: white; 
        } 
 
        .form-input:focus { 
            outline: none; 
            border-color: var(--mediterranean-blue); 
            box-shadow: 0 0 0 4px rgba(14, 75, 127, 0.1); 
        } 
 
        .form-textarea { 
            resize: vertical; 
            min-height: 150px; 
            font-family: inherit; 
        } 
 
        .form-submit { 
            width: 100%;
            padding: 1.2rem 3rem; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            color: white; 
            border: none; 
            border-radius: 30px; 
            font-size: 1.1rem; 
            font-weight: 600; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .form-submit::before { 
            content: ''; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            width: 0; 
            height: 0; 
            background: rgba(255,255,255,0.3); 
            border-radius: 50%; 
            transform: translate(-50%, -50%); 
            transition: width 0.6s, height 0.6s; 
        } 
 
        .form-submit:hover::before { 
            width: 400px; 
            height: 400px; 
        } 
 
        .form-submit:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4); 
        } 
 
        /* Success Message */ 
        .success-message { 
            background: linear-gradient(135deg, #E8F5E9, #C8E6C9); 
            border-radius: 15px; 
            padding: 1.5rem; 
            margin-bottom: 2rem; 
            display: flex; 
            align-items: center; 
            gap: 1rem; 
            animation: slideDown 0.5s ease; 
        } 
 
        @keyframes slideDown { 
            from { 
                opacity: 0; 
                transform: translateY(-20px); 
            } 
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
 
        .success-icon { 
            width: 40px; 
            height: 40px; 
            background: var(--success-green); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.5rem; 
        } 
 
        /* Map Section */ 
        .map-section { 
            padding: 5rem 5%; 
            background: var(--light-sand); 
        } 
 
        .map-container { 
            max-width: 1200px; 
            margin: 0 auto; 
        } 
 
        .map-header { 
            text-align: center; 
            margin-bottom: 3rem; 
        } 
 
        .map-header h2 { 
            font-size: 2.5rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
        } 
 
        .offices-grid { 
            justify-content: center;
            display: flex; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
            margin-bottom: 3rem; 
            flex-wrap: wrap;
        } 
 
        .office-card { 
            width: 250px;
            background: white; 
            border-radius: 20px; 
            padding: 2rem; 
            text-align: center; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .office-card::after { 
            content: ''; 
            position: absolute; 
            bottom: 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; 
        } 
 
        .office-card:hover::after { 
            transform: scaleX(1); 
        } 
 
        .office-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
        } 
 
        .office-icon { 
            width: 60px; 
            height: 60px; 
            margin: 0 auto 1rem; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.5rem; 
        } 
 
        .office-name { 
            font-size: 1.3rem; 
            font-weight: 700; 
            color: var(--digital-grey); 
            margin-bottom: 0.5rem; 
        } 
 
        .office-address { 
            color: var(--digital-grey); 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
 
        /* Interactive Map */ 
        .map-visual { 
            background: white; 
            border-radius: 20px; 
            padding: 2rem; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
            height: 400px; 
            position: relative; 
            overflow: hidden; 
            background-image: linear-gradient(135deg, #E8F5E9, #E1F5FE); 
        } 
 
        .map-placeholder { 
            width: 100%; 
            height: 100%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            position: relative; 
        } 
 
        .map-pin { 
            position: absolute; 
            width: 40px; 
            height: 40px; 
            background: var(--valencia-orange); 
            border-radius: 50% 50% 50% 0; 
            transform: rotate(-45deg); 
            animation: bounce 2s infinite; 
        } 
 
        @keyframes bounce { 
            0%, 100% { transform: rotate(-45deg) translateY(0); } 
            50% { transform: rotate(-45deg) translateY(-10px); } 
        } 
 
        .map-pin::after { 
            content: ''; 
            position: absolute; 
            width: 20px; 
            height: 20px; 
            background: white; 
            border-radius: 50%; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
        } 

.contacts{
    width: 100vw;
        
        justify-self: center;
        justify-items: center;
         height: max-content;
            padding: 5rem 5%; 
            background: white;   
}
 
    /* 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; 
        } 
   @media (max-width: 768px) { 
            .nav-links { 
                display: none; 
            } 
            .hero-text h1 { 
                font-size: 2.5rem; 
            } 
            .features-grid { 
                grid-template-columns: 1fr; 
            } 
            .footer-grid { 
                grid-template-columns: 1fr; 
                text-align: center; 
            } 
       .info-card{
            width: 250px;
            border-radius: 20px; 
            padding: 2rem; 
            text-align: center; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
       }
       .contact-info { 
           justify-content: center;
            display: flex;
           flex-direction: column;
            padding: 1rem; 
        } 
     }