/* -----------contact-us  section start----------- */

body{
    overflow-x: hidden;
}

.contact-us{
  width: 100%;
  height: auto;
}

.us-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 30%;
}

.us-cont {
  position: relative;
  justify-content: center;
  align-items: center;
  padding-top: 5%;
  margin-top: 2%;
  color: white;
  margin-left: 20px;
}

.us-cont .para {
  font-family: 'Halant', serif;
  letter-spacing: 2px;
  font-size: 14px;
}

.us-cont p {
  font-size: 12px;
}

.us-cont h3 {
  margin-top: -32px;
  font-size: 90px;
  margin-left: 16px;
  color: #e0b35e;
  font-family: 'bits_indian_calligraregular';
  letter-spacing: 5px;
}
  
  .main{
    display: flex;
padding: 3%;

  }

  .become{
    width: 70%;
    color: white;
   }

   .become h3{
    font-size: 30px;
    padding: 2%;
    font-family: 'halantlight';
   }
   #volun-form{
    height: 50%;
  }
  .volunteer-list{
    list-style: disc;
    padding-left: 5%;
  }
  
  .volunteer-list li{
    font-size: 14px;
    letter-spacing: 1px;
    font-family: 'avenirlight';
  }
   .become p{
    width: 70%;
    padding: 1%;
    font-family: 'avenirlight';
    font-size: 16px;
    line-height: 22px;
   }
  
  .cont-overlay{
    margin-top: -1%;
    padding:2%;
     position: relative;
     right: 0;
     height:auto;
     width: 45%;
     background-color:rgba(93, 91, 95, 0.8) ;
     border-radius: 10px;
  }
  
  .get h3{
    font-family: 'avenirlight';
    font-size: 22px;
    letter-spacing: 2px;
    color: #e0b35e;
    padding-bottom: 2%;
  }
  
  .get label{
    font-size: 13px;
    color: white;
    letter-spacing: 1px;
    font-family: 'halantlight';
  }
  
  input{
    width: 100%;
    font-family: 'avenirlight';
  }
  
  .submit{
    margin-top: 2%;
     background-color: #e0b35e;
     border: 1px solid #e0b35e;
     border-radius: 4px;
     padding: 2%;
     width: 100%;
  }

  #message{
    max-height: 130px;
    min-height: 50px;
    width: 100%;
  }

  #submit{
    padding-left: 5%;
    padding-right: 5%;
  }
  /* -----------contact-us  section end----------- */

  
  @media screen and (max-width:768px){
    .main{
      width: 100%;
      display: block;
  
      /* */
    }

    
  .us {
    padding: 5%;
    display: block;
  }
 
    .become{
      width: 100%;
      justify-content: center;
      align-items: center;
     text-align: center; 
    }

    .become p{
      width: 100%;
    }

    .contact-us{
      height: auto;
    }
    .cont-overlay{
    
       position: relative;
       right: 0;
       height:auto;
       width: 100%;
      
    }

    #message{
      max-height: 200px;
      min-height: 50px;
      width: 100%;
    }

    #submit{
      padding-left: 5%;
      padding-right: 5%;
    }

    .cont-overlay{
      padding: 4%;
    }
}