/* =========================================
   HOME PAGE
========================================= */

:root {
    --home-bg: #f4ead6;
    --home-bg-soft: #fbf5e9;

    --home-card: #fffaf0;
    --home-card-hover: #f7efdf;

    --home-text: #21382a;
    --home-text-soft: #5d6d62;
    --home-muted: #7d897f;

    --home-accent: #2d563b;
    --home-accent-light: #6f8f77;
    --home-accent-dark: #1f3f2c;

    --home-border: rgba(45, 86, 59, 0.14);

    --home-shadow:
        0 20px 45px rgba(44, 68, 50, 0.10);

    --home-radius: 18px;
}


/* =========================================
   GENERAL
========================================= */

body {
    background: var(--home-bg);
    color: var(--home-text);
}

.home-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}

.home-section-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.home-section-heading h2,
.featured-heading h2,
.story-content h2,
.home-cta h2 {
    margin: 0;
    color: var(--home-text);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-section-heading > p:last-child {
    margin: 18px auto 0;
    max-width: 620px;
    color: var(--home-text-soft);
    font-size: 1.05rem;
    line-height: 1.75;
}

.section-eyebrow,
.home-eyebrow {
    margin: 0 0 14px;
    color: var(--home-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================
   HERO
========================================= */

.home-hero {
    position: relative;
    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 150px 7% 100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(216, 180, 90, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(63, 91, 138, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #05070b 0%,
            #0b1019 55%,
            #080b12 100%
        );
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85),
            transparent
        );

    pointer-events: none;
}

.home-hero::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: 6%;
    top: 50%;

    transform: translateY(-50%);

    border: 1px solid rgba(216, 180, 90, 0.2);
    border-radius: 50%;

    box-shadow:
        0 0 100px rgba(216, 180, 90, 0.07),
        inset 0 0 80px rgba(216, 180, 90, 0.04);

    pointer-events: none;
}

.home-hero-content {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);
}

.home-hero h1 {
    margin: 0;

    max-width: 850px;

    color: #ffffff;

    font-size: clamp(3.2rem, 7vw, 6.8rem);
    line-height: 0.95;
    letter-spacing: -0.055em;

    font-weight: 700;
}

.home-hero h1 span {
    display: block;
    margin-top: 10px;

    color: var(--home-accent-light);
}

.home-hero-text {
    max-width: 650px;

    margin: 30px 0 0;

    color: var(--home-text-soft);

    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.75;
}

.home-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 38px;
}


/* =========================================
   BUTTONS
========================================= */

.home-primary-btn,
.home-secondary-btn,
.home-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 28px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 0.95rem;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.home-primary-btn {
    background: var(--home-accent);
    color: #101010;

    box-shadow:
        0 10px 35px rgba(216, 180, 90, 0.22);
}

.home-primary-btn:hover {
    background: var(--home-accent-light);

    transform: translateY(-2px);

    box-shadow:
        0 14px 38px rgba(216, 180, 90, 0.28);
}

.home-secondary-btn {
    color: var(--home-text);

    border: 1px solid rgba(255, 255, 255, 0.2);

    background:
        rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(8px);
}

.home-secondary-btn:hover {
    border-color: rgba(216, 180, 90, 0.65);
    color: var(--home-accent-light);

    transform: translateY(-2px);
}


/* =========================================
   CATEGORIES
========================================= */

.home-categories {
    padding: 110px 0;

    background:
        linear-gradient(
            to bottom,
            #090d14,
            #0c111a
        );
}

.category-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.category-card {
    position: relative;

    min-height: 260px;

    padding: 32px;

    border: 1px solid var(--home-border);
    border-radius: var(--home-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.015)
        );

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
}

.category-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -40px;
    bottom: -40px;

    border-radius: 50%;

    background:
        rgba(216, 180, 90, 0.07);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.category-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(216, 180, 90, 0.4);

    background:
        var(--home-card-hover);

    box-shadow:
        var(--home-shadow);
}

.category-card:hover::after {
    transform: scale(1.6);

    background:
        rgba(216, 180, 90, 0.1);
}

.category-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 26px;

    border-radius: 14px;

    background:
        rgba(216, 180, 90, 0.11);

    border:
        1px solid rgba(216, 180, 90, 0.2);

    color: var(--home-accent-light);

    font-size: 1.45rem;
    font-weight: 700;
}

