: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;*/
/*}*/
.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;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0, rgb(0 0 0 / 70%) 43%) 0 0 / cover, url(../images/contact-banner.png) center / cover no-repeat;
}
 
 .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;
      }
    }