:root {
    --color-primary: #222E48;
    --color-main: #525252;
    --color-white: #ffffff;
    --color-transparent: transparent;
    --color-blue: #2752A2;
    --color-orange: #F68C1F;

    --spacing-small: 0.25rem;
    --spacing-medium: clamp(0.1rem, 0.42vw, 1rem);
    --spacing-large: clamp(.1rem, 0.84vw, 2rem);
    --spacing-extra-large: clamp(.5rem, 1.3vw, 3rem);
    --spacing-2-extra-large: clamp(.5rem, 2.5vw, 6rem);

    --button-padding-vertical: 0.8rem;
    --button-padding-horizontal: clamp(1rem, 4vw, 4rem);
    --button-border-radius: 40px;

    --padding-0: 0;
    --padding-1: 0.25rem;
    --padding-2: clamp(0.1rem, 0.42vw, 1rem);
    --padding-3: clamp(.1rem, 0.84vw, 2rem);
    --padding-4: clamp(.5rem, 1.3vw, 3rem);
    --padding-5: clamp(.5rem, 2.5vw, 6rem);

    --radius-none: 0;
    --radius-sm: 7.55px;
    --radius-md: clamp(1px, 1.3vw, 50px);
    --radius-lg: clamp(1px, 1.8vw, 70px);
    --radius-xl: clamp(1px, 2.6vw, 100px);
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
}

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

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: 0 !important;
}

/* Custom Background Color */
.bg-heading {
    background-color: #242424 !important;
}

/* Custom text colors */

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

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

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

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

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


.cursor-pointer {
    cursor: pointer !important;
}

/* Section */
section {
    padding: 6.904% 0;
}

.section-b {
    padding: 0 0 6.904% 0;
}

.section-t {
    padding: 6.904% 0 0 0;
}

.container-l {
    padding: 0 0 0 7.1%;
}

/* Typography */
.font-heading {
    font-size: var(--font-size-heading);
}

.font-subheading {
    font-size: var(--font-size-subheading);
}

.font-text {
    font-size: var(--font-size-text);
}