.category-card h3 {
    margin: 0 0 12px;

    color: var(--home-text);

    font-size: 1.4rem;
}

.category-card p {
    margin: 0;

    color: var(--home-text-soft);

    line-height: 1.7;
}


/* =========================================
   FEATURED PRODUCTS
========================================= */

.home-featured {
    padding: 110px 0;

    background:
        #080b11;
}

.featured-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;
}

.view-all-link {
    color: var(--home-accent);

    text-decoration: none;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.view-all-link:hover {
    color: var(--home-accent-light);

    transform: translateX(4px);
}

.home-product-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================
   BENEFITS
========================================= */

.home-benefits {
    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            #10151f,
            #0a0e15
        );

    border-top:
        1px solid var(--home-border);

    border-bottom:
        1px solid var(--home-border);
}

.benefits-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.benefit-item {
    position: relative;

    padding: 36px 32px;

    border-radius: var(--home-radius);

    border: 1px solid var(--home-border);

    background:
        rgba(255, 255, 255, 0.025);
}

.benefit-item::before {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-bottom: 25px;

    border-radius: 999px;

    background:
        var(--home-accent);
}

.benefit-item h3 {
    margin: 0 0 14px;

    color: var(--home-text);

    font-size: 1.35rem;
}

.benefit-item p {
    margin: 0;

    color: var(--home-text-soft);

    line-height: 1.75;
}


/* =========================================
   STORY
========================================= */

.home-story {
    padding: 120px 0;

    background:
        #080b11;
}

.story-grid {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 80px;
}

.story-content p:not(.section-eyebrow) {
    color: var(--home-text-soft);

    font-size: 1.04rem;
    line-height: 1.8;

    margin: 22px 0 0;
}

.story-content .home-primary-btn {
    margin-top: 30px;
}

.story-visual {
    position: relative;

    min-height: 430px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    border:
        1px solid rgba(216, 180, 90, 0.18);

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at center,
            rgba(216, 180, 90, 0.11),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #111722,
            #090c12
        );

    box-shadow:
        var(--home-shadow);

    overflow: hidden;
}

.story-visual::before,
.story-visual::after {
    content: "";

    position: absolute;

    border:
        1px solid rgba(216, 180, 90, 0.12);

    border-radius:
        50%;
}

.story-visual::before {
    width: 260px;
    height: 260px;
}

.story-visual::after {
    width: 350px;
    height: 350px;
}

.story-number {
    position: relative;
    z-index: 2;

    color:
        var(--home-accent-light);

    font-size:
        clamp(3rem, 7vw, 5rem);

    font-weight: 700;

    letter-spacing:
        0.12em;

    line-height: 1;
}


/* =========================================
   FINAL CTA
========================================= */

.home-cta {
    padding: 110px 20px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(216, 180, 90, 0.18),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #10151f,
            #080b11
        );
}

.home-cta .home-container {
    max-width: 820px;
}

.home-cta p {
    max-width: 620px;

    margin: 20px auto 0;

    color: var(--home-text-soft);

    font-size: 1.08rem;
    line-height: 1.75;
}

.home-cta-btn {
    margin-top: 32px;

    background: var(--home-accent);
    color: #111;

    box-shadow:
        0 15px 45px rgba(216, 180, 90, 0.22);
}

.home-cta-btn:hover {
    background:
        var(--home-accent-light);

    transform:
        translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .home-hero {
        min-height: 670px;
        padding-top: 130px;
    }

    .home-hero::after {
        right: -150px;

        opacity: 0.65;
    }

    .category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .story-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .story-visual {
        min-height: 360px;
    }
}


