.view-toggle button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
 #carouselExample {
      width: 100%;
      height: 1600px;      /* Fixed height */
      background-color: black;
    }

    /* Carousel inner takes full height */
    .carousel-inner {
      height: 100%;
    }

    /* Each slide takes full height, no flex tricks */
    .carousel-item {
      height: 100%;
    }

    /* Images scale proportionally, fully visible, no cropping */
    .carousel-item img {
      height: 100%;       /* Fill height */
      width: auto;        /* Keep aspect ratio */
      max-width: 100%;    /* Do not overflow width */
      display: block;
      margin-left: auto;
      margin-right: auto;
      object-fit: contain; /* Ensures whole image is visible */
    }

     /* Bottom-right icon button */
  .date-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    width: 80px;
    height: 80px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
  }

  .date-btn img {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Hover dropdown */
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
  /* Floating calendar popup */
  #calendarPopup {
    display: none;               /* hidden initially */
    position: fixed;
    bottom: 80px;               /* above button */
    right: 20px;
    z-index: 10001;
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 280px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  #calendarPopup.show {
    display: block;
    opacity: 1;
  }

  #calendarPopup table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
  }

  #calendarPopup th, #calendarPopup td {
    border: 1px solid #ccc;
    padding: 6px;
  }

  #calendarPopup th {
    background-color: #f2f2f2;
  }

  #calendarPopup td.today {
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
  }


   html, body {
    height: 100%;             /* full viewport height */
    margin: 0;
  }

  body {
    display: flex;
    flex-direction: column;   /* stack content and footer vertically */
  }

  main {
    flex: 1;                  /* main content grows, pushes footer down */
  }

  footer {
    flex-shrink: 0;           /* don't shrink footer */
  }
#bg{
    background-color: rgb(255, 255, 255);
}
.carousel-container {
  position: relative; /* needed for overlay positioning */
}

/* Floating slogan */
.slogan-container {
  position: absolute;
  top: 20px;               /* distance from top of carousel */
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2000;           /* on top of carousel */
  pointer-events: none;    /* allow clicks to pass through */
}

.slogan-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 2rem;         /* big and readable */
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* make text pop */
  animation: scroll-left 25s linear infinite;
}

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .slogan-text {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .slogan-text {
    font-size: 1.2rem;
  }
}



header {
  background-color: #fff; /* or your preferred color */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle shadow */
}

header img {
  top: 50%; 
  transform: translateY(-50%); /* vertically center logo in header */
}

body{
    background-color: rgb(33, 37, 41);
}
.product-img {
  width: 100%;          /* full width of the card */
  height: 200px;        /* fixed height */
  object-fit: contain;   /* fits image without cropping, preserves aspect ratio */
  background-color: #f8f9fa; /* optional: light background if image doesn't fill fully */
  padding: 10px;        /* optional: space around small images */
}

.carousel-text-overlay {
  position: absolute;
  top: 80%;               /* Vertically center */
  left: 50%;              /* Horizontally center */
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  padding: 20px 40px;
  border-radius: 10px;
}


.companyinfo-text-overlay {
  position: absolute;
  top: 97%;               /* Vertically center */
  left: 50%;              /* Horizontally center */
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  padding: 10px 10px;
  border-radius: 10px;
}