/* =========================================
   Madeena International - Custom Styles
   ========================================= */

html { 
    scroll-behavior: smooth; 
}

body { 
    background-color: #f2f2f2; 
    color: #111111; 
    overflow-x: hidden; 
}

/* Modern Floating Glass Nav */
.glass-pill {
    background: rgba(43, 103, 119, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 216, 228, 0.2);
}

/* Product Image Hover Effects */
.img-wrap { 
    overflow: hidden; 
}
.img-wrap img { 
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.group:hover .img-wrap img { 
    transform: scale(1.08); 
}

/* Interactive Hero Background Slices */
.slice-container { 
    display: flex; 
    width: 100%; 
    height: 100%; 
}
.slice { 
    flex: 1; 
    transition: flex 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    overflow: hidden; 
    position: relative; 
}
.slice-container:hover .slice { 
    flex: 0.85; /* Slight shrink for inactive slices */
} 
.slice-container .slice:hover { 
    flex: 1.8;  /* Expand hovered slice */
}  
.slice img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.7s ease; 
}
.slice:hover img { 
    transform: scale(1.05); 
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f2f2f2; 
}
::-webkit-scrollbar-thumb { 
    background: #2b6777; 
    border-radius: 10px; 
}

/* The container holding your product image */
.product-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1; /* Forces a perfect square */
  overflow: hidden;
  background-color: #f8f8f8; /* Optional: adds a subtle background if the image is transparent */
  border-radius: 8px; /* Optional: rounds the corners slightly */
}

/* The actual product image */
.product-image-wrapper img {
  width: 100%;
  height: 100%;
  
  /* 'contain' ensures the whole box of dates is visible without cropping the edges. 
     If you prefer the image to fill the whole square even if it crops slightly, change this to 'cover' */
  object-fit: contain; 
  
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

/* Optional: Add a slight zoom effect when a customer hovers over the dates */
.product-image-wrapper:hover img {
  transform: scale(1.05);
}

.menu-container {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen */
    width: 300px;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* This makes it smooth */
}

/* When the menu is toggled open */
.menu-container.active {
    transform: translateX(-100%); /* Slides it into view */
}

.slice-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.slice {
    flex: 1;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.slice:hover {
    flex: 2; /* This creates the 'flow' when you hover */
}

.slice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}