@media (max-width: 760px) {

    .home-hero {
        min-height: auto;

        padding:
            125px 6% 85px;
    }

    .home-hero h1 {
        font-size:
            clamp(3rem, 14vw, 5rem);
    }

    .home-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .home-primary-btn,
    .home-secondary-btn {
        width: 100%;
    }

    .category-grid,
    .benefits-grid,
    .home-product-grid {
        grid-template-columns: 1fr;
    }

    .featured-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-categories,
    .home-featured,
    .home-benefits,
    .home-story,
    .home-cta {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .category-card {
        min-height: auto;
    }

    .story-visual {
        min-height: 300px;
    }

    .story-number {
        font-size: 3.2rem;
    }
}

/* =========================================
   HOME PAGE
========================================= */

:root {
    --home-bg: #f4ead6;
    --home-bg-soft: #fbf5e9;

    --home-card: #fffaf0;
    --home-card-hover: #f7efdf;

    --home-text: #21382a;
    --home-text-soft: #5d6d62;
    --home-muted: #7d897f;

    --home-accent: #2d563b;
    --home-accent-light: #6f8f77;
    --home-accent-dark: #1f3f2c;

    --home-tan: #d8c7a8;
    --home-tan-soft: #e8dcc6;

    --home-border: rgba(45, 86, 59, 0.14);

    --home-shadow:
        0 20px 45px rgba(44, 68, 50, 0.10);

    --home-radius: 18px;
}


/* =========================================
This gives My Care Wizard the same visual language as your fruit graphic: cream backgrounds, forest-green typography and buttons, soft tan transitions, and warm off-white cards. It should feel much more appropriate for a neurological-healthcare brand than the dark theatrical palette.



Pasted code(5).css
File
add the same color scheme to this css

Done. I updated the stylesheet to match the My Care Wizard palette: warm cream, off-white, deep forest green, soft green, and tan. I also replaced the old orange/pink/blue accents and carried the palette through buttons, header, cards, forms, links, search, CTA, footer, and hover states. The original stylesheet’s color variables start near the top of the file, so the theme conversion is centralized rather than scattered randomly. 


Download the updated My Care Wizard CSS

Use this file in place of the old stylesheet. 


my-care-wizard-theme.css
Code


Library
/
my-care-wizard-theme.css


/*------------------*\
#CUSTOM PROPERTTY
/*-------------------*/

:root{
    /* My Care Wizard brand palette */
    --mcw-cream: #f4ead6;
    --mcw-cream-soft: #fbf5e9;
    --mcw-off-white: #fffaf0;

    --mcw-green: #2d563b;
    --mcw-green-dark: #1f3f2c;
    --mcw-green-soft: #6f8f77;

    --mcw-tan: #d8c7a8;
    --mcw-tan-soft: #e8dcc6;

    --mcw-text: #21382a;
    --mcw-text-soft: #5d6d62;

    --safety-orange: var(--mcw-green-soft);

    --saety-orange: #6f8f77;
    --lavender-gray: #d8c7a8;
    --persian-rose: #2d563b;
    --red-crayola: #2d563b;
    --eerie-black: #1f3f2c;
    --light-gray: #d8c7a8;
    --cutured-2: #fbf5e9;
    --gray-web: #5d6d62;
    --cultured: #e8dcc6;
    --black_10: hsla(0, 0%, 0%, 0.1);
    --black_5: hsla(0, 0%, 0%, 0.05);
    --white-1: #fffaf0af0;
    --white-2: #f4ead6;
    --black: #173524;

    /**
    * gradient color
    */

    --gradient: linear-gradient(to left top, var(--persian-rose), var(--safety-orange));

    /**
    * typography
    */

    --ff-roboto: 'Roboto', sans-serif;
    --ff-league-spartan: 'League Spartan', sans-serif;

    --fs-1: 1.5rem;
    --fs-2: 3rem;
    --fs-3: 2.1rem;
    --fs-4:1.7rem;
    --fs-5:1.4rem;
    --fs-6:1.3rem;

    --fw-700: 700;
    --fw-500: 500;

    /**
    * spacing
    */

    --section-padding: 60px;

    /**
    * shadow
    */

    --shadow-1: 06px 24px var(--black_5);
    --shadow-2: 0 2px 28px var(--black_10);

    /**
    * border radius
    */

    --radius-2: 2px;
    --radius-5: 5px;
    --radius-8: 8px;

    /**
    * transition
    */ 
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-out: cubic-bezier(0.33s, 0.85, 0.4, 0.96);

}




/*------------------*\
#RESET
\*------------------*/


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

li { list-style: none; }

a {
    text-decoration: none;
    color: #2d563b;
    display: inline;
}

img,
span,
time,
label,
input,
button,
textarea,
ion-icon {display: block; }

img { height: auto; }

input,
button,
textarea {
    background: none;
    border: none;
    font: inherit;
}

input,
textarea { width:100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }

html {
    font-family: var(--ff-roboto);
    color: var(--gray-web);
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white-1);
    color: var(--gray-web);
    font-size: 1.6rem;
    line-height: 1.8;
}

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background-color: #eee2cd; }

