/*----------------------------------------*/
/*  SPACE CSS START
/*----------------------------------------*/

// ---- Margin ----
.my-80 {
    margin-top: clamp(48px, 4.167vw, 160px);
    margin-bottom: clamp(48px, 4.167vw, 160px);
    @include media-query(575px) {
        margin: 40px 0;
    }
}
.mt-80 {
    margin-top: clamp(48px, 4.167vw, 160px);
    @include media-query(575px) {
        margin-top: 40px;
    }
}
.mb-80 {
    margin-bottom: clamp(48px, 4.167vw, 160px);
    @include media-query(575px) {
        margin-bottom: 40px;
    }
}
.mb-64 {
    margin-bottom: clamp(32px, 3.33vw, 128px);
    @include media-query(767px) {
        margin-bottom: 26px;
    }
}
.mt-64 {
    margin-top: clamp(32px, 3.33vw, 128px);
    @include media-query(767px) {
        margin-top: 26px;
    }
}
.mt-48 {
    margin-top: clamp(24px, 2.5vw, 96px);
    @include media-query(767px) {
        margin-top: 20px;
    }
}
.mb-48 {
    margin-bottom: clamp(24px, 2.5vw, 96px);
    @include media-query(767px) {
        margin-bottom: 20px;
    }
}
.mb-40 {
    margin-bottom: clamp(24px, 2.083vw, 80px);
    @include media-query(575px) {
        margin-bottom: 20px;
    }
}
.mt-40 {
    margin-top: clamp(24px, 2.083vw, 80px);
    @include media-query(575px) {
        margin-top: 20px;
    }
}
.my-40 {
    margin: clamp(24px, 2.083vw, 80px) 0;
    @include media-query(575px) {
        margin: 20px 0;
    }
}
.mt-32 {
    margin-top: clamp(24px, 1.667vw, 64px) !important; //32px
    
    @include media-query(991px) {
        margin-top: 2.422vw;
    }
    @include media-query(580px) {
        margin-top: 4.082vw;
    }
}
.mb-32 {
    margin-bottom: clamp(24px, 1.667vw, 64px) !important; //32px
    
    @include media-query(991px) {
        margin-bottom: 2.422vw;
    }
    @include media-query(580px) {
        margin-bottom: 4.082vw;
    }
}

.mt-24 {
    margin-top: clamp(21px, 1.25vw, 48px);
    
    @include media-query(991px) {
        margin-top: 2.117vw;
    }
    @include media-query(767px) {
        margin-top: 1.613vw;
    }
}
.mb-24 {
    margin-bottom: clamp(21px, 1.25vw, 48px);
    
    @include media-query(991px) {
        margin-bottom: 2.117vw;
    }
    @include media-query(767px) {
        margin-bottom: 1.613vw;
    }
    @include media-query(490px) {
        margin-bottom: 16px;
    }
}
.mb-20 {
    margin-bottom: clamp(16px, 1.042vw, 48px);
    
}
.mt-16 {
    margin-top: clamp(14px, 0.833vw, 32px);;
    
    @include media-query(991px) {
        margin-top: 1.512vw;
    }
    @include media-query(767px) {
        margin-top: 2.449vw;
    }
}
.mb-16 {
    margin-bottom: clamp(14px, 0.833vw, 32px);;
    
    @include media-query(991px) {
        margin-bottom: 1.512vw;
    }
    @include media-query(767px) {
        margin-bottom: 2.449vw;
    }
}
.mb-12 {
    margin-bottom: 0.625vw;
    @include media-query(1199px) {
        margin-bottom: 0.917vw;
    }
    @include media-query(991px) {
        margin-bottom: 1.009vw;
    }
    @include media-query(767px) {
        margin-bottom: 1.043vw;
    }
}
.mb-8 {
    margin-bottom: 0.417vw;
    @include media-query(490px) {
        margin-bottom: 0.816vw;
    }
}

.mb-4p {
    margin-bottom: 4px;
}

