*{
  box-sizing: border-box;
}

body{
  background: #111920;
  color: #a9b6c1;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 1em;
}


.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 rgb(72 94 116 / 70%);
  border-radius: 100px;
  width: 68%;
  
margin: auto;
}

.wrapper > *{
  padding: 1em;
  
}

.company-info{
  
  background: black;
}


.company-info h3, .company-info ul{
  text-align: center;
  margin:0 0 1rem 0;
}

.contact{
  background:#f9feff;
  color: black;
  font-family: monospace;
  font-size: 16px;
  font-weight: 900;
}

/* FORM STYLES */
.contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 35px;

}

.contact form label{
  display:block;
  font-family: monospace;
}

.contact form p{
  margin:0;
}

.contact form .full{
  grid-column: 1 / 3;
}

.contact form button, .contact form input, .contact form textarea{
  width: 88%;
  padding: 1em;
  border: none;
  border-top-left-radius: 17px;
  border-bottom-right-radius: 12px;
  background: #e7e7e7d9;
  outline: white;
}

.contact form button{
  background: turquoise;
  border: none;
  width: 170px;
  border-radius: 100px;
  cursor: pointer;
  text-transform: uppercase;
}




.contact form button:hover,.contact form button:focus{
  background:#92bde7;
  color:#fff;
  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;
    width:75%
  }

  .wrapper > *{
    padding: 2em;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 99px;
  }

  .company-info h3, .company-info ul, .brand{
    text-align: center;
  }
    #image{

  width: 200px;
  height: auto;


}
}


#image{

  width: 200px;
  height: auto;


}

@media(max-width:600px){
#image{

width: 0px;
}

.wrapper{
box-shadow: 0 0 20px 0 rgb(72 94 116 / 70%);
border-radius: 100px;
width: 100%;
margin: auto;


}

.contact form {
display: grid;
 grid-template-columns: none;
grid-gap: 14px;
}
.contact form button, .contact form input, .contact form textarea {
width: 100%;
padding: 13px;
border: none;
border-top-left-radius: 17px;
border-bottom-right-radius: 12px;
background: #e7e7e7d9;
outline: white;

}

body{
padding: 0;
margin: 0;
}

.company-info{
background: black;
padding-bottom: 0;
}
.brand{
text-align: center;
font-size: 19px;
}
.contact {
background: #f9feff;
color: black;
font-family: monospace;
font-size: 16px;
font-weight: 900;
border-radius: 30px;
padding-top: 1px;
}
.contact form button {
background: turquoise;

}
.contact form label {
  display: block;
  font-family: monospace;
  font-size: 15px;
font-weight: 900;
}

.container{
  max-width: 1170px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
}






/* CSS */
.button-32 {
  background-color: #fff000;
  border-radius: 12px;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 15%;
  box-sizing: border-box;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-32:not(:disabled):hover,
.button-32:not(:disabled):focus {
  outline: 0;
  background: #f4e603;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.button-32:disabled {
  filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}