::-webkit-scrollbar-thumb { background-color: #d8c7a8; }

::-webkit-scrollbar:hover { background-color: #6f8f77; }

:focus-visible { outline-offset: 4px; }

/*------------------*\
#REUSED STYLE
\*-----------------*/

.container { padding-inline: 15px; }

.btn{
    max-width: max-content;
    color: var(--black);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    padding: 10px 30px;
    border-radius: var(--radius-5);
    transition: var(--transition-1);
}

.btn-primary{
    background-image: var(--gradient);
    background-size: 1000%;
}

.btn-primary:is(:hover, :focus) { background-position: bottom right; }

.btn-secondary{
    background-color: var(--white-1);
    color: var(--eerie-black);
}

.btn-primary:is(:hover, :focus){
    background-color: var(--eerie-black);
    color: var(--white-1);
}

section { padding-block: var(--section-padding); }

.h1,
.h2,
.h3{
    color: var(--eerie-black);
    font-family: var(--ff-league-spartan);
    line-height: 1.2;
}

.h1 { font-size: var(--fs-1); }

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-3); }

.u-100 { width: 100%; }

.section-title,
.section-text { text-align: center; }

.section-text { font-size: var(--fs-6); }

.section-text { color: black;}

.grid-list {
    display: grid;
    gap: 30px;
}

.img-holder{
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--light-gray);
}

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

.affiliate-products .naval img{
    width:100px;
    height:100px;
    max-width:100px;
    max-height:100px;
    object-fit:contain;
    display:block;
    margin:10px auto;
}

.affiliate-products .amazon-maval{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:20px;
    padding:20px;
    scroll-behavior:smooth;
}

/* Product Grid */

.affiliate-products .naval-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
}

/* Product Card */

.affiliate-products .naval{
    flex: 0 0 calc(33.333% - 20px);
    background: #fffaf0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(45, 86, 59, 0.10);
    padding: 20px;
    text-align: center;
    transition: .3s ease;
    box-sizing: border-box;
}

.affiliate-products .naval:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(45, 86, 59, 0.14);
}

/*----------------*\
#HEADER
/*----------------*/

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white-1);
    padding-block: 15px;
    border-block-end: 1px solid var(--cultured);
    z-index: 4;
    transition: var(--transition-1);
}

.header.active{ filter: drop-shadow(var(--shadow-2)); }

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

.logo{
    font-family: var(--ff-league-spartan);
    color: var(--black);
    font-size: 3.5rem;
    font-weight: var(--fw-700);
    line-height: 1;
}

.nav-toggle-btn { font-size: 40px; }

.nav-toggle-btn.active .open,
.nav-toggle-btn .close { display: none; }

.nav-toggle-btn .open,
.nav-toggle-btn.active .close { display: block; }

.navbar{
    background-color: var(--white-1);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100%-30px);
    width: 100%;
    padding-inline: 0;
    border: 1px solid var(--cultured);
    transition: 0.3s var(--cubic-out);
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
}

.navbar.active{
    max-height: 320px;
    visibility: visible;
    transition-duration: 0.5s;
}

.navbar-list{
    padding: 20px 15px;
    padding-block-start: 10px;
    opacity: 0;
    transition: var(--transition-1);
}

.navbar.active .navbar-list { opacity: 1; }

.navbar-link{
    color: var(--eerie-black);
    font-family: var(--ff-league-spartan);
    font-size: var(--fs-4);
    line-height: 1.2;
    padding-block: 8px;
    transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus) { color: var(--red-crayola); }

.header .btn { margin-block-start: 10px; }


/*---------------*\
#HEO
/*---------------*/

.hero{
    padding-block-start: calc(var(--section-padding) + 50px);
    text-align: center;
}

.hero-content { margin-block-end: 30px; }

.hero-subtitle{
    color: var(--eerie-black);
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
}

.hero-title { margin-block: 12px 8px; }

.hero-text { font-size: var(--fs-5); }

