:root {
    --oke-highlightColor: #CFCCFF;
    --oke-border-color: #CFCCFF;
    --oke-text-primaryColor: #4A26F5;
    --oke-text-secondaryColor: #676986;
    --oke-highlightColor: #CFCCFF;
    --oke-highlightColor: #CFCCFF;
    --oke-avatar-placeholderTextColor: #2C3E50;
    --oke-announcement-background: #f8ebfd;
    --oke-avatar-backgroundColor: #E5E5EB;
    --color-backcolor: #f5f5f5;
}

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

body {
    background-color: var(--color-backcolor);
}

main {
    display: flex;
    flex-direction: column;
}

.announcement__text {
    background-color: var(--oke-announcement-background);
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oke-text-primaryColor);
    font-family: "assistant", sans-serif;
    font-size: x-small;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.hero-section {

    background-image: url('https://icalm.com/cdn/shop/files/icalm-hero-desktop_1.jpg?v=1720793300&width=5760');
    height: 100vh;
    background-size: cover;
    width: 100%;
    box-shadow: inset 0 8px 188px rgba(0, 0, 0, 0.5);
    position: relative;
}

.nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;
    position: absolute;
    top: 5rem;
    justify-self: center;
    color: #f5fcff;
    text-decoration: none;
}

.nav-lft {
    display: flex;
    align-items: center;
    justify-content: center;

}

.nav-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-size: 1.4rem;
    font-family: "assistant", sans-serif;
}

.nav-main a {
    color: #f5fcff;
    text-decoration: none;
}

.underline-slide {
    position: relative;
    text-decoration: none;
    color: #222;
    font-size: 1.5rem;
}

.underline-slide::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--oke-announcement-background);
    transition: width 0.3s ease;
}

.underline-slide:hover::after {
    width: 100%;
}


.nav-rgt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 5rem;
    transform: translateY(-50%);
    color: #f5fcff;


}

.hero-text p {
    font-size: 4rem;
    margin-bottom: 1.3rem;

}

.hero-text-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-family: "assistant", sans-serif;
}

.hero-text-footer button {
    height: 3rem;
    width: 9vw;
    border-radius: 2rem;
    border: none;
}

.product-split {
    display: flex;
}

.product-split-image {
    width: 50%;
    height: 79vh;
}

.product-split-image {
    background-image: url('https://icalm.com/cdn/shop/files/icalm-homepage-calm-natuarally.jpg?v=1725914275&width=2000');
    background-size: cover;
}

.product-split-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--oke-text-primaryColor);
    background-color: #cfcdff;
    gap: 1rem;
}

.inner-text {

    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-split-text p {
    font-size: xx-large;
    font-weight: bold;
}

.product-split-text span {
    font-size: x-large;
}

.product-split-text button {
    height: 3rem;
    width: 9vw;
    border-radius: 2rem;
    border: none;
    background-color: var(--oke-text-primaryColor);
    color: var(--oke-border-color);
    font-size: large;

}

.product-detail-header {
    text-align: center;
    color: var(--oke-text-primaryColor);
    font-size: 2.5rem;
    font-family: 'Montserrat', sans-serif;
    margin-top: 7rem;
    margin-bottom: 4rem;
}

.product-detail-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    max-width: 75rem;
    justify-content: center;
    margin: 0 auto;
    gap: 1.5rem;
    margin-bottom: 8rem;
}

.product-details {
    display: flex;
    flex-direction: column;
    object-fit: cover;
    align-items: center;
    text-align: center;
    min-width: 0;
    flex: 1;
}

.product-detail-image {
    object-fit: cover;
    width: 100%;
    display: block;
}

.product-detail-image img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.products-emotion-text {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    gap: 0.8rem;
}

.products-emotion-text h3 {
    color: var(--oke-text-primaryColor);
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 1.25rem;
}

.products-emotion-text span {
    color: var(--oke-text-primaryColor);
    font-size: large;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    letter-spacing: 0.01rem;
}

.products-emotion-text button {
    color: var(--oke-text-primaryColor);
    border-color: var(--oke-text-primaryColor);
    width: 7rem;
    height: 3rem;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}



.product-scince-split {
    display: flex;
    background-color: #cfcdff;

}

.product-scince-split-image {
    width: 50%;
    height: 79vh;
    background-image: url('https://icalm.com/cdn/shop/files/Icalm-home-science-backed-ingredients.jpg?v=1725895305&width=2000');
    background-size: cover;
    background-position: center;
}



.product-scince-split-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--oke-text-primaryColor);
    background-color: #cfcdff;
    gap: 1rem;
}

