:root {
    /* ===== Colors ===== */
    --color-primary: #0C9286;
    --color-primary-hover: #08736A;
    --color-primary-lighter:#EEF6F5;
    --color-secondary: #E76F51;
    --color-heading: #1F2A2E;
    --color-text: #5F6C72;
    --color-white: #FFFFFF;
    --color-card-border: #E8F0EF;
    --color-card-border-alt: #CFDEF0;
    --color-muted: #92ABC9;
    --color-dark: #1B1A2E;
    --color-bg-primary: #EEFAFB;
    --color-bg-section: #F6FAFA;
    --color-bg-card: #FFFFFF;
    --color-competence-bg: #FFF8F2;
    --color-competence-border: #F8EAE7;
    --color-heading-dark: #35414B;
    --color-text-muted: #536C8B;
    --color-black: #231F20;
    --color-bg-light: #F9F9F9;
    --color-bg-lighter: #FBFBFB;
    --color-border-light: #F2EFEF;
    --color-badge-text: #92400E;
    --color-primary-alt: #0C9286;
    --banner-gradient: linear-gradient(103.1deg, #FFFFFF 34.12%, #F3FEFF 100%);

    /* ===== Shadows ===== */
    --shadow-card: 0px 4px 12.8px 0px #EEF6F5;
    --shadow-card-alt: 0px 0px 16px 0px rgba(70, 159, 223, 0.2);
    --shadow-lg: 0px 8px 24px rgba(0, 0, 0, 0.1);

    /* ===== Font Families ===== */
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Plus Jakarta Sans';

    /* ===== Font Sizes ===== */
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 15px;
    --fs-md: 17px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fs-5xl: 36px;
    --fs-6xl: 43px;
    --fs-7xl: 48px;

    /* ===== Font Weights ===== */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* ===== Line Heights ===== */
    --lh-tight: 120%;
    --lh-heading: 130%;
    --lh-normal: 150%;
    --lh-relaxed: 170%;

    /* ===== Section Spacing ===== */
    --section-py: 100px;
    --section-bg-pt: 60px;
    --section-bg-pb: 70px;
    --section-bg-py: 70px;
    --section-wraper-py: 80px;

    /* ===== Border Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
}

/* ===== Base Reset ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
html {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: var(--lh-normal);
    margin: 0;
    padding: 0;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    letter-spacing: 0%;
    margin-top: 0;
}

h1 {
    font-size: var(--fs-6xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

h1 span {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
}

h2 {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

h3 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

h4 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

h5 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

h6 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}
p{
    font-family: var(--font-primary);
}
/* ===== Banner Paragraph ===== */
.banner-text p,
p.banner-text {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

/* ===== CTA Buttons ===== */
.btn-primary,
.cta-filled {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: var(--fs-base);
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    height: 46px;
}

.btn-primary:hover,
.cta-filled:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-3px);
}

.btn-outline,
.cta-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    cursor: pointer;
      font-size: var(--fs-base);
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    height: 46px;
}

.btn-outline:hover,
.cta-outline:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    border-color: var(--color-primary-hover);
    transform: translateY(-3px);
}

/* ===== Section Spacing ===== */
.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

.section-bg {
    padding-top: var(--section-bg-pt);
    padding-bottom: var(--section-bg-pb);
    background-color: var(--color-bg-section);
}

/* ===== Banner Gradient ===== */
.banner-gradient {
    background: var(--banner-gradient);
}

/* ===== Card Border ===== */
.card-bordered {
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
}

/* ===== Section Head ===== */

/* ===== Links ===== */
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: var(--color-primary-hover);
}