body {
            margin: 0;
              font-family: 'Lufga Regular', sans-serif;font-weight: normal; font-style: normal;				
              background-color: #FFFFFF; /* A neutral background for the page */
        }
/* --- Global Styles & Variables --- */
:root {
    --primary-purple: #9d33e5;
    --light-pink-bg: #fef9ff;
    --dark-color: #000000;
    --text-color: #4a4a4a;
    --border-color: #e9e9e9;
    --white-color: #ffffff;
    --green-accent: #2ac59e;
    --pink-accent: #fce7f3;
    --font-family: 'Lufga Regular';
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: black; }
ul { list-style: none; }
h1, h2, h3, h4 {  line-height: 1.3; font-weight: 600; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem);}
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h4 { font-size: 1.2rem; }
p { margin-bottom: 1rem; }

.section-title {/* text-align: center;*/ margin-bottom: 1rem;  color: #121212;text-align: center;font-family: 'Lufga Light';font-size: 54.647px;font-style: normal;font-weight: normal;line-height: 55px; /* 100% */
text-transform: capitalize;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.btn {
    display: inline-block;
    padding: 12px 30px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 1px solid var(--dark-color);
    cursor: pointer;
}
.btn-dark { background-color: white }
.btn-dark:hover { background-color: #d0cdcd; }

/* --- Header --- */
/* --- [1] Global Styles & Variables --- */
:root {
    --white-color: #ffffff;
    --text-color: #212529;
    --primary-purple: #9d4edd;
    --primary-pink: #f252a8;
    --header-height: 90px; /* Control header height from one place */
}



a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- [2] Header Base & Desktop Styles --- */
.main-header {
    background: var(--white-color);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Perfect 3-column layout */
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-nav-left { justify-content: flex-start; }
.header-nav-right { justify-content: flex-end; }

.header-nav a { font-weight: 500; }
.header-nav-left a:hover { color: var(--primary-purple); }

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.logo img { height:65px; }
.logo-tagline { font-size: 0.7rem; color: #6c757d; font-weight: 500; }

.phone-link { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
.gradient-text {
    background: linear-gradient(90deg, var(--primary-pink), var(--primary-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.social-icons { display: flex; gap: 1.25rem; }
.social-icons a { font-size: 1rem; color: #495057; }
.social-icons a:hover { color: var(--primary-purple); }

/* --- [3] Mobile Elements (Hidden by Default) --- */
.mobile-nav-toggle { display: none; }
.mobile-menu { display: none; }


/* --- [4] Responsive Styles (For Tablets & Mobile) --- */
@media (max-width: 1024px) {
    .header-container {
        display: flex;
        justify-content: space-between;
    }
    
    .header-nav-left,
    .header-nav-right { display: none; } /* Hide desktop nav */

    .mobile-nav-toggle {
        display: block; /* Show hamburger button */
        background: none;
        border: none;
        font-size: 1.7rem;
        cursor: pointer;
        z-index: 1001;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--white-color);
        transform: translateX(100%); /* Hide off-screen */
        transition: transform 0.3s ease-in-out;
        z-index: 999;
    }
    
    .mobile-menu.is-active { transform: translateX(0); } /* Class to show menu */
    
    body.nav-open { overflow: hidden; } /* Prevent body scrolling */

    /* Styles for items inside mobile menu */
    .mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
    .mobile-menu a { font-size: 1.5rem; font-weight: 500; }
    .mobile-menu .mobile-menu-contact { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
    .mobile-menu .social-icons { gap: 2rem; }
    .mobile-menu .social-icons a { font-size: 1.2rem; }
}
/* --- Hero Section --- */

/* --- Hero Section Styles --- */
/* --- Base and Mobile-First Styles --- */
.hero-section {
    /* 
      IMPORTANT: The 'file:///' path will only work on your local computer. 
      For a website, you need to upload the image and use a web URL.
      I've replaced it with the previous online URL for this example.
    */
    background-image: url('images/banner.png');
    background-size: cover;
    background-position: 75% 50%; /* Best for mobile: keeps the person in view */
    
    /* Layout and Sizing */
/*    display: flex;*/
display:inherit;
    align-items: center;
    color: #ffffff;
    box-sizing: border-box;

    /* FLUID SPACING: This is already perfectly responsive! */
    padding: clamp(40px, 8vh, 80px) clamp(25px, 8vw, 120px);
    
    /* Good for mobile, ensuring it fills the screen vertically. */
    min-height: 85vh; 
}

/* --- Tablet and Desktop Styles (768px and wider) --- */
@media (min-width: 768px) {
    .hero-section {
        /* On wider screens, centering the image often looks better */
        background-position: center center;

        /* 
          On desktops, using a fixed min-height can prevent the section 
          from becoming excessively tall on large monitors. 
          This gives you more design control.
        */
        min-height: 600px;
    }
	
	.footer-about p {
	padding: 0 30px 0px 0px;
}


}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;

    /* FLUID GAP: The space between title and button scales slightly */
    gap: clamp(30px, 4vw, 40px);
}

.hero-title {
    margin: 0;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

    /* FLUID TYPOGRAPHY: Font size scales smoothly from 2.8rem to 4.2rem */
    /* clamp(MIN, PREFERRED, MAX) */
    font-size: clamp(2.8rem, 2rem + 4vw, 4.2rem);
	
	
}

.hero-cta {
    background-color: #ffffff;
    color: #111111;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
	border-radius:5px;
}

.hero-cta:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px);
}

/* --- Tablet and Desktop Styles (768px and wider) --- */
/* This media query now only handles layout changes that cannot be fluid,
   like background position and max-width. */
@media (min-width: 768px) {
    .hero-section {
        background-position: center center; /* Center the image for wider screens */
        min-height: 600px; /* Set a fixed min-height to prevent it getting too tall */
    }

    .hero-content {
        /* On larger screens, the content only takes up about half the space */
        max-width: 55%; 
    }
}

/* --- Large Desktop Refinement (Optional) --- */
/* You can still have a final breakpoint for very large screens if needed. */
@media (min-width: 1400px) {
    .hero-content {
        max-width: 45%;
    }
}


/* --- Partners Section --- */
/* --- Partners Section --- */
.partners {
/*    padding:60px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;*/
  padding: 60px 1%;
  border-top: 1px solid #F8F8F8;
  border-bottom: 1px solid #F8F8F8;
  background: #F8F8F8;
}

.partner-logos {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allows logos to wrap on smaller screens */
    gap: 1.2rem; /* Adds space between logos when they wrap */
}

.partner-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* Allows logos to take up space, but not required */
    min-width: 88px; /* Prevents logos from becoming too small */
}

.partner-logo img {
    max-height:50px; /* Controls the height of the logos to keep them uniform */
    width: auto;
    max-width: 100%;
    object-fit: contain;
/* Makes logos grayscale initially */
    /* filter: grayscale(100%);  */
/*    opacity: 0.6;*/
    transition: all 0.3s ease-in-out;
}

/* --- Interactive Hover Effect --- */
.partner-logo img:hover {
    filter: grayscale(0%);
     /* Brings color back on hover */
    opacity: 1;
    transform: scale(1.05); /* Slightly enlarges the logo on hover */
}

/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 768px) {
	.partners {
  padding: 30px 1%;
  border-top: 1px solid #F8F8F8;
  border-bottom: 1px solid #F8F8F8;
  background: #F8F8F8;
}
	
	
	
	
    .partner-logos {
        justify-content: center; /* Centers the logos on mobile */
        gap: 1.5rem .5rem; /* Adjusts vertical and horizontal gap */
    }
    
    .partner-logo img {
       max-height: 30px; /* Slightly smaller logos on mobile */
      /* opacity: 0.8;*/ /* Make them a bit more visible on mobile */
    }
	
	
.hero-title {
	font-size: 40px;
	text-align:center;
}	
.hero-section{min-height: 30vh;}
.hero-cta {
	margin: 0 auto;
	border-radius: 5px;
}
	
	.logo img { height:45px !important; }
	.site-header{ padding:15px 0px !important;}
	
}





        .product-showcase {
            display: flex;
            flex-direction: column;
            /* gap: 20px; Space between the two product sections */
           /* padding: 40px 0;*/
        }

        /* --- Product Card Styles (Mobile First) --- */
/*        .product-card {
            display: flex;
            flex-direction: column; 
            gap: 30px;
            padding: 60px 25px;
        }*/
		
		.product-cardbg{
			width:100%;
			max-width:1280px;
			margin:0 auto;
		/*	display:flex;
			gap: 20px;*/
			
		    display: flex;
            flex-direction: column; 
            gap: 30px;
            padding: 40px 25px;}

        /* Background Colors */
        .bg-lavender {
            background-color: #f7f5ff;
/*background: #FFFFFF;*/
background: linear-gradient(60deg, rgba(255, 255, 255, 1) 0%, rgba(230, 214, 241, 1) 35%);
			/*fill: linear-gradient(261deg, rgba(230, 214, 241, 0.60) 64.4%, rgba(255, 255, 255, 0.60) 95.39%);*/
			
        }
        .bg-pink {
           /* background-color: #fdf4fb;*/
background: #FFD6EE;
background: linear-gradient(120deg, rgba(255, 214, 238, 1) 60%, rgba(255, 215, 239, 1) 0%, rgba(255, 255, 255, 1) 100%);
        }
        
        .product-image-wrapper img {
            max-width: 100%;
            height: auto;
           /* display: block;*/ /* Removes bottom space under image */
        }

        .product-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Aligns content to the left */
            gap:10px;
        }

        .product-title {
            font-size: 2.5rem; /* 40px */
            font-weight: 700;
            color: #a042b3;
            margin: 0;
            line-height: 1.2;
        }

        .product-description p {		  
		  color: #000;
font-family: 'Lufga Regular';
font-size: 17px;
font-style: normal;
font-weight: normal;
line-height: 25px; 
text-transform: capitalize;
        }
		
 p.product-description{color: #000;
font-family: 'Lufga Regular';
font-size: 17px;
font-style: normal;
font-weight: !important;
line-height: 25px; /* 171.696% */
text-transform: capitalize;} 
		
		
		

        .features-list {
            list-style: none;
            padding: 0;
            margin: 0px 0 25px 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
			
        }

        .feature-item {
			background:url(images/check.svg) no-repeat 1px 5px;
			padding-left:22px;
            display: flex;
            align-items: center;
            gap: 10px;
           /* font-size: 1.05rem;
            color: #111;
            font-weight: 600;*/
			
			color: #000;
     font-family: 'Lufga Light';
    font-style: normal;
    font-weight: normal;
font-size: 18px;
line-height:24px; /* 93.907% */
text-transform: capitalize;
        }

        /*.feature-item::before {
            content: '✓';
            display: inline-block;
            background-color: #55d688;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            font-weight: bold;
            flex-shrink: 0;
        }*/

        .availability-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap; /* Allows items to wrap on very small screens */
            margin-top:5px;
        }

        .availability-label {			
			
color: #000;
font-family: 'Lufga Light';
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 27px; /* 168.75% */
text-transform: capitalize;
        }
        
/*        .size-options {
            display: flex;
            gap: 10px;
        }*/

        .size-button {
            padding: 8px 20px;
            border: 1px solid #ddd;
            background-color: #FFFFFF;         
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
			
			color: #000;
text-align: center;
  font-family: 'Lufga Medium';
font-size: 15px;
font-style: normal;
font-weight: normal;
line-height: 18px; /* 168.75% */
text-transform: capitalize;
        }

/*        .size-button.active {
            background-color: #fff;
            border-color: #aaa;
        }*/

        .cta-button {
 /*           background-color: #000;
            color: #fff;
            padding: 12px 30px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.2s, transform 0.2s;
            margin-top: 40px;
            border: none;
            cursor: pointer;*/
	margin-top: 40px;		
	padding: 12px 30px;		
	 font-family: 'Lufga Medium';		
	  color: #FFF;
font-size: 20.226px;
font-style: normal;
font-weight: 500;
line-height: 23.742px; /* 117.384% */
text-transform: capitalize;
background:#019501; 
border-radius:3px;
        }

        .cta-button:hover {
            background-color: #026802;
            transform: translateY(-2px);
        }

        /* --- Tablet & Desktop Styles (992px and up) --- */
        @media (min-width: 992px) {
            .product-card {
                flex-direction: row; /* Side-by-side layout */
                align-items: center;
                gap: 5%; /* Creates space between the two columns */
                padding: 60px 0%; /* More horizontal padding */
            }

            .product-image-wrapper,
            .product-content {
              /*  flex: 1;*/ /* Each column takes up half the space */
               /* width: 47.5%;*/ /* Defines width for the flex items */
				
				width: 45%; float: left; margin: 0px 2%;
			}
            
            /* Reverses the column order for the second card */
            .product-card.reverse {
                flex-direction: row-reverse;
            }
            
            .product-title {
                /*font-size: 3rem;  48px */
				color: #B621B9;
 font-family: 'Lufga SemiBold';
font-size: 50px;
font-style: normal;
font-weight: normal;
line-height: 62.001px; /* 124.383% */
text-transform: capitalize;
            }
			
        }

/* --- Power of 100 Section --- */

/* =================================================================== */
/* --- Global & Mobile-First Styles (for all screens < 768px) --- */
/* =================================================================== */

.power-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
}

.power-content {
    width: 100%;
    max-width: 100%;
}

.power-grid-top,
.power-grid-bottom {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px; /* Consistent spacing for all cards on mobile */
}

.power-card-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 35px; /* Consistent gap between text and visual element */
}