.inner-text {

    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-scince-split-text p {
    font-size: xx-large;
    font-weight: bold;
}

.product-scince-split-text span {
    font-size: x-large;
}

.product-scince-split-text button {
    height: 3rem;
    width: 9vw;
    border-radius: 2rem;
    border: none;
    background-color: var(--oke-text-primaryColor);
    color: var(--oke-border-color);
    font-size: large;

}

.transition-image,
.scince-behind-product {
    width: 100%;
    display: block;

}

.scince-behind-product {
    margin-top: -0.2rem;
    margin-bottom: 8rem;
}



.review {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 2rem;
    margin-bottom: 4rem;
}

.review-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--oke-text-primaryColor);
    gap: 0.5rem;
}

.review-header span {
    display: flex;
    gap: 0.25rem;
}

.review-header img {
    width: 1.5rem;
    height: 1.5rem;
}

.review-header p {
    color: var(--oke-text-primaryColor);
    font-size: 1.5rem;
    font-weight: lighter;
}



.r-tittle p {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    color: var(--oke-text-primaryColor);
    font-size: 3rem;
}


.review-section {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 0;
    margin-bottom: 10rem;
}


.r-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--oke-border-color);
    padding: 1.5rem;
    flex: 1;
    background-color: #fff;
    border-radius: 8px;

    min-width: 300px;
    max-width: 360px;
}


.r-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.star {
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
}

.star img {
    width: 1.25rem;
    height: 1.25rem;
}

.durtion {
    color: var(--oke-text-secondaryColor);
}

.review-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
    margin-bottom: 6rem;
}

.review-text p {
    font-family: 'Montserrat', sans-serif;
    color: var(--oke-text-primaryColor);
    font-weight: lighter;
    font-size: 1rem;
}


.review-text span {
    color: var(--oke-text-primaryColor);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: normal;
    font-family: 'Assistant', sans-serif;
}

.review-text .read-more {
    color: var(--oke-text-primaryColor);
    text-decoration: underline;
    font-weight: lighter;
    cursor: pointer;
}

.r-section hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--oke-border-color);
}


.account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.account p {
    background-color: var(--oke-avatar-backgroundColor);
    color: var(--oke-avatar-placeholderTextColor);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: lighter;
    font-size: 1rem;
    flex-shrink: 0;
}

.account-name {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.1rem;
}

.account-name p {
    background-color: transparent;
    color: var(--oke-text-primaryColor);
    width: auto;
    height: auto;
    font-size: 1rem;
    font-weight: lighter;
    justify-content: flex-start;

    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.account-name span {
    color: var(--oke-text-primaryColor);
    font-size: 0.9rem;
    opacity: 40%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


.account img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid var(--oke-border-color);
}


.account-name p img {
    width: 16px;
    height: 12px;
}


.account-name span img {
    width: 12px;
    height: 12px;
}

.likes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.likes p {
    color: var(--oke-text-secondaryColor);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.likes span {
    color: var(--oke-text-secondaryColor);
    font-size: 0.9rem;
}

.likes img {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.model-split {
    display: flex;
    margin-bottom: 8rem;
}

.model-split-image {
    width: 50%;
    height: 79vh;
}

.model-split-image {
    background-image: url('//icalm.com/cdn/shop/files/icalm-meet-founder_3aa7f78a-4c2d-4bf1-85fe-9f774b5349c6.jpg?v=1725903585&width=2000');
    background-size: cover;
}

.model-split-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--oke-text-primaryColor);
    background-color: #cfcdff;
    gap: 1rem;
}

.model-text {

    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.model-split-text p {
    font-size: xx-large;
    font-weight: bold;
}

.model-split-text span {
    font-size: x-large;
}

.model-split-text button {
    height: 3rem;
    width: 9vw;
    border-radius: 2rem;
    border: none;
    background-color: var(--oke-text-primaryColor);
    color: var(--oke-border-color);
    font-size: large;

}

.socialmedia-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.socialmedia-handle {
    display: flex;
    font-size: 3.5rem;
    color: var(--oke-text-primaryColor);
    text-transform: uppercase;
}

.socialmedia-post {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    align-items: center;
    justify-content: center;
    height: 35vh;
    gap: 0.5rem;
    overflow: hidden;
    margin-bottom: 10rem;
}

.meadia-post {
    width: 16%;
}

.meadia-post img {
    overflow: hidden;
    object-fit: cover;
    width: 100%;
    height: 30vh;
    display: block;
    border-radius: 1rem;
}

.footer-section-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40vh;
    background-color: var(--oke-text-primaryColor);
    gap: 1.5rem;
    margin-bottom: 6rem;
}

.footer-section-1 p {
    text-align: center;
    width: 70%;
    color: #fff;
    font-size: 3rem;

}

.footer-section-1 input {
    width: 90%;
    height: 2.5rem;
    background: none;
    border: none;
    color: #E5E5EB;
    outline: none;
}

.input-section {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    justify-content: center;
    width: 30%;
    justify-content: space-between;
}

input::placeholder {
    color: #E5E5EB;
    opacity: 1;
    font-size: large;
}

.main-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.social-handles {
    display: flex;
    gap: 1.5rem;
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4A26F5;
    width: 3.5vw;
    height: 6.5vh;
    border-radius: 50%;
}

.follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid;
    width: 12vw;
    height: 5vh;
    background-color: #4A26F5;
    color: #fff;
    border-radius: 1.3rem;
    font-size: large;
    margin-bottom: 1rem;
}

