/* Global Styles */
:root {
  --primary-color: #0D9263;
  --dark-bg: #1a1a1a;
  --text-light: #ffffff;
}
.header{
  border-bottom: 0.5px solid #FFFFFF;
}

.navbar-brand{
  padding: unset;
    border-radius: unset;
    margin-top: unset;
}

.contactUsSection{
     margin-top: 100px;
}

.contactUsSection .container{
  display: flex;
      gap: 150px;
      flex-direction: column;
}
 
  /* Header */
  .contactUsSection .contact-hero{
    text-align:center;
  }
  
  .contactUsSection .contact-hero h1{
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 55px;
    text-transform: capitalize;
  }
  .contactUsSection .contact-hero h1 span{
    color: var(--primary-color);
  }
  .contactUsSection .contact-hero p.lead{
    color: #fff;
    max-width:840px;
    margin: 8px auto 30px;
    font-size:16px;
  }

  /* Info cards row */
  .contactUsSection .info-row{
    display:flex;
    gap:24px;
    justify-content:space-between; 
  }
  .contactUsSection .info-card{  
    display:flex;
    gap:8px;
    align-items:center;
    padding:24px 0;
    border-radius: 6px;
    background: linear-gradient(106deg, #0D9263 18.48%,  #CDC651 75.65%);
    opacity: 0.9;
    color: #fff;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
 
  .contactUsSection .info-card .bi img{
    width: 24px;
    height: 24px;
  }
 
  .contactUsSection .info-card .muted{ 
    color: #fff;
    font-size:16px;
    font-weight: 500;
  }
  .contactUsSection .contact-form{
    position: relative;
  }
  /* Form area */
 .contactUsSection .contact-form .gradient-1{
  position: absolute;
  width: 315.508px;
  height: 284.61px;
  transform: rotate(5.562deg);
  flex-shrink: 0;
  border-radius: 160.331px;
  background: linear-gradient(117deg, rgba(205, 198, 81, 0.17) 2.72%, rgba(111, 173, 90, 0.20) 50.64%, rgba(13, 146, 99, 0.19) 96.75%);
  filter: blur(61.54999923706055px);
  left: 40%;
 }
  .contactUsSection .form-control, .form-select{
    padding: 12px;
    height:56px;
    border-radius: 4px;
    border: 0.5px solid #FFF;
    background: linear-gradient(91deg, rgba(187, 187, 187, 0.20) 34.32%, rgba(85, 85, 85, 0.00) 173.91%);
  }
  .contactUsSection .contact-form .need-help-div{
    position: relative;
    padding: 36px 102px !important;
    border-radius: 4px;
    border: 0.5px solid #FFF;
    background: linear-gradient(91deg, rgba(187, 187, 187, 0.20) 34.32%, rgba(85, 85, 85, 0.00) 173.91%);
  }
  .contactUsSection .contact-form .need-help-div .gradient-2{
    width: 315.508px;
    height: 284.61px;
    transform: rotate(5.562deg);
    flex-shrink: 0;
    border-radius: 160.331px;
background: linear-gradient(117deg, rgba(205, 198, 81, 0.17) 2.72%, rgba(111, 173, 90, 0.20) 50.64%, rgba(13, 146, 99, 0.19) 96.75%);
filter: blur(61.54999923706055px);
position: absolute;
right: -40px;
top: -20px;
  }
  .contactUsSection .form-control::placeholder{ color: rgba(255,255,255,0.3); font-size:13px; }
  .contactUsSection label.form-label{ font-size: 18px;
    color: var(--primary-color);
    font-weight: 500; }

  /* checkbox grid */
  .contactUsSection .checkbox-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 18px;
    margin-bottom:16px;
  }
  @media (max-width:767px){
    .contactUsSection  .checkbox-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* custom checkbox */
  .contactUsSection  .form-check .form-check-input{
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    border-radius: 2px;
    background: #D9D9D9;
    margin-right: 12px;
  }
  .contactUsSection  .form-check-input:checked{
    background: linear-gradient(180deg, var(--primary-color), var(--primary-color-2));
    border: none;
  }
  .contactUsSection  .contact-form .small-muted{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    vertical-align: -webkit-baseline-middle;
    line-height: 43px;
    margin-bottom: 8px;
  }
  .contactUsSection   .contact-form .small-muted span{
font-size: 12px;
  }

  .contactUsSection  .contact-form textarea{
  height: 279px;
 }
  .contactUsSection  .message-box::placeholder{ color: rgba(255,255,255,0.28); }

  /* upload box */
  .contactUsSection  .upload-box{
    align-items: center;
    justify-content: center;
    display: flex;
    width:172px;
    height:138px;
    border-radius: 4px;
border: 0.5px solid #FFF;
background: linear-gradient(91deg, rgba(187, 187, 187, 0.20) 34.32%, rgba(85, 85, 85, 0.00) 173.91%);
  }

  /* Accept terms */
  .contactUsSection  .terms{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:12px;
    margin-bottom:18px;
    color: #fff;
    font-size:13px;
  }
 
  /* Services & Support section */
  .contactUsSection .services{
    position: relative;
  }
 .contactUsSection .services .gradient-3{
  width: 315.508px;
  height: 284.61px;
  transform: rotate(5.562deg);
  flex-shrink: 0;
  border-radius: 160.331px;
  background: linear-gradient(117deg, rgba(205, 198, 81, 0.17) 2.72%, rgba(111, 173, 90, 0.20) 50.64%, rgba(13, 146, 99, 0.19) 96.75%);
  filter: blur(61.54999923706055px);
  position: absolute;
  left: -40px;
  top: -20px;
 }
  .contactUsSection  .services .left h3{font-size: 40px; color: #fff; font-weight:700; margin-bottom:12px; }
  .contactUsSection .services .left p.lead{ color: #fff; font-size:16px; margin-bottom:18px; }
  .contactUsSection .services ul{ list-style:none; padding:0; margin-top:32px; }
  .contactUsSection .services li{
    display:flex; gap:8px; align-items:flex-start; margin-bottom:12px;
    color:#fff; font-size:16px;
  }
  
  .contactUsSection .services .right{
    background:#fff; width:466px; height: 350px; border-radius:8px;
  }

  /* small screens */
  @media (max-width: 991px){
    .contactUsSection .info-row{ gap:12px; padding:0 16px;}
    
  }
  @media (max-width: 575px){
    .contactUsSection .contact-hero h1{ font-size:22px; }
    .contactUsSection .info-card{ min-width: 100%; }
  }