:root {
    /* ===== Colors ===== */
    --color-primary: #3A66D4;
    --color-primary-hover: #2d54b8;
    --color-primary-lighter: #F2F5FF;
    --color-secondary: #3A66D4;
    --color-heading: #1F2937;
    --color-text: #676B7E;
    --color-text-secondary: #676B7E;
    --color-text-alt: #676B7E;
    --color-white: #FFFFFF;
    --color-card-border: #E2E8F0;
    --color-card-border-alt: #E7EEF9;
    --color-muted: #92ABC9;
    --color-dark: #1F2937;
    --color-bg-primary: #EEF3FC;
    --color-bg-section: #3A66D4;
    --color-bg-card: #FFFFFF;
    --color-span-highlight: #FAEDD6;
    --color-heading-dark: #1F2937;
    --color-heading-light: #1F2937;
    --color-text-muted: #71768D;
    --color-name: #35414B;
    --color-black: #1F2937;
    --color-bg-light: #EEF3FC;
    --color-bg-lighter: #D8E7FF;
    --color-border-light: #D8E7FF;
    --color-border-dark: #3A66D4;
    --color-border-section: #C7D7F5;
    --color-border-section-bg: #E7EEF9;
    --color-badge-text: #92400E;
    --color-primary-alt: #3A66D4;
    --banner-gradient:  linear-gradient(62.26deg, #EEF3FC 17.21%, #FFFFFF 45.17%, #F5F8FE 63.65%, #C7D7F5 100%);
    --theme-gradient:  linear-gradient(62.26deg, #EEF3FC 17.21%, #FFFFFF 49.69%, #C7D7F5 100%);
    --icon-background: linear-gradient(112.29deg, #F0F5FD 14.54%, #E4EDFA 97.38%);



    /* ===== Shadows ===== */
    --shadow-card: 0px 0px 19.5px 0px #DDE6FF;
    --shadow-card-alt: 0px 0px 16px 0px rgba(58, 102, 212, 0.2);
    --shadow-lg: 0px 8px 24px rgba(58, 102, 212, 0.12);

    /* ===== Font Families ===== */
    --font-primary: 'Outfit', sans-serif;
    --font-heading: 'Outfit', sans-serif;

    /* ===== Font Sizes ===== */
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-23: 23px;
    --fs-24: 24px;
    --fs-25: 25px;
    --fs-26: 26px;
    --fs-27: 27px;
    --fs-28: 28px;
    --fs-29: 29px;
    --fs-30: 30px;
    --fs-31: 31px;
    --fs-32: 32px;
    --fs-33: 33px;
    --fs-34: 34px;
    --fs-35: 35px;
    --fs-36: 36px;
    --fs-37: 37px;
    --fs-38: 38px;
    --fs-39: 39px;
    --fs-40: 40px;
    --fs-41: 41px;
    --fs-42: 42px;
    --fs-43: 43px;
    --fs-44: 44px;
    --fs-45: 45px;
    --fs-46: 46px;
    --fs-47: 47px;
    --fs-48: 48px;
    --fs-49: 49px;
    --fs-50: 50px;
    /* ===== Font Size Aliases ===== */
    --fs-xs: var(--fs-13);
    --fs-sm: var(--fs-14);
    --fs-base: var(--fs-16);
    --fs-base-15: var(--fs-15);
    --fs-md: var(--fs-17);
    --fs-lg: var(--fs-18);
    --fs-xl: var(--fs-20);
    --fs-2xl: var(--fs-24);
    --fs-3xl: var(--fs-28);
    --fs-4xl: var(--fs-32);
    --fs-5xl: var(--fs-35);
    --fs-6xl: var(--fs-43);
    --fs-7xl: var(--fs-48);

    /* ===== 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: 140%;
    --lh-normal: 150%;
    --lh-relaxed: 170%;

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

    /* ===== Border Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 30px;
    --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-family: Outfit, sans-serif;
    font-size: var(--fs-43);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: 0%;
    color: var(--color-heading);
}

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

h2 {
    font-family: Outfit, sans-serif;
    font-size: var(--fs-35);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: 0%;
    color: var(--color-heading);
}

 
h2 ~ .sec-desc {
    font-size: var(--fs-md);
    color: var(--color-text);
    padding-top: 25px;
    text-align: center;
}

 

 
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-family: Outfit, sans-serif;
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    border-radius: 13px;
    transition: all 0.3s ease;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    position: relative;
    overflow: visible;
}

.btn-primary::after,
.cta-filled::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    animation: btn-pulse 2s ease infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@keyframes btn-pulse {
    0%   { box-shadow: 0 0 0 0px rgba(58, 102, 212, 0.4); }
    100% { box-shadow: 0 0 0 14px rgba(58, 102, 212, 0); }
}

@keyframes btn-pulse-light {
    0%   { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.4); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

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

.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-bold);
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    letter-spacing: 0;
}

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

/* ===== Section Spacing ===== */
.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
    border: 1px solid var(--color-border-section);
}

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

.sec-wrapper {
    padding-top: var(--section-wraper-py);
    padding-bottom: var(--section-wraper-py);
}

/* ===== 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);
}