.hero .btn{
    margin-bottom: auto;
    margin-block-start: 20px;
}



/*--------------*\
#SERVICE
/*--------------*/

.service { background-color: var(--white-2); }

.service .section-text { margin-block: 5px 35px; }

.service-card{
    background-color: var(--white-1);
    padding: 20px 15px;
    border: 1px solid var(--platinum);
    border-radius: var(--radius-5);
    text-align: center;
    box-shadow: var(--shadow-1);
    transition: var(--transition-2);
}

.service-card:is(:hover, :focus-within) { transform: translateY(-10px); }

.service-card .card-icon{
    color: var(--white-1);
    font-size: 25px;
    max-width: max-content;
    margin-inline: auto;
    padding: 18px;
    border-radius: 50%;
}

.service-card .card-title { margin-block: 20px 8px; }

.service-card .card-text { font-size: var(--fs-6); }

/*---------------*\
#PROJECT
/*--------------*/

.project .section-text { margin-block: 5px 35px; }

.project-card{
    position: relative;
    border-radius: var(--radius-8);
    overflow: hidden;
}

.project-card::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    opacity: 0.5;
    transition: var(--transition-2);
}

.project-card:is(:hover, :focus-within)::after { opacity: 0.8; }

.project-card .card-content a{
    color: var(--white-1);
}

.project-card .card-content{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 1;
    transition: var(--transition-2);
}

.project-card:is(:hover, :focus-within) .card-content { transform: translateY(-20px); }

.project-card .card-subtitle{
    color: var(--lavender-gray);
    font-size: var(--fs-4);
    line-height: 1;
}

.project-card .card-title{
    color: var(--white-1);
    margin-block: 12px 15px;
}

/*---------------*\
#ABOUT
/*--------------*/

.about { background-color: var(--white-2); }

.about-banner{
    position: relative;
    border-radius: var(--radius-5);
    overflow: hidden;
    margin-block-end: 25px;
}

.play-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white-1);
    color: var(--red-crayola);
    font-size: 32px;
    padding: 16px;
    border-radius: 50%;
    animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 1px var(--white-1); }
    100% { box-shadow: 0 0 0 25px transparent; }
}

.about :is(.section-title, .section-text) { text-align: left; }

.about .section-title { margin-block-end: 5px; }

.about .section-text:not(:last-child) { margin-block-end: 18px; }

.about .h3 { margin-block-end: 8px; }

.about-list { margin-block: 15px 18px; }

.about-item{
    display: flex;
    align-items: flex-start;
    margin-block-start: 2px;
}

.about-item ion-icon{
    color: var(--red-crayola);
    flex-shrink: 0;
    margin-block-start: 2px;
}

.about:not(:last-child) { margin-block-end: 12px; }

/*---------------*\
#CTA
/*--------------*/

.cta{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

.cta::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--gradient);
    opacity: 0.95;
    z-index: -1;
}

.cta,
.cta .section-title { color: var(--white-1); }

.cta .subtitle{
    font-size: var(--fs-6);
    font-weight: var(--fw-500);
    text-align: center;
}

.cta .section-title { margin-block: 12px 18px; }

.cta .btn { margin-inline: auto; }

/*---------------*\
#BLOG
/*--------------*/

.blog .section-text { margin-block: 5px 35px; }

.blog-card { background-color: var(--white-2); }

.blog-card .card-banner { overflow: hidden; }

.blog-card .card-banner img { transition: var(--transition-2); }

.blog-card:is(:hover, :focus-within) .card-banner img { transform: scale(1.05); }

.blog-card .card-content { padding: 15px; }

.blog-card .time{
    color: var(--red-crayola);
    font-size: var(--fs-6);
    line-height: 1;
    margin-block-end: 10px;
}

.blog-card .card-title { transition: var(--transition-1); }

.blog-card .card-title:is(:hover, :focus) { color: var(--red-crayola); }

/*---------------*\
#CONTACT
/*--------------*/

.contact { background-color: var(--white-2); }

.contact .section-text { margin-block: 5px 35px; }

.contact-form{
    background-color: var(--white-1);
    padding: 20px;
    border-radius: var(--radius-2);
    margin-block-end: 30px;
    box-shadow: var(--shadow-1);
}

