.gallery-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
        }

        .gallery-item {
          position: relative;
          overflow: hidden;
          cursor: pointer;
        }

        .gallery-item {
          border-radius: 8px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease-in-out;
          }

        .gallery-item .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
          text-align: center;
          padding: 20px;
          box-sizing: border-box;
        }

        .gallery-item h3 {
          font-size: 0.8em; /* Adjust the font size as needed */
          margin-bottom: 10px;
        }

        .gallery-item p {
          font-size: 1em; /* Adjust the font size as needed */
          margin-bottom: 10px;
        }

        .gallery-item .btn {
          font-size: 1em; /* Adjust the font size as needed */
        }

        .gallery-item:hover {
            transform: scale(1.05);
        }

        /* Loading Animation Styles */
        #loading-animation {
          display: flex;
          align-items: center;
          justify-content: center;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
          z-index: 9999; /* Higher z-index to overlay other elements */
          opacity: 1;
          transition: opacity 0.3s ease;
        }

        .spinner {
          border: 4px solid rgba(255, 255, 255, 0.3); /* Light border */
          border-top: 4px solid #3498db; /* Blue border for spinning effect */
          border-radius: 50%;
          width: 40px;
          height: 40px;
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /*FOOTER*/
       .footer-newsletter {
          text-align: left;
          margin-bottom: 0px;
        }
        .subscribe-container {
          display: flex;
          justify-content: flex-end; /* Align to the right */
          align-items: center;
          margin-left: 50px; /* Sesuaikan nilai margin sesuai kebutuhan */
        }
        .subscribe-btn {
          width: 150px;
          height: 150px;
          border-radius: 70%;
          background-color: #01438a;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          border: none;
          overflow: hidden;
          position: relative;
        }

        .subscribe-btn:hover {
          box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8);
          transform: scale(1.1);
        }

        .subscribe-btn img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .subscribe-btn::before {
          content: "";
          position: absolute;
          background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          z-index: -1;
          transition: opacity 0.3s ease;
          opacity: 0;
        }

        .subscribe-btn:hover::before {
          opacity: 1;
        }

        @media (max-width: 768px) {
          .gallery-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 576px) {
          .gallery-grid {
            grid-template-columns: 1fr;
          }
        }
        .whatsapp-button {
          display: inline-block;
          padding: 4px 28px;
          font-size: 14px;
          color: white;
          background-color: #01438a; /* WhatsApp green color */
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .whatsapp-button:hover {
          background-color: #25d366; /* Darker shade on hover */
        }

        .animated-button {
          animation: bounceIn 1s; /* Add a bounce animation from Animate.css */
        }

        /* Adjustments for mobile */
        @media (max-width: 767px) {
          #banner {
            padding: 0; /* Remove padding on small screens */
          }
          .carousel-inner {
            margin: 0; /* Remove margin to reduce space */
          }
        }

        /* Apply rounded corners to images */
        .carousel-item img {
          border-radius: 58px; /* Adjust the value for the desired amount of rounding */
          transition: transform 0.8s ease-in-out; /* Adjust the duration and timing function for your preferred effect */
          opacity: 0; /* Initially hide the images */
          transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
        }

        .carousel-item.active img {
          opacity: 1; /* Make active carousel item fully visible */
          animation: lightDarkEffect 4.5s infinite alternate, zoomInOutEffect 4.5s infinite alternate; /* Apply light-dark and zoom in-out animations */
            }
        }

        @keyframes lightDarkEffect {
          0% {
            filter: brightness(50%); /* Initial brightness */
          }
          50% {
            filter: brightness(130%); /* Increase brightness */
          }
          100% {
            filter: brightness(90%); /* Return to original brightness */
          }
        }

        @keyframes zoomInOutEffect {
          0% {
            transform: scale(0.7); /* Initial scale */
          }
          50% {
            transform: scale(1.1); /* Zoom in */
          }
          100% {
            transform: scale(0.9); /* Return to original scale */
          }
        }

        /* CSS for desktop view */
        @media (min-width: 992px) {
          /* Adjust carousel height for better visibility */
          #bannerCarousel .carousel-inner .carousel-item img {
            overflow: hidden;
            max-width: 25%; /* Set maximum width to 100% */
            height: 100%; /* Set height to 100% to cover the container */
            object-fit: cover; /* Ensure the entire image is covered */
          }
        }

        /* CSS to remove underline on navigation bar links */
        .main-nav ul li a {
            text-decoration: none;
        }