@import url(../font/fontface.css);
@import url(./reset.css);


:root {
    --font-family: "Gotham", sans-serif;
    --line-height-base: 1.6;
    --font-100: #1E1E1E;
    --font-90: #2d2c3c;
    --font-pulple: #292561;
    --font-white: #ffffff;
    --background-color: #fff;
    --font-400: #D6D7D9;

    --primary-color: #00896B;
    --secondary-color: #8fa7b5;
    --accent-color: #f4f6f8;
    --highlight-color: #ffefeb;

    --font-size-base: 20px;

    --space: clamp(20px, 3vw, 45px);
    --space-130: clamp(60px, 7vw, 130px); /* 130px */
    --space-120: clamp(55px, 6.5vw, 120px); /* 120px */
    --space-100: clamp(45px, 6vw, 100px); /* 100px */
    --space-80: clamp(35px, 5vw, 80px); /* 80px */
    --space-60: clamp(25px, 4vw, 60px); /* 60px */
    --space-50: clamp(20px, 3.5vw, 50px); /* 50px */
    --space-40: clamp(18px, 3vw, 40px); /* 40px */
    --space-35: clamp(16px, 2.5vw, 35px); /* 35px */
    --space-30: clamp(14px, 2vw, 30px); /* 30px */
    --space-24: clamp(12px, 1.8vw, 24px); /* 24px */
    
    --space-20: 1em;
    /* 20px */
    --space-16: 0.8em;
    /* 16px */
    --space-15: 0.75em;
    /* 15px */
    --space-10: 0.5em;
    /* 10px */

    /* Font sizes (converted) */
    --fs-dp-1: clamp(2.8rem, 5vw + 1rem, 5.25rem);
    /* ≈ 45px → 84px */
    --fs-dp-2: clamp(2.2rem, 3.5vw + 1rem, 4rem);
    /* ≈ 35px → 64px */

    /* Headings */
    --fs-h1: clamp(1.8rem, 2.8vw + 0.5rem, 3rem);
    /* ≈ 30px → 48px */
    --fs-h2: clamp(1.6rem, 2.2vw + 0.5rem, 2.5rem);
    /* ≈ 26px → 40px */
    --fs-h3: clamp(1.4rem, 1.8vw + 0.4rem, 2rem);
    /* ≈ 22px → 32px */
    --fs-h4: clamp(1.2rem, 1.2vw + 0.3rem, 1.5rem);
    /* ≈ 19px → 24px */
    --fs-h5: clamp(1rem, 1vw + 0.2rem, 1.25rem);
    /* ≈ 16px → 20px */
    --fs-h6: clamp(0.9rem, 0.8vw + 0.2rem, 1.125rem);
    /* ≈ 14.5px → 18px */

    /* Small / Text */
    --fs-small: clamp(0.85rem, 0.5vw + 0.3rem, 1rem);
    /* ≈ 14px → 16px */
    --fs-small-12: clamp(0.7rem, 0.3vw + 0.2rem, 0.75rem);
    /* ≈ 11px → 12px */
    --fs-28px: clamp(1.2rem, 1.5vw + 0.4rem, 1.75rem);
    /* ≈ 22px → 28px */
    /* Header */
    --bg-dark: transparent;
    --bg-white: #ffffff;

    /* scrolled bg */
    --text-light: #ffffff;
    --text-dark: #121417;
    --muted: #8C8C8C;
    --line: rgba(0, 0, 0, 0.08);

}

@media (max-width: 992px) {}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--font-100);
    background-color: #fff;
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


section {
    overflow: hidden;
}


.text-3line{
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}


.preload {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 9999;
}

img {
    max-width: 100%;
}

.content:not(.content-link-light) a:not(.card-news,.btn),
a.link {
    color: var(--primary-color);
    text-decoration: underline;
}

.inner-preload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #00896B;
}

.inner-preload svg {
    width: 100px;
    height: 120px;
    margin-top: -30px;
    display: inline-block;
}

#L4 circle {
    fill: #00896B;
}

.z-2 {
    z-index: 2;
}

.bg-grey {
    background-color: #F5F5F5;
}

.bg-grey-light {
    background-color: #D9D9D9;
}

.bg-grey-light-4 {
    background: #EAEAEB;
}

