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

.product-split {
    display: flex;
}

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

.product-split-image {
    background-image: url('//icalm.com/cdn/shop/files/icalm-contact-us.jpg?v=1720797716&width=2000');
}

.product-split-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--oke-text-primaryColor);
    background-color: #cdcdff;
    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;
}

.get-in-touch {
    width: 100%;
    height: 90vh;
    display: flex;
    align-self: center;
    flex-direction: column;
    gap: 2rem;
}

.header {
    display: flex;
    align-self: center;
    justify-content: center;
    text-align: center;
    margin-top: 5rem;
    color: var(--oke-text-primaryColor);
    font-size: 3rem;
    text-transform: uppercase;
}

.form {
    width: 75%;
    display: flex;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1%;
}

.name {
    display: flex;
    flex-direction: column;
    width: 48%;
    color: var(--oke-text-primaryColor);
    gap: 1rem;
    font-size: large;
    margin-bottom: 1rem;
}

.name input {
    width: 100%;
    height: 2rem;
    background: none;
    border: none;
    color: var(--oke-text-primaryColor);
    outline: none;
    font-size: large;
    border-bottom: 2px solid var(--oke-text-primaryColor);
}

.email {
    display: flex;
    flex-direction: column;
    width: 48%;
    color: var(--oke-text-primaryColor);
    gap: 1rem;
    font-size: large;
    margin-bottom: 1rem;
}

.email input {
    width: 100%;
    height: 2rem;
    background: none;
    border: none;
    color: var(--oke-text-primaryColor);
    outline: none;
    font-size: large;
    border-bottom: 2px solid var(--oke-text-primaryColor);
}

.number {
    display: flex;
    flex-direction: column;
    width: 97%;
    color: var(--oke-text-primaryColor);
    gap: 1rem;
    font-size: large;
    margin-bottom: 1rem;
}

.number input {
    width: 100%;
    height: 2rem;
    background: none;
    border: none;
    color: var(--oke-text-primaryColor);
    outline: none;
    font-size: large;
    border-bottom: 2px solid var(--oke-text-primaryColor);
}

.message {
    display: flex;
    flex-direction: column;
    width: 98%;
    color: var(--oke-text-primaryColor);
    gap: 1rem;
    font-size: large;
    margin-bottom: 2rem;
}

.message textarea {
    width: 98%;
    height: 6rem;
    background: none;
    border: none;
    color: var(--oke-text-primaryColor);
    outline: none;
    font-size: large;
    border-bottom: 2px solid var(--oke-text-primaryColor);
}

.btn {
    width: 97%;
}

.btn button {
    height: 5vh;
    width: 8vw;
    border-radius: 5rem;
    background-color: #4A26F5;
    color: white;
    border: none;
    margin-bottom: 1rem;
    cursor: pointer;
}

.capche {
    width: 97%;
}

.capche p {
    color: #4A26F5;
}

.get-in-near-by-store {
    background-image: url('https://icalm.com/cdn/shop/files/07A3945.jpg?v=1723649267&width=2400');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 120vh;
}

.store {
    width: 25%;
    height: 25%;
    background-color: #fff;
    color: var(--oke-text-primaryColor);
    font-size: 2.5rem;
    margin-left: 4rem;
    margin-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
}

.store button {
    height: 5vh;
    width: 8vw;
    border-radius: 5rem;
    background-color: #4A26F5;
    color: white;
    border: none;
    cursor: pointer;
}

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


/* =================================================================== */
/* 🚀 UPDATED RESPONSIVE STYLES 🚀 */
/* =================================================================== */

@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 */
    }

    /* --- 2. PRODUCT SPLIT --- */
    .product-split {
        flex-direction: column;
    }

    .product-split-image {
        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;
    }

    /* --- 3. GET IN TOUCH FORM (NEW) --- */
    .get-in-touch {
        height: auto;
        /* Remove fixed vh */
        padding-bottom: 3rem;
    }

    .get-in-touch .header {
        font-size: 1.8rem;
        /* Smaller header */
        margin-top: 3rem;
    }

    .form {
        width: 90%;
        /* Use more screen width */
        flex-direction: column;
        /* Stack all form sections */
        gap: 0;
        /* Remove 1% gap */
    }

    .name,
    .email,
    .number,
    .message,
    .btn,
    .capche {
        width: 100%;
        /* Make all form sections full-width */
    }

    /* Fix the button inside .btn */
    .btn button {
        width: 100%;
        /* Make button full width */
        height: 45px;
        /* Set fixed height */
        font-size: 1.1rem;
    }

    .capche p {
        font-size: 0.8rem;
        /* Smaller legal text */
        text-align: center;
    }

    /* --- 4. NEAR-BY STORE (NEW) --- */
    .get-in-near-by-store {
        height: 70vh;
        /* Shorter, but still tall */
        display: flex;
        /* Use flex to center the .store box */
        align-items: center;
        justify-content: center;
    }

    .store {
        width: 90%;
        height: auto;
        /* Let content define height */
        margin: 0;
        /* Remove fixed margin */
        padding: 1.5rem;
        /* Add padding */
        font-size: 1.8rem;
        /* Smaller text */
    }

    .store button {
        width: 160px;
        /* Fixed width */
        height: 45px;
        /* Fixed height */
        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;
    }
}