html, body {
   
    height:100%;
    width:100%;
    
}

.fa-whatsapp:hover{
    background: black;
    color:#00FF00;
}

.fa-whatsapp{
    background: white;
    color:#00FF00;
}
.fa {
    padding: 20px;
    font-size: 20px;
    width: 70px;
    text-align: center;
    text-decoration: none;
    margin: 2px 2px;
  }
  .fa-youtube {
      background: #ffffff;
      color: red;
  
  }
  .fa-instagram {
    background: #ffffff;
    color: #ad3640;
  }
  .fa-instagram:hover {
    background:#ad3640;
    color: white;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1; */
  }
  .fa-youtube:hover {
    background:red;
    color: #f8f9fa;
  }
section {
    display: block;
    height:100%;
    width:100%;
    box-sizing:border-box;
}
#one {
    background: #fff;
    color: black;
   
}

#two {
    background:white;
    color: black;
}

/* .ccont1{
    font-size: 30px;
    font-weight: bold;
    text-align: left;
  
} */

.ccont2 {
    font-size: 20px;
    font-weight: initial;
    text-align: left;
}

h1{
    color: black;
}

 @media (min-width: 320px) {
    
    .ccont1{
        font-size: 25px;
        font-weight: bold;
        text-align: left;
      
    }
    
.ccont2 {
    font-size: 15px;
    font-weight: initial;
    text-align: left;
}

}

@media (min-width: 420px) {
    
    
    .ccont1{
        font-size: 30px;
        font-weight: bold;
        text-align: left;
      
    }
    
.ccont2 {
    font-size: 25px;
    font-weight: initial;
    text-align: left;
}

} 



@media  (min-width: 1020px) {
    
        
    .ccont1{
        font-size: 35px;
        font-weight: bold;
        text-align: left;
      
    }
    
.ccont2 {
    font-size: 30px;
    font-weight: initial;
    text-align: left;
}

}

@media  (min-width: 1440px) {
    
    .ccont1{
        font-size: 45px;
        font-weight: bold;
        text-align: left;
      
    }
    
.ccont2 {
    font-size: 40px;
    font-weight: initial;
    text-align: left;
}

}

.c{
    padding: 5%;
    /* padding-left: 50px;
    padding-right: 50px;
    padding-top: 80px;
    padding-bottom: 80px; */
}
  
input { 
  
    background: transparent; 
    border: 0; 
    display: inline-block;
    color: black;
    border: 2px solid black;
    width: 100%; 
    height: 50px;
  }
label{
    color:black;
    padding-top: 5%;
}
textarea{
  
    background: transparent; 
    border: 2px solid black; 
    display: inline-block;
    outline: 0; 
    height: 100%;
    width: 100%; 
    color: black;
   
    /* height: 50px; */
}

input:focus{
    border-bottom: 1px solid wheat; 
}

input[type = "submit"]:hover {
    color: #FF0000;
    background-color: #D3D3D3;

}

input[type = "submit"]{
  
    background-color: wheat;

}


  
  .button {
    border: 0px solid black;
    border-radius: 5px;
    width: fit-content;
    align-items: center !important;
    display: inline-block;
    background: linear-gradient(to right, white 50%, black 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
    padding: 20px;
    color: white;
  }
  
  .button:hover {
    background-position: left bottom;
    color: black;
  }