:root {
    /* Color Palette */
    --dark-blue: #161B40;
    --dark-blue-70-opacity: #161B40B3;
    /* For the background of header and footer */
    --medium-blue: #373F78;
    /* For sections and buttons */
    --light-blue: #81A4CD;
    /* For accents and borders */
    --yellow: #EDE742;
    --yellow-shadow: #EDE742B3;
    /* For highlights and call-to-actions */
    --off-white: #F5F7DC;
    /* For text on dark backgrounds */
    --text-dark: #333333;
    /* Dark text color for light backgrounds */

    --white: #ffffff;

    --light-text-for-dark-bg: var(--white);
    --dark-text-for-light-bg: var(--dark-blue);
    --dark-text-for-light-bg-70-opacity: var(--dark-blue-70-opacity);

    /* Hover Colors */
    --hover-light: var(--light-blue);
    --hover-dark: var(--yellow);

    --dark-bg: var(--dark-blue);
    --light-bg: var(--white);

    --button-primary: var(--yellow);

    /* Font Sizes */
    --font-size-base: 16px;
    --font-size-large: 1.75rem;
    --font-size-medium: 1.25rem;
    --font-size-small: 0.875rem;

    /* Spacing */
    --padding-base: 1rem;
    --padding-large: 2rem;
    --margin-base: 1rem;
    --page-padding: 8vw;
    --page-content-padding: calc(var(--page-padding) * 2);
    --section-padding: 50px;

    /* Border Radius */
    --border-radius: 8px;

    /* Shadow */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Link Colors */
    --link-color: var(--light-blue);
    --link-hover-color: var(--yellow);

    /* Button Colors */
    --button-primary-bg: var(--medium-blue);
    --button-primary-hover-bg: var(--light-blue);
    --button-text-color: #ffffff;

    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}

/* Font Import */
.krona-one-regular {
    font-family: "Krona One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.readex-pro-regular {
    font-family: "Readex Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "HEXP" 0;
}

.julee-regular {
    font-family: "Julee", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Global Resets and General Styles */
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Readex Pro", sans-serif;
    font-size: var(--font-size-base);
    color: var(--dark-text-for-light-bg);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Krona One", sans-serif;
    margin-bottom: var(--margin-base);
}

a {
    color: var(--link-color);
    /* Link color matches the light blue */
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    /* Hover color is yellow */
    text-decoration: underline;
}

button {
    background-color: var(--button-primary-bg);
    /* Medium blue background */
    color: var(--button-text-color);
    /* White text */
    border: none;
    border-radius: var(--border-radius);
    /* Rounded corners */
    padding: var(--padding-base);
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

button:hover {
    background-color: var(--button-primary-hover-bg);
    /* Light blue hover */
}

/* Sections */
.section-dark {
    background-color: var(--dark-blue);
    color: var(--off-white);
}

.section-light {
    background-color: var(--off-white);
    color: var(--text-dark);
}

/* Headings */
h1 {
    font-size: var(--font-size-large);
}

h2 {
    font-size: var(--font-size-medium);
}

h3 {
    font-size: var(--font-size-base);
}

/* Paragraphs */
p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--margin-base);
}

/* Containers */
.container {
    margin: 0 auto;
    padding: 0 var(--padding-base);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.margin-top-large {
    margin-top: var(--padding-large);
}

.padding-large {
    padding: var(--padding-large);
}

/* Animation Utilities - Matching Home Page Style */
/* Uses blur, bounce, and custom easing like home sections */
:root {
    --animation-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-up {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
    filter: blur(6px);
    transition: none;
}

.fade-in-up.animated {
    animation: fadeInUpReveal 0.8s var(--animation-ease) forwards;
    will-change: auto;
}

@keyframes fadeInUpReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 25px, 0);
        filter: blur(6px);
    }
    60% {
        transform: translate3d(0, -5px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.fade-in-left {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
    filter: blur(6px);
    transition: none;
}

.fade-in-left.animated {
    animation: fadeInLeftReveal 0.8s var(--animation-ease) forwards;
    will-change: auto;
}

@keyframes fadeInLeftReveal {
    0% {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
        filter: blur(6px);
    }
    60% {
        transform: translate3d(5px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.fade-in-right {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    filter: blur(6px);
    transition: none;
}

.fade-in-right.animated {
    animation: fadeInRightReveal 0.8s var(--animation-ease) forwards;
    will-change: auto;
}

@keyframes fadeInRightReveal {
    0% {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
        filter: blur(6px);
    }
    60% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.scale-in {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale3d(0.95, 0.95, 1);
    filter: blur(4px);
    transition: none;
}

.scale-in.animated {
    animation: scaleInReveal 0.85s var(--animation-ease) forwards;
    will-change: auto;
}

@keyframes scaleInReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale3d(0.95, 0.95, 1);
        filter: blur(4px);
    }
    65% {
        transform: translate3d(0, -6px, 0) scale3d(1.03, 1.03, 1);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        filter: blur(0);
    }
}

/* Stagger delays - matching home page timing */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .scale-in {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
        transition: none;
    }

    .ripple {
        display: none;
    }
}