/**
 * Main Style CSS File
 * This file contains the main styles for the website.
 * oom_cpsk
*/

@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
* {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

:root {
    /* Colors */
    --primary-color: #10218B;
    --secondary-color: #222222;
    --background-color: #23395D;
    --text-color: #666666;
    --border-color: #CBCEE1;
    --white-color: #FFFFFF;
    --gray-color: #DEDEDE;
    --transperance-white-color: #ffffffeb;
    --link-color: #222222;
    --link-hover-color: #10218B;
    
    /* Typography */
    --body-font-family: 'Open Sans', sans-serif;
    --heading-font-family: 'Asap', sans-serif;
    --line-height: 1.4;

    --spacing-xs: 8px;
    --spacing-sm: 20px;
    --spacing-md: 25px;
    --spacing-lg: 40px;
    --spacing-xl: 48px;
    --spacing-xxl: 80px;

    --spacing-1: 10px;
    --spacing-2: 20px;
    --spacing-3: 30px;
    --spacing-4: 40px;
    --spacing-5: 50px;
    --spacing-6: 60px;
    --spacing-7: 70px;
    --spacing-8: 80px;
    --spacing-9: 90px;
    --spacing-10: 100px;

    --font-size-base: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
    --font-heading: clamp(1.5rem, 1.1359rem + 1.5534vw, 3rem);
    --font-xl: clamp(2.5rem, 1.5898rem + 3.8835vw, 6.25rem);
    --font-lg: clamp(2rem, 1.2718rem + 3.1068vw, 5rem);
    --font-md: clamp(1.25rem, 1.0680rem + 0.7767vw, 2rem);
    --font-sm: clamp(1.125rem, 1.0340rem + 0.3883vw, 1.5rem);

    --counter-font-lg: clamp(3.125rem, 1.1529rem + 8.4142vw, 11.25rem);
    --counter-font-sm: clamp(2.5rem, 0.9830rem + 6.4725vw, 8.75rem);
}

/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    overflow-x: hidden;
}
body {
    font-family: var(--body-font-family);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--text-color);
    line-height: var(--line-height);
    margin: 0;
    padding: 0;
    background: var(--white-color);
}
p{
    margin-bottom: 1rem;
}
a {
    text-decoration: none;
    color: var(--text-color);
}
.oom-full-width {
    width: 100%;
}
.oom-max-width {
    max-width:1920px;
	width:100%;
	margin:0 auto;
}
.container-fluid{
    width: 90%;
    max-width: 1728px;
    margin: 0 auto;
}
.container {
    width: 80%;
    max-width: 1460px;
    margin: 0 auto;
}
.oom-section {
    padding: var(--spacing-lg) 0;
}
.text-primary {
    color: var(--primary-color);
}
.text-secondary {
    color: var(--secondary-color);
}
.text-white {
    color: var(--white-color);
}
.text-gray {
    color: var(--gray-color);
}
.bg-primary {
    background-color: var(--primary-color);
}
.bg-secondary {
    background-color: var(--secondary-color);
}
.bg-white {
    background-color: var(--white-color);
}
.bg-default {
    background-color: var(--background-color);
}
.banner-title{
    font-weight: 600;
}
.font-heading{
    font-size: var(--font-heading);
}
.font-lg {
    font-size: var(--font-lg);
}
.font-md {
    font-size: var(--font-md);
}
.font-sm {
    font-size: var(--font-sm);
}
.font-s{
    font-size: 14px;
}
.font-xs {
    font-size: 12px;
}
.heading, h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: 600;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}
.text-underline {
    text-decoration: underline;
}
.text-bold {
    font-weight: 700;
}
.text-light {
    font-weight: 300;
}
.text-italic {
    font-style: italic;
}
.text-justify {
    text-align: justify;
}
.btn{
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    color: var(--text-color);
    padding: 16px 32px;
    border-radius: 60px;
    display: inline-block;
}
.btn-primary{
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--white-color);
    display: inline-flex;
    gap: var(--spacing-1);
}
.btn-primary:hover{
    background-color: #151e5c;
}
.btn img{
    margin-left: var(--spacing-1);
}
.w-full{
    width: 100%;
}
.list-none{
    list-style: none;
}
.border{
    border: 1px solid var(--border-color);;
}
.border-none{
    border: unset;
}
.border-left{
    border-left: 1px solid var(--border-color);
}
.border-right{
    border-right: 1px solid var(--border-color);
}
.border-top{
    border-top: 1px solid var(--border-color);
}
.border-bottom{
    border-bottom: 1px solid var(--border-color);
}
.cursor-pointer{
    cursor: pointer;
}
li{
    margin-bottom: 10px;
}
li:last-child{
    margin-bottom: 0;
}
.image-square{
    object-fit: cover;
    aspect-ratio: 1/1;
}
.radius{
    border-radius: 24px;
}
.cover{
    object-fit: cover!important;
}
.contain{
    object-fit: contain!important;
}

/* Column */
.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
} 
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66%;
}
.col-12 {
    width: 100%;
}
.grid-col-5{
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}


/* Row */
.row {
    display: flex;
    flex-wrap: wrap;
}
.align-items-center {
    align-items: center;
}
.align-items-end{
    align-items: flex-end;
}
.align-items-start{
    align-items: flex-start;
}
.justify-start{
    justify-content: flex-start;
}
.justify-end{
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
/* Display */
.d-flex {
    display: flex;
}
.d-block {
    display: block;
}
.d-none {
    display: none;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}
.flex-direction-column {
    flex-direction: column;
}
.flex-direction-row {
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.gap{
    gap: var(--spacing-lg);
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.grid{
    display: grid;
}
.rounded{
    border-radius: 24px;
}
table {
    background-color: transparent;
    width: 100%;
    margin-block-end: 15px;
    font-size: .9em;
    border-spacing: 0;
    border-collapse: collapse;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: #F8F9FF;
}
table td, table th {
    padding: 15px;
    line-height: 1.5;
    vertical-align: top;
    border: 1px solid hsla(0, 0%, 50.2%, .5019607843);
}

/* MARGIN - four equal sides */
.m-0 {
    margin: 0;
}
.m-1 {
    margin: var(--spacing-1);
}
.m-2 {
    margin: var(--spacing-2);
}
.m-3 {
    margin: var(--spacing-3);
}
.m-4 {
    margin: var(--spacing-4);
}
.m-5 {
    margin: var(--spacing-5);
}
.m-6 {
    margin: var(--spacing-6);
}
.m-7 {
    margin: var(--spacing-7);
}
.m-8 {
    margin: var(--spacing-8);
}
.m-9 {
    margin: var(--spacing-9);
}
.m-10 {
    margin: var(--spacing-10);
}

/* MARGIN - two equal sides (Top / Bottom) */
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-1 {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
}
.my-2 {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}
.my-3 {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}
.my-4 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}
.my-5 {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}
.my-6 {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}
.my-7 {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
}
.my-8 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}
.my-9 {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
}
.my-10 {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
}

/* MARGIN - two equal sides (Left / Right) */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
.mx-1 {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
}
.mx-2 {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
}
.mx-3 {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
}
.mx-4 {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
}
.mx-5 {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
}
.mx-6 {
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
}
.mx-7 {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
}
.mx-8 {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
}
.mx-9 {
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
}
.mx-10 {
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
}

/* MARGIN - Top */
.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: var(--spacing-1);
}
.mt-2 {
    margin-top: var(--spacing-2);
}
.mt-3 {
    margin-top: var(--spacing-3);
}
.mt-4 {
    margin-top: var(--spacing-4);
}
.mt-5 {
    margin-top: var(--spacing-5);
}
.mt-6 {
    margin-top: var(--spacing-6);
}
.mt-7 {
    margin-top: var(--spacing-7);
}
.mt-8 {
    margin-top: var(--spacing-8);
}
.mt-9 {
    margin-top: var(--spacing-9);
}
.mt-10 {
    margin-top: var(--spacing-10);
}

