:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --primary-color: #FF5100;
    --secondary-color: #FF5100;
    --heading-color: #FF5100;
    --card-bg: #f5f5f5;
    --footer-bg: #0b0b0d;
    --footer-text: #fff;
    --button-bg: #FF5100;
    --button-text: #fff;
    --border-color: #e0e0e0;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #ffffff;
    --primary-color: #FF5100;
    --secondary-color: #FF5100;
    --heading-color: #FF5100;
    --card-bg: #232323;
    --footer-bg: #18181b;
    --footer-text: #fff;
    --button-bg: #333;
    --button-text: #fff;
    --border-color: #333;
}
 .hero-section {
    background: url('../images/contact-banner.png') no-repeat center center;
    background-size: cover;
    color: white;
    text-align: center;
    padding: 120px 20px;
    position: relative;
}
 
 .contact-section {
      padding: 60px 60px;
    }
    .contact-section h2 {
      font-weight: bold;
      font-size: 40px;
    }
    .contact-section small {
      color: #ff5722;
      font-weight: bold;
    }
    .contact-info p {
      margin-bottom: 8px;
      font-size: 14px;
      color: var(--text-color)
    }
    .contact-info strong {
      font-weight: bold;
      color:var(--text-color)
    }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      background: #f1f1f1;
      padding: 15px;
      width: 100%;
          margin: 18px -2px 7px 0px;
      border-radius: 10px;
      resize: none;
    }
    .contact-form button {
      border: none;
      padding: 12px 40px !important;
      font-weight: 600 !important;
      border-radius: 30px !important;
      color: #ffffff !important;
    }
    @media (max-width: 768px) {
      .contact-section {
        padding: 40px 20px;
      }
    }