.contact-section{ background:#02132d; padding:120px 20px; min-height:100vh; } .contact-section .container{ max-width:1400px; margin:auto; } .contact-header{ text-align:center; margin-bottom:70px; } .contact-badge{ display:inline-block; padding:10px 18px; border-radius:30px; background:rgba(37,99,235,.15); border:1px solid rgba(78,161,255,.25); color:#4ea1ff; font-size:13px; font-weight:700; letter-spacing:1px; } .contact-header h1{ color:#fff; font-size:60px; font-weight:800; margin:20px 0 15px; } .contact-header p{ color:#a7b8d8; max-width:700px; margin:auto; } .contact-wrapper{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; } .contact-info{ background: rgba(255,255,255,.04); backdrop-filter:blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius:30px; padding:40px; } .contact-info h2{ color:#fff; margin-bottom:15px; font-size:34px; } .contact-info p{ color:#a7b8d8; line-height:1.8; } .info-card{ display:flex; gap:20px; align-items:center; margin-top:30px; } .icon-box{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:18px; background: linear-gradient( 135deg, #2563eb, #06b6d4 ); color:#fff; font-size:22px; } .info-card h4{ color:#fff; margin-bottom:5px; } .social-links{ margin-top:40px; display:flex; gap:15px; } .social-links a{ width:45px; height:45px; display:flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; color:#fff; background: rgba(255,255,255,.08); transition:.3s; } .social-links a:hover{ transform:translateY(-4px); background: linear-gradient( 135deg, #2563eb, #06b6d4 ); } /* FORM */ .contact-form-card{ background: rgba(255,255,255,.04); backdrop-filter:blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius:30px; padding:40px; } .form-group{ margin-bottom:25px; } .form-group label{ display:block; color:#fff; margin-bottom:10px; font-weight:600; } .form-group input, .form-group textarea{ width:100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius:15px; padding:16px 18px; color:#fff; outline:none; transition:.3s; } .form-group input:focus, .form-group textarea:focus{ border-color:#2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); } .send-btn{ width:100%; border:none; padding:18px; border-radius:16px; color:#fff; font-size:16px; font-weight:700; cursor:pointer; background: linear-gradient( 135deg, #2563eb, #06b6d4 ); transition:.3s; } .send-btn:hover{ transform:translateY(-3px); } @media(max-width:991px){ .contact-wrapper{ grid-template-columns:1fr; } .contact-header h1{ font-size:42px; } }