.bg-grey-light-2 {
    background-color: rgba(217, 217, 217, 0.2);
}

.bg-grey-light-3 {
    background-color: rgba(214, 215, 217, 0.3);
}

.shadow-1 {
    box-shadow: 0px 4px 18.3px 3px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
}


.line-8{
    width: 100%;
    height: 8px;
}
.line-purple{
    background-color: #292561;
}
.line-green{
    background-color: #00896B;
}

/* Link */
a {
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: var(--fs-small);
    cursor: pointer;
}

a svg {
    transition: fill 0.3s ease;
}

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

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

.abs {
    position: absolute;
}


.btn-link {
    text-decoration: none !important;
}

.btn-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-icon-arrow span {
    width: 37px;
    height: 37px;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Text */

.fs-dp-1 {
    font-size: var(--fs-dp-1);
    line-height: 1.2;
}

.fs-dp-2 {
    font-size: var(--fs-dp-2);
    line-height: 1.2;
}

h1,
.h1 {
    font-size: var(--fs-h1);
    line-height: 1.2;
}

h2,
.h2 {
    font-size: var(--fs-h2);
    line-height: 1.2;
}

h3,
.h3 {
    font-size: var(--fs-h3);
    line-height: 1.2;
}

.fs-28 {
    font-size: var(--fs-28px);
    line-height: 1.2;
}

h4,
.h4 {
    font-size: var(--fs-h4);
    line-height: 1.2;
}

h5,
.h5 {
    font-size: var(--fs-h5);
    line-height: 1.2;
}

h6,
.h6 {
    font-size: var(--fs-h6);
    line-height: 1.2;
}

small,
.small {
    font-size: var(--fs-small);
    display: block;
    line-height: 1.4;
}

.fs-small-12 {
    font-size: var(--fs-small-12);
}

.list-numbered {
    list-style-type: decimal;
    padding-left: 20px;
}

.font-medium,
b,
strong {
    font-weight: 500;
}

.font-medium {
    font-weight: 500;
}

.font-regular {
    font-weight: 400;
}

.font-light {
    font-weight: 300;
}

.laterr-spacing {
    letter-spacing: 0.1em;
}

/* Space */

.pd {
    padding-top: var(--space);
    padding-bottom: var(--space);
}

.p-20 {
    padding: var(--space-20);
}

.p-30 {
    padding: var(--space-30);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pt-24 {
    padding-top: var(--space-24);
}

.pb-10 {
    padding-bottom: var(--space-10);
}

.pb-24 {
    padding-bottom: var(--space-24);
}

.pt-30 {
    padding-top: var(--space-30);
}

.pb-30 {
    padding-bottom: var(--space-30);
}

.pt-35 {
    padding-top: var(--space-35);
}

.pb-35 {
    padding-bottom: var(--space-35);
}

.pb-100{
    padding-bottom: var(--space-100);
}

.pb-120{
    padding-bottom: var(--space-120);
}
.pb-130{
    padding-bottom: var(--space-130);
}

.pt-40 {
    padding-top: var(--space-40);
}

.pt-100 {
    padding-top: var(--space-100);
}

.pt-120 {
    padding-top: var(--space-120);
}

.pt-130{
    padding-top: var(--space-130);
}


.my-80 {
    margin: 80px 0;
}



.pb-20 {
    padding-bottom: var(--space-20);
}

.pb-24 {
    padding-bottom: var(--space-24);

}

.pb-40 {
    padding-bottom: var(--space-40);
}

.pt-50 {
    padding-top: var(--space-50);
}

.pb-50 {
    padding-bottom: var(--space-50);
}

.pt-60 {
    padding-top: var(--space-60);
}

.pb-60 {
    padding-bottom: var(--space-60);
}

.pt-80 {
    padding-top: var(--space-80);
}

.pb-80 {
    padding-bottom: var(--space-80);
}

.pd-100 {
    padding-bottom: var(--space-100);
}


.px-20 {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
}

.px-30 {
    padding-left: var(--space-30);
    padding-right: var(--space-30);
}

.px-40 {
    padding-left: var(--space-40);
    padding-right: var(--space-40);
}

.px-50 {
    padding-left: var(--space-50);
    padding-right: var(--space-50);
}

.px-60 {
    padding-left: var(--space-60);
    padding-right: var(--space-60);
}

.px-80{
     padding-left: var(--space-80);
    padding-right: var(--space-80);
}

.px-100{
    padding-left: var(--space-100);
    padding-right: var(--space-100);
}

.py-15 {
    padding-top: var(--space-15);
    padding-bottom: var(--space-15);
}

.py-20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.py-24 {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

.py-30 {
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
}

.py-40 {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
}

.py-50 {
    padding-top: var(--space-50);
    padding-bottom: var(--space-50);
}

.ps-50 {
    padding-left: var(--space-50);
}

.py-60 {
    padding-top: var(--space-60);
    padding-bottom: var(--space-60);
}

.py-80 {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
}
.py-100{
    padding-top: var(--space-100);
    padding-bottom: var(--space-100);
}

.pb-20 {
    padding-bottom: var(--space-20);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pb-15 {
    padding-bottom: var(--space-15);
}


.mt {
    margin-top: var(--space);
    margin-bottom: var(--space);
}
.mb-10 {
    margin-bottom: var(--space-10);
}

.mb-20 {
    margin-bottom: var(--space-20);
}

.mt-20 {
    margin-top: var(--space-20);
}

.mt-24 {
    margin-top: var(--space-24);
}

.mb-24 {
    margin-bottom: var(--space-24);
}

.mt-30 {
    margin-top: var(--space-30);
}

.mb-30 {
    margin-bottom: var(--space-30);
}

.mt-35 {
    margin-top: var(--space-35);
}

.mb-35 {
    margin-bottom: var(--space-35);
}

.mt-40 {
    margin-top: var(--space-40);
}

.mb-40 {
    margin-bottom: var(--space-40);
}

.mt-50 {
    margin-top: var(--space-50);
}

.mb-50 {
    margin-bottom: var(--space-50);
}

.mt-60 {
    margin-top: var(--space-60);
}

.mb-60 {
    margin-bottom: var(--space-60);
}

.mt-80 {
    margin-top: var(--space-80);
}

.mb-80 {
    margin-bottom: var(--space-80);
}

.pb-100 {
    padding-bottom: var(--space-100);
}

.gap-15 {
    gap: var(--space-15);
}

.gap-20 {
    gap: var(--space-20);
}

.gap-24 {
    gap: var(--space-24);
}

.gap-30 {
    gap: var(--space-30);
}

.gap-40 {
    gap: var(--space-40);
}

.gap-50 {
    gap: var(--space-50);
}

.gap-60 {
    gap: var(--space-60);
}

.gap-80 {
    gap: var(--space-80);
}

.gap-100 {
    gap: var(--space-100);
}

.aspect-ratio-4-3 {
    aspect-ratio: 4/3;
}



.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}


/* Color */
.text-100 {
    color: var(--font-100);
}

.text-purple {
    color: var(--font-pulple);
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-gd {
    background: linear-gradient(90deg, #0071A8 1.07%, #94CC78 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.text-muted {
    color: var(--muted);
}

.fill-400 {
    fill: var(--font-400);
}

.hover-fill-400:hover {
    fill: var(--primary-color);
}

/* Bg Color */
.bg-clr-primary{
    background-color: var(--primary-color);
}
.bg-gd-primary {
    background: linear-gradient(90deg, #0071A8 1.07%, #94CC78 100%);
}

.bg-gd-light {
    background: linear-gradient(112.72deg, #FEFEFE 32.58%, #DFDFDF 111.98%);
}

.bg-pulple{
    background-color: var(--font-pulple);
}

.content ul,
.ul-list {
    list-style-type: disc;
    padding-left: 20px;
}

.content ol,
.ol-list {
    list-style-type: decimal;
    padding-left: 20px;
}

.accordion-content ul{
    list-style-type: disc;
    padding-left: 3rem ;
}

.accordion-content ul ul{
    padding-left: 40px;
}

.accordion-content ol{
    list-style-type: decimal;
    padding-left: 3rem ;
}
.accordion-content ol ol{
    padding-left: 40px;
}
.accordion-content hr{
    margin: 40px 0;
}

.accordion-content > *{
    margin-bottom: 16px;
}

.accordion-custom-list ul,.accordion-custom-list ol{
    padding-left: 3rem ;
}

table, td, th {
  border: 1px solid #D6D7D9;
  padding: 20px;
  background-color: #F5F5F5;
}

table {
  border-collapse: collapse;
}


.btn {
    padding: 12px;
}

.btn-clr-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 0;
}

.btn-clr-primary:hover {
    background-color: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.text-white .btn-clr-primary:hover {
    background-color: #fff;
    color: var(--font-whiter) !important;
    border: 1px solid var(--font-white) !important;
}

.shadow-2 {
    box-shadow: 0px 4px 18.3px 3px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
}

.z-2 {
    z-index: 2;
}

.form-control:focus{
    box-shadow:none;
    border-bottom: 1px solid var(--font-100);
}

.form-control {
    border: 0;
    border-bottom: 1px solid var(--font-100);
    border-radius: 0;
}

.dropdown.bootstrap-select {
    width: 100% !important;
}

.dropdown.bootstrap-select button {
    width: 100%;
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--font-100);
    font-size: var(--font-size-base);
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem .75rem;
}

.btn:first-child:hover, :not(.btn-check)+.btn:hover {
    color: var(--font-100);
    background-color: transparent;
    border-color: var(--font-100);
}

.btn-link-icon:hover {
     color: var(--font-100);
    background-color: transparent !important;
    border-color: transparent !important;
}

button:focus{
    outline: none !important;
}

/* ===== responsive ===== */
@media (min-width: 1919px) {
    .container {
        max-width: 1700px;
    }
}
@media (max-width: 1919px) {
    @media (min-width: 1199px) {
        .card-bs-sv.card-bs-sv-2 .card-inner-cont p{
            font-size: 18px;
        }
        .card-bs-sv .box-incard .h3 {
            font-size: 1.7rem;
        }

    }

    @media (min-width: 768px) {
        .card-bs-sv.card-bs-sv-2 .card-inner-cont p{
            font-size: 16px;
        }
    }
}
@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --line-height-base: 1.6;

        /* Font sizes */
        --fs-h1: 44px;
        --fs-h2: 30px;
        --fs-h3: 24px;
        --fs-h4: 20px;
        --fs-h5: 18px;
        --fs-h6: 16px;
        --fs-small: 15px;
        --fs-small-12: 12px;

        --btn-size: 56px;
        --font-size-num: 24px;
        --gap-xl: 36px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --space-24: 24px;

        --space-40: 40px;
        --space-35: 35px;
        --space-30: 30px;

    }
}






@media (min-width: 576px) {
    /* Space */

    .pd-sm {
        padding-top: var(--space);
        padding-bottom: var(--space);
    }

    .p-sm-20 {
        padding: var(--space-20);
    }

    .p-sm-30 {
        padding: var(--space-30);
    }

    .pt-sm-20 {
        padding-top: var(--space-20);
    }

    .pt-sm-24 {
        padding-top: var(--space-24);
    }

    .pb-sm-24 {
        padding-bottom: var(--space-24);
    }

    .pt-sm-30 {
        padding-top: var(--space-30);
    }

    .pb-sm-30 {
        padding-bottom: var(--space-30);
    }

    .pt-sm-35 {
        padding-top: var(--space-35);
    }

    .pb-sm-35 {
        padding-bottom: var(--space-35);
    }

    .pt-sm-40 {
        padding-top: var(--space-40);
    }

    .pt-sm-100 {
        padding-top: var(--space-100);
    }

    .pt-sm-120 {
        padding-top: var(--space-120);
    }


    .pt-sm-20 {
        padding-top: var(--space-20);
    }


    .pb-sm-20 {
        padding-bottom: var(--space-20);
    }

    .pb-sm-24 {
        padding-bottom: var(--space-24);

    }

    .pb-sm-40 {
        padding-bottom: var(--space-40);
    }

    .pt-sm-50 {
        padding-top: var(--space-50);
    }

    .pb-sm-50 {
        padding-bottom: var(--space-50);
    }

    .pt-sm-60 {
        padding-top: var(--space-60);
    }

    .pb-sm-60 {
        padding-bottom: var(--space-60);
    }

    .pt-sm-80 {
        padding-top: var(--space-80);
    }

    .pb-sm-80 {
        padding-bottom: var(--space-80);
    }

    .pd-sm-100 {
        padding-bottom: var(--space-100);
    }


    .px-sm-20 {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    .px-sm-30 {
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }

    .px-sm-40 {
        padding-left: var(--space-40);
        padding-right: var(--space-40);
    }

    .px-sm-50 {
        padding-left: var(--space-50);
        padding-right: var(--space-50);
    }

    .px-sm-60 {
        padding-left: var(--space-60);
        padding-right: var(--space-60);
    }

    .py-sm-20 {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .py-sm-30 {
        padding-top: var(--space-30);
        padding-bottom: var(--space-30);
    }

    .py-sm-40 {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
    }

    .py-sm-50 {
        padding-top: var(--space-50);
        padding-bottom: var(--space-50);
    }

    .py-sm-60 {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }

    .pb-sm-15 {
        padding-bottom: var(--space-15);
    }


    .mt-sm {
        margin-top: var(--space);
        margin-bottom: var(--space);
    }

    .mb-sm-20 {
        margin-bottom: var(--space-20);
    }

    .mt-sm-20 {
        margin-top: var(--space-20);
    }

    .mt-sm-24 {
        margin-top: var(--space-24);
    }

    .mb-sm-24 {
        margin-bottom: var(--space-24);
    }

    .mt-sm-30 {
        margin-top: var(--space-30);
    }

    .mb-sm-30 {
        margin-bottom: var(--space-30);
    }

    .mt-sm-35 {
        margin-top: var(--space-35);
    }

    .mb-sm-35 {
        margin-bottom: var(--space-35);
    }

    .mt-sm-40 {
        margin-top: var(--space-40);
    }

    .mb-sm-40 {
        margin-bottom: var(--space-40);
    }

    .mt-sm-50 {
        margin-top: var(--space-50);
    }

    .mb-sm-50 {
        margin-bottom: var(--space-50);
    }

    .mt-sm-60 {
        margin-top: var(--space-60);
    }

    .mb-sm-60 {
        margin-bottom: var(--space-60);
    }

    .mt-sm-80 {
        margin-top: var(--space-80);
    }

    .mb-sm-80 {
        margin-bottom: var(--space-80);
    }

    .pb-sm-100 {
        padding-bottom: var(--space-100);
    }

    .gap-sm-15 {
        gap: var(--space-15);
    }

    .gap-sm-24 {
        gap: var(--space-24);
    }

    .gap-sm-30 {
        gap: var(--space-30);
    }

    .gap-sm-40 {
        gap: var(--space-40);
    }

    .gap-sm-50 {
        gap: var(--space-50);
    }

    .gap-sm-60 {
        gap: var(--space-60);
    }

    .gap-sm-80 {
        gap: var(--space-80);
    }

    .gap-sm-100 {
        gap: var(--space-100);
    }
}

@media (min-width: 768px) {
    /* Space */

    .pd-md {
        padding-top: var(--space);
        padding-bottom: var(--space);
    }

    .p-md-20 {
        padding: var(--space-20);
    }

    .p-md-30 {
        padding: var(--space-30);
    }

    .pt-md-20 {
        padding-top: var(--space-20);
    }

    .pb-md-20 {
        padding-bottom: var(--space-20);
    }

    .pt-md-24 {
        padding-top: var(--space-24);
    }

    .pb-md-24 {
        padding-bottom: var(--space-24);
    }

    .pt-md-30 {
        padding-top: var(--space-30);
    }

    .pb-md-30 {
        padding-bottom: var(--space-30);
    }

    .pt-md-35 {
        padding-top: var(--space-35);
    }

    .pb-md-35 {
        padding-bottom: var(--space-35);
    }

    .pt-md-40 {
        padding-top: var(--space-40);
    }

    .pt-md-100 {
        padding-top: var(--space-100);
    }

    .pt-md-120 {
        padding-top: var(--space-120);
    }




    .pb-md-20 {
        padding-bottom: var(--space-20);
    }

    .pb-md-24 {
        padding-bottom: var(--space-24);

    }

    .pb-md-40 {
        padding-bottom: var(--space-40);
    }

    .pt-md-50 {
        padding-top: var(--space-50);
    }

    .pb-md-50 {
        padding-bottom: var(--space-50);
    }

    .pt-md-60 {
        padding-top: var(--space-60);
    }

    .pb-md-60 {
        padding-bottom: var(--space-60);
    }

    .pt-md-80 {
        padding-top: var(--space-80);
    }

    .pb-md-80 {
        padding-bottom: var(--space-80);
    }

    .pd-md-100 {
        padding-bottom: var(--space-100);
    }


    .px-md-20 {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    .px-md-30 {
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }

    .px-md-40 {
        padding-left: var(--space-40);
        padding-right: var(--space-40);
    }

    .px-md-50 {
        padding-left: var(--space-50);
        padding-right: var(--space-50);
    }

    .px-md-60 {
        padding-left: var(--space-60);
        padding-right: var(--space-60);
    }

    .px-md-80{
        padding-left: var(--space-80);
        padding-right: var(--space-80);
    }

    .py-md-20 {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .py-md-30 {
        padding-top: var(--space-30);
        padding-bottom: var(--space-30);
    }

    .py-md-40 {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
    }

    .py-md-50 {
        padding-top: var(--space-50);
        padding-bottom: var(--space-50);
    }

    .py-md-60 {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }

    .pb-md-15 {
        padding-bottom: var(--space-15);
    }


    .mt-md {
        margin-top: var(--space);
        margin-bottom: var(--space);
    }

    .mt-md-20 {
        margin-top: var(--space-20);
    }

    .mb-md-20 {
        margin-bottom: var(--space-20);
    }

    .mt-md-24 {
        margin-top: var(--space-24);
    }

    .mb-md-24 {
        margin-bottom: var(--space-24);
    }

    .mt-md-30 {
        margin-top: var(--space-30);
    }

    .mb-md-30 {
        margin-bottom: var(--space-30);
    }

    .mt-md-35 {
        margin-top: var(--space-35);
    }

    .mb-md-35 {
        margin-bottom: var(--space-35);
    }

    .mt-md-40 {
        margin-top: var(--space-40);
    }

    .mb-md-40 {
        margin-bottom: var(--space-40);
    }

    .mt-md-50 {
        margin-top: var(--space-50);
    }

    .mb-md-50 {
        margin-bottom: var(--space-50);
    }

    .mt-md-60 {
        margin-top: var(--space-60);
    }

    .mb-md-60 {
        margin-bottom: var(--space-60);
    }

    .mt-md-80 {
        margin-top: var(--space-80);
    }

    .mb-md-80 {
        margin-bottom: var(--space-80);
    }

    .pb-md-100 {
        padding-bottom: var(--space-100);
    }

    .gap-md-15 {
        gap: var(--space-15);
    }

    .gap-md-20 {
        gap: var(--space-20);
    }

    .gap-md-24 {
        gap: var(--space-24);
    }

    .gap-md-30 {
        gap: var(--space-30);
    }

    .gap-md-40 {
        gap: var(--space-40);
    }

    .gap-md-50 {
        gap: var(--space-50);
    }

    .gap-md-60 {
        gap: var(--space-60);
    }

    .gap-md-80 {
        gap: var(--space-80);
    }

    .gap-md-100 {
        gap: var(--space-100);
    }
}

@media (min-width: 992px) {
    /* Space */

    .pd-lg {
        padding-top: var(--space);
        padding-bottom: var(--space);
    }

    .p-lg-20 {
        padding: var(--space-20);
    }

    .p-lg-30 {
        padding: var(--space-30);
    }

    .pt-lg-20 {
        padding-top: var(--space-20);
    }

    .pb-lg-20 {
        padding-bottom: var(--space-20);
    }

    .pt-lg-24 {
        padding-top: var(--space-24);
    }

    .pb-lg-24 {
        padding-bottom: var(--space-24);
    }

    .pt-lg-30 {
        padding-top: var(--space-30);
    }

    .pb-lg-30 {
        padding-bottom: var(--space-30);
    }

    .pt-lg-35 {
        padding-top: var(--space-35);
    }

    .pb-lg-35 {
        padding-bottom: var(--space-35);
    }

    .pt-lg-40 {
        padding-top: var(--space-40);
    }

    .pt-lg-100 {
        padding-top: var(--space-100);
    }

    .pt-lg-120 {
        padding-top: var(--space-120);
    }




    .pb-lg-20 {
        padding-bottom: var(--space-20);
    }

    .pb-lg-24 {
        padding-bottom: var(--space-24);

    }

    .pb-lg-40 {
        padding-bottom: var(--space-40);
    }

    .pt-lg-50 {
        padding-top: var(--space-50);
    }

    .pb-lg-50 {
        padding-bottom: var(--space-50);
    }

    .pt-lg-60 {
        padding-top: var(--space-60);
    }

    .pb-lg-60 {
        padding-bottom: var(--space-60);
    }

    .pt-lg-80 {
        padding-top: var(--space-80);
    }

    .pb-lg-80 {
        padding-bottom: var(--space-80);
    }

    .pd-lg-100 {
        padding-bottom: var(--space-100);
    }


    .px-lg-20 {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    .px-lg-30 {
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }

    .px-lg-40 {
        padding-left: var(--space-40);
        padding-right: var(--space-40);
    }

    .px-lg-50 {
        padding-left: var(--space-50);
        padding-right: var(--space-50);
    }

    .px-lg-60 {
        padding-left: var(--space-60);
        padding-right: var(--space-60);
    }

    .px-lg-100 {
        padding-left: var(--space-100);
        padding-right: var(--space-100);
    }

    

    .py-lg-20 {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .py-lg-30 {
        padding-top: var(--space-30);
        padding-bottom: var(--space-30);
    }

    .py-lg-40 {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
    }

    .py-lg-50 {
        padding-top: var(--space-50);
        padding-bottom: var(--space-50);
    }

    .py-lg-60 {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }

    .pb-lg-15 {
        padding-bottom: var(--space-15);
    }


    .mt-lg {
        margin-top: var(--space);
        margin-bottom: var(--space);
    }

    .mt-lg-20 {
        margin-top: var(--space-20);
    }

    .mb-lg-20 {
        margin-bottom: var(--space-20);
    }

    .mt-lg-24 {
        margin-top: var(--space-24);
    }

    .mb-lg-24 {
        margin-bottom: var(--space-24);
    }

    .mt-lg-30 {
        margin-top: var(--space-30);
    }

    .mb-lg-30 {
        margin-bottom: var(--space-30);
    }

    .mt-lg-35 {
        margin-top: var(--space-35);
    }

    .mb-lg-35 {
        margin-bottom: var(--space-35);
    }

    .mt-lg-40 {
        margin-top: var(--space-40);
    }

    .mb-lg-40 {
        margin-bottom: var(--space-40);
    }

    .mt-lg-50 {
        margin-top: var(--space-50);
    }

    .mb-lg-50 {
        margin-bottom: var(--space-50);
    }

    .mt-lg-60 {
        margin-top: var(--space-60);
    }

    .mb-lg-60 {
        margin-bottom: var(--space-60);
    }

    .mt-lg-80 {
        margin-top: var(--space-80);
    }

    .mb-lg-80 {
        margin-bottom: var(--space-80);
    }

    .pb-lg-100 {
        padding-bottom: var(--space-100);
    }

    .gap-lg-15 {
        gap: var(--space-15);
    }

    .gap-lg-20 {
        gap: var(--space-20);
    }

    .gap-lg-24 {
        gap: var(--space-24);
    }

    .gap-lg-30 {
        gap: var(--space-30);
    }

    .gap-lg-40 {
        gap: var(--space-40);
    }

    .gap-lg-50 {
        gap: var(--space-50);
    }

    .gap-lg-60 {
        gap: var(--space-60);
    }

    .gap-lg-80 {
        gap: var(--space-80);
    }

    .gap-lg-100 {
        gap: var(--space-100);
    }

    .ps-lg-80 {
        padding-left: var(--space-80);
    }
}

@media (min-width: 1200px) {

    /* Space */

    .pd-xl {
        padding-top: var(--space);
        padding-bottom: var(--space);
    }

    .p-xl-20 {
        padding: var(--space-20);
    }

    .p-xl-30 {
        padding: var(--space-30);
    }

    .pt-xl-20 {
        padding-top: var(--space-20);
    }

    .pb-xl-20 {
        padding-bottom: var(--space-20);
    }

    .pt-xl-24 {
        padding-top: var(--space-24);
    }

    .pb-xl-24 {
        padding-bottom: var(--space-24);
    }

    .pt-xl-30 {
        padding-top: var(--space-30);
    }

    .pb-xl-30 {
        padding-bottom: var(--space-30);
    }

    .pt-xl-35 {
        padding-top: var(--space-35);
    }

    .pb-xl-35 {
        padding-bottom: var(--space-35);
    }

    .pt-xl-40 {
        padding-top: var(--space-40);
    }

    .pt-xl-100 {
        padding-top: var(--space-100);
    }

    .pt-xl-120 {
        padding-top: var(--space-120);
    }

    px-xl-100 {
        padding-left: var(--space-100);
        padding-right: var(--space-100);
    }




    .pb-xl-20 {
        padding-bottom: var(--space-20);
    }

    .pb-xl-24 {
        padding-bottom: var(--space-24);

    }

    .pb-xl-40 {
        padding-bottom: var(--space-40);
    }

    .pt-xl-50 {
        padding-top: var(--space-50);
    }

    .pb-xl-50 {
        padding-bottom: var(--space-50);
    }

    .pt-xl-60 {
        padding-top: var(--space-60);
    }

    .pb-xl-60 {
        padding-bottom: var(--space-60);
    }

    .pt-xl-80 {
        padding-top: var(--space-80);
    }

    .pb-xl-80 {
        padding-bottom: var(--space-80);
    }

    .pd-xl-100 {
        padding-bottom: var(--space-100);
    }


    .px-xl-20 {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    .px-xl-30 {
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }

    .px-xl-40 {
        padding-left: var(--space-40);
        padding-right: var(--space-40);
    }

    .px-xl-50 {
        padding-left: var(--space-50);
        padding-right: var(--space-50);
    }

    .px-xl-60 {
        padding-left: var(--space-60);
        padding-right: var(--space-60);
    }

    .py-xl-20 {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .py-xl-30 {
        padding-top: var(--space-30);
        padding-bottom: var(--space-30);
    }

    .py-xl-40 {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
    }

    .py-xl-50 {
        padding-top: var(--space-50);
        padding-bottom: var(--space-50);
    }

    .py-xl-60 {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }

    .pb-xl-15 {
        padding-bottom: var(--space-15);
    }


    .mt-xl {
        margin-top: var(--space);
        margin-bottom: var(--space);
    }

    .mt-xl-20 {
        margin-top: var(--space-20);
    }

    .mb-xl-20 {
        margin-bottom: var(--space-20);
    }

    .mt-xl-24 {
        margin-top: var(--space-24);
    }

    .mb-xl-24 {
        margin-bottom: var(--space-24);
    }

    .mt-xl-30 {
        margin-top: var(--space-30);
    }

    .mb-xl-30 {
        margin-bottom: var(--space-30);
    }

    .mt-xl-35 {
        margin-top: var(--space-35);
    }

    .mb-xl-35 {
        margin-bottom: var(--space-35);
    }

    .mt-xl-40 {
        margin-top: var(--space-40);
    }

    .mb-xl-40 {
        margin-bottom: var(--space-40);
    }

    .mt-xl-50 {
        margin-top: var(--space-50);
    }

    .mb-xl-50 {
        margin-bottom: var(--space-50);
    }

    .mt-xl-60 {
        margin-top: var(--space-60);
    }

    .mb-xl-60 {
        margin-bottom: var(--space-60);
    }

    .mt-xl-80 {
        margin-top: var(--space-80);
    }

    .mb-xl-80 {
        margin-bottom: var(--space-80);
    }

    .pb-xl-100 {
        padding-bottom: var(--space-100);
    }

    .gap-xl-15 {
        gap: var(--space-15);
    }

    .gap-xl-20 {
        gap: var(--space-20);
    }

    .gap-xl-24 {
        gap: var(--space-24);
    }

    .gap-xl-30 {
        gap: var(--space-30);
    }

    .gap-xl-40 {
        gap: var(--space-40);
    }

    .gap-xl-50 {
        gap: var(--space-50);
    }

    .gap-xl-60 {
        gap: var(--space-60);
    }

    .gap-xl-80 {
        gap: var(--space-80);
    }

    .gap-xl-100 {
        gap: var(--space-100);
    }
}