.main {

    background-color: #6d0b0c;

    /* golden shade */

}







.hero-banner-wrapper {

    width: 100%;

    /* height: 300px; */

    /* mobile default height */

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-banner {

    max-width: 100%;

    /* min-height: 100%; */

    object-fit: fill;

    object-position: center;

}



/* Desktop & tablet screens */

@media (min-width: 768px) {

    .hero-banner-wrapper {

        /* height: 500px; */

        /* bigger height on desktop */

    }

}



.history-section {

    background-color: #fff;

    /* golden shade */

    /* border-top: 4px solid #5b0000;  */

    /* border-bottom: 4px solid #5b0000; */

    color: #000;

    /* black text */

    font-size: 1rem;

    line-height: 1.7;

}



.history-section p {

    margin-bottom: 1.5rem;

}

    .service-card {

      position: relative;

      overflow: hidden;

    

    }

    .service-card img {

      width: 100%;

      /* height: 220px; */

      object-fit: cover;

    }

        .service-title {

      position: absolute;

      bottom: 20px;  /* thoda upar image ke andar */

      left: 50%;

      transform: translateX(-50%);

      background: #6a0f0f; /* maroon color */

      color: #fff;

      font-weight: bold;

      font-size: 16px;

      padding: 10px 20px;

      border-radius: 6px;

      text-align: center;

      white-space: nowrap;

    }



   .service-title a {

      color: #fff;

      text-decoration: none;

    }

    .service-title a:hover {

      /* background: #8b1a1a;  */

      color: #df8a1a; /* hover par yellow text */

      border-radius: 6px;

      /* transition: 0.3s ease-in-out; */

    }


        .services-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          align-items: stretch;
          gap: 0;
        }

             .services-grid .service-card {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
        }

             .services-grid .service-card img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border: none;
        }   

      .services-grid.service-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
      }
  
     @media (max-width: 992px) {
       .services-grid {
         grid-template-columns: repeat(3, 1fr);
       }
     }
  
     @media (max-width: 576px) {
       .services-grid {
         grid-template-columns: 1fr;
       }
     }