:root {
           --bg-color: #0a0f1e;
           --accent-primary: #c63421;
           --accent-secondary: #c63421;
           --text-primary: #ffffff;
           --text-secondary: rgba(255, 255, 255, 0.7);
           --card-bg: rgba(15, 23, 42, 0.7);
           --card-border: rgba(115, 35, 28, 0.2);
           --input-bg: rgba(255, 255, 255, 0.05);
       }

       body {
           background-color: var(--bg-color);
           font-family: 'Inter', sans-serif;
           color: var(--text-primary);
           margin: 0;
           padding: 0;
           min-height: 100vh;
           overflow-x: hidden;
       }

       .space {
           height: 80px;
       }

       h1 {
           font-size: 3.5rem;
           font-weight: 800;
           text-align: center;
           margin-bottom: 3rem;
           background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
           -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
           position: relative;
           padding-bottom: 1rem;
       }

       h1::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 100px;
           height: 4px;
           background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
           border-radius: 2px;
       }

       /* Contact Section */
       .contact-container {
           max-width: 1000px;
           margin: 0 auto;
           padding: 2rem;
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 3rem;
       }

       @media (max-width: 768px) {
           .contact-container {
               grid-template-columns: 1fr;
           }
       }

       /* Contact Info */
       .contact-info {
           background: var(--card-bg);
           border: 1px solid var(--card-border);
           border-radius: 20px;
           padding: 2.5rem;
           backdrop-filter: blur(10px);
           position: relative;
           overflow: hidden;
       }

       .contact-info::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: linear-gradient(135deg, rgba(0, 245, 255, 0.1) 0%, transparent 50%);
           z-index: 0;
       }

       .contact-info-content {
           position: relative;
           z-index: 2;
       }

       .contact-info h2 {
           font-size: 1.8rem;
           margin-bottom: 1.5rem;
           color: var(--text-primary);
       }

       .contact-info p {
           color: var(--text-secondary);
           line-height: 1.6;
           margin-bottom: 2rem;
       }

       .contact-method {
           display: flex;
           align-items: center;
           margin-bottom: 1.5rem;
       }

       .contact-icon {
           width: 50px;
           height: 50px;
           background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
           border-radius: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-right: 1rem;
           flex-shrink: 0;
       }

       .contact-icon .material-symbols-outlined {
           font-size: 1.5rem;
           color: var(--text-primary);
       }

       .contact-details h3 {
           font-size: 1.1rem;
           margin-bottom: 0.25rem;
           color: var(--text-primary);
       }

       .contact-details p {
           margin: 0;
           color: var(--text-secondary);
       }

       .social-links {
           display: flex;
           gap: 1rem;
           margin-top: 2rem;
       }

       .social-link {
           width: 40px;
           height: 40px;
           background: var(--input-bg);
           border: 1px solid var(--card-border);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.3s ease;
       }
option{
  color: black;
}
       .social-link:hover {
           background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
           transform: translateY(-3px);
       }

       /* Contact Form */
       .contact-form {
           background: var(--card-bg);
           border: 1px solid var(--card-border);
           border-radius: 20px;
           padding: 2.5rem;
           backdrop-filter: blur(10px);
           position: relative;
           overflow: hidden;
       }

       .contact-form::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: linear-gradient(135deg, rgba(198, 52, 33, 0.1) 0%, transparent 50%);
           z-index: 0;
       }

       .form-content {
           position: relative;
           z-index: 2;
       }

       .form-group {
           margin-bottom: 1.5rem;
           position: relative;
       }

       .form-group label {
           display: block;
           margin-bottom: 0.5rem;
           font-weight: 500;
           color: var(--bg-color);
       }

       .form-control {
           width: 100%;
           padding: 1rem 1.2rem;
           background: var(--input-bg);
           border: 1px solid var(--card-border);
           border-radius: 12px;
           color: var(--text-primary);
           font-family: 'Inter', sans-serif;
           font-size: 1rem;
           transition: all 0.3s ease;
       }

       .form-control:focus {
           outline: none;
           border-color: var(--accent-primary);
           box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2);
       }

       textarea.form-control {
           min-height: 150px;
           resize: vertical;
       }

       .form-submit {
           display: block;
           width: 100%;
           padding: 1.2rem;
           background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
           color: var(--text-primary);
           border: none;
           border-radius: 12px;
           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: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
           transition: all 0.6s ease;
       }

       .form-submit:hover {
           transform: translateY(-3px);
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
       }

       .form-submit:hover::before {
           left: 100%;
       }

       .form-submit:disabled {
           opacity: 0.7;
           cursor: not-allowed;
           transform: none;
       }

       .form-alert {
           padding: 1rem;
           border-radius: 12px;
           margin-bottom: 1.5rem;
           display: none;
       }

       .alert-success {
           background: rgba(46, 204, 113, 0.2);
           border: 1px solid rgba(46, 204, 113, 0.3);
           color: #2ecc71;
       }

       .alert-error {
           background: rgba(231, 76, 60, 0.2);
           border: 1px solid rgba(231, 76, 60, 0.3);
           color: #e74c3c;
       }

       /* Background elements */
       .bg-globe {
           position: absolute;
           top: 20%;
           right: 5%;
           width: 400px;
           height: 400px;
           background: radial-gradient(circle at center, rgba(0, 245, 255, 0.1) 0%, transparent 70%);
           border-radius: 50%;
           filter: blur(40px);
           z-index: -1;
           animation: float 15s ease-in-out infinite;
       }

       .bg-particles {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           pointer-events: none;
           z-index: -1;
       }

       .particle {
           position: absolute;
           background: var(--accent-primary);
           border-radius: 50%;
           opacity: 0.3;
           animation: floatParticle 20s linear infinite;
       }

       /* Animations */
       @keyframes gradientShift {
           0%, 100% { background-position: 0% 50%; }
           50% { background-position: 100% 50%; }
       }

       @keyframes float {
           0%, 100% { transform: translateY(0) rotate(0deg); }
           50% { transform: translateY(-20px) rotate(5deg); }
       }

       @keyframes floatParticle {
           0% {
               transform: translateY(100vh) translateX(0) rotate(0deg);
               opacity: 0;
           }
           10% { opacity: 0.3; }
           90% { opacity: 0.2; }
           100% {
               transform: translateY(-100px) translateX(100px) rotate(360deg);
               opacity: 0;
           }
       }

       /* Responsive Design */
       @media (max-width: 1024px) {
           h1 {
               font-size: 2.8rem;
           }
       }

       @media (max-width: 768px) {
           .contact-container {
               padding: 1rem;
           }

           h1 {
               font-size: 2.2rem;
           }

           .contact-info, .contact-form {
               padding: 2rem;
           }

           .bg-globe {
               width: 300px;
               height: 300px;
               top: 10%;
               right: -50px;
           }
       }

       @media (max-width: 480px) {
           h1 {
               font-size: 1.8rem;
           }

           .contact-method {
               flex-direction: column;
               text-align: center;
           }

           .contact-icon {
               margin-right: 0;
               margin-bottom: 0.5rem;
           }
       }