.power-card {
    border-radius: 34px;
    padding: 27px 20px;
    width: 100%;
}

.power-card-large {
    background-color: rgba(255, 213, 238, 1);
}

.power-card-medium {
    background-color: rgba(248, 238, 255, 1);
}

.power-text-column,
.power-visual-column,
.trial-text-column,
.trial-image-column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.power-text-content {

    color: rgba(0, 0, 0, 1);
    margin-top: 39px;
}

.power-card-title {
/*    font-size: 34px;
    font-weight: 600;
    line-height: 36px;*/
	
	color: #000;
font-family: 'Lufga Medium';
font-size: 34px;
font-style: normal;
font-weight: 600;
line-height: 33.629px; /* 100% */
}

.power-card-description {
    font-size: 19px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.25px;
    margin-top: 40px;
}

.power-visual-element {
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 1);
    width: 221px;
    height: 266px;
    margin-left: auto;
    margin-right: auto;
}

.power-card-trial {
    border-radius: 34px;
    background-color: rgba(255, 227, 249, 1);
    padding: 36px 20px 0;
}

.trial-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;   
    color: rgba(0, 0, 0, 1);
    margin-top: 36px;
}

.trial-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 42px;
    margin: 0;
}

.trial-description {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.25px;
    margin-top: 36px;
}

