@charset "utf-8";

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

#slide-container {
  position: fixed;
  top: 0;
  background-color: white;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  transform: translateX(100%); /* Start off-screen */
  transition: transform 0.5s ease-out;
  overflow-x: hidden; /* Prevent horizontal scroll */
	will-change: transform;
}

.homepage{
	width: 100vw;
	height: 100vh;
	position: absolute;
}

/* Search Bar Image */
.searchbar {
    position: absolute;
    top: 0.7em; /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%);
    width: 95%; /* Adjust width to fit the screen proportionally */
    z-index: 2; /* Ensure it overlays the carousel */
}

/* Carousel Container */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Carousel Slides */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Adjust for number of slides */
}

.carousel-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Pagination Dots */
.carousel-pagination {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
	margin-top: -1.2em;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    background-color: #D9D9D9;
    border-radius: 50%;
    cursor: pointer;
}

.pagination-dot.active {
    background-color: #00C3B1;
}

/* Home Page Buttons */
.btnhomepage {
  display: flex;
  justify-content: space-around; /* Ensures buttons are evenly spaced */
  align-items: center;          /* Centers buttons vertically */
  margin: 1em 0;                /* Adds margin for spacing around the container */
  margin-bottom: 1.5em;
}

.btn {
  background: none;             /* Removes default button styling */
  border: none;                 /* Removes button border */
  cursor: pointer;              /* Adds a pointer on hover */
  padding: 0.5em;               /* Adds padding around buttons */
  transition: transform 0.2s;   /* Smooth hover effect */
}

.btn img {
  max-width: 9em;
}

.btn:active {
  transform: scale(0.95);       /* Shrinks button slightly when clicked */
}
	
/* Categories Section */
.categories-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 90%;
  margin: auto;
  overflow: hidden; /* Prevents showing both images */
	bottom: 12%;
}

/* Categories Wrapper (ensures only one category is visible at a time) */
.categories-wrapper {
  overflow: hidden;
  width: 100%;
}

.categories {
  display: flex;
  transition: transform 0.5s ease-in-out;
  transform: translateX(0); /* Start with Category 1 visible */
}

.category {
  width: 100%; /* Each category takes full width of the container */
  flex-shrink: 0;
  position: relative;
}

.category img {
  width: 100%;
  height: auto;
  display: block;
}

/* Beverage Button */
.beverage-button {
  position: absolute;
  top: 58%; /* Adjusted to align with the beverage image in Category 1 */
  left: 60%; /* Adjusted for alignment */
  transform: translate(-50%, -50%);
  width: 20%; /* Adjust size of the button */
  z-index: 2;
}

.beverage-button img {
  width: 100%;
  cursor: pointer;
}

/* Navigation Buttons */
.nav-button {
  background: #00C3B1;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
  padding: 0.5em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: background 0.3s ease;
}

.nav-button.left {
  left: 0;
}

.nav-button.right {
  right: 0;
}

.nav-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Recommeded Section */

.recommended-section {
  background-color: #00C3B1;
  padding: 1em;
  border-radius: 0.5em;
  max-width: 100%;
	margin-top: -11.5em;
padding-bottom: 6em;
}

.recommended-title {
  font-size: 1.5em;
  font-weight: 800;
  margin-bottom: 1em;
  color: white;
}

.recommended-items1, .recommended-items2 {
	display: flex;
	justify-content: center;
	gap: 1.3em;
	padding-bottom: 1em;
}

.reco-pics {
  width: 12em;
}

.livechat {
  position: fixed;
  bottom: 9em;
  right: 0em;
  width: 10em;
  cursor: pointer;
}

/* Navigation Bar */
.bottom-navbar {
    position: fixed; /* Fixed at the bottom */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF; /* White background */
    display: flex; /* Flexbox for even spacing */
    justify-content: space-around; /* Space between icons */
    align-items: center; /* Center icons vertically */
    padding: 0.5em 0;
    box-shadow: 0 -0.125em 0.25em rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 999; /* Ensure it's on top */
}

.nav-item {
    display: flex;
    flex-direction: column; /* Stack icon and label vertically */
    align-items: center; /* Center align icon and label */
    cursor: pointer; /* Make clickable */
}

.nav-icon {
    width: 4em; /* Adjust size of icons */
}