:root {
    /* Base Backgrounds */
    --color-bg-dark: #0F172A;         /* Charcoal Navy */
    --color-bg-light: #F1F5F9;        /* Soft Off-White */

    /* Primary & Accent Colors */
    --color-accent-coral: #F58A07;    /* Electric Coral */
    --color-accent-cyan: #7FDBDA;     /* Cool Cyan */
    --color-accent-yellow: #FEE440;   /* Modern Yellow */

    /* Text Colors */
    --color-text-dark: #1E293B;       /* Slate Ink */
    --color-text-light: #F8FAFC;      /* Pure Off-White */

    /* Utility Colors */
    --color-border: #CBD5E1;          /* Soft Gray for outlines */
    --color-shadow: rgba(15, 23, 42, 0.2); /* For subtle shadows */

    /* Optional Glass/Overlay */
    --color-overlay-dark: rgba(15, 23, 42, 0.7); /* Dark glass */
    --color-overlay-light: rgba(241, 245, 249, 0.85); /* Light glass */

    /* Base card backgrounds */
    --card-bg-default: #ffffff; /* Standard white card */
    --card-bg-muted: #F8FAFC;   /* Slightly off-white */

    /* Tinted variations (very subtle background tints) */
    --card-bg-coral-tint: rgba(255, 113, 91, 0.05);    /* Coral tint */
    --card-bg-cyan-tint: rgba(127, 219, 218, 0.06);     /* Cyan tint */
    --card-bg-yellow-tint: rgba(254, 228, 64, 0.06);    /* Yellow tint */

    /* Glassy/frosted options (if using dark mode or transparent containers) */
    --card-bg-glass-light: rgba(255, 255, 255, 0.15);   /* For glassmorphic on dark */
    --card-bg-glass-dark: rgba(15, 23, 42, 0.4);        /* For glassmorphic on light */

    /* Dark mode cards */
    --card-bg-dark: #1E293B;         /* Dark blue slate */
    --card-bg-dark-elevated: #334155; /* Slightly lighter for layering */
}
body {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    font-size:18px;
    font-family: "Funnel Display", sans-serif;
    margin: 0;
    padding: 0;
}
.body{
    color: var(--color-text-dark);
    font-family: "Italiana", sans-serif;
    font-weight:900;
    font-size:18px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Climate Crisis', sans-serif;
    margin: 0;
    padding: 0.5em 0;
    font-weight: 100;
    font-size:160%;
}

/* ------------------------
   0.2 - GLOBAL STYLES
   --------------------- */
.mw-25{
    max-width:35%;
    height:auto;
}
.rounded-4{
    border-radius: 0.8rem;
}
.rounded-5{
    border-radius: 1.3rem;
}
.box-border{
    box-sizing:border-box;
}
/* .d-inline-block {
    display: inline-block;
} */
/* ------------------------
   0.22 - FLEX           */
/* .d-flex{
    display:flex;
}
.flex-nowrap{
    flex-wrap:nowrap;
}
.align-items-center{
    align-items:center;
}
.justify-center{
    justify-content:center;
} */
/* ------------------------
   0.23 - BORDERS        */
/* .radius-10{
    border-radius:15px;
}
.mw-25{
    max-width:35%;
    height:auto;
}
.px-5{
    padding-left:5%;
    padding-right:5%;
}
.px-10{
    padding-left:10%;
    padding-right:10%;
}
.mt-10{
    margin-top:10px;
}
 */
/* ------------------------ */

.btn-cta{
    background-color: var(--color-accent-coral);
    color: var(--color-bg-light);
    padding: 10px 5px;
    cursor: pointer;
    display: inline-block;
}

.hero-holder{
    position:relative;
    width:100%;
    min-height:100vh;
}
.hero-logo{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
.hero-image{
    display:inline-block;
    width: 27%;
    z-index:10;
}
.hero-content{
    display:inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 71%;
}
.hero-content p, .hero-content h1{
    padding-left:10%;
    padding-right:2%;
    box-sizing: border-box;
}
.about-text p{
    margin-bottom: 1rem;
}
.about-hidden, .about-hidden p{
    opacity:0;
    height:0;
    margin:0;
    padding:0;
    line-height: 0;
}
.package-cont{
    width:30vw;
    transition: width 0.3s ease-in-out;
}
.package-cont:hover{
    width:60vw;
    transition: width 0.3s ease-in-out;
}

/* TODO:
-- line spacing hero section tweek - +0.1em maybe
-- maybe a slightly darker background colour so avoid washing out on mobile
-- ANIMATIONS
-- Accessibility check: make sure your orange accent passes AA contrast against the light grey (target 4.5:1). You can nudge saturation up or use a slightly darker variant if needed.
*/
@media (max-width: 768px) {
    .hero-holder{
        min-height:60vh;
        margin-bottom:6%;
    }
}