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

.my-80 {
    margin: clamp(48px, 4.167vw, 160px) 0;
    @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;
    }
}

.mt-32 {
    margin-top: 32px;
    @include media-query(1599px) {
        margin-top: 29px;
    }
    @include media-query(1399px) {
        margin-top: 27px;
    }
    @include media-query(1199px) {
        margin-top: 25px;
    }
    @include media-query(991px) {
        margin-top: 22px;
    }
    @include media-query(767px) {
        margin-top: 20px;
    }
}
.mb-32 {
    margin-bottom: 32px;
    @include media-query(1599px) {
        margin-bottom: 29px;
    }
    @include media-query(1399px) {
        margin-bottom: 27px;
    }
    @include media-query(1199px) {
        margin-bottom: 25px;
    }
    @include media-query(991px) {
        margin-bottom: 22px;
    }
    @include media-query(767px) {
        margin-bottom: 20px;
    }
}

.mt-24 {
    margin-top: 24px;
    @include media-query(1199px) {
        margin-top: 22px;
    }
    @include media-query(991px) {
        margin-top: 22px;
    }
    @include media-query(767px) {
        margin-top: 20px;
    }
}
.my-24 {
    margin-top: 24px;
    margin-bottom: 24px;
    @include media-query(1199px) {
        margin-top: 22px;
        margin-bottom: 24px;
    }
    @include media-query(991px) {
        margin-top: 22px;
        margin-bottom: 24px;
    }
    @include media-query(767px) {
        margin-top: 20px;
        margin-bottom: 22px;
    }
}
.mb-24 {
    margin-bottom: 24px;
    @include media-query(1199px) {
        margin-bottom: 22px;
    }
    @include media-query(991px) {
        margin-bottom: 22px;
    }
    @include media-query(767px) {
        margin-bottom: 20px;
    }
}
.mt-16 {
    margin-top: 16px;
    @include media-query(1199px) {
        margin-top: 15px;
    }
    @include media-query(991px) {
        margin-top: 14px;
    }
    @include media-query(767px) {
        margin-top: 10px;
    }
}
.mb-16 {
    margin-bottom: 16px;
    @include media-query(1199px) {
        margin-bottom: 15px;
    }
    @include media-query(991px) {
        margin-bottom: 14px;
    }
    @include media-query(767px) {
        margin-bottom: 10px;
    }
}
.mb-12 {
    margin-bottom: 12px;
    @include media-query(1199px) {
        margin-bottom: 11px;
    }
    @include media-query(991px) {
        margin-bottom: 10px;
    }
    @include media-query(767px) {
        margin-bottom: 8px;
    }
}
.mb-8 {
    margin-bottom: 8px;
    @include media-query(767px) {
        margin-bottom: 4px;
    }
}

.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;
    }
}
.py-80 {
    padding: clamp(48px, 4.167vw, 160px) 0;
    @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: clamp(32px, 3.33vw, 128px) 0;
    @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(24px, 2.5vw, 96px) 0;
    @include media-query(767px) {
        padding: 20px 0;
    }
}
.pb-48 {
    padding-bottom: clamp(24px, 2.5vw, 96px);
    @include media-query(767px) {
        padding-bottom: 20px;
    }
}
.pt-48 {
    padding-top: clamp(24px, 2.5vw, 96px);
    @include media-query(767px) {
        padding-top: 20px;
    }
}

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

.py-32 {
    padding: 32px 0;
    @include media-query(1599px) {
        padding: 29px 0;
    }
    @include media-query(1399px) {
        padding: 27px 0;
    }
    @include media-query(1199px) {
        padding: 25px 0;
    }
    @include media-query(991px) {
        padding: 22px 0;
    }
    @include media-query(767px) {
        padding: 20px 0;
    }
}
.p-32 {
    padding: 32px;
    @include media-query(1599px) {
        padding: 29px;
    }
    @include media-query(1399px) {
        padding: 27px;
    }
    @include media-query(1199px) {
        padding: 25px;
    }
    @include media-query(991px) {
        padding: 22px;
    }
    @include media-query(767px) {
        padding: 20px;
    }
}

.py-24 {
    padding: 24px 0;
    @include media-query(1199px) {
        padding: 22px 0;
    }
    @include media-query(991px) {
        padding: 22px 0;
    }
    @include media-query(767px) {
        padding: 20px 0;
    }
}
.pl-24 {
    padding-left: 24px;
    @include media-query(1199px) {
        padding-left: 22px;
    }
    @include media-query(991px) {
        padding-left: 22px;
    }
    @include media-query(767px) {
        padding-left: 20px;
    }
}
.pb-24 {
    padding-bottom: 24px;
    @include media-query(1199px) {
        padding-bottom: 22px;
    }
    @include media-query(991px) {
        padding-bottom: 22px;
    }
    @include media-query(767px) {
        padding-bottom: 20px;
    }
    
}
.pb-32 {
    padding-bottom: 32px;
    @include media-query(1199px) {
        padding-bottom: 22px;
    }
    @include media-query(991px) {
        padding-bottom: 22px;
    }
    @include media-query(767px) {
        padding-bottom: 20px;
    }
    
}
.p-24 {
    padding: 24px;
    @include media-query(1199px) {
        padding: 22px;
    }
    @include media-query(991px) {
        padding: 22px;
    }
    @include media-query(767px) {
        padding: 20px;
    }
}

.p-16 {
    padding: 16px;
    @include media-query(1199px) {
        padding: 15px;
    }
    @include media-query(991px) {
        padding: 14px;
    }
    @include media-query(767px) {
        padding: 10px;
    }
}
.p-12 {
    padding: 12px;
    @include media-query(1199px) {
        padding: 11px;
    }
    @include media-query(991px) {
        padding: 10px;
    }
    @include media-query(767px) {
        padding: 8px;
    }
}

// ---- 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(12px, 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);
}