/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fffdfd; /* Light Grey background */
    color: #2B3D41; /* Primary text color */
    line-height: 1.6;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  height: 80px; /* Increased size of the logo */
  width: auto; /* Maintain aspect ratio */
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 25px; /* Reduced height for a smaller appearance */
  width: 35px; /* Reduced width for a smaller appearance */
  padding: 0;
  margin-right: 40px; /* Adds space to the left of the hamburger menu */
  z-index: 10;
}

.hamburger .bar {
  background-color: #000;
  height: 2px; /* Make the bars slightly thinner */
  width: 100%;
}



/* Make sure navbar links are hidden initially */
.navbar {
  display: none;
}

/* Style for navbar links */
.navbar a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
}


/* Additional styles as needed */


/* Hamburger Menu Styles */
.hamburger-menu {
  display: flex; /* Temporarily show it for testing */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
}
.bar {
  height: 3px;
  background: #000; /* Color of the hamburger icon */
  border-radius: 10px;
  transition: background-color 0.3s ease;
}




/* 1st Section */

.image-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; /* This makes .image-section a positioning context */
}

.overlay-container {
    width: 100%;
    position: relative; /* Ensures overlay content is positioned relative to this container */
}

.image-section img {
    width: 100%;
    height: auto;
    object-fit: scale-down; /* Ensures the image scales down if it has to fit in the available space */
}

.overlay-content {
    position: absolute;
    top: 50%; /* Keeps vertical centering */
    left: 60%; /* Shift to the right from the center; adjust this value as needed */
    transform: translate(-50%, -50%); /* Adjust horizontally centering offset */
    color: white; /* Text color */
    text-align: center; /* Centers the text inside the overlay content */
}



/* Style your button and text within the overlay content as needed */
.overlay-content .Welcome{
    font-size: 60px; /* Example size, adjust as needed */
    margin: 0 0 10px; /* Spacing between text and button */
    color: rgb(0, 0, 0); /* Adjust text color as needed */
    font-family: 'Baloo 2', cursive; /* Applying the Fredoka One font */
}


.boba-slogan {
    font-family: 'Roboto', cursive; /* Consistency in font choice */
    font-size: 25px; /* Smaller font size than your main text */
    color: #000000; /* This example uses white, adjust if necessary */
    opacity: 0.8; /* Slightly transparent for a subtle effect */
    margin-top: 0.5em; /* Space between the main text and the slogan */
    
    /* Additional styling if needed */
}

/* Button Deisng */
.overlay-content button {
    padding: 10px 20px; /* Example padding, adjust as needed */
    font-size: 16px; /* Example font size, adjust as needed */
    cursor: pointer;
}

.overlay-content button {
    padding: 12px 24px; /* Slightly larger padding for a more substantial look */
    font-size: 18px; /* Larger font size for better readability */
    color: #fff; /* White text color */
    background: linear-gradient(145deg, #ff7e5f, #feb47b); /* Gradient background */
    border: none; /* Remove default border */
    border-radius: 30px; /* Rounded corners for a modern look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.overlay-content button:hover {
    background: linear-gradient(145deg, #feb47b, #ff7e5f); /* Invert gradient on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
    transform: translateY(-2px); /* Lift the button up a bit on hover */
}

.overlay-content button:focus,
.overlay-content button:active {
    outline: none; /* Remove the outline to keep the design clean */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* More pronounced shadow for active state */
}

/* Button Deisng END */



/* 1st Section END */

.feature-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: #fff;
  }
  
  .feature-item {
    flex: 1;
    padding: 10px;
    position: relative; /* Needed for absolute positioning of the hover image */
  }
  
  .feature-item img {
    max-width: 43%;
    height: auto;
    margin-bottom: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Updated to include opacity */
  }
  
  /* Hide the hover image initially */
  .feature-item .hover-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Center the hover image */
    max-width: 43%; /* Match the width of the default image */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* The hover image is transparent by default */
    transition: opacity 0.1s ease; /* Smooth transition for opacity */
    pointer-events: none; /* Ensures the hover effect is not blocked by this image */
  }
  
  /* When hovering over the feature item, hide the default image and show the hover image */
  .feature-item:hover .default-img {
    opacity: 0;
  }
  
  .feature-item:hover .hover-img {
    opacity: 1; /* Show the hover image */
  }
  
  .feature-item h3 {
    margin: 10px 0;
    font-size: 1.5em;
  }
  
  .feature-item p {
    font-size: 1em;
    color: #666;
  }
  
/* END */

.instagram-inspired {
    text-align: center; /* Centers the header text */
  }
  
  .gallery-header {
    font-size: 2.5em; /* Adjust the size as needed */

    color: #000000; /* Adjust the color to match your site's theme */
    /* Additional styling could be added here */

    font-family: 'Baloo 2', cursive; /* Applying the Fredoka One font */
  }
  


.bubble-tea-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates three columns */
    gap: 20px; /* Spacing between grid items */
    padding: 20px; /* Padding around the entire grid */
  }
  
  .grid-item {
    position: relative; /* Needed for absolute positioning of images */
    overflow: hidden; /* Ensures no overflow of content */
    padding-top: 150%; /* The padding-top hack for aspect ratio (1:1 in this case) */
    border-radius: 10px;
  }
  
  .grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area, may crop the image */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover effects */
  }
  
  .grid-item:hover img {
    transform: scale(1.05); /* Slightly scale up the image on hover */
    opacity: 0.9; /* Slightly reduces the image opacity on hover */
  }
  
  

/* You can add more styles as needed, following this color scheme */