/* contact form css */


#contact-section{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(../images/cf-flange-alss-featured.png);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100% ;
    padding-bottom: 2%;
    margin-top: 4rem;
    margin-bottom: 2rem;
  }

  #contact-section .container h2{
    text-align: center;
     text-decoration: underline;
      /* text-decoration-color:red; */
      text-underline-position: under;
      color: rgb(238, 235, 235);
      letter-spacing: 2px;
      
  }

  #contact-section .container p{
    text-align: center; 
    width: 70%; 
    margin-left: auto;
     margin-right: auto; 
     padding-bottom: 3%;
     color: #fff;
     letter-spacing:3px;
  }

  .contact-form i.fa{
    /* color: red; */
    /* color: #fff; */
    font-size: 22px; 
    padding: 3%;
    background-color: none;
    border-radius: 80%;
    margin: 2%;
    /* border: 2px solid #fff; */
    cursor: pointer;
    border:2px solid rgb(190, 190, 190);
    color: rgb(190, 190, 190);
  }
  
  .contact-form i.fa:hover{
    cursor: pointer;
    border:2px solid white;
    color: white;
  }
   
    .contact-form{
      display: grid;
      grid-template-columns: auto auto;
       }
    
    .form-info{
      font-size: 16px;
      font-style: italic;
      color: white;
      letter-spacing: 2px;
    }
    input{
      padding: 10px;
      margin:10px;
      width: 70%;
      background-color:rgba(136, 133, 133, 0.5);
      color: white;
      border: none;
      outline:none;
    }

    input::placeholder{
      color: white;
    }
  
     textarea{
    padding: 10px;
    margin: 10px;     
    width: 70%;
    background-color:rgba(136, 133, 133, 0.5);
    color: white;
    border: none;
    outline:none;
   }
   textarea::placeholder{
     color: white;
   }
   
    .submit{
    width: 40%;
    background: none;
    padding: 4px;
    outline: none;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    height: 33px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 2px;
    margin-left: 3%;
    border:2px solid rgb(190, 190, 190);
    color: rgb(190, 190, 190);
   }

   .submit:hover{
         border: 1px solid #fff;
    color: #e68900;
    cursor: pointer;
   }

      /* media queries */
  @media (max-width: 768px){

#contact-section .contact-form{
      display: block;
      width: 100%;
      /* text-align: center; */
    }
    #contact-section .submit{
      width: 60%;
    }

}