: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);
    /* Improves text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Global responsive image rule */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.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;
}

.nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;
    height: 18vh;
    justify-self: center;
    background-color: white;
    text-decoration: none;
}

.nav-lft {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: lighter;
}

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

.nav-main a {
    color: var(--oke-text-primaryColor);
    text-decoration: none;
    font-weight: lighter;
    font-size: 1.2rem;
    font-weight: lighter;
    font-family: "assistant", sans-serif;
}

.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;
    font-weight: lighter;
}

.letter-to-world {
    background-image: url('https://icalm.com/cdn/shop/files/icalm-about-banner.jpg?v=1731442772&width=5760');
    width: 100%;
    height: 35vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    font-family: "assistant", sans-serif;
    color: var(--oke-text-primaryColor);
}

.meet-founder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 118vh;
    background-color: #cfcdff;
}

.founder-intro {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: lighter;
    color: #4A26F5;
}

.founder-message {
    display: flex;
    align-self: center;
    justify-content: center;
    width: 90%;
    height: auto;
    gap: 3rem;
    /* align-items: flex-start; */
    /* Good for desktop */
}

.founder-image {
    height: 61vh;
    width: 50%;
}

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

.founder-vision {
    display: flex;
    flex-direction: column;
    width: 95%;
    /* Changed from 95% to be a true 50/50 split */
    height: auto;
    gap: 2rem;
}

.founder-vision p {
    color: #4A26F5;
    font-size: 1.3rem;
    font-weight: lighter;
}

.sign {
    width: 8.14vw;
    height: 5.21vh;
}

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

.product-split {
    display: flex;
}

/* Consolidating all image split classes */
.product-split-image,
.product-split-image-1,
.product-split-image-2 {
    width: 50%;
    height: 99vh;
    background-size: cover;
    background-position: center;
}

.product-split-image {
    background-image: url('//icalm.com/cdn/shop/files/icalm-our-story-community.jpg?v=1732726835&width=2000');
}

.product-split-image-1 {
    background-image: url('https://icalm.com/cdn/shop/files/icalm-reliable-relief_b6830fe0-3702-4ead-b6cb-ce57a3e7c0ad.jpg?v=1731442346&width=2000');
}

.product-split-image-2 {
    background-image: url('https://icalm.com/cdn/shop/files/icalm-reliable-relief_781544f3-3aa9-4699-8572-8cbb2e02beba.jpg?v=1731443488&width=750');
}

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

.inner-text {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.inner-text p {
    font-size: 2rem;
    font-weight: bold;
    font-weight: 200;
}

.inner-text span {
    font-size: x-large;
    font-weight: 0;
}

.product-split-text button {
    height: 3rem;
    width: 9vw;
    /* Still problematic, but we'll fix in media query */
    border-radius: 2rem;
    border: none;
    background-color: var(--oke-text-primaryColor);
    color: var(--oke-border-color);
    font-size: large;
}

.brand-promotion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.promotion-image {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}

.promotion-image img {
    object-fit: cover;
    width: 100%;
    height: 73vh;
}

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

.promotion-text p {
    font-size: 2.5rem;
    color: var(--oke-text-primaryColor);
}

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

.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;
    font-size: 1rem;
    /* Added for clarity */
    
}

.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;
    /* Problematic vw/vh sizing */
    width: 3.5vw;
    height: 6.5vh;
    border-radius: 50%;
}

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

.footer-bar {
    display: flex;
    gap: 1.2rem;
    color: var(--oke-text-primaryColor);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    /* Added for flexibility */
    justify-content: center;
}