/* Rounded Corners */
.rounded-none {
    border-radius: var(--radius-none);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

.rounded-top {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
}

.rounded-right {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

.rounded-bottom {
    border-bottom-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

.rounded-left {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
}

.rounded-t-sm {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.rounded-r-sm {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.rounded-b-sm {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.rounded-l-sm {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.rounded-t-md {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.rounded-b-md {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.rounded-b-lg {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.opacity-80 {
    opacity: .80 !important
}

/* Margin and Padding */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: var(--spacing-small) !important;
}

.m-2 {
    margin: var(--spacing-medium) !important;
}

.m-3 {
    margin: var(--spacing-large) !important;
}

.m-4 {
    margin: var(--spacing-extra-large) !important;
}

.m-5 {
    margin: var(--spacing-2-extra-large) !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-1 {
    margin-right: var(--spacing-small) !important;
    margin-left: var(--spacing-small) !important;
}

.mx-2 {
    margin-right: var(--spacing-medium) !important;
    margin-left: var(--spacing-medium) !important;
}

.mx-3 {
    margin-right: var(--spacing-large) !important;
    margin-left: var(--spacing-large) !important;
}

.mx-4 {
    margin-right: var(--spacing-extra-large) !important;
    margin-left: var(--spacing-extra-large) !important;
}

.mx-5 {
    margin-right: var(--spacing-2-extra-large) !important;
    margin-left: var(--spacing-2-extra-large) !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: var(--spacing-small) !important;
    margin-bottom: var(--spacing-small) !important;
}

.my-2 {
    margin-top: var(--spacing-medium) !important;
    margin-bottom: var(--spacing-medium) !important;
}

.my-3 {
    margin-top: var(--spacing-large) !important;
    margin-bottom: var(--spacing-large) !important;
}

.my-4 {
    margin-top: var(--spacing-extra-large) !important;
    margin-bottom: var(--spacing-extra-large) !important;
}

.my-5 {
    margin-top: var(--spacing-2-extra-large) !important;
    margin-bottom: var(--spacing-2-extra-large) !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: var(--spacing-small) !important;
}

.mt-2 {
    margin-top: var(--spacing-medium) !important;
}

.mt-3 {
    margin-top: var(--spacing-large) !important;
}

.mt-4 {
    margin-top: var(--spacing-extra-large) !important;
}

.mt-5 {
    margin-top: var(--spacing-2-extra-large) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: var(--spacing-small) !important;
}

.mb-2 {
    margin-bottom: var(--spacing-medium) !important;
}

.mb-3 {
    margin-bottom: var(--spacing-large) !important;
}

.mb-4 {
    margin-bottom: var(--spacing-extra-large) !important;
}

.mb-5 {
    margin-bottom: var(--spacing-2-extra-large) !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: var(--spacing-small) !important;
}

.ms-2 {
    margin-left: var(--spacing-medium) !important;
}

.ms-3 {
    margin-left: var(--spacing-large) !important;
}

.ms-4 {
    margin-left: var(--spacing-extra-large) !important;
}

.ms-5 {
    margin-left: var(--spacing-2-extra-large) !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: var(--spacing-small) !important;
}

.me-2 {
    margin-right: var(--spacing-medium) !important;
}

.me-3 {
    margin-right: var(--spacing-large) !important;
}

.me-4 {
    margin-right: var(--spacing-extra-large) !important;
}

.me-5 {
    margin-right: var(--spacing-2-extra-large) !important;
}

.p-0 {
    padding: var(--padding-0) !important;
}

.p-1 {
    padding: var(--padding-1) !important;
}

.p-2 {
    padding: var(--padding-2) !important;
}

.p-3 {
    padding: var(--padding-3) !important;
}

.p-4 {
    padding: var(--padding-4) !important;
}

.p-5 {
    padding: var(--padding-5) !important;
}

.px-0 {
    padding-right: var(--padding-0) !important;
    padding-left: var(--padding-0) !important;
}

.px-1 {
    padding-right: var(--padding-1) !important;
    padding-left: var(--padding-1) !important;
}

.px-2 {
    padding-right: var(--padding-2) !important;
    padding-left: var(--padding-2) !important;
}

.px-3 {
    padding-right: var(--padding-3) !important;
    padding-left: var(--padding-3) !important;
}

.px-4 {
    padding-right: var(--padding-4) !important;
    padding-left: var(--padding-4) !important;
}

.px-5 {
    padding-right: var(--padding-5) !important;
    padding-left: var(--padding-5) !important;
}

.py-0 {
    padding-top: var(--padding-0) !important;
    padding-bottom: var(--padding-0) !important;
}

.py-1 {
    padding-top: var(--padding-1) !important;
    padding-bottom: var(--padding-1) !important;
}

.py-2 {
    padding-top: var(--padding-2) !important;
    padding-bottom: var(--padding-2) !important;
}

.py-3 {
    padding-top: var(--padding-3) !important;
    padding-bottom: var(--padding-3) !important;
}

.py-4 {
    padding-top: var(--padding-4) !important;
    padding-bottom: var(--padding-4) !important;
}

.py-5 {
    padding-top: var(--padding-5) !important;
    padding-bottom: var(--padding-5) !important;
}

.pt-0 {
    padding-top: var(--padding-0) !important;
}

.pt-1 {
    padding-top: var(--padding-1) !important;
}

.pt-2 {
    padding-top: var(--padding-2) !important;
}

.pt-3 {
    padding-top: var(--padding-3) !important;
}

.pt-4 {
    padding-top: var(--padding-4) !important;
}

.pt-5 {
    padding-top: var(--padding-5) !important;
}

.pe-0 {
    padding-right: var(--padding-0) !important;
}

.pe-1 {
    padding-right: var(--padding-1) !important;
}

.pe-2 {
    padding-right: var(--padding-2) !important;
}

.pe-3 {
    padding-right: var(--padding-3) !important;
}

.pe-4 {
    padding-right: var(--padding-4) !important;
}

.pe-5 {
    padding-right: var(--padding-5) !important;
}

.pb-0 {
    padding-bottom: var(--padding-0) !important;
}

.pb-1 {
    padding-bottom: var(--padding-1) !important;
}

.pb-2 {
    padding-bottom: var(--padding-2) !important;
}

.pb-3 {
    padding-bottom: var(--padding-3) !important;
}

.pb-4 {
    padding-bottom: var(--padding-4) !important;
}

.pb-5 {
    padding-bottom: var(--padding-5) !important;
}

.ps-0 {
    padding-left: var(--padding-0) !important;
}

.ps-1 {
    padding-left: var(--padding-1) !important;
}

.ps-2 {
    padding-left: var(--padding-2) !important;
}

.ps-3 {
    padding-left: var(--padding-3) !important;
}

.ps-4 {
    padding-left: var(--padding-4) !important;
}

.ps-5 {
    padding-left: var(--padding-5) !important;
}

@media (min-width:768px) {

    .container,
    .container-lg,
    .container-md {
        max-width: clamp(1px, 80.7292%, 999999px) !important;
        padding: 0 !important;
    }

    .container-sm {
        max-width: clamp(1px, 86.693%, 999999px) !important;
        padding: 0 !important;
    }
}

@media (max-width:767px) {

    /* Margin and Padding */
    section {
        padding: 20% 0;
    }

    .section-b {
        padding: 0 0 20% 0;
    }

    .section-t {
        padding: 20% 0 0 0;
    }

    .m-md-0 {
        margin: 0 !important;
    }

    .m-md-1 {
        margin: var(--spacing-small) !important;
    }

    .m-md-2 {
        margin: var(--spacing-medium) !important;
    }

    .m-md-3 {
        margin: var(--spacing-large) !important;
    }

    .m-md-4 {
        margin: var(--spacing-extra-large) !important;
    }

    .m-md-5 {
        margin: var(--spacing-2-extra-large) !important;

    }

    .mx-md-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mx-md-1 {
        margin-left: var(--spacing-small) !important;
        margin-right: var(--spacing-small) !important;
    }

    .mx-md-2 {
        margin-left: var(--spacing-medium) !important;
        margin-right: var(--spacing-medium) !important;
    }


    .mx-md-3 {
        margin-left: var(--spacing-large) !important;
        margin-right: var(--spacing-large) !important;
    }


    .mx-md-4 {
        margin-left: var(--spacing-extra-large) !important;
        margin-right: var(--spacing-large) !important;
    }

    .mx-md-5 {
        margin-left: var(--spacing-2-extra-large) !important;
        margin-right: var(--spacing-large) !important;

    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-md-1 {
        margin-top: var(--spacing-small) !important;
        margin-bottom: var(--spacing-small) !important;
    }

    .my-md-2 {
        margin-top: var(--spacing-medium) !important;
        margin-bottom: var(--spacing-medium) !important;
    }


    .my-md-3 {
        margin-top: var(--spacing-large) !important;
        margin-bottom: var(--spacing-large) !important;
    }


    .my-md-4 {
        margin-top: var(--spacing-extra-large) !important;
        margin-bottom: var(--spacing-large) !important;
    }

    .my-md-5 {
        margin-top: var(--spacing-2-extra-large) !important;
        margin-bottom: var(--spacing-large) !important;

    }

    .mt-md-0 {
        margin-top: 0 !important;
    }

    .mt-md-1 {
        margin-top: var(--spacing-small) !important;
    }

    .mt-md-2 {
        margin-top: var(--spacing-medium) !important;
    }

    .mt-md-3 {
        margin-top: var(--spacing-large) !important;
    }

    .mt-md-4 {
        margin-top: var(--spacing-extra-large) !important;
    }

    .mt-md-5 {
        margin-top: var(--spacing-2-extra-large) !important;
    }

    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .mb-md-1 {
        margin-bottom: var(--spacing-small) !important;
    }

    .mb-md-2 {
        margin-bottom: var(--spacing-medium) !important;
    }

    .mb-md-3 {
        margin-bottom: var(--spacing-large) !important;
    }

    .mb-md-4 {
        margin-bottom: var(--spacing-extra-large) !important;
    }

    .mb-md-5 {
        margin-bottom: var(--spacing-2-extra-large) !important;
    }

    .ms-md-0 {
        margin-left: 0 !important;
    }

    .ms-md-1 {
        margin-left: var(--spacing-small) !important;
    }

    .ms-md-2 {
        margin-left: var(--spacing-medium) !important;
    }

    .ms-md-3 {
        margin-left: var(--spacing-large) !important;
    }

    .ms-md-4 {
        margin-left: var(--spacing-extra-large) !important;
    }

    .ms-md-5 {
        margin-left: var(--spacing-2-extra-large) !important;
    }

    .me-md-0 {
        margin-right: 0 !important;
    }

    .me-md-1 {
        margin-right: var(--spacing-small) !important;
    }

    .me-md-2 {
        margin-right: var(--spacing-medium) !important;
    }

    .me-md-3 {
        margin-right: var(--spacing-large) !important;
    }

    .me-md-4 {
        margin-right: var(--spacing-extra-large) !important;
    }

    .me-md-5 {
        margin-right: var(--spacing-2-extra-large) !important;
    }


    .p-md-0 {
        padding: var(--padding-0) !important;
    }

    .p-md-1 {
        padding: var(--padding-1) !important;
    }

    .p-md-2 {
        padding: var(--padding-2) !important;
    }

    .p-md-3 {
        padding: var(--padding-3) !important;
    }

    .p-md-4 {
        padding: var(--padding-4) !important;
    }

    .p-md-5 {
        padding: var(--padding-5) !important;
    }

    .px-md-0 {
        padding-right: var(--padding-0) !important;
        padding-left: var(--padding-0) !important;
    }

    .px-md-1 {
        padding-right: var(--padding-1) !important;
        padding-left: var(--padding-1) !important;
    }

    .px-md-2 {
        padding-right: var(--padding-2) !important;
        padding-left: var(--padding-2) !important;
    }

    .px-md-3 {
        padding-right: var(--padding-3) !important;
        padding-left: var(--padding-3) !important;
    }

    .px-md-4 {
        padding-right: var(--padding-4) !important;
        padding-left: var(--padding-4) !important;
    }

    .px-md-5 {
        padding-right: var(--padding-5) !important;
        padding-left: var(--padding-5) !important;
    }

    .py-md-0 {
        padding-top: var(--padding-0) !important;
        padding-bottom: var(--padding-0) !important;
    }

    .py-md-1 {
        padding-top: var(--padding-1) !important;
        padding-bottom: var(--padding-1) !important;
    }

    .py-md-2 {
        padding-top: var(--padding-2) !important;
        padding-bottom: var(--padding-2) !important;
    }

    .py-md-3 {
        padding-top: var(--padding-3) !important;
        padding-bottom: var(--padding-3) !important;
    }

    .py-md-4 {
        padding-top: var(--padding-4) !important;
        padding-bottom: var(--padding-4) !important;
    }

    .py-md-5 {
        padding-top: var(--padding-5) !important;
        padding-bottom: var(--padding-5) !important;
    }

    .pt-md-0 {
        padding-top: var(--padding-0) !important;
    }

    .pt-md-1 {
        padding-top: var(--padding-1) !important;
    }

    .pt-md-2 {
        padding-top: var(--padding-2) !important;
    }

    .pt-md-3 {
        padding-top: var(--padding-3) !important;
    }

    .pt-md-4 {
        padding-top: var(--padding-4) !important;
    }

    .pt-md-5 {
        padding-top: var(--padding-5) !important;
    }

    .pe-md-0 {
        padding-right: var(--padding-0) !important;
    }

    .pe-md-1 {
        padding-right: var(--padding-1) !important;
    }

    .pe-md-2 {
        padding-right: var(--padding-2) !important;
    }

    .pe-md-3 {
        padding-right: var(--padding-3) !important;
    }

    .pe-md-4 {
        padding-right: var(--padding-4) !important;
    }

    .pe-md-5 {
        padding-right: var(--padding-5) !important;
    }

    .pb-md-0 {
        padding-bottom: var(--padding-0) !important;
    }

    .pb-md-1 {
        padding-bottom: var(--padding-1) !important;
    }

    .pb-md-2 {
        padding-bottom: var(--padding-2) !important;
    }

    .pb-md-3 {
        padding-bottom: var(--padding-3) !important;
    }

    .pb-md-4 {
        padding-bottom: var(--padding-4) !important;
    }

    .pb-md-5 {
        padding-bottom: var(--padding-5) !important;
    }

    .ps-md-0 {
        padding-left: var(--padding-0) !important;
    }

    .ps-md-1 {
        padding-left: var(--padding-1) !important;
    }

    .ps-md-2 {
        padding-left: var(--padding-2) !important;
    }

    .ps-md-3 {
        padding-left: var(--padding-3) !important;
    }

    .ps-md-4 {
        padding-left: var(--padding-4) !important;
    }

    .ps-md-5 {
        padding-left: var(--padding-5) !important;
    }

    .container,
    .container-lg,
    .container-sm {
        max-width: clamp(1px, 87.28%, 1775px) !important;
        padding: 0 !important;
    }

    .container-md {
        max-width: clamp(1px, 94.94%, 1775px) !important;
        padding: 0 !important;
    }

    :root {
        --radius-md: clamp(1px, 4vw, 25px);

        --spacing-medium: clamp(.1rem, 2.32559vw, 1rem);
        --spacing-large: clamp(.5rem, 3.05343vw, 1.5rem);
        --spacing-extra-large: clamp(.5rem, 5.1vw, 2.5rem);
        --spacing-2-extra-large: clamp(.5rem, 6.10686vw, 3rem);

        --padding-3: clamp(.1rem, 2.32559vw, 1rem);
        --padding-4: clamp(.5rem, 3.05343vw, 1.5rem);
        --padding-5: clamp(.5rem, 6.10686vw, 3rem);
    }
}