// ----Padding ----
.py-160 {
    padding: clamp(96px, 8.32vw, 320px) 0;
    @include media-query(575px) {
        padding: 80px 0;
    }
}
.pt-160 {
    padding-top: clamp(96px, 8.32vw, 320px);
    @include media-query(575px) {
        padding-top: 80px;
    }
}
.pb-160 {
    padding-bottom: clamp(96px, 8.32vw, 320px);
    @include media-query(575px) {
        padding-bottom: 80px;
    }
}
.p-96 {
    padding: clamp(58px, 5vw, 192px);
}
.py-80 {
    padding-top: clamp(48px, 4.167vw, 160px);
    padding-bottom: clamp(48px, 4.167vw, 160px);
    @include media-query(575px) {
        padding: 40px 0;
    }
}
.pt-80 {
    padding-top: clamp(48px, 4.167vw, 160px);
    @include media-query(575px) {
        padding-top: 40px;
    }
}
.pb-80 {
    padding-bottom: clamp(48px, 4.167vw, 160px);
    @include media-query(575px) {
        padding-bottom: 40px;
    }
}
.py-64 {
    padding-top: clamp(32px, 3.33vw, 128px);
    padding-bottom: clamp(32px, 3.33vw, 128px);
    @include media-query(767px) {
        padding: 26px 0;
    }
}
.pt-64 {
    padding-top: clamp(32px, 3.33vw, 128px);
    @include media-query(767px) {
        padding-top: 26px;
    }
}
.pb-64 {
    padding-bottom: clamp(32px, 3.33vw, 128px);
    @include media-query(767px) {
        padding-bottom: 26px;
    }
}

.py-48 {
    padding: clamp(28px, 2.5vw, 80px) 0;
    @include media-query(575px) {
        padding: 24px 0;
    }
}
.pt-48 {
    padding-top: clamp(28px, 2.5vw, 80px);
    @include media-query(575px) {
        padding-top: 24px;
    }
}
.pb-48 {
    padding-bottom: clamp(28px, 2.5vw, 80px);
    @include media-query(575px) {
        padding-bottom: 24px;
    }
}
.py-40 {
    padding: clamp(28px, 2.083vw, 80px) 0;
    @include media-query(575px) {
        padding: 32px 0;
    }
}
.pt-40 {
    padding-top: clamp(28px, 2.083vw, 80px);
    @include media-query(575px) {
        padding-top: 32px;
    }
}
.pb-40 {
    padding-bottom: clamp(28px, 2.083vw, 80px);
    @include media-query(575px) {
        padding-bottom: 32px;
    }
}

.ps-32 {
    padding-left: clamp(18px, 1.667vw, 64px);
    padding-right: clamp(18px, 1.667vw, 64px);
}
.p-32 {
    padding: clamp(18px, 1.667vw, 64px);

}
.pt-32 {
    padding-top: clamp(18px, 1.667vw, 64px);
}
.py-32 {
    padding: clamp(18px, 1.667vw, 64px) 0;
}
.py-24{
    padding: clamp(16px, 1.25vw, 48px) 0;
}
.p-24{
    padding: clamp(16px, 1.25vw, 48px);
}
.pt-24{
    padding-top: clamp(16px, 1.25vw, 48px);
}
.pl-24{
    padding-left: clamp(16px, 1.25vw, 48px);
}
.pb-24{
    padding-bottom: clamp(16px, 1.25vw, 48px);
}
.pl-16{
    padding-left: clamp(10px, 0.938vw, 36px);
}
.p-8-12{
    padding: clamp(4px, 0.417vw, 16px) clamp(5px, 0.521vw, 20px);
}
.p-8{
    padding: clamp(6px, 0.417vw, 16px);
}

// ---- Gap ---- 
.gap-4{
    gap: clamp(2px, 0.208vw, 8px);
}
.gap-8{
    gap: clamp(4px, 0.417vw, 16px);
}
.gap-10{
    gap: clamp(5px, 0.521vw, 20px);
}
.gap-12{
    gap: clamp(8px, 0.625vw, 24px);
}
.gap-14{
    gap: clamp(10px, 0.729vw, 28px);
}
.gap-16{
    gap: clamp(12px, 0.833vw, 32px);
}
.gap-18{
    gap: clamp(14px, 0.938vw, 36px);
}
.gap-20{
    gap: clamp(16px, 1.042vw, 40px);
}
.gap-24{
    gap: clamp(18px, 1.25vw, 48px);
}
.gap-32{
    gap: clamp(24px, 1.667vw, 64px);
}
.gap-38{
    gap: clamp(28px, 1.979vw, 76px);
}
.gap-48{
    gap: clamp(10px, 2.5vw, 28px);
}
.gap-64{
    gap: clamp(48px, 3.333vw, 128px);
}