.trial-button {
    border-radius: 209px;
	    background-color: rgba(182, 33, 185, 1);
    outline: 2px solid rgba(182, 33, 185, 1);
    outline-offset: 2px;
	
    /*background-color: rgba(18, 18, 18, 1);*/
    align-self: start;
    margin-top: 40px;
    padding: 13px 20px;
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.04px;
    line-height: 25px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
	margin-bottom:25px;
}

.trial-button:hover,
.trial-button:focus {
/*    background-color: rgba(182, 33, 185, 1);
    outline: 2px solid rgba(182, 33, 185, 1);
    outline-offset: 2px;*/
	background-color: rgba(18, 18, 18, 1);
}

.trial-image {
    aspect-ratio: 0.75;
    object-fit: contain;
    object-position: center;
    width: 100%;
    margin-top: 36px;
        margin-left: 21px;
}

.power-card-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 13px;
}

.power-card-small {
    border-radius: 34px;
    padding: 24px 20px;
}

.power-card-small:first-child {
    background-color: rgba(247, 218, 255, 1);
}

.power-card-small:last-child {
    background-color: rgba(255, 203, 232, 1);
}

.power-card-title-small {
    color: rgba(0, 0, 0, 1);
    font-size: 34px;
    font-weight: 600;
    line-height: 36px;
    margin: 0;
}