.input-field{
    background-color: var(--white-1);
    padding: 20px;
    border-radius: var(--radius-2);
    margin-block-end: 30px;
    box-shadow: var(--shadow-1);
}

.input-field{
    background-color: var(--white-2);
    color: var(--eerie-black);
    font-size: var(--fs-5);
    padding: 15px;
    border-radius: var(--radius-2);
    outline: 1px solid transparent;
    outline-offset: 0;
    margin-block-end: 15px;
}

.input-field::webkit-inner-spin-button { display: none; }

.input-field:focus { outline-color: var(--red-crayola); }

.input-field::placeholder { transition: var(--transition-2); }

.input-field:focus::placeholder { opacity: 0; }

textarea .input-field{
    resize: vertical;
    min-height: 80px;
    height: 100px;
    max-height: 200px;
    overscroll-behavior: contain;
}

.checkbox{
    width: max-content;
    margin-block-start: 5px;
    accent-color: var(--red-crayola);
}

.label-link{
    display: inline-block;
    color: var(--red-crayola);
}

.label-link:is(:hover, :focus) { text-decoration: underline; }

.checkbox-wrapper{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: 15px;
}

.checkbox-wrapper .label { font-size: var(--fs-6); }

.contact-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 25px;
}

.contact-item { min-width: 100%; }

.contact-card{
    background-color: var(--white-1);
    padding: 20px;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact .card-icon{
    background-color: var(--cultured-2);
    color: var(--red-crayola);
    font-size: 25px;
    padding: 13px;
    border-radius: 50%;
    transition: var(--transition-1);
}

.contact-card:is(:hover, :focus) .card-icon{
    background-color: var(--red-crayola);
    color: var(--white-1);
}

.contact-card .card-title { margin-block-end: 5px; }

.contact-card :is(.card-link, .card-address) {
    font-size: var(--fs-6);
    transition: var(--transition-1);
}

.contact-card .card-link:is(:hover, :focus) { color: var(--red-crayola); }

/*---------------*\
#FOOTER
/*--------------*/

.footer{
    background-color: var(--white-2);
    padding-block: 20px;
}

.copyright{
    font-size: var(--fs-6);
    text-align: center;
}

.copyright-link{
    color: var(--red-crayola);
    font-weight: var(--fw-500);
    display: inline-block;
}

/*---------------*\
#BACK TO TOP
/*--------------*/

.back-top-btn{
    position: fixed;
    bottom: 10px;
    right: 20px;
    background-color: var(--eerie-black);
    color: var(--white-1);
    padding: 12px;
    border-radius: 50%;
    box-shadow: var(--shadow-2);
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-1);
}

.back-top-btn.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(-18px);
}

.back-top-btn:is(:hover, :focus) { opacity: 0.9; }

/* =========================
   SEARCH BAR
========================= */

.search-container {
    display: flex;
    align-items: center;

    width: 260px;
    max-width: 100%;
}

#search-input {
    width: 100%;
    height: 42px;

    padding: 0 14px;

    background: #fffaf0;
    color: #21382a;

    border: 1px solid #d8c7a8;
    border-radius: 8px;

    font-size: 14px;
    font-family: inherit;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#search-input::placeholder {
    color: #7d897f;
}

#search-input:focus {
    border-color: #2d563b;
    box-shadow: 0 0 0 3px rgba(45, 86, 59, 0.12);
}

#search-results {
    position: absolute;

    width: 260px;
    max-height: 300px;
    overflow-y: auto;

    margin-top: 6px;

    background: #fffaf0;

    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(45, 86, 59, 0.12);

    z-index: 2000;
}

/*---------------*\
#MEDIA QUERIES
/*--------------*/

/**
    * responsive for larger than 575px screen
**/

@media (min-width: 575px) {
    /**
    * RESUSED STYLE
    **/

    .container{
        max-width: 540px;
        width: 100%;
        margin-inline: auto;
    }

    .grid-list{
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
    }

    /**
    * BLOG
    **/

    .blog .grid-list { grid-template-columns: 1fr; }

    .blog-card.grid{
        display: grid;
        grid-template-columns: 0.47fr 1fr;
        align-items: center;
        gap: 10px;
    }

    /**
    * CONTACT
    **/

    .input-wrapper{
        display: flex;
        gap: 15px;
    }

    .contact-item { min-width: calc(50% - 18px); }
}








