@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

  * {
      margin: 0px;
      padding: 0px;
      font-family: 'Raleway', sans-serif;

  }
.home-container{
    width: 100%;
    height: 97vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content{
    text-align: center;
}
.content h2{
    color: #fff;
    font-size: 2rem;
    margin-bottom: 6px;
    text-shadow: 2px 2px 5px solid white;
}
.content h1{
    font-size: 4rem;
    color: #fff;
    margin-bottom: 15px;
}
.background-clip{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.sec-2{
    display: flex;
}
.sec-2-content{
    box-shadow: 0 4px 8px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 1.5rem;  
    margin: 5rem  5rem 2rem 5rem;
}
.section-security{
      padding: 30px;
      margin: 40px;
}
.field {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .field-left{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
  }
    .image img{
      height: 400px;
      padding: 20px;
    }
    /* #contact{
      align-items: center;
      justify-content: center;
      border-radius: 12px 12px solid black;
    }
    .contact-container {
      display: flex;
      background: #fff;
      align-items: center;
      justify-content: center;

    } */
    #contact {
      padding: 5rem 0;
      background: rgb(226, 226, 226);
    }
    
    .contact-container {
      display: flex;
      background: #fff;
    }
    
    .contact-img {
      margin-top: 5.5%;
      width: 100%;
    }
    
    .contact-img iframe {
      display: block;
      height: 100vh;
      width: 100%;
      object-position: center;
      object-fit: cover;
    }
    
    .form-container {
      padding: 1rem;
      width: 50%;
      margin: auto;
    }
    
    #bten{
      justify-content: center;
      align-items: center;
      display: flex;
    }
    .form-container textarea {
      display: block;
      width: 100%;
      border: none;
      border-bottom: 2px solid #ddd;
      color: #444;
      outline: none;
      padding: 1rem 0;
      resize: none;
    }
    .form-container {
      padding: 1rem;
      width: 100%;
      margin: auto;
    }
    .form-container input ,select {
      display: block;
      width: 100%;
      border: none;
      border-bottom: 2px solid #ddd;
      padding: 1rem 0;
      box-shadow: none;
      outline: none;
      margin-bottom: 1rem;
      color: #444;
      font-weight: 500;
    }
    .products{
      margin: 6rem;
      align-items: center;
    }
  
    .benifits {
      display: flex;
      padding: 20px;
      /* padding-left: 24rem; */
     
    }
    .trems{
      padding: 3rem 3rem 3rem 3rem;
    }
    .products-container{
        margin-top: 15px;
        
    }
   
 
    @media only screen and (max-width: 600px) {
      html{
        align-items: center;
        text-align: center;
        justify-content: center;
      }
      .sec-2-content{
        box-shadow: 0 4px 8px 5px rgba(0,0,0,0.2);
        transition: 0.3s;
        padding: 1.5rem;  
        margin: 5px  5px 2px 5px;
    }
    #contact {
      background: none;
     }
      .section-security {
        display: block;
        margin: 5px;
        padding: 2px;
      
      }
      .field,.field-left{
        display: block;
        align-items: center;
        padding: 5px;
        margin: 5px;
      }
      .image img{
        height: 207px;
        text-align: center;
      }
      .products{
        margin: 1.2rem;
      }
      .benifits {
        padding: 5px;
        display: block;
      }
      .form-container {
        margin: 2px;
        padding:1px;
        width: 75%;
        margin: auto;
      }
      .contact-container {
        display: block;
        background: #fff;
      }
      
      .contact-img {
        margin-top: 10%;
        width: 100%;
        display:none;
      }
      
      .contact-img iframe {
        display: none;
        height: 50vh;
        width: 100%;
        object-position: top;
        object-fit: cover;
      }
      

    }

    @media (min-aspect-ratio:16/9) {
      .background-clip{
          width: 100%;
          height: auto;
      }
  }