.power-card-description-small {
    color: rgba(16, 0, 0, 1);
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 7px;
}

.power-visual-small {
    border-radius: 30px;
/*    background-color: rgba(255, 255, 255, 1);*/
    margin-top: 18px;
    width: 254px;
    max-width: 100%;
    height: 133px;
	margin:0 auto;
}

/* =================================================================== */
/* --- Tablet Styles (for screens 768px and wider) --- */
/* =================================================================== */
@media (min-width: 768px) {
    .power-grid-top {
        flex-direction: row; /* Top cards go side-by-side */
        align-items: flex-start;
    }

    .power-card-large,
    .power-card-medium {
        width: 50%; /* Each takes half the space */
    }

    .trial-title {
        font-size: 60px; /* Increase title size for tablets */
        line-height: 62px;
    }
}


/* =================================================================== */
/* --- Desktop Styles (for screens 992px and wider) --- */
/* =================================================================== */
@media (min-width: 992px) {
    .power-section {       
        padding: 60px 42px;
    }

    .power-content {
        max-width: 1280px;
    }

    .power-grid-top,
    .power-grid-bottom,
    .power-card-content {
        flex-direction: row;
        gap: 20px;
    }

    .power-grid-bottom {
        max-width: 1280px;
        margin-top: 13px;
    }

    .power-card {
        padding: 27px 39px 27px 14px;
    }

    .power-card-large {
        width: 55%;
    }

    .power-card-medium {
        width: 55%;
        min-height:360px;
		padding:36px 38px 38px;
		
    }

    .power-text-column {
        width: 59%;
    }

    .power-text-content {
        margin-top: 4px;
    }

    .power-card-title {
        margin-right: 40px;
    }

    .power-card-description {
        margin-top: 60px;
    }

    .power-visual-column {
        width: 41%;
    }

    .power-visual-element {
        margin-top: 0;
    }

    .power-card-trial {
        width: 73%;
        padding: 36px 38px 0;
    }

    .trial-text-column {
        width: 42%;
    }

    .trial-content {
        margin-top: 0;
        margin-right: -82px;
    }

    .trial-title {
        font-size: 76px;
        line-height: 85px;
		font-family: 'Lufga SemiBold';
   	    font-style: normal;
        font-weight: normal;
    }

    .trial-description {
        margin-right: 26px;
    }

    .trial-button {
        margin-top: 93px;
        padding: 13px 61px;
    }

    .trial-image-column {
        width: 58%;
    }

    .trial-image {
        margin-top: 0;
        margin-left: 39px;
    }

    .power-card-group {
        width: 27%;
    }
    
    .power-card-small {
        padding: 24px 21px;
    }
}








 /* delivery-banner-container  */

        
        /* 
          This is the main container that handles centering and the top margin.
        */
        .delivery-banner-container {
            width: 90%; /* The banner will take up 90% of the screen width */
            max-width: 1100px; /* Prevents the banner from becoming too wide on large desktops */
            
            /* This applies the 3% top margin and centers the whole part horizontally */
            margin: 3% auto 0;
        }

        /* --- Delivery Banner Styles --- */
        .delivery-banner {
            display: flex;
            align-items: center; /* Vertically centers the items */
            overflow: hidden; /* Essential for the clip-path and overlap effect */
            border: 2px solid #e868e8;
            border-left-color: #c7c7c7;
        }

        .van-image-wrapper {
            /* Defines the width of the image area in the flex layout */
            flex-basis: 40%; 
            flex-shrink: 0; /* Prevents the image from being squished */
            position: relative;
            z-index: 2; /* Ensures the van image stays ON TOP of the magenta block */
            background-color: #fff; /* White background behind the van */
        }

        .van-image {
            max-width: 100%;
            display: block; /* Removes extra space below the image */
        }

        .banner-content {
            flex-basis: 126%; /* Defines the width of the text area */
            align-self: stretch; /* Makes this block fill the full height of the parent */
            
            /* Centers the text perfectly */
            display: flex;
            align-items: center;
            justify-content: center;
            
            background-color: #e868e8; /* The vibrant magenta color */
            color: #fff;

            /* The CSS magic for the angled shape */
             clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
            
            /* This pulls the magenta block to the left, creating the overlap */
            
        }
        
        .banner-text {
            font-weight: 700;
            line-height: 1.3;
            margin: 0;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            
            /* Pushes text away from the clipped edge to keep it centered */
            padding-left: 9%; 
            
            /* 
              FLUID TYPOGRAPHY for full responsiveness:
              Scales font size smoothly on ALL screens.
            */
           
        }
