/**
    * responsive for larger than 768px screen
**/

@media (min-width: 768px) {
    /**
    * CUSTOM PROPERTY
    **/

:root{

    /**
    * typography
    **/

    --fs-1: 4.5rem;
    --fs-2: 3.7rem;
    --fs-3: 2.3rem;
    --fs-4: 1.8rem;
    --fs-5: 1.5rem;
    --fs-6: 1.4rem;
}
    /**
    * RESUSED STYLE
    **/

    .container { max-width: 720px; }

    .section-text{
        max-width: 65ch;
        margin-inline: auto;
    }

    /**
    * HERO
    **/

    .hero-text{
     max-width: 65ch;   
     margin-inline: auto;
    }

    /**
    * ABOUT
    **/

    .about-banner { max-width: 550px; }

    .about .section-text{
        max-width: unset;
        margin-inline: 0;
    }

    /**
    * CONTACT
    **/

    .contact-form { padding: 30px; }

    .contact-item { min-width: calc(50% - 12.5px); }

}







/**
    * responsive for larger than 992px screen
**/

@media (min-width: 992px) {
    /**
    * CUSTOM PROPERTY
    **/

:root{

    /**
    * typography
    **/

    --fs-1: 5rem;
    --fs-2: 4rem;
    --fs-3: 2.5rem;

        /**
    * spacing
    **/

    --section-padding: 100px;

}
    /**
    * RESUSED STYLE
    **/

    .container { max-width: 960px; }

    .grid-list { grid-template-columns: repeat(3, 1fr); }

    /**
    * HEADER
    **/

    .nav-toggle-btn { display: none; }

    .navbar,
    .navabar.active { all: unset; }

    .navbar-list{
        all: unset;
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .navabar-link { position: relative; }

    .navabar-link:is(:hover, :focus) { color: var
    (--eerie-black); }

    .navabar-link::after{
        content: "";
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        height: 2px;
        background-image: var(--gradient);
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition-2);
    }

    .navabar-link:is(:hover, :focus)::after { transform: scaleX
    (1); }

    .header .btn { margin-block-start: 0; }

    /**
    * HERO
    **/

    .hero .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 30px;
        text-align: left;
    }

    .hero-content { margin-block-end: 0; }

    .hero-subtitle{
        position: relative;
        padding-inline-start: 15px;
    }

    .hero-subtitle::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background-color: var(--red-crayola);
    }

    .hero-text,
    .hero .btn { margin-inline: 0; }

    /**
    * SERVICE
    **/

    .service-card { padding: 20px; }

    .service-card .h3 { --fs-3: 2.3rem; }

    /**
    * PROJECT
    **/

    .project-card .card-subtitle { --fs-6: 1.5rem; }

    /**
    * ABOUT
    **/

    .about .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 30px;
    }

    .about-banner { margin-block-end: 0; }

    /**
    * BLOG
    **/

    .blog .grid-list{
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }

    .blog .grid-list > li:first-child{
        grid-column: 1 / 2;
        grid-row: 1 / 5;
    }

    .blog-card:not(.grid) { height: 100%; }

    .blog-card .card-content { padding-block: 10px; }

    .blog-card:not(.grid) .card-content { padding: 25px; }

    .blog-card .h3 { --fs-3: 2rem; }

    .blog-card .time { --fs-6: 1.6rem; }


    /**
    * CONTACT
    **/

    .checkbox-wrapper { margin-block: 20px; }

    .contact-item { min-width: calc(33.33% - 16.66px); }

    .contact-card { padding: 30px; }

    .contact-card .contact-icon { font-size: 32px; }
}





/**
    * responsive for larger than 1200px screen
**/

