body{
    color:#fff
  }
  .contactbanner{position: relative; height: 600px;}
  .banner-header{
    font-size: 70px;
    color: #fff;
    position: absolute;
    top: 50%;
    left:20px;
  }
  .banner-header:after{content: '';display: block; position: relative;width: 30%; border: 3px solid #fff; margin-top: 20px;}
  .logo{width: 250px;}
  .right_conatct_social_icon{
       background: linear-gradient(to top right, #3d5e8d -5%, #04664b 100%);
  }
  .contact_us{
      background-color: #f1f1f1;
      padding: 50px 0px;
  }
  
  .contact_inner{
      background-color: #fff;
      position: relative;
      box-shadow: 20px 22px 44px #cccc;
      border-radius: 25px;
  }
  .contact_field{
      padding: 60px 340px 90px 100px;
  }
  .right_conatct_social_icon{
      height: 100%;
  }
  
  .contact_field h3{
     color: #000;
      font-size: 40px;
      letter-spacing: 1px;
      font-weight: 600;
      margin-bottom: 10px
  }
  .contact_field p{
      color: #000;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 1px;
      margin-bottom: 35px;
  }
  .contact_field .form-control{
      border-radius: 0px;
      border: none;
      border-bottom: 1px solid #ccc;
  }
  .contact_field .form-control:focus{
      box-shadow: none;
      outline: none;
      border-bottom: 2px solid #1325e8;
  }
  .contact_field .form-control::placeholder{
      font-size: 13px;
      letter-spacing: 1px;
  }
  
  .contact_info_sec {
      position: absolute;
      background-color: #2d2d2d;
      right: 1px;
      top: 18%;
      height: 340px;
      width: 340px;
      padding: 40px;
      border-radius: 25px 0 0 25px;
  }
  .contact_info_sec h4{
      letter-spacing: 1px;
      padding-bottom: 15px;
  }
  
  .info_single{
      margin: 30px 0px;
  }
  .info_single i{
      margin-right: 15px;
  }
  .info_single input span{
      font-size: 14px;
      letter-spacing: 1px;
  }
  
  button.contact_form_submit {
      background: linear-gradient(to top right, #3d5e8d -5%, #04664b 100%);
      border: none;
      color: #fff;
      padding: 10px 15px;
      width: 100%;
      margin-top: 25px;
      border-radius: 35px;
      cursor: pointer;
      font-size: 14px;
      letter-spacing: 2px;
  }
  .socil_item_inner li{
      list-style: none;
  }
  .socil_item_inner li a{
      color: #fff;
      margin: 0px 15px;
      font-size: 14px;
  }
  .socil_item_inner{
      padding-bottom: 10px;
  }
  
  .map_sec{
      padding: 50px 0px;
  }
  .map_inner h4, .map_inner p{
      color: #000;
      text-align: center
  }
  .map_inner p{
      font-size: 13px;
  }
  .map_bind{
     margin-top: 50px;
      border-radius: 20px;
      overflow: hidden;
  }
@media only screen and (max-width:1024px){
  .contactbanner{position: relative; height: 400px;}
  .banner-header{
    font-size: 50px;
   
    top: 220px;
    left:350px;
  }
}

@media only screen and (max-width:992px){
    .socil_item_inner li a{
        color: #fff;
        margin: 0px 5px;
        font-size: 17px;
    }
    .socil_item_inner{margin-left: 15px;}
}

@media only screen and (max-width:800px){
  .contactbanner{ height: 300px;}
  .banner-header{
    font-size: 50px;
   
    top: 150px;
    left:250px;
  }
  
    .contact_info_sec{top: 440px;}  
    .contact_field {
        padding: 60px 20px;
        height: 800px;
    }
    .right_conatct_social_icon{
        background: linear-gradient(to bottom right, #3d5e8d -5%, #04664b 100%);
   }
   .contact_info_sec {width: 450px;}
   .socil_item_inner{margin: auto; padding: auto; margin-top: 10px;}
}
  @media only screen and (max-width:767px){
  .contactbanner{ height: 220px;}

      .banner-header{display:none;}
    .contact_field {
        padding: 60px 20px;
        height: 800px;
    }
    .right_conatct_social_icon{align-items: center;}
    /* .contact_info_sec{display:none} */
    .socil_item_inner{padding: 10px 0px;margin-left: auto; margin-right: auto;}
  /* .contactbanner{height: 162px;} */
    .contact_info_sec{top: 440px;}
}

@media only screen and (max-width:425px){
  .contactbanner{height: 162px;}
  .contact_info_sec {width: 360px;}

}

@media only screen and (max-width:360px){
  .contactbanner{height: 140px;}
      
      .contact_info_sec {width: 320px;padding: 40px 15px;}
      .contact_field h3{
       
         font-size: 30px;
         
         font-weight: 600;
        
     }
}