@import url('https://fonts.googleapis.com/css?family=Yantramanav:100,300');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Roboto', sans-serif;
}

body{
  background: url('https://png.pngtree.com/thumb_back/fh260/background/20210916/pngtree-background-elegant-black-with-gold-line-side-2-image_901636.jpg') no-repeat top center;
  background-size: cover;
}
a span {
    color: #e20f2f;
}
    
    * {
      box-sizing: border-box;
    }
    
    .container {
      max-width: 1170px;
      margin-left: auto;
      margin-right: auto;
      padding: 1em;
    } 
    
    ul {
      list-style: none;
      padding: 0;
    }
    
    .brand {
      text-align: center;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    
    .brand span {
      color: #ffffff;
    }
    
    .wrapper {
      box-shadow: 0 0 20px 0 rgba(199, 197, 197, 0.7);
    }
    
    .wrapper > * {
      padding: 1em;
    }
    
    /* ------------------- */
    /* COMPANY INFORMATION */
    /* ------------------- */
    
    .company-info {
      background: #eaeaea;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    
    .company-info h3,
    .company-info ul {
      text-align: center;
      margin: 0 0 1rem 0;
    }
    
    /* ------- */
    /* CONTACT */
    /* ------- */
    
    .contact {
      background: #c9c9c9;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    
    /* ---- */
    /* FORM */
    /* ---- */
    
    .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;
    }
    
    .contact form button,
    .contact form input,
    .contact form textarea {
      width: 100%;
      padding: 1em;
      border: solid 1px #485e74;
      border-radius: 4px;
    }
    
    .contact form textarea {
      resize: none;
    }
    
    .contact form button {
      background: #485e74;
      border: 0;
      color: #e4e4e4;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
    }
    
    .contact form button:hover,
    .contact form button:focus {
      background: #505051;
      outline: 0;
      transition: background-color 2s ease-out;
    }
    
    /* ------------- */
    /* MEDIA QUERIES */
    /* ------------- */
    
    @media only screen and (min-width: 700px) {
      .wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }
    
      .wrapper > * {
        padding: 2em;
      }
    
      .company-info {
        border-radius: 4px 0 0 4px;
      }
    
      .contact {
        border-radius: 0 4px 4px 0;
      }
    
      .company-info h3,
      .company-info ul,
      .brand {
        text-align: left;
      }
    }