* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   body {
       background: #e0e5ec;
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
       transition: background 0.3s ease;
   }
   .contact-section {
       width: 100%;
       max-width: 1200px;
   }
   .contact-container {
       display: grid;
       grid-template-columns: 1fr 1.2fr;
       gap: 40px;
       align-items: start;
   }
   /* Neomorphic Base Styles */
   .neo-card {
       background: #e0e5ec;
       border-radius: 20px;
       box-shadow: 
           10px 10px 20px #b8bec7,
           -10px -10px 20px #ffffff;
       transition: all 0.3s ease;
   }
   .neo-card-inset {
       background: #e0e5ec;
       border-radius: 15px;
       box-shadow: 
           inset 5px 5px 10px #b8bec7,
           inset -5px -5px 10px #ffffff;
   }
   .neo-button {
       background: #e0e5ec;
       border: none;
       border-radius: 15px;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
       transition: all 0.2s ease;
       cursor: pointer;
   }
   .neo-button:hover {
       box-shadow: 
           2px 2px 5px #b8bec7,
           -2px -2px 5px #ffffff;
       transform: translateY(2px);
   }
   .neo-button:active {
       box-shadow: 
           inset 2px 2px 5px #b8bec7,
           inset -2px -2px 5px #ffffff;
   }
   /* Contact Info Styles */
   .contact-info {
       padding: 40px 30px;
       display: flex;
       flex-direction: column;
       gap: 30px;
       height: 100%;
   }
   .section-header {
       margin-bottom: 10px;
   }
   .section-subtitle {
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: #6a7a9c;
       margin-bottom: 10px;
   }
   .section-title {
       font-size: 2.2rem;
       margin-bottom: 15px;
       font-weight: 700;
       color: #4a5568;
       background: linear-gradient(135deg, #6a7a9c, #4a5568);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   .section-description {
       font-size: 1rem;
       line-height: 1.6;
       color: #6a7a9c;
   }
   .contact-methods {
       display: flex;
       flex-direction: column;
       gap: 25px;
   }
   .contact-method {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 15px;
       border-radius: 15px;
       transition: all 0.3s ease;
   }
   .contact-method:hover {
       box-shadow: 
           inset 2px 2px 5px #b8bec7,
           inset -2px -2px 5px #ffffff;
   }
   .contact-icon {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       color: #6a7a9c;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
       transition: all 0.3s ease;
   }
   .contact-method:hover .contact-icon {
       color: #5a67d8;
       transform: scale(1.1);
   }
   .contact-details h3 {
       font-size: 1.1rem;
       margin-bottom: 5px;
       color: #4a5568;
   }
   .contact-details p {
       color: #6a7a9c;
       line-height: 1.5;
   }
   .social-links {
       display: flex;
       gap: 15px;
       margin-top: 10px;
   }
   .social-link {
       width: 45px;
       height: 45px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       text-decoration: none;
       color: #6a7a9c;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
   }
   .social-link:hover {
       color: #5a67d8;
       transform: translateY(-5px);
       box-shadow: 
           8px 8px 15px #b8bec7,
           -8px -8px 15px #ffffff;
   }
   /* Contact Form Styles */
   .form-container {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   .form-header {
       padding: 0 10px;
   }
   .form-title {
       font-size: 1.8rem;
       color: #4a5568;
       margin-bottom: 5px;
       font-weight: 700;
   }
   .form-subtitle {
       color: #6a7a9c;
       font-size: 1rem;
   }
   .contact-form {
       padding: 30px;
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   .form-group {
       position: relative;
   }
   .form-label {
       display: block;
       margin-bottom: 8px;
       font-weight: 600;
       color: #4a5568;
       padding-left: 10px;
   }
   .form-input, .form-textarea {
       width: 100%;
       padding: 15px 20px;
       border: none;
       border-radius: 15px;
       font-size: 1rem;
       transition: all 0.3s ease;
       background: #e0e5ec;
       box-shadow: 
           inset 5px 5px 10px #b8bec7,
           inset -5px -5px 10px #ffffff;
       color: #4a5568;
   }
   .form-input:focus, .form-textarea:focus {
       outline: none;
       box-shadow: 
           inset 3px 3px 6px #b8bec7,
           inset -3px -3px 6px #ffffff,
           0 0 0 2px rgba(90, 103, 216, 0.3);
   }
   .form-textarea {
       min-height: 120px;
       resize: vertical;
   }
   .submit-btn {
       background: #e0e5ec;
       color: #5a67d8;
       padding: 15px 30px;
       border-radius: 15px;
       font-size: 1rem;
       font-weight: 600;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       margin-top: 10px;
       transition: all 0.3s ease;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
       width: 100%;
   }
   .submit-btn:hover {
       color: #4c51bf;
       box-shadow: 
           2px 2px 5px #b8bec7,
           -2px -2px 5px #ffffff;
       transform: translateY(2px);
   }
   .submit-btn:active {
       box-shadow: 
           inset 2px 2px 5px #b8bec7,
           inset -2px -2px 5px #ffffff;
   }
   .submit-btn i {
       transition: transform 0.3s ease;
   }
   .submit-btn:hover i {
       transform: translateX(5px);
   }
   .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
   }
   /* Success Card Styles */
   .success-card {
       display: none;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 40px 30px;
       gap: 25px;
   }
   .success-icon {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
       color: #38a169;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
       background: #e0e5ec;
       animation: pulse 2s infinite;
   }
   @keyframes pulse {
       0% {
           transform: scale(1);
           box-shadow: 
               5px 5px 10px #b8bec7,
               -5px -5px 10px #ffffff;
       }
       50% {
           transform: scale(1.05);
           box-shadow: 
               8px 8px 15px #b8bec7,
               -8px -8px 15px #ffffff;
       }
       100% {
           transform: scale(1);
           box-shadow: 
               5px 5px 10px #b8bec7,
               -5px -5px 10px #ffffff;
       }
   }
   .success-title {
       font-size: 1.8rem;
       color: #38a169;
       font-weight: 700;
       margin-bottom: 10px;
   }
   .success-message {
       color: #6a7a9c;
       line-height: 1.6;
       margin-bottom: 10px;
   }
   .send-another-btn {
       background: #e0e5ec;
       color: #5a67d8;
       padding: 12px 25px;
       border-radius: 15px;
       font-size: 1rem;
       font-weight: 600;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       transition: all 0.3s ease;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
       border: none;
       margin-top: 10px;
   }
   .send-another-btn:hover {
       color: #4c51bf;
       box-shadow: 
           2px 2px 5px #b8bec7,
           -2px -2px 5px #ffffff;
       transform: translateY(2px);
   }
   .send-another-btn:active {
       box-shadow: 
           inset 2px 2px 5px #b8bec7,
           inset -2px -2px 5px #ffffff;
   }
   /* Error Message */
   .error-message {
       background: #e0e5ec;
       color: #e53e3e;
       padding: 12px 18px;
       border-radius: 15px;
       margin-top: 15px;
       display: none;
       box-shadow: 
           inset 2px 2px 5px #b8bec7,
           inset -2px -2px 5px #ffffff;
       text-align: center;
       font-weight: 600;
       font-size: 0.9rem;
   }
   /* Theme Toggle */
   .theme-toggle {
       position: fixed;
       top: 20px;
       right: 20px;
       z-index: 100;
   }
   .theme-btn {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.3s ease;
       color: #6a7a9c;
       box-shadow: 
           5px 5px 10px #b8bec7,
           -5px -5px 10px #ffffff;
       background: #e0e5ec;
   }
   .theme-btn:hover {
       color: #5a67d8;
       transform: rotate(30deg);
   }
   /* Animation */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   .contact-container > * {
       animation: fadeInUp 0.6s ease-out;
   }
   .form-container {
       animation-delay: 0.2s;
       animation-fill-mode: both;
   }
   /* Responsive Design */
   @media (max-width: 1024px) {
       .contact-container {
           grid-template-columns: 1fr;
           gap: 30px;
       }
       
       .section-title {
           font-size: 2rem;
       }
       
       .contact-info, .contact-form {
           padding: 30px 25px;
       }
   }
   @media (max-width: 768px) {
       .contact-container {
           gap: 25px;
       }
       
       .section-title {
           font-size: 1.8rem;
       }
       
       .form-title {
           font-size: 1.6rem;
       }
       
       .contact-info, .contact-form {
           padding: 25px 20px;
       }
       
       .form-row {
           grid-template-columns: 1fr;
           gap: 15px;
       }
   }
   @media (max-width: 576px) {
       body {
           padding: 15px;
       }
       
       .contact-container {
           gap: 20px;
       }
       
       .section-title {
           font-size: 1.6rem;
       }
       
       .form-title {
           font-size: 1.4rem;
       }
       
       .contact-info, .contact-form {
           padding: 20px 15px;
       }
       
       .contact-method {
           flex-direction: column;
           text-align: center;
           gap: 10px;
       }
       
       .social-links {
           justify-content: center;
       }
       
       .theme-btn {
           width: 45px;
           height: 45px;
       }
       
       .success-icon {
           width: 70px;
           height: 70px;
           font-size: 1.8rem;
       }
       
       .success-title {
           font-size: 1.6rem;
       }
   }
   @media (max-width: 400px) {
       .section-title {
           font-size: 1.4rem;
       }
       
       .form-title {
           font-size: 1.3rem;
       }
       
       .contact-info, .contact-form {
           padding: 15px 10px;
       }
       
       .form-input, .form-textarea {
           padding: 12px 15px;
       }
       
       .success-icon {
           width: 60px;
           height: 60px;
           font-size: 1.5rem;
       }
       
       .success-title {
           font-size: 1.4rem;
       }
   }
   /* Dark Theme */
   body.dark-theme {
       background: #2d3748;
   }
   body.dark-theme .neo-card {
       background: #2d3748;
       box-shadow: 
           10px 10px 20px #1a202c,
           -10px -10px 20px #4a5568;
   }
   body.dark-theme .neo-card-inset {
       background: #2d3748;
       box-shadow: 
           inset 5px 5px 10px #1a202c,
           inset -5px -5px 10px #4a5568;
   }
   body.dark-theme .neo-button {
       background: #2d3748;
       box-shadow: 
           5px 5px 10px #1a202c,
           -5px -5px 10px #4a5568;
   }
   body.dark-theme .section-title {
       background: linear-gradient(135deg, #a0aec0, #e2e8f0);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   body.dark-theme .section-description,
   body.dark-theme .contact-details p,
   body.dark-theme .form-label,
   body.dark-theme .form-subtitle {
       color: #a0aec0;
   }
   body.dark-theme .contact-details h3,
   body.dark-theme .form-title {
       color: #e2e8f0;
   }
   body.dark-theme .form-input,
   body.dark-theme .form-textarea {
       background: #2d3748;
       box-shadow: 
           inset 5px 5px 10px #1a202c,
           inset -5px -5px 10px #4a5568;
       color: #e2e8f0;
   }
   body.dark-theme .social-link,
   body.dark-theme .contact-icon,
   body.dark-theme .theme-btn {
       box-shadow: 
           5px 5px 10px #1a202c,
           -5px -5px 10px #4a5568;
       color: #a0aec0;
       background: #2d3748;
   }
   body.dark-theme .success-icon {
       background: #2d3748;
       box-shadow: 
           5px 5px 10px #1a202c,
           -5px -5px 10px #4a5568;
   }
   body.dark-theme .send-another-btn {
       background: #2d3748;
       box-shadow: 
           5px 5px 10px #1a202c,
           -5px -5px 10px #4a5568;
   }
   body.dark-theme .error-message {
       background: #2d3748;
       box-shadow: 
           inset 2px 2px 5px #1a202c,
           inset -2px -2px 5px #4a5568;
   }