/* MARGIN - Bottom */
.mb-0 {
    margin-bottom: 0;
}
.mb-05{
    margin-bottom: 5px;
}
.mb-1 {
    margin-bottom: var(--spacing-1);
}
.mb-2 {
    margin-bottom: var(--spacing-2);
}
.mb-3 {
    margin-bottom: var(--spacing-3);
}
.mb-4 {
    margin-bottom: var(--spacing-4);
}
.mb-5 {
    margin-bottom: var(--spacing-5);
}
.mb-6 {
    margin-bottom: var(--spacing-6);
}
.mb-7 {
    margin-bottom: var(--spacing-7);
}
.mb-8 {
    margin-bottom: var(--spacing-8);
}
.mb-9 {
    margin-bottom: var(--spacing-9);
}
.mb-10 {
    margin-bottom: var(--spacing-10);
}

/* MARGIN - Left */
.ml-0 {
    margin-left: 0;
}
.ml-1 {
    margin-left: var(--spacing-1);
}
.ml-2 {
    margin-left: var(--spacing-2);
}
.ml-3 {
    margin-left: var(--spacing-3);
}
.ml-4 {
    margin-left: var(--spacing-4);
}
.ml-5 {
    margin-left: var(--spacing-5);
}
.ml-6 {
    margin-left: var(--spacing-6);
}
.ml-7 {
    margin-left: var(--spacing-7);
}
.ml-8 {
    margin-left: var(--spacing-8);
}
.ml-9 {
    margin-left: var(--spacing-9);
}
.ml-10 {
    margin-left: var(--spacing-10);
}

/* MARGIN - Right */
.mr-0 {
    margin-right: 0;
}
.mr-1 {
    margin-right: var(--spacing-1);
}
.mr-2 {
    margin-right: var(--spacing-2);
}
.mr-3 {
    margin-right: var(--spacing-3);
}
.mr-4 {
    margin-right: var(--spacing-4);
}
.mr-5 {
    margin-right: var(--spacing-5);
}
.mr-6 {
    margin-right: var(--spacing-6);
}
.mr-7 {
    margin-right: var(--spacing-7);
}
.mr-8 {
    margin-right: var(--spacing-8);
}
.mr-9 {
    margin-right: var(--spacing-9);
}
.mr-10 {
    margin-right: var(--spacing-10);
}

/* PADDING - four equal sides */
.p-0 {
    padding: 0;
}
.p-1 {
    padding: var(--spacing-1);
}
.p-2 {
    padding: var(--spacing-2);
}
.p-3 {
    padding: var(--spacing-3);
}
.p-4 {
    padding: var(--spacing-4);
}
.p-5 {
    padding: var(--spacing-5);
}
.p-6 {
    padding: var(--spacing-6);
}
.p-7 {
    padding: var(--spacing-7);
}
.p-8 {
    padding: var(--spacing-8);
}
.p-9 {
    padding: var(--spacing-9);
}
.p-10 {
    padding: var(--spacing-10);
}

/* PADDING - two equal sides (Top / Bottom) */
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.py-1 {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
}
.py-2 {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}
.py-3 {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
.py-4 {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}
.py-5 {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
}
.py-6 {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}
.py-7 {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
}
.py-8 {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}
.py-9 {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
}
.py-10 {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}

/* PADDING - two equal sides (Left / Right) */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}
.px-1 {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
}
.px-2 {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}
.px-3 {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
}
.px-4 {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
.px-5 {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
}
.px-6 {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}
.px-7 {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
}
.px-8 {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
}
.px-9 {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
}
.px-10 {
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
}

/* PADDING - Top */
.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: var(--spacing-1);
}
.pt-2 {
    padding-top: var(--spacing-2);
}
.pt-3 {
    padding-top: var(--spacing-3);
}
.pt-4 {
    padding-top: var(--spacing-4);
}
.pt-5 {
    padding-top: var(--spacing-5);
}
.pt-6 {
    padding-top: var(--spacing-6);
}
.pt-7 {
    padding-top: var(--spacing-7);
}
.pt-8 {
    padding-top: var(--spacing-8);
}
.pt-9 {
    padding-top: var(--spacing-9);
}
.pt-10 {
    padding-top: var(--spacing-10);
}

/* PADDING - Bottom */
.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: var(--spacing-1);
}
.pb-2 {
    padding-bottom: var(--spacing-2);
}
.pb-3 {
    padding-bottom: var(--spacing-3);
}
.pb-4 {
    padding-bottom: var(--spacing-4);
}
.pb-5 {
    padding-bottom: var(--spacing-5);
}
.pb-6 {
    padding-bottom: var(--spacing-6);
}
.pb-7 {
    padding-bottom: var(--spacing-7);
}
.pb-8 {
    padding-bottom: var(--spacing-8);
}
.pb-9 {
    padding-bottom: var(--spacing-9);
}
.pb-10 {
    padding-bottom: var(--spacing-10);
}

/* PADDING - Left */
.pl-0 {
    padding-left: 0;
}
.pl-1 {
    padding-left: var(--spacing-1);
}
.pl-2 {
    padding-left: var(--spacing-2);
}
.pl-3 {
    padding-left: var(--spacing-3);
}
.pl-4 {
    padding-left: var(--spacing-4);
}
.pl-5 {
    padding-left: var(--spacing-5);
}
.pl-6 {
    padding-left: var(--spacing-6);
}
.pl-7 {
    padding-left: var(--spacing-7);
}
.pl-8 {
    padding-left: var(--spacing-8);
}
.pl-9 {
    padding-left: var(--spacing-9);
}
.pl-10 {
    padding-left: var(--spacing-10);
}

