.banner-card .carousel-item img{
                  height: 460px;
                  object-fit: cover;
                  border-radius: 2px;
                  }
                  .banner-card .carousel-indicators{
                  margin-bottom: 10px;
                  }
                  .banner-card .carousel-indicators button{
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  }
  
         .banner-container {
         position: relative;
         width: 100%;
         height: 100vh; 
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         /* Banner Styles */
         .banner {
         position: relative;
         width: 100%;
         height: 100%;
         background-size: cover; 
         background-position: center;
         background-repeat: no-repeat; 
         animation: zoomInOut 20s ease-in-out infinite; 
         }
         /* Black Gradient Overlay */
         .banner::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to bottom, rgb(0 0 0 / 93%), rgb(0 0 0 / 74%));
         z-index: 1; 
         }
         .caption {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%); 
         color: #a48c73; 
         font-size: 3.5rem;
         padding: 20px 30px; 
         border-radius: 10px; 
         text-align: center;
         z-index: 2;
         }
         @media (max-width: 768px) {
         .banner-container {
         height: 450px; 
         }
         .banner {
         height: 100%; 
         }
         .caption {
         font-size: 2rem; 
         }
         }
        
         .banner-card {
         position: relative;
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         }
         .banner-card .img {
         height: 460px;
         width: 100%;
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
         }
         .banner-card .img img {
         width: 100%;
         height: 460px;
         object-fit: cover;
         object-position: center;
         transition: transform 1s ease-in-out;
         transform: scale(1.1);
         }
         .banner-card:hover .img img {
         transform: scale(1);
         }
         .banner-card .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         .banner-card .overlay .text {
         color: #fff;
         font-size: 24px;
         text-align: center;
         transform: scale(0.8);
         transition: transform 0.3s ease-in-out;
         }
         .banner-card:hover .overlay {
         opacity: 1;
         }
         .banner-card:hover .overlay .text {
         transform: scale(1);
         background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         }
         .modal {
         display: none;
         position: fixed;
         z-index: 1000;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.9);
         }
         .modal-content {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
         max-height: 80%;
         object-fit: contain;
         }
         .close {
         position: absolute;
         top: 15px;
         right: 35px;
         color: #f1f1f1;
         font-size: 40px;
         font-weight: bold;
         transition: 0.3s;
         }
         .close:hover,
         .close:focus {
         color: #bbb;
         text-decoration: none;
         cursor: pointer;
         }

         .banner-container {
         position: relative;
         width: 100%;
         height: 100vh; /* Full viewport height */
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         /* Banner Styles */
         .banner {
         position: relative;
         width: 100%;
         height: 100%;
         background-size: cover; /* Ensure the image covers the container */
         background-position: center;
         background-repeat: no-repeat; /* Avoid repeating the image */
         animation: zoomInOut 20s ease-in-out infinite; /* Zoom in and out animation */
         }
         /* Black Gradient Overlay */
         .banner::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to bottom, rgb(0 0 0 / 93%), rgb(0 0 0 / 74%));
         z-index: 1; /* Ensure the gradient is above the image but below the caption */
         }
         /* Caption Styles */
         .caption {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%); /* Center caption */
         color: #a48c73; /* Text color */
         font-size: 3.5rem; /* Adjust font size as needed */
         padding: 20px 30px; /* Add padding around the text */
         border-radius: 10px; /* Rounded corners for the background */
         text-align: center;
         z-index: 2; /* Ensure the caption is above the gradient */
         }
         /* Mobile Styles */
         @media (max-width: 768px) {
         .banner-container {
         height: 450px; /* Set the banner height for mobile */
         }
         .banner {
         height: 100%; /* Ensure the banner covers the entire container */
         }
         .caption {
         font-size: 2rem; /* Adjust the caption size for mobile */
         }
         }
     
         /* Existing styles */
         .banner-card {
         position: relative;
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         }
         .banner-card .img {
         height: 460px;
         width: 100%;
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
         }
         .banner-card .img img {
         width: 100%;
         height: 460px;
         object-fit: cover;
         object-position: center;
         transition: transform 1s ease-in-out;
         transform: scale(1.1);
         }
         .banner-card:hover .img img {
         transform: scale(1);
         }
         .banner-card .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         .banner-card .overlay .text {
         color: #fff;
         font-size: 24px;
         text-align: center;
         transform: scale(0.8);
         transition: transform 0.3s ease-in-out;
         }
         .banner-card:hover .overlay {
         opacity: 1;
         }
         .banner-card:hover .overlay .text {
         transform: scale(1);
         background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         }
         /* Modal styles */
         .modal {
         display: none;
         position: fixed;
         z-index: 1000;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.9);
         }
         .modal-content {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
         max-height: 80%;
         object-fit: contain;
         }
         .close {
         position: absolute;
         top: 15px;
         right: 35px;
         color: #f1f1f1;
         font-size: 40px;
         font-weight: bold;
         transition: 0.3s;
         }
         .close:hover,
         .close:focus {
         color: #bbb;
         text-decoration: none;
         cursor: pointer;
         }