body {
    background-color: #222;
    margin: 0;
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', sans-serif;
	overflow-x: hidden;
	width: 100%
}

html {
    scroll-behavior: smooth;
    /* Adjust this number if the image is still slightly covered */
    scroll-padding-top: 80px; 
}

.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed; /* Extra security to lock the background in place */
    width: 100%;
}

/* ---------------------------------------Navigation-------------------------------------- */
/* Fix for the links so they don't look like default blue text */


.nav-item a {
    text-decoration: none;
    color: inherit; /* Keeps your black/dark gray text */
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.phone-container {
    width: 100%;
    max-width: 414px;
    min-height: 100vh; /* Change 'height' to 'min-height' */
    background-color: white;
    position: relative;
    /* overflow: hidden; */ /* REMOVE OR COMMENT THIS OUT */
    overflow-y: auto;    /* ADD THIS: allows vertical scrolling only */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* SECOND: Style the new text with padding */
.suggestion-text {
    /* Padding: Top (40px), Left/Right (20px), Bottom (40px) */
    padding: 30px 10px; 
    text-align: center;
}

.suggestion-text h2 {
    /* Applying the new font from your screenshot */
    font-family: "Londrina Solid", sans-serif;
    font-weight: 400; /* You can use 900 for a bolder 'Black' look */
    color: #6a0dad;   /* Your purple color */
    font-size: 32px;  /* Adjusted size to make the font pop */
    margin: 0;
    letter-spacing: 1px; /* Optional: makes it look more like the logo */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    height: 60px;
    border-bottom: 1px solid #eee;
}

/* ------------------------------------------- Logo --------------------------------------- */
.logo {
		width: 80px;
		height: 80px;
}

/* --------------------------------------- Menu Button ------------------------------------ */
.menu-btn {
    width: 30px;
    height: 25px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
}

.menu-btn span {
    width: 100%;
    height: 3px;
    background: #333;
}

.slider-window {
    width: 100%;
    height: 75vh;
    overflow: hidden;
}

/* Ensure the slider has no bottom margin */
.slider-window {
    width: 100%;
    height: 70vh; /* Or whatever height you prefer */
    overflow: hidden;
    margin-bottom: 0; /* Forces no gap below */
    padding-bottom: 0;
}

/* Style for the new image section */
.hero-section {
    width: 100%;
    margin-top: -1000px; /* Forces it to touch the slider */
    padding-top: 0;
    line-height: 0; /* Removes tiny 'text gap' at the bottom */
}

.hero-section img {
    width: 100%;
    height: auto;
    display: block; /* Essential: images are 'inline' by default, which causes gaps */
}

.bottom-product-image {
    width: 100%;
    /* No margin-top needed because the padding from 'suggestion-text' 
       already creates the space you want! */
}

.bottom-product-image img {
    width: 100%;
    height: auto;
    display: block; /* Remember: 'block' prevents that annoying tiny gap at the bottom */
}

.slider-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

.slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* ------------------------------------- Trial Package ------------------------------------*/

.trial-section img{
	width: 100%;
    height: auto;
    display: block;
	margin-bottom: -100px;
}

/* -------------------------------------- Combo Boxes ------------------------------------*/

.combo-boxes img{
	width: 100%;
    height: auto;
    display: block;
	margin-top: -80px;
	
}

/* ------------------------------------- Mini Section ------------------------------------*/

.mini-section img{
	width: 100%;
    height: auto;
    display: block;
	margin-top: -60px;
	z-index: 100
}

.mini-slider-window {
    width: 100%;
    overflow: hidden; /* Hides the image that isn't active */
    padding: 0px 0;
    touch-action: pan-y;
	padding-left: 0px;
}

.mini-slider-track {
    display: flex;
    width: 200%; /* Two images at 100% width each */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-slide {
    width: 50%; /* Each slide takes up half of the 200% track */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.mini-slide img {
    width: 100%;
    max-width: 420px; /* Keeps them large but safe for mobile */
    height: auto;
    border-radius: 20px;
    /* Clean shadow effect */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
    background: transparent;
}
/* --------------------------------------- Footer ----------------------------------------*/

.footer img{
	width: 100%;
    height: auto;
    display: block;
	margin-top: -10px;
}

/* -------------------------------------- Navigation -------------------------------------*/

.nav-overlay {
    position: fixed; /* Must be fixed to stay in place while background is locked */
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%); 
    width: 100%;
    max-width: 414px;
    height: 100vh; /* Changed from 100% to 100vh to cover full screen */
    background-color: #ffffff; /* Ensure this is a solid hex code */
    z-index: 9999; /* Higher than any carousel or slider */
    transition: transform 0.5s ease;
    padding-top: 80px;
    overflow-y: auto; /* Allows the menu itself to scroll if you add many links */
}

.nav-overlay.open { 
    transform: translate(-50%, 0); 
}

.nav-list {
    padding-left: 0;     /* This removes the big gap on the left */
    margin: 0;           /* This removes default top/bottom spacing */
    list-style: none;    /* This removes the bullet points */
}

.nav-item {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

/* ---------------------------------------- Carousel -------------------------------------- */

.product-carousel {
    position: relative;
    width: 100%;
    height: 750px; /* Increased from 500px to give cards more room */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px; /* Increased perspective for a wider 3D field */
    overflow: hidden;
}

.product-card {
    position: absolute;
    width: 270px; /* Increased base width from 220px */
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.product-card img {
    width: 100%;
    border-radius: 20px;
    /* Stronger shadow for the larger cards */
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
/* -------------------------------------- Combo Package ----------------------------------- */

.combo-carousel {
    position: relative;
    width: 100%;
    height: 600px; /* Reduced from 800px to fit better on mobile */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* Lower perspective makes the 3D pop more on small screens */
    overflow: hidden;
    touch-action: pan-y;
}

.combo-card {
    position: absolute;
    width: 260px; /* Smaller base width for mobile */
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-style: preserve-3d;
}

.combo-card img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}