.slideshow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }
.slideshow img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      animation: slideShow 15s infinite;
    }
.slideshow img:nth-child(1) {
      animation-delay: 0s;
    }
.slideshow img:nth-child(2) {
      animation-delay: 5s;
    }
.slideshow img:nth-child(3) {
      animation-delay: 10s;
    }
@keyframes slideShow {
      0% { opacity: 0; }
      10% { opacity: 1; }
      33.33% { opacity: 1; }
      43.33% { opacity: 0; }
      100% { opacity: 0; }
    }
.overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.6;
      z-index: 0;
    }
.hero-content {
      position: relative;
      z-index: 1;
    }
.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.navbar-custom {
  background: rgb(240,226,211);
background: linear-gradient(180deg, rgba(240,226,211,1) 0%, rgba(250,249,233,1) 50%, rgba(240,226,211,1) 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  max-width: 70%;
  margin: 0 auto;
}
.navbar-brand img {
      height: 50px;
    }
.nav-link {
      font-size: 1.2rem;
      margin: 0 15px;
    }

.carousel-inner .carousel-item > div {
      float: left;
      width: 33.33333%; /* Adjust this for padding or border if necessary */
            }
.carousel-item img {
      cursor: pointer; /* Indicates the images are clickable */
            }
            html {
                scroll-behavior: smooth;
            }







.footerbox p {
  margin-bottom:0;
  scale: 80%;
}

@keyframes up-down {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(10px); /* Adjust the value to your preference */
            }
        }
/* Adjust the scroll button */
.btn-scroll {
            display: inline-block;
            padding-top: 200px;
            transition: 0.4s;
            color: rgba(255, 255, 255, 0.6);
            animation: up-down 1s ease-in-out infinite alternate-reverse both;
            text-decoration: none;
        }
/* Adjust the icon within the scroll button */
.btn-scroll i {
            font-size: 70px;
            display: block;
        }

/* Remove hover color */
.btn-scroll:hover {
    color: rgba(255, 255, 255, 0.6); /* Ensure it stays the same on hover */
}
.modalbg {
  background-color: transparent;
  border: none;
}
#about, #products, #contact {
  background: rgb(240,226,211);
background: linear-gradient(180deg, rgba(240,226,211,1) 0%, rgba(250,249,233,1) 50%, rgba(240,226,211,1) 100%);
}
.gmaps {
    background-color:white;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); /* Example shadow */
    padding: 0; /* Ensure no padding is applied */
    margin: 0;  /* Ensure no margin is applied */
}

.gmapsx:hover {
    background-color:white;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); /* Example shadow */
    padding: 0; /* Ensure no padding is applied */
    margin: 0;  /* Ensure no margin is applied */

}
@media (max-width: 768px) {
    .navbar {
        max-width: 100%;
        margin-top:0px !important;
    }
    .gmaps iframe {
      height: 300px;
      top:15px;
    }
}
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}
.modal-header {
  border-bottom: none;
  margin:auto;
  flex-shrink: 0;
}
.modal-dialog {
  max-height: 90vh; /* Limit the max height */
  margin: auto;
  display: flex;
  align-items: center; /* This will vertically center your modal */
  justify-content: center;
}

.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the content vertically in the modal */
  height: auto;

}

.modal-footer {
  flex-shrink: 0; /* Prevents the header and footer from shrinking */
}

.modal-body {
  overflow-y: auto;
  max-height: 90vh;
  display: flex;
  align-items: center; /* Aligns the carousel or other contents vertically center */
  justify-content: center;

}
.carousel-item img {
  height: auto; /* Maintain natural height */
  max-height: 80vh; /* Restrict image height to be within the modal body */
  width: 100%; /* Full width to fill container */
  object-fit: contain; /* Ensures image does not stretch and maintains aspect ratio */
  margin: auto; /* Centers image in case it's smaller than the container */
}
.btnclose {
  margin:auto;
  display:flex;
  font-size:40px;
}
.display-1 {
  padding-top: 100px;
}
.roboto-slab-s {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.roboto-slab-f {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

body p {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
body h2 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}