/* PADDING - Right */
.pr-0 {
    padding-right: 0;
}
.pr-1 {
    padding-right: var(--spacing-1);
}
.pr-2 {
    padding-right: var(--spacing-2);
}
.pr-3 {
    padding-right: var(--spacing-3);
}
.pr-4 {
    padding-right: var(--spacing-4);
}
.pr-5 {
    padding-right: var(--spacing-5);
}
.pr-6 {
    padding-right: var(--spacing-6);
}
.pr-7 {
    padding-right: var(--spacing-7);
}
.pr-8 {
    padding-right: var(--spacing-8);
}
.pr-9 {
    padding-right: var(--spacing-9);
}
.pr-10 {
    padding-right: var(--spacing-10);
}
@media (max-width: 1440px){
    .d-xl-none {
        display: none;
    }
    .d-xl-block {
        display: block;
    }
    
    .btn{
        padding: 12px 25px;
    }

    /* Column */
    .col-xl-1 {
        width: 8.33%;
    }
    .col-xl-2 {
        width: 16.66%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-4 {
        width: 33.33%;
    }
    .col-xl-5 {
        width: 41.66%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-7 {
        width: 58.33%;
    }
    .col-xl-8 {
        width: 66.66%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-10 {
        width: 83.33%;
    }
    .col-xl-11 {
        width: 91.66%;
    }
    .col-xl-12 {
        width: 100%;
    }

    /* Padding */
    .p-xl-0 {
        padding: 0;
    }
    .p-xl-1 {
        padding: var(--spacing-1);
    }
    .p-xl-2 {
        padding: var(--spacing-2);
    }
    .p-xl-3 {
        padding: var(--spacing-3);
    }
    .p-xl-4 {
        padding: var(--spacing-4);
    }
    .p-xl-5 {
        padding: var(--spacing-5);
    }
    .p-xl-6 {
        padding: var(--spacing-6);
    }
    .p-xl-7 {
        padding: var(--spacing-7);
    }
    .p-xl-8 {
        padding: var(--spacing-8);
    }
    .p-xl-9 {
        padding: var(--spacing-9);
    }
    .p-xl-10 {
        padding: var(--spacing-10);
    }

    .py-xl-0 {
        padding-top: 0;
        padding-bottom: 0;
    }
    .py-xl-1 {
        padding-top: var(--spacing-1);
        padding-bottom: var(--spacing-1);
    }
    .py-xl-2 {
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);
    }
    .py-xl-3 {
        padding-top: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }
    .py-xl-4 {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }
    .py-xl-5 {
        padding-top: var(--spacing-5);
        padding-bottom: var(--spacing-5);
    }
    .py-xl-6 {
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
    }
    .py-xl-7 {
        padding-top: var(--spacing-7);
        padding-bottom: var(--spacing-7);
    }
    .py-xl-8 {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
    .py-xl-9 {
        padding-top: var(--spacing-9);
        padding-bottom: var(--spacing-9);
    }
    .py-xl-10 {
        padding-top: var(--spacing-10);
        padding-bottom: var(--spacing-10);
    }

    .px-xl-0 {
        padding-left: 0;
        padding-right: 0;
    }
    .px-xl-1 {
        padding-left: var(--spacing-1);
        padding-right: var(--spacing-1);
    }
    .px-xl-2 {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }
    .px-xl-3 {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
    .px-xl-4 {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    .px-xl-5 {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }
    .px-xl-6 {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    .px-xl-7 {
        padding-left: var(--spacing-7);
        padding-right: var(--spacing-7);
    }
    .px-xl-8 {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
    .px-xl-9 {
        padding-left: var(--spacing-9);
        padding-right: var(--spacing-9);
    }
    .px-xl-10 {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }

    /* Padding Top */
    .pt-xl-0 {
        padding-top: 0;
    }
    .pt-xl-1 {
        padding-top: var(--spacing-1);
    }
    .pt-xl-2 {
        padding-top: var(--spacing-2);
    }
    .pt-xl-3 {
        padding-top: var(--spacing-3);
    }
    .pt-xl-4 {
        padding-top: var(--spacing-4);
    }
    .pt-xl-5 {
        padding-top: var(--spacing-5);
    }
    .pt-xl-6 {
        padding-top: var(--spacing-6);
    }
    .pt-xl-7 {
        padding-top: var(--spacing-7);
    }
    .pt-xl-8 {
        padding-top: var(--spacing-8);
    }
    .pt-xl-9 {
        padding-top: var(--spacing-9);
    }
    .pt-xl-10 {
        padding-top: var(--spacing-10);
    }

    /* Padding Bottom */
    .pb-xl-0 {
        padding-bottom: 0;
    }
    .pb-xl-1 {
        padding-bottom: var(--spacing-1);
    }
    .pb-xl-2 {
        padding-bottom: var(--spacing-2);
    }
    .pb-xl-3 {
        padding-bottom: var(--spacing-3);
    }
    .pb-xl-4 {
        padding-bottom: var(--spacing-4);
    }
    .pb-xl-5 {
        padding-bottom: var(--spacing-5);
    }
    .pb-xl-6 {
        padding-bottom: var(--spacing-6);
    }
    .pb-xl-7 {
        padding-bottom: var(--spacing-7);
    }
    .pb-xl-8 {
        padding-bottom: var(--spacing-8);
    }
    .pb-xl-9 {
        padding-bottom: var(--spacing-9);
    }
    .pb-xl-10 {
        padding-bottom: var(--spacing-10);
    }

    .pr-xl-0 {
        padding-right: 0;
    }
    .pr-xl-1 {
        padding-right: var(--spacing-1);
    }
    .pr-xl-2 {
        padding-right: var(--spacing-2);
    }
    .pr-xl-3 {
        padding-right: var(--spacing-3);
    }
    .pr-xl-4 {
        padding-right: var(--spacing-4);
    }
    .pr-xl-5 {
        padding-right: var(--spacing-5);
    }
    .pr-xl-6 {
        padding-right: var(--spacing-6);
    }
    .pr-xl-7 {
        padding-right: var(--spacing-7);
    }
    .pr-xl-8 {
        padding-right: var(--spacing-8);
    }
    .pr-xl-9 {
        padding-right: var(--spacing-9);
    }
    .pr-xl-10 {
        padding-right: var(--spacing-10);
    }

    .pl-xl-0 {
        padding-left: 0;
    }
    .pl-xl-1 {
        padding-left: var(--spacing-1);
    }
    .pl-xl-2 {
        padding-left: var(--spacing-2);
    }
    .pl-xl-3 {
        padding-left: var(--spacing-3);
    }
    .pl-xl-4 {
        padding-left: var(--spacing-4);
    }
    .pl-xl-5 {
        padding-left: var(--spacing-5);
    }
    .pl-xl-6 {
        padding-left: var(--spacing-6);
    }
    .pl-xl-7 {
        padding-left: var(--spacing-7);
    }
    .pl-xl-8 {
        padding-left: var(--spacing-8);
    }
    .pl-xl-9 {
        padding-left: var(--spacing-9);
    }
    .pl-xl-10 {
        padding-left: var(--spacing-10);
    }

    /* Margin */
    .m-xl-0 {
        margin: 0;
    }
    .m-xl-1 {
        margin: var(--spacing-1);
    }
    .m-xl-2 {
        margin: var(--spacing-2);
    }
    .m-xl-3 {
        margin: var(--spacing-3);
    }
    .m-xl-4 {
        margin: var(--spacing-4);
    }
    .m-xl-5 {
        margin: var(--spacing-5);
    }
    .m-xl-6 {
        margin: var(--spacing-6);
    }
    .m-xl-7 {
        margin: var(--spacing-7);
    }
    .m-xl-8 {
        margin: var(--spacing-8);
    }
    .m-xl-9 {
        margin: var(--spacing-9);
    }
    .m-xl-10 {
        margin: var(--spacing-10);
    }

    .my-xl-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .my-xl-1 {
        margin-top: var(--spacing-1);
        margin-bottom: var(--spacing-1);
    }
    .my-xl-2 {
        margin-top: var(--spacing-2);
        margin-bottom: var(--spacing-2);
    }
    .my-xl-3 {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }
    .my-xl-4 {
        margin-top: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
    .my-xl-5 {
        margin-top: var(--spacing-5);
        margin-bottom: var(--spacing-5);
    }
    .my-xl-6 {
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }
    .my-xl-7 {
        margin-top: var(--spacing-7);
        margin-bottom: var(--spacing-7);
    }
    .my-xl-8 {
        margin-top: var(--spacing-8);
        margin-bottom: var(--spacing-8);
    }
    .my-xl-9 {
        margin-top: var(--spacing-9);
        margin-bottom: var(--spacing-9);
    }
    .my-xl-10 {
        margin-top: var(--spacing-10);
        margin-bottom: var(--spacing-10);
    }

    .mx-xl-0 {
        margin-left: 0;
        margin-right: 0;
    }
    .mx-xl-1 {
        margin-left: var(--spacing-1);
        margin-right: var(--spacing-1);
    }
    .mx-xl-2 {
        margin-left: var(--spacing-2);
        margin-right: var(--spacing-2);
    }
    .mx-xl-3 {
        margin-left: var(--spacing-3);
        margin-right: var(--spacing-3);
    }
    .mx-xl-4 {
        margin-left: var(--spacing-4);
        margin-right: var(--spacing-4);
    }
    .mx-xl-5 {
        margin-left: var(--spacing-5);
        margin-right: var(--spacing-5);
    }
    .mx-xl-6 {
        margin-left: var(--spacing-6);
        margin-right: var(--spacing-6);
    }
    .mx-xl-7 {
        margin-left: var(--spacing-7);
        margin-right: var(--spacing-7);
    }
    .mx-xl-8 {
        margin-left: var(--spacing-8);
        margin-right: var(--spacing-8);
    }
    .mx-xl-9 {
        margin-left: var(--spacing-9);
        margin-right: var(--spacing-9);
    }
    .mx-xl-10 {
        margin-left: var(--spacing-10);
        margin-right: var(--spacing-10);
    }

    .mt-xl-0 {
        margin-top: 0;
    }
    .mt-xl-1 {
        margin-top: var(--spacing-1);
    }
    .mt-xl-2 {
        margin-top: var(--spacing-2);
    }
    .mt-xl-3 {
        margin-top: var(--spacing-3);
    }
    .mt-xl-4 {
        margin-top: var(--spacing-4);
    }
    .mt-xl-5 {
        margin-top: var(--spacing-5);
    }
    .mt-xl-6 {
        margin-top: var(--spacing-6);
    }
    .mt-xl-7 {
        margin-top: var(--spacing-7);
    }
    .mt-xl-8 {
        margin-top: var(--spacing-8);
    }
    .mt-xl-9 {
        margin-top: var(--spacing-9);
    }
    .mt-xl-10 {
        margin-top: var(--spacing-10);
    }

    .mb-xl-0 {
        margin-bottom: 0;
    }
    .mb-xl-1 {
        margin-bottom: var(--spacing-1);
    }
    .mb-xl-2 {
        margin-bottom: var(--spacing-2);
    }
    .mb-xl-3 {
        margin-bottom: var(--spacing-3);
    }
    .mb-xl-4 {
        margin-bottom: var(--spacing-4);
    }
    .mb-xl-5 {
        margin-bottom: var(--spacing-5);
    }
    .mb-xl-6 {
        margin-bottom: var(--spacing-6);
    }
    .mb-xl-7 {
        margin-bottom: var(--spacing-7);
    }
    .mb-xl-8 {
        margin-bottom: var(--spacing-8);
    }
    .mb-xl-9 {
        margin-bottom: var(--spacing-9);
    }
    .mb-xl-10 {
        margin-bottom: var(--spacing-10);
    }

    .ml-xl-0 {
        margin-left: 0;
    }
    .ml-xl-1 {
        margin-left: var(--spacing-1);
    }
    .ml-xl-2 {
        margin-left: var(--spacing-2);
    }
    .ml-xl-3 {
        margin-left: var(--spacing-3);
    }
    .ml-xl-4 {
        margin-left: var(--spacing-4);
    }
    .ml-xl-5 {
        margin-left: var(--spacing-5);
    }
    .ml-xl-6 {
        margin-left: var(--spacing-6);
    }
    .ml-xl-7 {
        margin-left: var(--spacing-7);
    }
    .ml-xl-8 {
        margin-left: var(--spacing-8);
    }
    .ml-xl-9 {
        margin-left: var(--spacing-9);
    }
    .ml-xl-10 {
        margin-left: var(--spacing-10);
    }

    .mr-xl-0 {
        margin-right: 0;
    }
    .mr-xl-1 {
        margin-right: var(--spacing-1);
    }
    .mr-xl-2 {
        margin-right: var(--spacing-2);
    }
    .mr-xl-3 {
        margin-right: var(--spacing-3);
    }
    .mr-xl-4 {
        margin-right: var(--spacing-4);
    }
    .mr-xl-5 {
        margin-right: var(--spacing-5);
    }
    .mr-xl-6 {
        margin-right: var(--spacing-6);
    }
    .mr-xl-7 {
        margin-right: var(--spacing-7);
    }
    .mr-xl-8 {
        margin-right: var(--spacing-8);
    }
    .mr-xl-9 {
        margin-right: var(--spacing-9);
    }
    .mr-xl-10 {
        margin-right: var(--spacing-10);
    }
    .w-xl-initial{
        width: initial;
    }
}
@media (max-width: 1439px){
    .container{
        width: 90%;
    }
}
@media (max-width: 1024px){
    .container, .container-fluid{
        width: 100%;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .d-lg-none {
        display: none;
    }
    .d-lg-block {
        display: block;
    }
    .d-lg-flex {
        display: flex;
    }
    .d-lg-inline {
        display: inline;
    }
    .d-lg-inline-block {
        display: inline-block;
    }
    .d-lg-inline-flex {
        display: inline-flex;
    }
    

    /* Column */
    .col-lg-1 {
        width: 8.33%;
    }
    .col-lg-2 {
        width: 16.66%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33%;
    }
    .col-lg-5 {
        width: 41.66%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33%;
    }
    .col-lg-8 {
        width: 66.66%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.33%;
    }
    .col-lg-11 {
        width: 91.66%;
    }
    .col-lg-12 {
        width: 100%;
    }

    /* Padding */
    .p-lg-0 {
        padding: 0;
    }
    .p-lg-1 {
        padding: var(--spacing-1);
    }
    .p-lg-2 {
        padding: var(--spacing-2);
    }
    .p-lg-3 {
        padding: var(--spacing-3);
    }
    .p-lg-4 {
        padding: var(--spacing-4);
    }
    .p-lg-5 {
        padding: var(--spacing-5);
    }
    .p-lg-6 {
        padding: var(--spacing-6);
    }
    .p-lg-7 {
        padding: var(--spacing-7);
    }
    .p-lg-8 {
        padding: var(--spacing-8);
    }
    .p-lg-9 {
        padding: var(--spacing-9);
    }
    .p-lg-10 {
        padding: var(--spacing-10);
    }

    /* Padding */
    .p-lg-0 {
        padding: 0;
    }
    .p-lg-1 {
        padding: var(--spacing-1);
    }
    .p-lg-2 {
        padding: var(--spacing-2);
    }
    .p-lg-3 {
        padding: var(--spacing-3);
    }
    .p-lg-4 {
        padding: var(--spacing-4);
    }
    .p-lg-5 {
        padding: var(--spacing-5);
    }
    .p-lg-6 {
        padding: var(--spacing-6);
    }
    .p-lg-7 {
        padding: var(--spacing-7);
    }
    .p-lg-8 {
        padding: var(--spacing-8);
    }
    .p-lg-9 {
        padding: var(--spacing-9);
    }
    .p-lg-10 {
        padding: var(--spacing-10);
    }

    .py-lg-0 {
        padding-top: 0;
        padding-bottom: 0;
    }
    .py-lg-1 {
        padding-top: var(--spacing-1);
        padding-bottom: var(--spacing-1);
    }
    .py-lg-2 {
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);
    }
    .py-lg-3 {
        padding-top: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }
    .py-lg-4 {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }
    .py-lg-5 {
        padding-top: var(--spacing-5);
        padding-bottom: var(--spacing-5);
    }
    .py-lg-6 {
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
    }
    .py-lg-7 {
        padding-top: var(--spacing-7);
        padding-bottom: var(--spacing-7);
    }
    .py-lg-8 {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
    .py-lg-9 {
        padding-top: var(--spacing-9);
        padding-bottom: var(--spacing-9);
    }
    .py-lg-10 {
        padding-top: var(--spacing-10);
        padding-bottom: var(--spacing-10);
    }

    .px-lg-0 {
        padding-left: 0;
        padding-right: 0;
    }
    .px-lg-1 {
        padding-left: var(--spacing-1);
        padding-right: var(--spacing-1);
    }
    .px-lg-2 {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }
    .px-lg-3 {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
    .px-lg-4 {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    .px-lg-5 {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }
    .px-lg-6 {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    .px-lg-7 {
        padding-left: var(--spacing-7);
        padding-right: var(--spacing-7);
    }
    .px-lg-8 {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
    .px-lg-9 {
        padding-left: var(--spacing-9);
        padding-right: var(--spacing-9);
    }
    .px-lg-10 {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }

    .pt-lg-0 {
        padding-top: 0;
    }
    .pt-lg-1 {
        padding-top: var(--spacing-1);
    }
    .pt-lg-2 {
        padding-top: var(--spacing-2);
    }
    .pt-lg-3 {
        padding-top: var(--spacing-3);
    }
    .pt-lg-4 {
        padding-top: var(--spacing-4);
    }
    .pt-lg-5 {
        padding-top: var(--spacing-5);
    }
    .pt-lg-6 {
        padding-top: var(--spacing-6);
    }
    .pt-lg-7 {
        padding-top: var(--spacing-7);
    }
    .pt-lg-8 {
        padding-top: var(--spacing-8);
    }
    .pt-lg-9 {
        padding-top: var(--spacing-9);
    }
    .pt-lg-10 {
        padding-top: var(--spacing-10);
    }

    .pb-lg-0 {
        padding-bottom: 0;
    }
    .pb-lg-1 {
        padding-bottom: var(--spacing-1);
    }
    .pb-lg-2 {
        padding-bottom: var(--spacing-2);
    }
    .pb-lg-3 {
        padding-bottom: var(--spacing-3);
    }
    .pb-lg-4 {
        padding-bottom: var(--spacing-4);
    }
    .pb-lg-5 {
        padding-bottom: var(--spacing-5);
    }
    .pb-lg-6 {
        padding-bottom: var(--spacing-6);
    }
    .pb-lg-7 {
        padding-bottom: var(--spacing-7);
    }
    .pb-lg-8 {
        padding-bottom: var(--spacing-8);
    }
    .pb-lg-9 {
        padding-bottom: var(--spacing-9);
    }
    .pb-lg-10 {
        padding-bottom: var(--spacing-10);
    }

    .pr-lg-0 {
        padding-right: 0;
    }
    .pr-lg-1 {
        padding-right: var(--spacing-1);
    }
    .pr-lg-2 {
        padding-right: var(--spacing-2);
    }
    .pr-lg-3 {
        padding-right: var(--spacing-3);
    }
    .pr-lg-4 {
        padding-right: var(--spacing-4);
    }
    .pr-lg-5 {
        padding-right: var(--spacing-5);
    }
    .pr-lg-6 {
        padding-right: var(--spacing-6);
    }
    .pr-lg-7 {
        padding-right: var(--spacing-7);
    }
    .pr-lg-8 {
        padding-right: var(--spacing-8);
    }
    .pr-lg-9 {
        padding-right: var(--spacing-9);
    }
    .pr-lg-10 {
        padding-right: var(--spacing-10);
    }

    .pl-lg-0 {
        padding-left: 0;
    }
    .pl-lg-1 {
        padding-left: var(--spacing-1);
    }
    .pl-lg-2 {
        padding-left: var(--spacing-2);
    }
    .pl-lg-3 {
        padding-left: var(--spacing-3);
    }
    .pl-lg-4 {
        padding-left: var(--spacing-4);
    }
    .pl-lg-5 {
        padding-left: var(--spacing-5);
    }
    .pl-lg-6 {
        padding-left: var(--spacing-6);
    }
    .pl-lg-7 {
        padding-left: var(--spacing-7);
    }
    .pl-lg-8 {
        padding-left: var(--spacing-8);
    }
    .pl-lg-9 {
        padding-left: var(--spacing-9);
    }
    .pl-lg-10 {
        padding-left: var(--spacing-10);
    }

    /* Margin */
    .m-lg-0 {
        margin: 0;
    }
    .m-lg-1 {
        margin: var(--spacing-1);
    }
    .m-lg-2 {
        margin: var(--spacing-2);
    }
    .m-lg-3 {
        margin: var(--spacing-3);
    }
    .m-lg-4 {
        margin: var(--spacing-4);
    }
    .m-lg-5 {
        margin: var(--spacing-5);
    }
    .m-lg-6 {
        margin: var(--spacing-6);
    }
    .m-lg-7 {
        margin: var(--spacing-7);
    }
    .m-lg-8 {
        margin: var(--spacing-8);
    }
    .m-lg-9 {
        margin: var(--spacing-9);
    }
    .m-lg-10 {
        margin: var(--spacing-10);
    }

    /* Margin */
    .m-lg-0 {
        margin: 0;
    }
    .m-lg-1 {
        margin: var(--spacing-1);
    }
    .m-lg-2 {
        margin: var(--spacing-2);
    }
    .m-lg-3 {
        margin: var(--spacing-3);
    }
    .m-lg-4 {
        margin: var(--spacing-4);
    }
    .m-lg-5 {
        margin: var(--spacing-5);
    }
    .m-lg-6 {
        margin: var(--spacing-6);
    }
    .m-lg-7 {
        margin: var(--spacing-7);
    }
    .m-lg-8 {
        margin: var(--spacing-8);
    }
    .m-lg-9 {
        margin: var(--spacing-9);
    }
    .m-lg-10 {
        margin: var(--spacing-10);
    }

    .my-lg-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .my-lg-1 {
        margin-top: var(--spacing-1);
        margin-bottom: var(--spacing-1);
    }
    .my-lg-2 {
        margin-top: var(--spacing-2);
        margin-bottom: var(--spacing-2);
    }
    .my-lg-3 {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }
    .my-lg-4 {
        margin-top: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
    .my-lg-5 {
        margin-top: var(--spacing-5);
        margin-bottom: var(--spacing-5);
    }
    .my-lg-6 {
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }
    .my-lg-7 {
        margin-top: var(--spacing-7);
        margin-bottom: var(--spacing-7);
    }
    .my-lg-8 {
        margin-top: var(--spacing-8);
        margin-bottom: var(--spacing-8);
    }
    .my-lg-9 {
        margin-top: var(--spacing-9);
        margin-bottom: var(--spacing-9);
    }
    .my-lg-10 {
        margin-top: var(--spacing-10);
        margin-bottom: var(--spacing-10);
    }

    .mx-lg-0 {
        margin-left: 0;
        margin-right: 0;
    }
    .mx-lg-1 {
        margin-left: var(--spacing-1);
        margin-right: var(--spacing-1);
    }
    .mx-lg-2 {
        margin-left: var(--spacing-2);
        margin-right: var(--spacing-2);
    }
    .mx-lg-3 {
        margin-left: var(--spacing-3);
        margin-right: var(--spacing-3);
    }
    .mx-lg-4 {
        margin-left: var(--spacing-4);
        margin-right: var(--spacing-4);
    }
    .mx-lg-5 {
        margin-left: var(--spacing-5);
        margin-right: var(--spacing-5);
    }
    .mx-lg-6 {
        margin-left: var(--spacing-6);
        margin-right: var(--spacing-6);
    }
    .mx-lg-7 {
        margin-left: var(--spacing-7);
        margin-right: var(--spacing-7);
    }
    .mx-lg-8 {
        margin-left: var(--spacing-8);
        margin-right: var(--spacing-8);
    }
    .mx-lg-9 {
        margin-left: var(--spacing-9);
        margin-right: var(--spacing-9);
    }
    .mx-lg-10 {
        margin-left: var(--spacing-10);
        margin-right: var(--spacing-10);
    }

    .mt-lg-0 {
        margin-top: 0;
    }
    .mt-lg-1 {
        margin-top: var(--spacing-1);
    }
    .mt-lg-2 {
        margin-top: var(--spacing-2);
    }
    .mt-lg-3 {
        margin-top: var(--spacing-3);
    }
    .mt-lg-4 {
        margin-top: var(--spacing-4);
    }
    .mt-lg-5 {
        margin-top: var(--spacing-5);
    }
    .mt-lg-6 {
        margin-top: var(--spacing-6);
    }
    .mt-lg-7 {
        margin-top: var(--spacing-7);
    }
    .mt-lg-8 {
        margin-top: var(--spacing-8);
    }
    .mt-lg-9 {
        margin-top: var(--spacing-9);
    }
    .mt-lg-10 {
        margin-top: var(--spacing-10);
    }

    .mb-lg-0 {
        margin-bottom: 0;
    }
    .mb-lg-1 {
        margin-bottom: var(--spacing-1);
    }
    .mb-lg-2 {
        margin-bottom: var(--spacing-2);
    }
    .mb-lg-3 {
        margin-bottom: var(--spacing-3);
    }
    .mb-lg-4 {
        margin-bottom: var(--spacing-4);
    }
    .mb-lg-5 {
        margin-bottom: var(--spacing-5);
    }
    .mb-lg-6 {
        margin-bottom: var(--spacing-6);
    }
    .mb-lg-7 {
        margin-bottom: var(--spacing-7);
    }
    .mb-lg-8 {
        margin-bottom: var(--spacing-8);
    }
    .mb-lg-9 {
        margin-bottom: var(--spacing-9);
    }
    .mb-lg-10 {
        margin-bottom: var(--spacing-10);
    }

    .ml-lg-0 {
        margin-left: 0;
    }
    .ml-lg-1 {
        margin-left: var(--spacing-1);
    }
    .ml-lg-2 {
        margin-left: var(--spacing-2);
    }
    .ml-lg-3 {
        margin-left: var(--spacing-3);
    }
    .ml-lg-4 {
        margin-left: var(--spacing-4);
    }
    .ml-lg-5 {
        margin-left: var(--spacing-5);
    }
    .ml-lg-6 {
        margin-left: var(--spacing-6);
    }
    .ml-lg-7 {
        margin-left: var(--spacing-7);
    }
    .ml-lg-8 {
        margin-left: var(--spacing-8);
    }
    .ml-lg-9 {
        margin-left: var(--spacing-9);
    }
    .ml-lg-10 {
        margin-left: var(--spacing-10);
    }

    .mr-lg-0 {
        margin-right: 0;
    }
    .mr-lg-1 {
        margin-right: var(--spacing-1);
    }
    .mr-lg-2 {
        margin-right: var(--spacing-2);
    }
    .mr-lg-3 {
        margin-right: var(--spacing-3);
    }
    .mr-lg-4 {
        margin-right: var(--spacing-4);
    }
    .mr-lg-5 {
        margin-right: var(--spacing-5);
    }
    .mr-lg-6 {
        margin-right: var(--spacing-6);
    }
    .mr-lg-7 {
        margin-right: var(--spacing-7);
    }
    .mr-lg-8 {
        margin-right: var(--spacing-8);
    }
    .mr-lg-9 {
        margin-right: var(--spacing-9);
    }
    .mr-lg-10 {
        margin-right: var(--spacing-10);
    }

    .flex-lg-wrap{
        flex-wrap: wrap;
    }

    .flex-lg-column{
        flex-direction: column;
    }

    .text-lg-center{
        text-align: center;
    }
    .text-lg-left{
        text-align: left;
    }
    .rounded{
        border-radius: 14px;
    }

    .row-lg-reverse{
        flex-direction: row-reverse;
    }

    .col-lg-reverse{
        flex-direction: column-reverse;
    }
    .grid-col-lg-3{
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .w-lg-initial{
        width: initial;
    }
}
@media (max-width: 767px){
    .w-md-initial{
        width: initial;
    }
    .gap {
        gap: var(--spacing-2);
    }
    .d-md-none {
        display: none;
    }
    .d-md-block {
        display: block;
    }

    .col-md-reverse{
        flex-direction: column-reverse;
    }

    .grid-col-md-2{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Column */
    .col-md-1 {
        width: 8.33%;
    }
    .col-md-2 {
        width: 16.66%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33%;
    }
    .col-md-5 {
        width: 41.66%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33%;
    }
    .col-md-8 {
        width: 66.66%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-md-11 {
        width: 91.66%;
    }
    .col-md-12 {
        width: 100%;
    }

    /* Padding */
    .p-md-0 {
        padding: 0;
    }
    .p-md-1 {
        padding: var(--spacing-1);
    }
    .p-md-2 {
        padding: var(--spacing-2);
    }
    .p-md-3 {
        padding: var(--spacing-3);
    }
    .p-md-4 {
        padding: var(--spacing-4);
    }
    .p-md-5 {
        padding: var(--spacing-5);
    }
    .p-md-6 {
        padding: var(--spacing-6);
    }
    .p-md-7 {
        padding: var(--spacing-7);
    }
    .p-md-8 {
        padding: var(--spacing-8);
    }
    .p-md-9 {
        padding: var(--spacing-9);
    }
    .p-md-10 {
        padding: var(--spacing-10);
    }

    .py-md-0 {
        padding-top: 0;
        padding-bottom: 0;
    }
    .py-md-1 {
        padding-top: var(--spacing-1);
        padding-bottom: var(--spacing-1);
    }
    .py-md-2 {
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);
    }
    .py-md-3 {
        padding-top: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }
    .py-md-4 {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }
    .py-md-5 {
        padding-top: var(--spacing-5);
        padding-bottom: var(--spacing-5);
    }
    .py-md-6 {
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
    }
    .py-md-7 {
        padding-top: var(--spacing-7);
        padding-bottom: var(--spacing-7);
    }
    .py-md-8 {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
    .py-md-9 {
        padding-top: var(--spacing-9);
        padding-bottom: var(--spacing-9);
    }
    .py-md-10 {
        padding-top: var(--spacing-10);
        padding-bottom: var(--spacing-10);
    }

    .px-md-0 {
        padding-left: 0;
        padding-right: 0;
    }
    .px-md-1 {
        padding-left: var(--spacing-1);
        padding-right: var(--spacing-1);
    }
    .px-md-2 {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }
    .px-md-3 {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
    .px-md-4 {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    .px-md-5 {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }
    .px-md-6 {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    .px-md-7 {
        padding-left: var(--spacing-7);
        padding-right: var(--spacing-7);
    }
    .px-md-8 {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
    .px-md-9 {
        padding-left: var(--spacing-9);
        padding-right: var(--spacing-9);
    }
    .px-md-10 {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }

    .pt-md-0 {
        padding-top: 0;
    }
    .pt-md-1 {
        padding-top: var(--spacing-1);
    }
    .pt-md-2 {
        padding-top: var(--spacing-2);
    }
    .pt-md-3 {
        padding-top: var(--spacing-3);
    }
    .pt-md-4 {
        padding-top: var(--spacing-4);
    }
    .pt-md-5 {
        padding-top: var(--spacing-5);
    }
    .pt-md-6 {
        padding-top: var(--spacing-6);
    }
    .pt-md-7 {
        padding-top: var(--spacing-7);
    }
    .pt-md-8 {
        padding-top: var(--spacing-8);
    }
    .pt-md-9 {
        padding-top: var(--spacing-9);
    }
    .pt-md-10 {
        padding-top: var(--spacing-10);
    }

    .pb-md-0 {
        padding-bottom: 0;
    }
    .pb-md-1 {
        padding-bottom: var(--spacing-1);
    }
    .pb-md-2 {
        padding-bottom: var(--spacing-2);
    }
    .pb-md-3 {
        padding-bottom: var(--spacing-3);
    }
    .pb-md-4 {
        padding-bottom: var(--spacing-4);
    }
    .pb-md-5 {
        padding-bottom: var(--spacing-5);
    }
    .pb-md-6 {
        padding-bottom: var(--spacing-6);
    }
    .pb-md-7 {
        padding-bottom: var(--spacing-7);
    }
    .pb-md-8 {
        padding-bottom: var(--spacing-8);
    }
    .pb-md-9 {
        padding-bottom: var(--spacing-9);
    }
    .pb-md-10 {
        padding-bottom: var(--spacing-10);
    }

    .pr-md-0 {
        padding-right: 0;
    }
    .pr-md-1 {
        padding-right: var(--spacing-1);
    }
    .pr-md-2 {
        padding-right: var(--spacing-2);
    }
    .pr-md-3 {
        padding-right: var(--spacing-3);
    }
    .pr-md-4 {
        padding-right: var(--spacing-4);
    }
    .pr-md-5 {
        padding-right: var(--spacing-5);
    }
    .pr-md-6 {
        padding-right: var(--spacing-6);
    }
    .pr-md-7 {
        padding-right: var(--spacing-7);
    }
    .pr-md-8 {
        padding-right: var(--spacing-8);
    }
    .pr-md-9 {
        padding-right: var(--spacing-9);
    }
    .pr-md-10 {
        padding-right: var(--spacing-10);
    }

    .pl-md-0 {
        padding-left: 0;
    }
    .pl-md-1 {
        padding-left: var(--spacing-1);
    }
    .pl-md-2 {
        padding-left: var(--spacing-2);
    }
    .pl-md-3 {
        padding-left: var(--spacing-3);
    }
    .pl-md-4 {
        padding-left: var(--spacing-4);
    }
    .pl-md-5 {
        padding-left: var(--spacing-5);
    }
    .pl-md-6 {
        padding-left: var(--spacing-6);
    }
    .pl-md-7 {
        padding-left: var(--spacing-7);
    }
    .pl-md-8 {
        padding-left: var(--spacing-8);
    }
    .pl-md-9 {
        padding-left: var(--spacing-9);
    }
    .pl-md-10 {
        padding-left: var(--spacing-10);
    }

    /* Margin */
    .m-md-0 {
        margin: 0;
    }
    .m-md-1 {
        margin: var(--spacing-1);
    }
    .m-md-2 {
        margin: var(--spacing-2);
    }
    .m-md-3 {
        margin: var(--spacing-3);
    }
    .m-md-4 {
        margin: var(--spacing-4);
    }
    .m-md-5 {
        margin: var(--spacing-5);
    }
    .m-md-6 {
        margin: var(--spacing-6);
    }
    .m-md-7 {
        margin: var(--spacing-7);
    }
    .m-md-8 {
        margin: var(--spacing-8);
    }
    .m-md-9 {
        margin: var(--spacing-9);
    }
    .m-md-10 {
        margin: var(--spacing-10);
    }

    .my-md-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .my-md-1 {
        margin-top: var(--spacing-1);
        margin-bottom: var(--spacing-1);
    }
    .my-md-2 {
        margin-top: var(--spacing-2);
        margin-bottom: var(--spacing-2);
    }
    .my-md-3 {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }
    .my-md-4 {
        margin-top: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
    .my-md-5 {
        margin-top: var(--spacing-5);
        margin-bottom: var(--spacing-5);
    }
    .my-md-6 {
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }
    .my-md-7 {
        margin-top: var(--spacing-7);
        margin-bottom: var(--spacing-7);
    }
    .my-md-8 {
        margin-top: var(--spacing-8);
        margin-bottom: var(--spacing-8);
    }
    .my-md-9 {
        margin-top: var(--spacing-9);
        margin-bottom: var(--spacing-9);
    }
    .my-md-10 {
        margin-top: var(--spacing-10);
        margin-bottom: var(--spacing-10);
    }

    .mx-md-0 {
        margin-left: 0;
        margin-right: 0;
    }
    .mx-md-1 {
        margin-left: var(--spacing-1);
        margin-right: var(--spacing-1);
    }
    .mx-md-2 {
        margin-left: var(--spacing-2);
        margin-right: var(--spacing-2);
    }
    .mx-md-3 {
        margin-left: var(--spacing-3);
        margin-right: var(--spacing-3);
    }
    .mx-md-4 {
        margin-left: var(--spacing-4);
        margin-right: var(--spacing-4);
    }
    .mx-md-5 {
        margin-left: var(--spacing-5);
        margin-right: var(--spacing-5);
    }
    .mx-md-6 {
        margin-left: var(--spacing-6);
        margin-right: var(--spacing-6);
    }
    .mx-md-7 {
        margin-left: var(--spacing-7);
        margin-right: var(--spacing-7);
    }
    .mx-md-8 {
        margin-left: var(--spacing-8);
        margin-right: var(--spacing-8);
    }
    .mx-md-9 {
        margin-left: var(--spacing-9);
        margin-right: var(--spacing-9);
    }
    .mx-md-10 {
        margin-left: var(--spacing-10);
        margin-right: var(--spacing-10);
    }

    .mt-md-0 {
        margin-top: 0;
    }
    .mt-md-1 {
        margin-top: var(--spacing-1);
    }
    .mt-md-2 {
        margin-top: var(--spacing-2);
    }
    .mt-md-3 {
        margin-top: var(--spacing-3);
    }
    .mt-md-4 {
        margin-top: var(--spacing-4);
    }
    .mt-md-5 {
        margin-top: var(--spacing-5);
    }
    .mt-md-6 {
        margin-top: var(--spacing-6);
    }
    .mt-md-7 {
        margin-top: var(--spacing-7);
    }
    .mt-md-8 {
        margin-top: var(--spacing-8);
    }
    .mt-md-9 {
        margin-top: var(--spacing-9);
    }
    .mt-md-10 {
        margin-top: var(--spacing-10);
    }

    .mb-md-0 {
        margin-bottom: 0;
    }
    .mb-md-1 {
        margin-bottom: var(--spacing-1);
    }
    .mb-md-2 {
        margin-bottom: var(--spacing-2);
    }
    .mb-md-3 {
        margin-bottom: var(--spacing-3);
    }
    .mb-md-4 {
        margin-bottom: var(--spacing-4);
    }
    .mb-md-5 {
        margin-bottom: var(--spacing-5);
    }
    .mb-md-6 {
        margin-bottom: var(--spacing-6);
    }
    .mb-md-7 {
        margin-bottom: var(--spacing-7);
    }
    .mb-md-8 {
        margin-bottom: var(--spacing-8);
    }
    .mb-md-9 {
        margin-bottom: var(--spacing-9);
    }
    .mb-md-10 {
        margin-bottom: var(--spacing-10);
    }

    .ml-md-0 {
        margin-left: 0;
    }
    .ml-md-1 {
        margin-left: var(--spacing-1);
    }
    .ml-md-2 {
        margin-left: var(--spacing-2);
    }
    .ml-md-3 {
        margin-left: var(--spacing-3);
    }
    .ml-md-4 {
        margin-left: var(--spacing-4);
    }
    .ml-md-5 {
        margin-left: var(--spacing-5);
    }
    .ml-md-6 {
        margin-left: var(--spacing-6);
    }
    .ml-md-7 {
        margin-left: var(--spacing-7);
    }
    .ml-md-8 {
        margin-left: var(--spacing-8);
    }
    .ml-md-9 {
        margin-left: var(--spacing-9);
    }
    .ml-md-10 {
        margin-left: var(--spacing-10);
    }

    .mr-md-0 {
        margin-right: 0;
    }
    .mr-md-1 {
        margin-right: var(--spacing-1);
    }
    .mr-md-2 {
        margin-right: var(--spacing-2);
    }
    .mr-md-3 {
        margin-right: var(--spacing-3);
    }
    .mr-md-4 {
        margin-right: var(--spacing-4);
    }
    .mr-md-5 {
        margin-right: var(--spacing-5);
    }
    .mr-md-6 {
        margin-right: var(--spacing-6);
    }
    .mr-md-7 {
        margin-right: var(--spacing-7);
    }
    .mr-md-8 {
        margin-right: var(--spacing-8);
    }
    .mr-md-9 {
        margin-right: var(--spacing-9);
    }
    .mr-md-10 {
        margin-right: var(--spacing-10);
    }
    .text-md-center{
        text-align: center;
    }
    .flex-md-column{
        flex-direction: column;
    }
    .flex-md-wrap{
        flex-wrap: wrap;
    }
}

