/* ----------------------------------------------------------------
	Custom Jungle Meditation CSS - Jungle Media Studio
-----------------------------------------------------------------*/

/* ✅ MAIN COMPONENTS */

body {
    font-family: 'Inter', 'Arial', sans-serif; /* Uses Inter as primary, falls back to Arial */
}

html {
    scroll-behavior: smooth;
}

/* ✅ BUTTON STYLES */
.button-jm {
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* 🔹 Mindfulness & Meditation */
.button-jm-mindfulness {
	background-color: #A8D5BA; /* Soft Green */
	color: #FFF;
}

.button-jm-mindfulness:hover {
	background-color: #8BBCA2; /* Darker Green */
	transform: scale(1.05);
}

/* 🔹 Relaxation & Breathing */
.button-jm-breathing {
	background-color: #D97730; /* Burnt Orange */
	color: #FFF;
}

.button-jm-breathing:hover {
	background-color: #B85A1B; /* Darker Orange */
	transform: scale(1.05);
}

/* 🔹 Abundance & Energy */
.button-jm-energy {
	background-color: #B22222; /* Deep Red */
	color: #FFF;
}

.button-jm-energy:hover {
	background-color: #8E1818; /* Darker Red */
	transform: scale(1.05);
}

/* ✅ RESPONSIVE HEADINGS */
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text h2 {
        font-size: 1.5rem;
    }
}

/* ✅ DARK MODE */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #E0E0E0;
    }
    .button-jm {
        background-color: #A85A1B;
        color: #FFF;
    }
}

/* ✅ HERO SECTION COLORS */
#hero-mindfulness {
	background-color: #6C91BF; /* Muted Blue */
}
#hero-mindfulness h1, #hero-mindfulness h2 {
	color: #F8F1F1; /* Soft Cream */
}
#hero-mindfulness .button-jm {
	background-color: #A8D5BA; /* Soft Green */
}

/* 🔹 Relaxation & Breathing Hero */
#hero-breathing {
	background-color: #A8D5BA; /* Soft Green */
}
#hero-breathing h1, #hero-breathing h2 {
	color: #B22222; /* Deep Red */
}
#hero-breathing .button-jm {
	background-color: #D97730; /* Burnt Orange */
}

/* 🔹 Abundance & Energy Hero */
#hero-energy {
	background-color: #E8AD0F; /* Golden Yellow */
}
#hero-energy h1, #hero-energy h2 {
	color: #6C91BF; /* Muted Blue */
}
#hero-energy .button-jm {
	background-color: #B22222; /* Deep Red */
}

/* ✅ BRAND COLORS */
.jm-soft-green { background-color: #E5F6F4 !important; }
.jm-pale-yellow { background-color: #FFF5DC !important; }
.jm-muted-blue { background-color: #E8EAF6 !important; }
.jm-cool-grey { background-color: #F6F6F6 !important; }
.jm-off-white { background-color: #FAFAFA !important; }

/* ✅ TEXT COLORS */
.jm-mm-font { color: #6C91BF !important; } /* Mindfulness */
.jm-rb-font { color: #A8D5BA !important; } /* Breathing */
.jm-ae-font { color: #E8AD0F !important; } /* Energy */
.jm-grey { color: #555555 !important; }
.jm-blue { color: #03023f !important; }
.jm-light-blue { color: #6C91BF !important; }
.jm-green { color: #2bb271 !important; }
.jm-orange { color: #D97730 !important; }
.jm-yellow { color: #E8AD0F !important; }
.jm-red { color: #ac0707 !important; }
.jm-white { color: #FAFAFA !important; }

/* ✅ CARD STYLING */
.card-jm {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.card-jm:hover {
    transform: translateY(-5px);
}

/* ✅ CAROUSEL STYLING */
.carousel-jm {
    background: #FFF;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.carousel-jm h3 {
    color: #6C91BF;
}

/* ✅ BACKGROUND UTILITIES */
.bg-mm { background-color: #6C91BF !important; } /* Mindfulness */
.bg-rb { background-color: #A8D5BA !important; } /* Breathing */
.bg-ae { background-color: #E8AD0F !important; } /* Energy */