#map {
 
    width: 100%;

}
h4{
  font-size: 32px;
  margin: 0;
  color: gray;
  font-family:Brandon Grotesque;
  font-weight: 400;

}
/* Optional: Makes the sample page fill the window. */
html, body {
  /* height: 100%; */
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

h2{
    margin: 0;
}

.navigation-header{
    background-color: #222126;
    position: relative;
}

.who-we-are{
    background-color: white;
    color: #222126;
}

.who-we-are h2{
    
    color: #222126;
}
.contactc-us-map{
    display: flex;
    height: 650px;
}
.our-map{
   /* width: 80%;
    filter: grayscale(50%);
    filter: contrast(100%);
     background-color: #222126; */
}
#map {
  /* height: 100%; */
  widows: 100%;
}
.contact-us-address{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222126;
    width: 100%;
    color: white;
    padding: 47px 0

}
.contact-content{
    width: 69%;
}
.contact-head{
    font-size: 25px;
    font-weight: 400;
    font-family:Brandon Grotesque;
    margin-bottom:15px;
}
.contact_no{
    
    font-size: 24px;
    font-family:Brandon Grotesque;
}
.contact-address{
    font-size: 24px;
    font-family:Brandon Grotesque;
    color: #9C9C9C;
}


/* form */

.inputfield{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

  .form-div{
    margin:  0 180px 100px 180px;
  }
  
  /* Add padding to containers */
  .container {
    margin: 0 auto;
    width: 100%;
  }

  .contact-us-address .container{max-width:1150px; padding: 0 15px}
  
  /* Full-width input fields */
  
  
  input[type=text], input[type=password], input[type=email] {
    width: 48%;
    padding: 25px 20px;
    margin-bottom: 40px;
    display: inline-block;
    border: none;
    color:#222126;
    border: 1px solid #c6c6c6;
    font-size: 18px;
  }
  
  input[type=text]:focus, input[type=password]:focus {
    outline: none;
  }
  ::placeholder {
    color: #c6c6c6;
  }
  
  /* Overwrite default styles of hr */
  hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
  }
  
  /* Set a style for the submit button */
  .registerbtn {
    margin-top: 60px !important;
    padding: 12px 52px;
    color: white;
    font-size: 23px;
    border: none;
    transition: .5s;
    border: 1.5px solid #00B1C5;
    display: flex;
    margin: 0 auto;


    background: linear-gradient(to right, #ffffff21 50%, #00B1C5 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
    cursor: pointer;
  }
  
  .registerbtn:hover {
    background-position: left bottom;
    letter-spacing: 3px;
    border: 1.5px solid #00B1C5;
    color: #222126;
  }
  
  /* Add a blue text color to links */
  a {
    color: dodgerblue;
  }
  
  /* Set a grey background color and center the text of the "sign in" section */
  .signin {
    background-color: #f1f1f1;
    text-align: center;
  }
  
  body .select2-hidden-accessible{width:48% !important; margin-bottom:40px}
  body .select2{
          width: 48%!important;
          padding: 19px 20px;
          margin-bottom: 40px;
          display: inline-block;
          border: none;
          color: #222126;
          border: 1px solid #c6c6c6;
          font-size:18px;
    }
  body  .select2-container--default .select2-selection--multiple{border:0px !important; border-radius:0px}
  body  .select2-container--default .select2-selection--multiple:focus{border:0px !important; outline:none !important;}

  .intl-tel-input input{width:100% !important}
  body .intl-tel-input{width:48%}

   .select2-container .select2-selection--multiple{
      border: unset;
      min-height: 100%;
      overflow: auto;
    }
    .select2-container--default.select2-container--focus .select2-selection--multiple{
      border: unset;
    }

@media screen and (max-width: 1360px){

.contact-head {
  font-size: 33px;
}
.contact-address {
  font-size: 23px;
}
.contactc-us-map {
  height: 550px;
}
.contact_no {
  margin-bottom: 40px;
  font-size: 26px;
}
}
@media screen and (max-width: 1360px){
  .contactc-us-map {
    height: 466px;
}
.contact-head {
  font-size: 27px;
}
.contact_no {
  font-size: 23px;
}
}
@media screen and (max-width: 768px){

.contactc-us-map {
  flex-wrap: wrap;
  height:auto;
}
#map {
  width: 100%;
  height: 335px;
}
.contact-us-address{
  width: 100%;

}
.contact-content{
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  /* padding: 29px 0; */
}
.address-card{
  width: 50%;
  margin: 33px 53px;
}
  .who-we-are{
    /* padding: 0; */
    margin: 10px 0;
    text-align:center;
  }
  .form-div {
    margin: 0 80px 100px 80px;
 }
}

@media screen and (max-width:599px){
.contact-content{flex-direction: row; display: block; padding:25px 0}
.address-card{width:100%; margin:0; padding:0px 20px}
.contact_no{margin-bottom:10px;}
.who-we-are, .why-credence{padding:20px !important}
.who-we-are h4{font-size:20px;}
.form-div{margin: 0 20px 50px 20px;}
input[type=text], input[type=password], input[type=email], body .intl-tel-input{width:100%; display: block; padding: 13px 20px; margin-bottom:25px;}

body .select2-hidden-accessible{ display: block; width:auto !important; margin-bottom:25px }
.registerbtn{margin-top: 10px !important;}
body .intl-tel-input{padding: 0px; margin-bottom:0px;}
body .select2{width:100% !important; padding: 8px 20px;}
body .intl-tel-input .flag-dropdown .selected-flag{padding: 15px 33px 16px 21px;}
body .intl-tel-input{width:100%}
}

.select2-container--default .select2-results__option--highlighted[aria-selected],.intl-tel-input .country-list .country.highlight{
  background-color: #222126!important;color: white;
}
.intl-tel-input .country-list .country.highlight .dial-code{
  color: white;
}
.intl-tel-input .flag-container{
  height: 100%;max-height: 78px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag{
  outline: none;
}
.intl-tel-input{ margin-bottom:25px!important; }
ul.select2-selection__rendered {
    padding-right: 30px !important;
}
ul.select2-selection__rendered:after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    cursor: pointer;
}