:root{
  --clr-blue-dark : rgb(7,35,41);
}

div.contactus{
    text-align: center;
    background-color: rgb(141, 135, 135);
    color:#485e74;
    line-height:1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding:1em;
    /* padding-top: 80px; */
}
div.contactus>h1{
    color:yellow;
    /* background-color: rgb(1, 0, 3); */
}

*{
    box-sizing: border-box;
  }
  
.contactus .container{
    max-width:1170px;
    margin-left:auto;
    margin-right:auto;
    padding:1em;
  }
  
  ul{
    list-style: none;
    padding:0;
  }
  
  .brand{
    text-align: center;
  }
  
  .brand span{
    color:#fff;
  }
  
  .wrapper{
    box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
  }
  
  .wrapper > *{
    padding: 1em;
  }
  
  .company-info{
    /* background:rgb(50, 138, 138); */
    /* background-color: rgb(17, 148, 93); */

    /* background-color: rgb(14, 182, 204);
    box-shadow: 6px 2px 6px 2px  rgb(14, 182, 204); */
    /* padding-top: 40px; */
    background-color: var(--clr-blue-dark);
    color: #ffff;
  }
  
  .company-info h3, .company-info ul{
    text-align: center;
    margin:0 0 1rem 0;
  }
  
  .contact{
    background:#cad1d3;
    color: black;
  }
  
  /* FORM STYLES */
  .contact form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:20px;
  }
  
  .contact form label{
    display:block;
  }
  
  .contact form p{
    margin:0;
  }
  
  .contact form .full{
    grid-column: 1 / 3;
    /* margin:0; */
  }
  
  .contact form button, .contact form input, .contact form textarea{
    width:100%;
    padding:1em;
    background-color: rgb(231, 229, 229);
    border:1px solid #c9e6ff;
  }
  
  .contact form button{
    width: 40%;
    border-radius: 4px;
    /* background:#4693d6; */
    color: #ffff;
    /* background-color: rgb(211, 231, 28); */
    background-color: var(--clr-blue-dark);
    border:0;
    text-transform: uppercase;
  }
  
  .contact form button:hover,.contact form button:focus{
    background:rgb(248, 248, 0);
    color: black;
    /* outline:0;
    transition: background-color 2s ease-out; */
  }
  
  .alert{
    text-align: center;
    padding:10px;
    background:#79c879;
    color:#fff;
    margin-bottom:10px;
    display:none;
  }
  
  /* LARGE SCREENS */
  @media(min-width:700px){
    .wrapper{
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  
    .wrapper > *{
      padding:2em;
    }
  
    .company-info h3, .company-info ul, .brand{
      text-align: left;
    }
  }