.footer-bar {
    display: flex;
    gap: 1.2rem;
    color: var(--oke-text-primaryColor);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
}

.powered-by-section {
    color: var(--oke-text-primaryColor);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: small;
    margin-bottom: 1rem;

}

.notice {
    border: 0.5px solid var(--oke-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80%;
    height: 14vh;
    color: var(--oke-text-primaryColor);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: large;
    margin-bottom: 8rem;
}

@media (max-width: 768px) {


    .hero-section {

        background-image: url('https://icalm.com/cdn/shop/files/icalm-hero-mobile_1.jpg?v=1720793315&width=2880');

        /* Give the vertical image room */
        height: 90vh;
        background-position: center;
    }

    .nav {
        /* Stack all nav items vertically */
        flex-direction: column;
        top: 1.5rem;
        /* Bring it closer to the top */
        gap: 1rem;
    }

    .nav-main {
        /* Make nav links smaller and stack them */
        flex-direction: column;
        gap: 0.5rem;
        font-size: 1.1rem;

        /* Put the logo on top */
        order: -1;
    }

    .nav-lft,
    .nav-rgt {
        /* We'll hide the search/profile icons for this simple fix.
            A real mobile nav would use a hamburger menu. */
        display: none;
    }

    .hero-text {
        /* Move text to be more centered and smaller */
        left: 0;
        right: 0;
        top: 55%;
        /* Adjust as needed */
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .hero-text p {
        /* Drastically reduce font size */
        font-size: 2.5rem;
    }

    .hero-text-footer {
        /* Stack the text and button */
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .hero-text-footer button {
        /* Stop using 'vw'. Use a responsive width. */
        width: 60%;
        min-width: 200px;
    }


    /* --- 2. SPLIT SECTION FIX --- */

    .product-split,
    .product-scince-split,
    .model-split {
        /* Change from a row to a column */
        flex-direction: column;
    }

    .product-split-text,
    .product-scince-split-text,
    .model-split-text {
        /* Make text section full width */
        width: 100%;
        min-height: 50vh;
        /* Give it some height */
        padding: 2rem 0;
        /* Add padding */
    }

    .product-split-image,
    .product-scince-split-image,
    .model-split-image {
        /* Make image section full width */
        width: 100%;
        /* Control height better on mobile */
        height: 60vh;
        background-position: center;
    }

    /* Fix the text inside the split sections */
    .inner-text,
    .model-text {
        width: 90%;
        /* Use more of the screen */
        text-align: center;
        align-items: center;
    }

    .product-split-text p,
    .product-scince-split-text p,
    .model-split-text p {
        font-size: 1.8rem;
        /* Make text smaller */
    }

    .product-split-text span,
    .product-scince-split-text span,
    .model-split-text span {
        font-size: 1rem;
        /* Make text smaller */
    }

    .product-split-text button,
    .product-scince-split-text button,
    .model-split-text button {
        /* Fix the tiny 'vw' button */
        width: 50%;
        min-width: 180px;
    }


    /* --- 3. OTHER LAYOUT FIXES --- */

    .product-detail-header p {
        font-size: 1.5rem;
        /* Smaller header */
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    .review-section {
        /* The flex-wrap you used here is good! 
           We just need to center it. */
        justify-content: center;
    }

    .socialmedia-handle p {
        font-size: 1.5rem;
        /* Smaller text */
        text-align: center;
    }

    .socialmedia-post {
        /* Make this a 2x2 grid instead of 6-in-a-row */
        flex-wrap: wrap;
        width: 95%;
        height: auto;
        /* Let it grow */
    }

    .meadia-post {
        width: 48%;
        /* 2 columns with a small gap */
    }

    .meadia-post img {
        height: 25vh;
        /* Adjust height */
    }


    /* --- 4. FOOTER FIX --- */

    .footer-section-1 {
        height: auto;
        /* Let height be flexible */
        padding: 3rem 0;
    }

    .footer-section-1 p {
        font-size: 1.8rem;
        /* Smaller font */
        width: 90%;
    }

    .input-section {
        width: 80%;
        /* Was way too small at 30% */
    }

    .circle {
        /* 'vw' for icons is bad. Use fixed 'px' */
        width: 45px;
        height: 45px;
    }

    .follow-btn {
        /* 'vw' for buttons is bad. */
        width: 180px;
        height: 45px;
        font-size: 1rem;
    }

    .footer-bar {
        /* Stack the footer links */
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .notice {
        width: 90%;
        height: auto;
        padding: 1rem;
        font-size: 0.9rem;
        margin-bottom: 3rem;
    }
}