@media (min-width: 1200px) {
    /**
    * CUSTOM PROPERTY
    **/

    :root{
        /**
        * typography
        **/

        --fs-1: 6.8rem;
        --fs-2: 4.5rem;
        --fs-4: 1.9rem;
        --fs-5: 1.6rem;
        --fs-6: 1.6rem;
    }

    /**
    * REUSED STYLE
    **/

    .container { max-width: 1140px; }

    .btn { --fs-6: 1.5rem; }

    /**
    * SERVICE
    **/

    .service-card { padding: 36px; }

    .service-card .h3 { --fs-3: 2.5rem }

    /**
    * PROJECT
    **/

    .project-card .card-content { padding: 30px; }

    .project-card .card-subtitle { --fs-6: 1.6rem; }

    /**
    * ABOUT
    **/

    .about .container { gap: 60px; }

    .about-item { gap: 7px; }

    .about-item ion-icon { font-size: 20px; }

    /**
    * CTA
    **/

    .cta .section-title { margin-block: 15px 24px; }

    /**
    * BLOG
    **/

    .blog-card .time { --fs-6: 1.6rem; }

    .blog-card.grid .h3 { --fs-3: 2.4rem; }

        /**
    * CONTACT
    **/

    .contact-form { padding: 50px; }

    .cntact-card { gap: 20px; }

    .contact-card .card-icon { padding: 15px; }
}

/* =========================================
   MY CARE WIZARD BRAND OVERRIDES
========================================= */

body {
    background-color: var(--mcw-cream);
    color: var(--mcw-text-soft);
}

a {
    color: var(--mcw-green);
}

a:hover,
a:focus {
    color: var(--mcw-green-dark);
}

.header,
.navbar {
    background-color: var(--mcw-off-white);
}

.header {
    border-block-end: 1px solid var(--mcw-tan-soft);
}

.logo,
.navbar-link,
.h1,
.h2,
.h3,
.hero-subtitle {
    color: var(--mcw-green-dark);
}

.navbar-link:is(:hover, :focus) {
    color: var(--mcw-green);
}

.btn-primary {
    background-image: linear-gradient(
        135deg,
        var(--mcw-green),
        var(--mcw-green-dark)
    );
    color: var(--mcw-off-white);
}

.btn-primary:is(:hover, :focus) {
    background-image: linear-gradient(
        135deg,
        var(--mcw-green-dark),
        var(--mcw-green)
    );
    color: var(--mcw-off-white);
}

.btn-secondary {
    background-color: var(--mcw-off-white);
    color: var(--mcw-green-dark);
    border: 1px solid var(--mcw-tan);
}

.service,
.about,
.blog-card,
.contact,
.footer {
    background-color: var(--mcw-cream);
}

.service-card,
.contact-form,
.contact-card,
.affiliate-products .naval {
    background-color: var(--mcw-off-white);
    border-color: var(--mcw-tan-soft);
}

.service-card,
.contact-card,
.affiliate-products .naval {
    box-shadow: 0 8px 24px rgba(45, 86, 59, 0.08);
}

.service-card .card-icon,
.contact .card-icon {
    background-color: rgba(45, 86, 59, 0.10);
    color: var(--mcw-green);
}

.contact-card:is(:hover, :focus) .card-icon {
    background-color: var(--mcw-green);
    color: var(--mcw-off-white);
}

.about-item ion-icon,
.blog-card .time,
.copyright-link,
.label-link {
    color: var(--mcw-green);
}

.play-btn {
    background-color: var(--mcw-off-white);
    color: var(--mcw-green);
}

.input-field,
#search-input {
    background-color: var(--mcw-off-white);
    color: var(--mcw-text);
    border-color: var(--mcw-tan);
}

.input-field:focus,
#search-input:focus {
    outline-color: var(--mcw-green);
    border-color: var(--mcw-green);
    box-shadow: 0 0 0 3px rgba(45, 86, 59, 0.12);
}

#search-results {
    background-color: var(--mcw-off-white);
    box-shadow: 0 8px 20px rgba(45, 86, 59, 0.12);
}

.checkbox {
    accent-color: var(--mcw-green);
}

.cta::after {
    background-image: linear-gradient(
        135deg,
        var(--mcw-green),
        var(--mcw-green-dark)
    );
}

.cta,
.cta .section-title {
    color: var(--mcw-off-white);
}

.project-card::after {
    background-color: var(--mcw-green-dark);
}

.project-card .card-subtitle {
    color: var(--mcw-tan-soft);
}

.back-top-btn {
    background-color: var(--mcw-green-dark);
    color: var(--mcw-off-white);
}

::-webkit-scrollbar-track {
    background-color: var(--mcw-tan-soft);
}

::-webkit-scrollbar-thumb {
    background-color: var(--mcw-green-soft);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--mcw-green);
}