/* Layers Of Thoughtful Comfort */


 :root {
            --primary-text: #1a1a1a;
            --secondary-text: #4d4d4d;
            --background-color: #ffffff;
            --decorative-circle-color: #f3efff;
            --active-dot-color: #6a3de8;
            --inactive-dot-color: #d1d1d1;
        }

        /* --- General Body Styles --- */
       

        /* --- Main Section & Optional Heading --- */
        .comfort-sectionbg {
            width: 100%;             
            margin:60px 0;
            
        }
		
		.comfort-section {
            width: 100%;
            max-width: 1280px;
            text-align: center;         
            margin:0 auto;
            
        }

        .main-heading {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 50px;
        }






















/* --- Blog Section --- */
.blog-guide {
  padding:60px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* BLOG CARD */
.blog-card {
  border: 1px solid var(--border-color);
  border-radius: 15px;
  overflow: hidden;
}

/* IMAGE SECTION */
.blog-image {
  position: relative;
}

.blog-image img {
  width: 100%;
  display: block;
 
  object-fit: cover;
}

/* DATE BADGE */
.blog-date {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--dark-color);
  color: var(--white-color);
  width: 60px;
  height: 60px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-date span {
  font-size: 1.5rem;
  line-height: 1;
}

/* CONTENT */
.blog-content {
  padding: 1.5rem;
}

.blog-category {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.blog-content h4 {
color: #121212;
  font-family: 'Lufga Medium';
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 25px; /* 127.778% */
letter-spacing: 0.3px;
/*  font-size: 1.1rem;*/
  margin-bottom: 1rem;
}

.blog-content a {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* 🔁 RESPONSIVE BREAKPOINTS */

/* Medium screens (tablets) */
@media (max-width: 991px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens (mobiles) */
@media (max-width: 576px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-date {
    width: 50px;
    height: 50px;
    font-size: 0.8rem;
  }

  .blog-date span {
    font-size: 1.2rem;
  }

  .blog-content {
    padding: 1rem;
/*	padding-top:0px;*/
  }
  .blog-category{ margin-bottom:1rem;}

  .blog-content h4 {
    font-size: 1.3rem;
  }

  .blog-content a {
    font-size: 0.85rem;
  }
  
  .feature-card {

	padding:0rem 2.5rem !important;

}
.feature-icon {
	height: 50px;
	margin-bottom: .5rem !important;
}

.features {
	padding: 0px !important;
}

.footer-links a {
	margin-bottom: 5px !important;

}
.newsletter-form input { width:85% !important;}
.newsletter-form button {width:85% !important;}

}






/* --- Features Section --- */
.features { padding: 60px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-card {
    border: 1px solid var(--border-color); padding: 2.5rem;
    border-radius: 20px; text-align: center;
}
.feature-icon { height: 50px; margin-bottom: 1.5rem; }
.feature-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }

/* --- Footer Section --- */
.main-footer { background: var(--light-pink-bg); color: var(--text-color); padding: 60px 0 30px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 2fr; gap: 2rem; }
.footer-logo { height: 40px; margin-bottom: 2rem; }

.footer-links h4, .footer-subscribe h4 { color: var(--dark-color); /*margin-bottom: 1.5rem;*/ font-size: 1.1rem; margin-bottom:5px;}
.footer-links a { display: block; margin-bottom: 1rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--primary-purple); }
.newsletter-form { display: flex; flex-direction: column; margin-bottom: 2rem; }
.newsletter-form input {
    padding: 12px; border: 1px solid var(--border-color); border-radius: 5px;
    background: var(--white-color); margin-bottom: 1rem;
}
.newsletter-form button {
    background: var(--dark-color); color: var(--white-color); border: none;
    padding: 12px; border-radius: 5px; cursor: pointer; font-weight: 500;
}
.footer-social { display: flex; gap: 0.8rem; }
/*.footer-social a {
    width: 40px; height: 40px; background: var(--dark-color); color: var(--white-color);
    display: grid; place-items: center; border-radius: 5px; font-size: 1.1rem;
}*/



/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .header-nav, .header-contact { display: none; }
    .mobile-nav-toggle { display: block; }
    /* Mobile nav functionality would be added here */
    .mattress-card, .mattress-card.reverse { flex-direction: column; text-align: center; gap: 2rem; padding: 2rem; }
    .mattress-details ul { display: inline-block; text-align: left; }
    .availability { justify-content: center; }
    .power-grid { grid-template-columns: 1fr 1fr; }
    .mattress-center-image { display: none; }
    .trial-card { grid-column: 1 / 2; grid-row: 2/3; transform: none; }
    .money-card { grid-column: 2 / 3; grid-row: 2/3; transform: none; }
    .layers-content { flex-direction: column; min-height: auto; gap: 2rem; }
    .layers-image-wrapper, .layers-text-wrapper { position: static; width: 100%; max-width: 500px; margin: 0 auto; }
    .layers-text-wrapper { padding: 2rem; text-align: center; }
    .layers-text-wrapper::before { display: none; }
    .testimonial-grid, .blog-grid, .feature-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .hero { text-align: center; justify-content: center; }
    .hero-content { padding: 0rem; }
    .power-grid { display: flex; flex-direction: column; }
    .power-card { text-align: center; margin-top:3%; }
    .power-card::before { left: 50%; transform: translateX(-50%); }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-about p, .footer-links { text-align: center; }
    .newsletter-form { align-items: center; }
    .footer-social { justify-content: center; }
	
	.product-cardbg{ padding:15px;}
	.product-content {margin: 15px 0px;}
	
	.section-title {
	font-size: 38px !important;
	line-height: 42px !important;

}
	
}

/*@media (max-width: 768px) {
.size-options {
	display: initial !important;}
.size-button{margin-bottom:5px;}
.slide-content h3 {
	font-size: 34px !important;
	font-family: 'Lufga SemiBold';
	font-style: normal;
	font-weight: normal;
	margin-bottom: 1rem;
}

}*/


.m-content{ display:flex; max-width:1280px; margin:0 auto; width:100%;}

@media only screen and (max-width:1154px) and (min-width:769px){
	
	.testimonial-imag {float: left;	width: 45% !important;}
	.slide-content {float: right;width: 55%;padding: 5px 10px !important;	text-align: left;}
	.slide-content h2 {	font-size: 28px !important;}
	}
	
	
@media only screen and (max-width:991px) and (min-width:568px){	 
	.product-image-wrapper {
	margin: 20px 0px;
}
.product-image-wrapper {
	text-align: center;
}
.product-content {
	padding: 15px;
}

}

.power-visual-element img{border-radius:30px;}
.power-visual-small img {border-radius:30px;}

.power-card.power-card-trial{ background:url(images/free-demo.webp) no-repeat right center / cover;}
.tp-title {background:#fff;	padding-top:60px;}
.footermenu{ margin-bottom:25px;}
.footermenu li {display: inline;padding-right: 40px; }

















.Delivered_bgg {margin:0px 0px 60px 0px;    background: #eb65e0;}
    .Delivered_bg {
      display: flex;
      align-items: center;
      justify-content: space-between;  
      border: 2px solid #eb65e0;
      border-radius: 3px;
      overflow: hidden;
      max-width: 100%;
      
    }

    .Delivered_bg-image {
      background: white;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      clip-path: polygon(0 0, 100% 0, calc(100% - 200px) 100%, 0% 100%);
    }

    .Delivered_bg-image img {
      max-width: 90%;
      height: auto;
    }

    .Delivered_bg-text {
      flex: 1;
      color: white;
      font-size: 38px;
      font-weight: 700;
      text-align: center;
      padding: 20px;
	  padding-right:6%;
	  
	  

	  
    }

    @media (max-width: 768px) {
      .Delivered_bg {
        flex-direction: column;
        text-align: center;
      }

      .Delivered_bg-image {
        clip-path: none;
        width: 100%;
      }

      .Delivered_bg-text {
        padding: 25px;
        font-size: 28px;
      }
	  
	  .slide img {
	width: 100%;
}
.slide-content {
	float: none;
	width: 100% !important;
	padding: 5px 0px !important;
	text-align: left;
}

.slide-content h2 {
	font-size: 25px !important;
	margin-bottom: 15px;
	font-weight: bold;
}

.blog-card{ margin:15px;}
.power-text-content{ margin-top:0px;}
.power-card-title {	font-size: 30px;font-weight: 600;line-height: 30px; margin-top:15px;}
/*.trial-title {font-size: 30px;font-weight: 600;	line-height: 30px;	margin-top: 15px;}*/
.power-card-title-small{font-size: 30px;font-weight: 600;	line-height: 30px;	margin-top: 15px; margin-bottom:15px;}
  
  .exploded-view img {width: 100%;}
    }
	
.prev2, .next2 {
	font-size: 25px;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	line-height: 30px;
	margin-top: 20px;
}

.testimonial-card {
	text-align: left;
}

.power-card.power-card-large {
	min-height: 360px;
	margin-bottom: 8px;
	padding:36px 38px 38px;
}
.power-card.power-card-small {
	min-height: 360px;
/*	margin-bottom: 8px;*/
	padding:36px 38px 38px;
}

.power-visual-element img {
	width: 100%;
}
	


.slide{width:100%;}
.slide-content{ float:right; width:55%; padding:55px 40px; text-align:left;}
.slide-content h3{ font-size:48px; margin-bottom:15px; font-family: 'Lufga SemiBold';font-style: normal;font-weight: normal; margin-bottom: 1rem;}
.slide-content.testimonial-text{ font-size:25px;    font-family: 'Lufga Regular';font-style: normal;font-weight: normal;}
/* .comfort-section h2{font-family: 'Lufga Regular';font-style: normal;font-weight: normal; font-size:56px;}*/
 .slide-content.testimonial-text p{ margin-top:30px;}
 
 .slider1-wrapper, .slider2-wrapper {
  overflow: hidden;
  position: relative;
  max-width: 1280px;
  margin: auto;
}

.slider1, .slider2 {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide, .testimonial-card {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 1rem;
}

.dots1, .dots2 {
  text-align: center;
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}





















.testimonial-card {
  flex: 0 0 100%;
  box-sizing: border-box;  
  margin:0px;
  position: relative;
 

}

.testimonial-cardinner{ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);  min-height: 300px;padding: 30px 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;}


/*.quote-icon {
  background: black;
  color: white;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 1;
}*/
.quote-icon {
	background: black;
	color: white;
	font-size: 40px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 60px;
	text-align: center;
	position: absolute;
	top: -10px;
	left: 35px;
	z-index: 1;
}



.slider2-wrapper {
	padding-top: 100px;
}

.stars {
	text-align: left;
	font-size: 33px;
	margin-bottom: 10px;
	color:#ff6b6b;
}


@media (max-width: 767px) {.typequilty {transform: translateY(0px);}.mattress-container{padding: 15px !important;} .fabric{padding: 15px !important;}.features-section{padding: 15px !important;} .nura-banner{padding: 15px !important;} .container{ padding:20px 0px!important;}

.power-card.power-card-large {padding:36px 20px 20px !important;}  .power-visual-element {width: 100% !important;height: auto !important; background-color: rgba(255, 255, 255, 0);}
.power-visual-small img {border-radius: 30px;	width: 100%;}
.power-visual-small {background-color: rgba(255, 255, 255, 0);	width: 100%;max-width: 100%;height: auto;margin: 0 auto;}
.Delivered_bg{ border:none !important;}

.slide-content h3{ font-size:32px;  font-family: 'Lufga SemiBold';font-style: normal;font-weight: normal; margin-bottom: 1rem;}

.footermenu li {
	display: inline;
	padding: 0px 20px !important;
}

}