:root {
    --color-para-light: #757575;
    --color-para-dark: #5a5a5a;
    --color-title: #050b20;
    --color-bg: #f1f9ff;
    --color-general: #FBFBFB;

    /* Primary Color */
    --color-primary-5: oklch(0.44 0.1096 246.75 / 5%);
    --color-primary-10: oklch(0.44 0.1096 246.75 / 10%);
    --color-primary-20: oklch(0.44 0.1096 246.75 / 20%);
    --color-primary-30: oklch(0.44 0.1096 246.75 / 30%);
    --color-primary-40: oklch(0.44 0.1096 246.75 / 40%);
    --color-primary-50: oklch(0.44 0.1096 246.75 / 50%);
    --color-primary-60: oklch(0.44 0.1096 246.75 / 60%);
    --color-primary-100: #D5ECFC;
    --color-primary-200: #A9D7F8;
    --color-primary-300: #74BFF4;
    --color-primary-400: #3DA5F0;
    --color-primary-500: #128CE1;
    --color-primary-600: #0E70B5;
    --color-primary-700: #0C5D96;
    --color-primary-900: #09436D;
    --color-primary-1000: #042136;

    /* Secondary Color */
    --color-secondary: oklch(0.71 0.129 79.35);
    --color-secondary-10: oklch(0.71 0.129 79.35 / 10%);
    --color-secondary-20: oklch(0.71 0.129 79.35 / 20%);
    --color-secondary-30: oklch(0.71 0.129 79.35 / 30%);
    --color-secondary-40: oklch(0.71 0.129 79.35 / 40%);
    --color-secondary-50: oklch(0.71 0.129 79.35 / 50%);
    --color-secondary-100: oklch(0.94 0.029 82.6);
    --color-secondary-200: oklch(0.88 0.0575 83.46);
    --color-secondary-300: oklch(0.82 0.0855 82.67);
    --color-secondary-400: oklch(0.77 0.1101 81.98);
    --color-secondary-600: oklch(0.65 0.1173 79.39);
    --color-secondary-700: oklch(0.58 0.1029 79.39);
    --color-secondary-800: oklch(0.5 0.0893 79.99);
    --color-secondary-900: oklch(0.43 0.0736 80.07);
    --color-secondary-1000: oklch(0.35 0.0583 79.29);

    /* Neutral Color */
    --color-neutral: #FFFFFF;
    --color-neutral-100: #FFFFFF;
    --color-neutral-200: #E3E3E3;
    --color-neutral-300: #C8C8C8;
    --color-neutral-400: #ACACAC;
    --color-neutral-500: #919191;
    --color-neutral-600: #757575;
    --color-neutral-700: #5A5A5A;
    --color-neutral-800: #3E3E3E;
    --color-neutral-900: #232323;
    --color-neutral-1000: #16212A;
    --color-gray: #E9E9E9;
    --color-input-field-gray: #9BA5B7;

    /* Radius */
    --radius-none: 0px;
    --radius-1: 8px;
    --radius-2: 16px;
    --radius-3: 24px;
    --radius-4: 32px;
}

/* ...existing code... */

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
}

@media (min-width: 768px) {
    .container {
        padding-left: 100px; /* md:px-[100px] */
        padding-right: 100px; /* md:px-[100px] */
    }
}

/* HEADINGS */
.SCTION-TITTLE {
    font-family: 'DM Sans', sans-serif;
    font-size: 2rem; /* text-2xl */
    font-weight: bold;
    line-height: 60px; /* !leading-[60px] */
}

@media (min-width: 1024px) {
    .SCTION-TITTLE {
        font-size: 40px; /* lg:text-[40px] */
    }
}

.H-5 {
    font-family: 'DM Sans', sans-serif;
    font-size: 34px; /* text-[34px] */
    font-weight: bold;
    line-height: 51px; /* leading-[51px] */
}

.H-6 {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px; /* text-[28px] */
    font-weight: bold;
    line-height: 42px; /* leading-[42px] */
}

.H-7 {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px; /* text-[24px] */
    font-weight: bold;
    line-height: 36px; /* leading-[36px] */
}

.H-8 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    line-height: 30px; /* !leading-[30px] */
}

/* PARAGRAPHS */
.B-1 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem; /* text-lg */
    font-weight: bold;
    line-height: 27px; /* !leading-[27px] */
}

.B-2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    line-height: 27px; /* !leading-[27px] */
}

.B-3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-medium */
    line-height: 27px; /* !leading-[27px] */
}

.B-4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem; /* text-lg */
    font-weight: normal;
    line-height: 27px; /* !leading-[27px] */
}

.B-5 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; /* text-base */
    font-weight: bold;
    line-height: 1.5rem; /* !leading-6 */
}

.B-6 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    line-height: 1.5rem; /* !leading-6 */
}

.B-7 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; /* text-base */
    font-weight: 500; /* font-medium */
    line-height: 1.5rem; /* !leading-6 */
}

.B-8 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; /* text-base */
    font-weight: normal;
    color: var(--color-neutral-700);
    line-height: 1.5rem; /* !leading-6 */
    vertical-align: middle;
}

.B-9 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; /* text-[14px] */
    font-weight: bold;
    line-height: 21px; /* leading-[21px] */
}

.B-10 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; /* text-[14px] */
    font-weight: 600; /* font-semibold */
    line-height: 21px; /* leading-[21px] */
}

.B-11 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; /* text-[14px] */
    font-weight: 500; /* font-medium */
    line-height: 21px; /* leading-[21px] */
}

/* EFFECTS */
.E-1 {
    box-shadow: 0px 12px 20px 0px rgba(62, 92, 118, 0.15);
}
