.banner{

  background-image: url(../images/contact-us/contact-us.png);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

}


.heading-banner {

  padding: 150px 0px;

}

.heading-banner h1 {

  color: white;

  font-weight: 800;

  font-style: italic;

}

.heading-banner h1 span {

  color: red;

}

.heading-banner h6 span .home {

  text-decoration: none;

  color: red;

  font-size: 18px;

  margin: 0px;

}

.heading-banner h6 a {

  color: white;

  text-decoration: none;

  font-size: 18px;

  margin-left: 8px;

}



@media(max-width:998px){

  .banner{

      background: url(../images/contact-us/contact-us.png), rgba(0, 0, 0, 0.259);

      background-blend-mode: multiply;

      background-repeat: no-repeat !important;

      background-size: cover !important;

      background-position: center center !important;

  }

}

@media(max-width:500px){
  .banner{

    background-image: url(../images/contact-us/contact-us-phone-view.png);
  
  }
}



/* close */






.contact-section{

  padding: 80px 10px;

  background-blend-mode: multiply;

  background: url(../images/product/clear-ppf/benefits.jpg), rgba(0, 0, 0, 0);

  background-position: center center;

}

.contact-row .contact-colum1 h6{

  font-weight: 800;

  font-size: 22px;

  color: rgb(255, 255, 255);

}

.contact-row .contact-colum1 h6 span{

  color: red;

}

.contact-row .contact-colum1 h2{

  font-weight: 800;

  font-size: 40px;

  font-style: italic;

  color: white;



}

.contact-row .contact-colum1 h2 span{

  color: red;

}

.contact-row .contact-colum1 p{

  color: white;
text-align: justify;
}

.contact-row .contact-colum1 .icon-row{

  margin-top: 2rem;

  cursor: pointer;

}

.contact-row .contact-colum1 .icon-row .icon-colum1 i{

  background: red;

  color: white;

  padding: 25px;

  font-size: 30px;

  border-radius: 10px;

  transition: 0.4s;

}

.contact-row .contact-colum1 .icon-row:hover .icon-colum1 i{

  background: rgb(121, 0, 0);

  transition: 0.4s;

}



.contact-row .contact-colum1 .icon-row .icon-colum2 {

  align-content: center;

  margin-left: -61px;

  margin-top: 5px;

}



.contact-row .contact-colum1 .icon-row .icon-colum2 h5{

  font-size: 23px;

  font-weight: 700;

  transition: 0.4s;

  color: white;

}

.contact-row .contact-colum1 .icon-row:hover .icon-colum2 h5{

  color: rgb(255, 0, 0);

  margin-left: 10px;

}



.contact-row .contact-colum1 .icon-row .icon-colum2 p{

  font-size: 15px;

color: rgb(255, 255, 255);

transition: 0.4s;

}

.contact-row .contact-colum1 .icon-row:hover .icon-colum2 p{

  margin-left: 10px;

  transition: 0.4s;

}



.contact-row .contact-colum1 .icon-row .icon-colum2 p a{

  text-decoration: none;

  color: rgb(255, 255, 255);

}

.contact-row .contact-colum2{

  align-content: center;

}

.contact-row .contact-colum2{

  padding: 0px 20px;

}



.contact-row .contact-colum2 .login input, .contact-row .contact-colum2 .login select, .contact-row .contact-colum2 .login textarea{

  width: 100%;

  padding: 10px;

  border-radius: 3px;

  border: 1px solid rgba(255, 255, 255, 0.781);  

  background-color: transparent;

  margin: 5px 0px;
  color:white;

}
 .select-con{
     width: 100%;

  padding: 10px !important;

  border-radius: 3px !important;

  border: 1px solid rgba(255, 255, 255, 0.781);  

  background-color: transparent !important;

  margin: 5px 0px;
      color: white !important; 
}

.contact-row .contact-colum2 .login input, select, textarea::placeholder{

  color: white;

}



input::placeholder{

  color: white;

}

select::placeholder{

  color: white;

}

option{

  color: black;

}

.contact-row .contact-colum2 .login .error{

  color: red;

  display: block;

  text-align: start;

  margin-left: 5px;

}



  .form-heading h3{

    text-align: center;
    color: white;
    font-size: 37px;
    font-weight: 800;
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 5px;

  }
  .contact-row .contact-colum2 p{
    color: white;
    text-align: center;
    margin-top: 1rem;

  }

  .form-heading h3 span{

    color: red;

  }

  .contact-row .contact-colum2 .login{

    text-align: center;

  }

  .contact-row .contact-colum2 .login .submit{

    width: 30%;

    background-color: red;

    color: white;

    transition: 0.4s;

  }

  .contact-row .contact-colum2 .login .submit:hover{

    background-color: rgb(177, 0, 0);

  }





@media(max-width:1400px){

    .contact-row .contact-colum1 .icon-row .icon-colum2 {

      margin-left: -40px;

      margin-top: 5px;

    }

    .contact-row .contact-colum2 iframe{

      height: 560px;

    }

}



@media(max-width:1200px){

    .contact-row .contact-colum1 .icon-row .icon-colum2 {

      margin-left: -15px;

    }

}



@media(max-width:997px){

  .contact-row .contact-colum1 .icon-row .icon-colum2 {

    margin-left: 0px;

    margin-top: 0px;

  }

  .contact-row .contact-colum1 .icon-row .icon-colum1 i {

      padding: 21px;

      font-size: 30px;

  }

  

  

}



@media(max-width:768px){

  .contact-row .contact-colum1 .icon-row {

      margin-top: 3rem;

      margin-bottom: 3rem;

  }

  .contact-row .contact-colum1 .icon-row .icon-colum1{

      width: 20%;

  }

  .contact-row .contact-colum1 .icon-row .icon-colum2{

      width: 80%;

  }

  .form-heading h3 {

    width: 100%;

  }

  .contact-row .contact-colum2 {

    padding: 0px 10px;

}

.form-heading h3 {
  font-size: 25px;
}

}



@media(max-width:500px){

  .contact-row .contact-colum1 .icon-row {

   text-align: center;

  }

  .contact-row .contact-colum1 .icon-row .icon-colum1{

      width: 100%;

  }

  .contact-row .contact-colum1 .icon-row .icon-colum2{

      width: 100%;

  }

  .contact-row .contact-colum1 .icon-row .icon-colum2 h5 {

      font-size: 25px;

      margin: 15px 0px;

  }



    .contact-row .contact-colum1 h2 {

      font-size: 35px;

  }

}





/* close */



/* form-section */



.google-map-section {

padding: 70px 10px;

}



.google-map-section iframe{

width: 100%;

height: 500px;

}

textarea {
  resize: vertical;
  color: white;
}