<style>




 .Aboutus-Container{

         max-width: 100%;  
      background-color:#000;
       margin-top: -68px;
    }

       .banner-container {
      position: relative;
      overflow: hidden;
      height: auto  ;
      max-width: 1280px;
         margin:  0 auto;
     
        padding: 140px 0PX 0px;
    }
    .text-para{
        font-size: 16px;
        color: #fff;
         text-shadow: -1px -1px 1px #ffF;

    }
    .Text-heading{
        font-size: 50px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 500;
        lETTER-SPACING: 0px;
        line-height: 56px;
    }
    
    .Background-img {
  padding: 20px 45px;


}

 .Product-top-banner {
      position: relative;
      background: url('/frontend/assets/images/products/products_banner.jpeg') no-repeat center center/cover; /* Replace with actual image URL */
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
      background-blend-mode: overlay;
    }

    .banner-content {
      z-index: 1;
          line-height: 20px;

    }

   .banner-content h1  {
             color: #fff;
        font-size: 36px;
        font-weight: 600;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    .banner-content p {
        line-height:normal;
      font-size: 36px;
        margin-bottom: 20px;
        font-weight: 600;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }

    .banner-buttons {
      margin-top: 20px;
    }

    .banner-buttons button {
      color: #000;
    
        padding: 8px 16px;
        margin: 0 10px;
        font-size: 16px;
        cursor: pointer;
      letter-spacing:-0.5px;
        background-color: #ffffff;
        border: none;
      
        transition: background-color 0.3s;
        font-weight: 600;
        line-height: 18px;
    }

    .banner-buttons button:hover {
      background-color: #e0e0e0;
    }
    
    
    
  
    
     .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap:10px;
      padding: 20px 0px;
      max-width: 1280px;
      margin: 0 auto;
    }
    .grid-item {
    height:438px;
      position: relative;
      overflow: hidden;
    }
    .grid-item img {
      width: 100%;
      height: 100%;
      display: block;
      mask: linear-gradient(0deg, rgb(255 255 255 / 30%) 0%, rgba(0, 0, 0, 2.65) 55.1532%, rgba(0, 0, 0, 1.3) 56%);
      transition: transform 0.6s ease;
    }
    .grid-item:hover img {
      transform: scale(1.1);
    }
    .grid-item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
    }
    .grid-item h3 {
      margin: 0 0 10px;
      font-size: 1.5em;
      color: #fff;
      text-transform:uppercase;
    }
    .grid-item p {
      margin: 0;
    font-size: 18px;

      color: #fff;
    }
    
    @media only screen and (max-width: 600px) {
 .banner-container {
     padding: 140px 23PX 0px;
 }
 .Background-img {
    padding: 20px 20px;
}
 .Product-top-banner {
     height: 70vh;
 }
 .grid-container{
         padding: 20px 20px;
                 display: block;
 }
 .grid-item{
         height: 267px;
 }
 .Text-heading{
         font-size: 32px;
             line-height: 40px;
 }
}

</style>