@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Make all sections full screen */
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.2;
}

h3 {
    font-size: clamp(24px, 2.6vw, 3.8rem);
    line-height: 1.3;
    max-width: 1440px;
}

h4 {
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.35;
}

h5 {
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.4;
}

h6 {
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.4;
}

p {
    /* font-size: clamp(15px, 1.1vw, 25px);
    line-height: 2;
    font-weight: bold; */
    font-size: 2.2rem;
    max-width: 1440px;
}

p {
    font-size: clamp(1.1rem, 1.2vw + 0.8rem, 2.2rem);
    max-width: 1440px;
    /* line-height: 1.8; */
    font-weight: bold;
}

/* =======================
   MOBILE (default)
   ALL paragraphs = 16px
======================= */
@media (max-width: 600px) {
    p {
        font-size: 1rem;
        /* 16px */
        line-height: 1.7;
    }
}

/* =======================
   TABLET
======================= */
@media (min-width: 768px) {

    .green-section2-text-container p,
    .thiry-group {
        font-size: 1.4rem;
    }

    .thirty-four-group {
        font-size: 1.6rem;
    }

    .sixty-group {
        font-size: 2.8rem;
    }

    .fifty-group {
        font-size: 2.4rem;
        text-align: center;
    }
}

/* =======================
   DESKTOP (DESIGN SIZE)
======================= */
@media (min-width: 1440px) {

    .green-section2-text-container p {
        font-size: 1.8rem;
    }

    .sixty-group {
        font-size: 3.6rem;
    }

    .thiry-group {
        font-size: 1.8rem;
    }

    .thirty-four-group {
        font-size: 2.1rem;
    }

    .fifty-group {
        font-size: 3.1rem;
        text-align: center;
    }
}