.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) {

    /* --- 1. HEADER & NAV --- */

    .announcement__text {
        height: auto;
        /* Remove vh */
        padding: 0.5rem;
        font-size: 0.7rem;
        /* Smaller text */
        text-align: center;
    }

    .nav {
        flex-direction: column;
        height: auto;
        /* Remove vh */
        padding: 1rem 0;
        gap: 1.5rem;
    }

    /* Hide search and profile icons on mobile for simplicity */
    .nav-lft,
    .nav-rgt {
        display: none;
    }

    .nav-main {
        flex-direction: column;
        /* Stack links */
        gap: 1rem;
        align-items: center;
        width: 100%;
    }

    /* Use attribute selector to target logo and move it to top */
    .nav-main a[href*="icalm-main-logo"] {
        order: -1;
        /* Logo on top */
        padding-bottom: 0.5rem;
        /* Add some space */
    }

    .nav-main a.underline-slide {
        font-size: 1.1rem;
        /* Smaller links */
    }

    .letter-to-world {
        height: 25vh;
        /* Shorter banner */
        font-size: 1.8rem;
        /* Drastically smaller text */
        text-align: center;
        padding: 0 1rem;
        /* Add padding for small screens */
    }

    /* --- 2. FOUNDER SECTION --- */

    .meet-founder {
        height: auto;
        /* Remove vh */
        padding: 3rem 0;
    }

    .founder-intro {
        gap: 2rem;
        width: 95%;
    }

    .header h1 {
        font-size: 1.8rem;
        /* Use h1, not .header */
    }

    .founder-message {
        flex-direction: column;
        width: 100%;
        gap: 2rem;
        align-items: center;
    }

    .founder-image,
    .founder-vision {
        width: 90%;
        /* Make both full width (with padding) */
    }

    .founder-vision {
        gap: 1.5rem;
    }

    .founder-vision p {
        font-size: 1rem;
        text-align: left;
        /* Keep text aligned left */
    }

    .sign {
        width: 120px;
        /* Use fixed width */
        height: auto;
    }

    .founder-image {
        height: auto;
        /* Ensures the vh height is removed on mobile */
    }


    /* --- 3. PRODUCT SPLIT SECTIONS --- */

    .product-split {
        flex-direction: column;
    }

    /* This targets the 2nd .product-split in <main> */
    main>.product-split:nth-of-type(2) {
        /* This one has text on left, so we reverse it */
        flex-direction: column-reverse;
    }

    .product-split-image,
    .product-split-image-1,
    .product-split-image-2 {
        width: 100%;
        height: 60vh;
        /* A fixed height is fine for images */
    }

    .product-split-text {
        width: 100%;
        height: auto;
        /* Let content define height */
        padding: 3rem 0;
        /* Add vertical padding */
    }

    .inner-text {
        width: 90%;
        /* Use more screen width */
        align-items: center;
        /* Center the text */
        text-align: center;
        gap: 1rem;
    }

    .inner-text p {
        font-size: 1.8rem;
    }

    .inner-text span {
        font-size: 1rem;
    }

    .product-split-text button {
        /* Fix the tiny 'vw' button */
        width: 180px;
        font-size: 1rem;
    }

    /* --- 4. BRAND PROMOTION --- */

    .promotion-image img {
        height: auto;
        /* Remove fixed vh */
    }

    .promotion-text {
        padding: 0 1rem;
        /* Add horizontal padding */
        gap: 1.5rem;
    }

    .promotion-text p {
        font-size: 1.5rem;
        /* Smaller text */
        line-height: 1.3;
    }

    .promotion-text span {
        font-size: 1rem;
    }

    /* --- 5. SOCIAL MEDIA --- */

    .socialmedia-section {
        margin-top: 3rem;
    }

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

    .socialmedia-post {
        height: auto;
        /* Let it grow */
        overflow: visible;
        /* Show all posts */
        width: 95%;
        gap: 1%;
        margin-bottom: 3rem;
    }

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

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

    /* --- 6. FOOTER --- */

    .footer-section-1 {
        height: auto;
        /* Let height be flexible */
        padding: 3rem 1rem;
        margin-bottom: 3rem;
        gap: 2rem;
    }

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

    .input-section {
        width: 90%;
        /* 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;
    }
}