style.css

* {
    margin: 0;
    padding: 0;
  }
  
  .banner {
      background-image: url("images/banner.jpg");
      width: 100%;
      background-size: cover;
  }
  
  .top-bar {
      background: #000;
      display: flex;
      width: 100%;
      height: auto;
  }
  
  .logo {
      color: #fff;
      flex: 1;
      font-size: 40px;
      padding: 5px;
      text-transform: uppercase;
  }
  
  .menu {
      flex: 3px;
  }
  
  .menu ul {
      display: flex;
      list-style: none;
      margin-top: 3px;
      padding: 5px;
      flex-flow: row wrap;
  }
  
  .menu ul li {
      flex: 1;
      text-align: center;
      list-style: none;
      padding: 5px;
      text-decoration: none;
  }
  
      .menu ul li:hover {
          padding: 5px;
          border-bottom: 2px solid white;
          padding-bottom: 15px;
      }
  
  .menu ul li a {
      text-decoration: none;
      color: #fff;    
      font-size: 20px;
  }
  
  
  /* Banner */
  .banner-text {
      display: flex; /* it's not required */
      padding: 15% 0; 
  }
  
  .banner-text-items {
      color: #fff;
      text-align: center;
      margin: auto;
      width: 50%;
  }
  
  .banner-text-items h2 {
      font-size: 30px;
      text-transform: uppercase;
      margin-bottom: 15px;
  }
  
  .banner-text-items p {
      font-size: 18px;
  }
  
  /* Main-Content */
  
  .main-content {
      display: flex;
      flex-flow: row wrap;
      padding: 5% 0;
  }
  
  .main1 {
      flex: 1 0 0;
      margin: 1%;
      text-align: center;
      border: 1px solid gray;
      position: relative;
      border-radius: 15px;
      overflow: hidden;
  }
  
  .main1:hover {
    top: -5px;
    box-shadow: 10px 15px 30px 10px rgba(116, 116, 114, 0.5);
  }

.main1 h2 {
    background: rgb(236, 161, 174);
    padding: 7px;
    margin: 0px;
}
 

.main1 p {
    padding: 20px 7px;
    margin: 3px;
}

/* Contact */
  
  .contact-items {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  
  .contact {
      padding: 80px 0;
      position: relative;
      background-image: url("images/contactus.jpg");
      width: 100%;
      background-size: cover;
      z-index: 1;
  }
  
  .contact-items h2 {
      font-size: 35px;
      margin-bottom: 15px;;
  }
  
  .contact-items input[type="text"] {
      border-radius: 10px;
      margin: 15px;
      padding: 15px;
      width: 50%;
      border: 1px solid gray;
  }
  
  .contact-items textarea {
      border-radius: 10px;
      margin: 15px;
      padding: 15px;
      width: 50%;
      border: 1px solid gray;
  }
  
  .contact-items a {
      background: coral;
      color: white;
      text-decoration: none;
      font-size: 20px;
      margin-top: 15px;
      padding: 15px 35px;
      border-radius: 10px;
  }
  
  
  .contact-items input[type="text"]:focus {
      border: 2px solid coral;
  }
  .contact-items textarea:focus {
      border: 2px solid coral;
  }
  
  @media all and (max-width: 550px) {
      
      .top-bar {
          flex-direction: row;
          text-align: center;
      }
      
      .menu ul {
          display: flex;
          list-style: none;
          margin-top: 3px;
          padding: 5px;
          flex-flow: column wrap;
  }
  
      .logo {
          padding: 48px 0 0;
      }
      
      .menu ul li {
          padding: 5px;
      }
      
      .menu ul li:hover {
          padding: 5px;
          border-bottom: 2px solid white;
      }
  
      .banner-text-items {
          width: 100%;
      }
  
      .main-content {
          flex-direction: column;
      }
      .main1 {
      overflow: visible;
      border-radius: 0px;
      }
  }