html,
body {
    font-family: 'Poppins';
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

h3 {
    text-align: center;
    color: #ffffff;
    padding-top: 20px;
}

/* Container to allow scroll */
body {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* Each section full screen */
section,
.landing-section {
    height: 100vh;
    min-height: 100svh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

section::-webkit-scrollbar {
    display: none;
}

.landing-section {
    background: #f5f5f5;
}

.pink-section {
    /* background: #FC87E0; */
    background-color: #FFDB11;
}

.purple-section {
    background: #3914B9;
}

.white-section {
    background: #ffffff;
}

.green-section {
    background-image: url("./assest/green-bg1.jpg");
    /* replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.green-section4,
.green-section5 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #30BF6A;

}
.green-section4{
    height: 35%;
}

.green-section5 {
    height: 20%;
}

.sec20-text-container p,
.sec21-text-container p {
    color: white;
    text-align: center;

}

.sec21-text-container a {
    text-decoration: none;
    color: white;
}

.smile-image-conatiner {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.smile-image-conatiner-sec4{
    margin-bottom: 0px !important;
}

.green-section-withhead,
.green-section2 {
    background-image: url("./assest/green-bg-2.jpg");
    /* replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.purple-section-with-bg {
    background-image: url("./assest/blue-bg-1.jpg");
    /* replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.pink-section2 {
    background-color:#FFDB11;
    height: 65%;
}

.purple-section3 {
    background-image: url("./assest/blue-bg-3.jpg");
    /* replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.blue-section3 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("./assest/blue-bg-last-section.jpg");
    /* replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 50%;
}

section:not(.section-no1):not(.exclude2):not(.plane-image-section) > div:not(.purple-section-container) {
    text-align: center;
    height: 100%;
}


section.section-no1>div {
    height: 100%;
}



.pink-section,
.green-section,
.green-section-withhead {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pink-section-conatiner p {
    font-weight: bold;
    text-align: center;
}

.smile-image-conatiner img {
    width: 20%;
    margin: 0 auto;
}

/* purple-section */
.purple-section-conatiner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.purple-section-conatiner,
.car-image-container {
    width: 50%;
}

.car-image-container img {
    width: 500px;
}

.purple-section,
.green-section-withhead {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.purple-section{
padding: 40px 20px;
}

.purple-section h3 {
    text-align: left;
    padding-top: 20px;

}

.purple-section-container,
.green-section-withhead-conatiner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1440px;
}
.purple-section-container2{
    justify-content: start;
}
.purple-section-container{
    align-items: start;
}
.purple-text-container {
    width: 50%;
    text-align: left;
}
.purple-conatiner-para{
    width: 40%;
}
.blue-conatiner-para{
    padding-top: 45px !important;
}

.car-image-container {
    width: 50%;
}

.car-image-container img {
    width: 100%;
    height: auto;
}
.car-imagecont1 img{
    width: 90%;
}

@media(max-width:600px) {
    .purple-section-container {
        display: block;
    }

    .car-image-container img {
        width: 100%;
    }
}

/* section 5 */

.green-section-withhead {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

/* Heading always at top */
.green-section-withhead h3 {
    margin-bottom: 20px;
    text-align: center;
}

/* Content below heading */
.green-section-withhead-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* BIG image */
.smile-image-container img {
    width: 100%;
    max-width: 65%;
    height: auto;
}
.four-people-image-container img {
    max-width: 100%;
    height: auto;
}
.four-people-image-container {
    display: inline-flex;   
    align-items: center;
    justify-content: center;
}
.text-blue-conatiner{
    max-width: 1270px;
    background-color: #3914B9;
    
}
.text-blue-conatiner p{
    padding: 20px;
}

.green-section-conatiner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.green-section-conatiner{
    gap: 0px !important;
}

.smile-image-conatiner img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

.text-container {
    /* max-width: 700px; */
    text-align: center;
}

@media (max-width: 768px) {
    .green-section-withhead-container {
        flex: unset;
    }
}

/* sect -7 */

.green-section2 {
    /* padding: 80px 0 120px; */
    position: relative;
    background-color: #38b76b;
    /* overflow: hidden; */
}

/* Container flex layout */
.green-section2-container {
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 60px;
    /* align-items: stretch; */

}

.green-section2-text-container {
    width: 40%;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-top: 8%;
    padding-left: 30px;
}

/* Paragraph styling */
.green-section2-text-container p {
    font-weight: bold;
    text-align: left;
    margin-bottom: 35px;
}

/* Flower image at bottom-right of text */
.flower-image {
    width: 150px;
    height: 200px;
    margin-top: auto;
    align-self: flex-end;
}

/* Image column */
.green-section2-image-container {
    /* width: 50%; */
    display: flex;
    justify-content: center;
    /* align-items: flex-end; */
}
.handwash-conatiner{
    width: none;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    max-width: 1650px;
}

.handwash-text-conatiner{
   padding-left: 10%;
   width: 55%;
}

/* Main image styling */
.green-section2-image-container img {
    /* width: 100%; */
}

/* Mobile responsive */
@media (max-width: 600px) {
    .green-section2-container {
        flex-direction: column;
        gap: 30px;
        height: auto;
    }

    .green-section2-text-container p {
        padding: 10px;
    }

    .green-section2-text-container,
    .green-section2-image-container {
        width: 100%;
    }

    .flower-image {
        align-self: flex-end;
        margin-top: 10px;
        margin-bottom: 0;
        height: 50px;
        width: 50px;
    }

    .green-section2-image-container img {
        width: 100%;
        margin-bottom: 0;
    }

    /* .green-section2 {
        padding-bottom: 20px;
    } */

    .green-section2-image-container img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        width: 100%;
        height: auto;
        /* margin-bottom: -30px; */
    }
}

/* sec-9 */

.blue-section2 {
    background-color: #3914B9;
    height: 70%;
}

.blue-section2-conatiner {
    max-width: 1440px;
    margin: auto;
    text-align: center;
}

/* Circle card container */
.circle-card-conatiner {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

/* Individual circle */
.circle {
    width: 15%;
    height: 15%;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Image inside circle */
.circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text container */
.blue-text-conatiner {
    max-width: 800px;
    margin: auto;
}

.blue2-text-conatiner p {
    color: white !important;
}

.blue-section2 {
    background-color: #3914B9;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .circle {
        width: 100px;
        height: 100px;
    }
}

/* sec-13 */

.brand-logo-conatiner {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.brand-logo {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-logo img {
    width: 100%;
    object-fit: cover;
}

.white-section {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    height: 70%;
}

.white-section-conatiner {
    max-width: 1440px;
    text-align: center;
}

.purple2-text-conatiner {
    color: black;
}

/* sec health */

.pink-section2 {
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pink-section2-container {
    max-width: 1440px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

.image-container,
.text-container2 {
    width: 40%;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.pink-section2-image {
    width: 30%;
}

.text-container2 p {
    text-align: left;
}

.text-container2 {
    width: 50%;
    position: relative;
    /* min-height: 200px; */
    display: flex;
    align-items: center;
}

/* ADD THIS new rule for the light image */
.corner-light {
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 50px;
    height: auto;
}

@media (max-width: 768px) {
    .pink-section2-container {
        flex-direction: column;
        text-align: center;
        margin: none;
    }

    .image-container,
    .text-container2 {
        width: 100%;
    }

    .image-container,
    .text-container2 {
        width: 100%;
    }

    .corner-light {
        width: 30px;
        bottom: 0;
    }
}

/* 3 side */

.purple-section3 {
    position: relative;
    /* min-height: 420px; */
    min-height: auto;
    /* overflow: hidden; */
}

/* Main container */
.purple-section3-conatiner {
    max-width: 1440px;
    margin: auto;
    height: 100%;
    position: relative;
}

/* ===== LEFT TEXT BLOCK ===== */
.purple-section3 .sect1:first-child {
    max-width: 350px;
    color: #fff;
    position: relative;
    top: 40%;
    left: 5%;
    transform: translateY(-50%);
}

.purple-section3 .sect1:first-child img {
    /* width: 100%; */
    max-width: 275px;
    margin-bottom: 18px;
}

.purple-section3 .sect1:first-child p {
    line-height: 1.6;
    text-align: left;
}

/* ===== WOMAN IMAGE (BOTTOM, FLOATING) ===== */
.purple-section3 .sect1:nth-child(2) {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 40%;
}

.purple-section3 .sect1:nth-child(2) img {
    width: 100%;
    display: block;
}

/* ===== TOP RIGHT LOGO ===== */
.purple-section3 .sect1:last-child {
    position: absolute;
    top: 10%;
    right: 10%;
    z-index: 2;
}

.purple-section3 .sect1:last-child img {
    width: 200px;
    border-radius: 6px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .purple-section3 {
        padding: 40px 20px;
        min-height: auto;
        text-align: center;
    }

    .purple-section3 .sect1:first-child {
        position: static;
        transform: none;
        margin-bottom: 10px;
    }

    .purple-section3 .sect1:nth-child(2) {
        position: static;
        transform: none;
        margin: 20px auto 0;
        width: 100%;
    }

    .purple-section3 .sect1:last-child {
        position: static;
        margin-top: 20px;
    }
}

/* plane */

.plane-image-section {
    position: relative;
    background-image: url('./assest/womens-image.jpg');
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    overflow: hidden;
}
.plane-image-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* adjust opacity */
    z-index: 1;
}

/* Adds a dark fade on the left to make white text pop */
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 60%); */
    z-index: 1;
}

.content-container {
    position: relative;
    z-index: 2;
    padding-left: 10%;
    max-width: 800px;
    /* top: 20%; */
}

.impact-text {
    color: #ffffff;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.5px;
    text-align: left;
    padding-top: 20%;
}

.highlight {
    display: inline-block;
}


/* Animation base class */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Activated state */
.animate-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.pink-section {
    height: 30%;

}

.green-section {
    height: 70%;
}

@media(max-width:768px) {

    .pink-section-conatiner,
    .text-container,
    .green-section2-text-container,
    .blue2-text-conatiner,
    .text-container2 p,
    .sec20-text-container {
        margin: 0px 15px;
    }

    .purple-text-container {
        width: 100%;
        padding: 10px 0;
    }

    .car-image-container {
        width: 100%;
    }

    .white-section-conatiner {
        width: 100%;
    }

    .brand-logo-conatiner {
        flex-wrap: wrap;
    }

    .brand-logo img {
        width: 100px;
    }

    /* 600 */
    .purple-section3 .sect1:nth-child(2) img {
        width: 300px;
    }

    .sect1 {
        padding: 0 15px;
    }

    .logo img {
        width: 100px;
    }
}

/* Video behaves like background */
.deo-conatiner video {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.logo img {
    max-width: 290px;
}

.logo {
    position: absolute;
    left: 1%;
    top: 5%;
    z-index: 3;
}
@media (min-width: 900px) and (max-width: 1100px) {
    .logo img {
        width: 180px; /* Adjust width as needed */
        height: auto; /* Maintain aspect ratio */
    }
}

/*  */

/* ===============================
   LANDING SECTION (NO SCROLL)
================================ */
.landing-section {
    position: relative;
    width: 100%;
    height: 100svh;      /* mobile-safe viewport */
    overflow: hidden;   /* no scroll */
}

/* ===============================
   VIDEO CONTAINER
================================ */
.deo-conatiner {
    position: absolute;
    inset: 0;
}

/* ===============================
   COMMON VIDEO STYLE
================================ */
.deo-conatiner video {
    width: 100%;
    height: 100%;
}

/* ===============================
   MOBILE (default)
   Show full video, no crop
================================ */
.video-mobile {
    display: block;
    object-fit: cover;   /* full video visible */
    background: black;     /* fills empty space */
}

.video-desktop {
    display: none;
}

/* ===============================
   TABLET + DESKTOP
   Hero style
================================ */
@media (min-width: 768px) {
    .video-desktop {
        display: block;
        object-fit: cover;     /* fills screen */
        object-position: center;
    }

    .video-mobile {
        display: none;
    }
}
video {
    max-width: 100%;
    height: auto;
    display: block;
}
/*  */

@media (max-width: 768px) {
    .logo {
        top: 16px;
        left: 16px;
    }

    .logo img {
        width: 110px;
    }
}

@media (max-width: 600px) {
    .green-section2-container {
        flex-direction: column;
        gap: 30px;
        height: auto;
    }

    .green-section2-text-container,
    .green-section2-image-container {
        width: 100%;
    }

    .flower-image {
        align-self: flex-end;
        margin-top: 10px;
        margin-bottom: 0;
        height: 50px;
        width: 50px;
    }

    .green-section2-image-container img {
        width: 100%;
        margin-bottom: 0;
    }

    .four-people-image {
        max-width: 100% !important;
    }

    .plane-image-section {
        background-image: url('./assest/womens-image-mobile.jpg');
    }

    section.plane-image-section>div {
        height: 100%;
    }
    .green-section2-text-container{
        padding-left: 0px;
    }
    /* .blue-section3{
        height: 30%;
    } */
    .purple-section3 .sect1:nth-child(1){
        width: 100% !important;
    }
}

@media(max-width:450px) {
    .pink-section2 {
        height: auto;
        /* height: 70%; */
    }

    .green-section4 {
        height: 30%;
    }

    .green-section5 {
        height: 30%;
    }
    .green-section2-container{
        display: block;
    }
    .cup-image {
        padding: 0px;
    }
}

@media(max-width:375px) {
    .pink-section-last {
        height: 50%;
    }

    /* .pink-section2 {
        height: 100%;
    } */
    .circle {
        width: 80px;
        height: 80px;
    }
    .green-section,.blue-section2 {
        height: 70%;
    }
    section:not(.section-no1):not(.exclude2)>div {
        height: 100%;
    }
}


/* Slider wrapper */
.pink-section2 {
    position: relative;
    overflow: hidden;
}
.cup-image{
   max-width: 120px;
   padding-top: 20px;
}

/* Slides */
.pink-section2-container {
    display: none;
    width: 100%;
}

.pink-section2-container.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Buttons */
/* Dots container */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

/* Dot style */
.slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s;
}

/* Active dot */
.slider-dots .dot.active {
    background: #fff;
}


/* Mobile adjustment */
@media (max-width: 768px) {
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
}

/* Initial state: image hidden */
.pink-section2-container .image-container img {
    opacity: 0;
    transform: scale(1.1); /* Slight zoom effect */
    transition: opacity 1s ease, transform 1s ease;
}

/* Show image when active */
.pink-section2-container.active .image-container img {
    opacity: 1;
    transform: scale(1);
}

/* Text animation */
.pink-section2-container .text-container2 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.pink-section2-container.active .text-container2 {
    opacity: 1;
    transform: translateY(0);
}
.last-section-text{
font-size: 30px;
}
@media (min-width: 900px) and (max-width: 1100px) {
    .last-section-text {
        font-size: 26px;
    }
}
@media (min-width: 600px) and (max-width: 899px) {
    .last-section-text {
        font-size: 22px;
    }
}

@media (max-width: 599px) {
    .last-section-text {
        font-size: 18px;
    }
}
/* .blue-conatineeer{
   display: flex;
   justify-content: center;
   align-items: center;
} */


/* SECTION */
.purple-section3 {
    position: relative;
    padding: 80px 0 0;
}

/* FLEX CONTAINER (ONLY LEFT + RIGHT) */
.purple-section3-conatiner {
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 5%;
    position: relative;
}

/* LEFT + RIGHT */
.purple-section3 .sect1 {
    display: flex;
    flex-direction: column;
}
.purple-section3 .sect1:nth-child(1) {
    width: 50%;
}

/* CENTER BOTTOM IMAGE */
.purple-section3 .sect1:nth-child(2) {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
}

/* IMAGE FIX */
.purple-section3 img {
    display: block;
}

/* MOBILE */
@media (max-width: 768px) {
    .purple-section3-conatiner {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .purple-section3 .sect1:nth-child(2) {
        position: static;
        transform: none;
        width: 100%;
    }
}