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

.mb-160 {
    margin-bottom: clamp(96px, 8.32vw, 320px);

    @include media-query(767px) {
        margin-bottom: 66px;
    }
}

.mb-90 {
    margin-bottom: clamp(52px, 4.688vw, 128px);

    @include media-query(767px) {
        margin-bottom: 58px;
    }
}
.mb-100 {
    margin-bottom: clamp(52px, 5.208vw, 158px);

    @include media-query(767px) {
        margin-bottom: 58px;
    }
}

.mb-96 {
    margin-bottom: clamp(52px, 5vw, 128px);

    @include media-query(767px) {
        margin-bottom: 58px;
    }
}

.my-80 {
    margin: clamp(48px, 4.167vw, 160px) 0;

    @include media-query(575px) {
        margin: 44px 0;
    }
}

.mt-80 {
    margin-top: clamp(48px, 4.167vw, 160px);

    @include media-query(575px) {
        margin-top: 44px;
    }
}

.mb-80 {
    margin-bottom: clamp(48px, 4.167vw, 160px);

    @include media-query(575px) {
        margin-bottom: 44px;
    }
}

.mb-180 {
    margin-bottom: clamp(58px, 9.375vw, 260px);

    @include media-query(575px) {
        margin-bottom: 58px;
    }
}

.mb-64 {
    margin-bottom: clamp(32px, 3.33vw, 128px);

    @include media-query(767px) {
        margin-bottom: 44px;
    }
}

.mt-90 {
    margin-top: clamp(32px, 4.688vw, 128px);

    @include media-query(767px) {
        margin-top: 32px;
    }
}

.mt-64 {
    margin-top: clamp(32px, 3.33vw, 128px);

    @include media-query(767px) {
        margin-top: 32px;
    }
}

.my-64 {
    margin: clamp(32px, 3.33vw, 128px) 0;

    @include media-query(767px) {
        margin: 28px 0;
    }
}

.mt-48 {
    margin-top: clamp(24px, 2.5vw, 96px);

    @include media-query(767px) {
        margin-top: 26px;
    }
}

.mb-48 {
    margin-bottom: clamp(24px, 2.5vw, 96px);

    @include media-query(767px) {
        margin-bottom: 26px;
    }
}

.mb-40 {
    margin-bottom: clamp(24px, 2.083vw, 80px);

    @include media-query(575px) {
        margin-bottom: 24px;
    }
}

.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-36 {
    margin-bottom: clamp(24px, 1.875vw, 64px);
}

.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;
    }
}

.mb-120 {
    margin-bottom: clamp(60px, 6.25vw, 320px);

    @include media-query(575px) {
        margin-bottom: 68px;
    }
}

.mb-28 {
    margin-bottom: clamp(20px, 1.458vw, 58px);
}

.mb-24 {
    margin-bottom: clamp(18px, 1.25vw, 48px);

    @include media-query(1199px) {
        margin-bottom: 22px;
    }

    @include media-query(991px) {
        margin-bottom: 22px;
    }
}

.mb-20 {
    margin-bottom: clamp(16px, 1.042vw, 40px);
}

.mt-16 {
    margin-top: 16px;

    @include media-query(1199px) {
        margin-top: 15px;
    }

    @include media-query(991px) {
        margin-top: 14px;
    }
}

.mb-18 {
    margin-bottom: 18px;

    @include media-query(1199px) {
        margin-bottom: 14px;
    }

    @include media-query(991px) {
        margin-bottom: 14px;
    }
}

.mb-16 {
    margin-bottom: clamp(14px, 0.833vw, 32px);
}

.mb-12 {
    margin-bottom: clamp(9px, 0.625vw, 34px);
}

.mb-8 {
    margin-bottom: 8px;

    @include media-query(767px) {
        margin-bottom: 4px;
    }
}

.mb-6 {
    margin-bottom: 6px;

    @include media-query(767px) {
        margin-bottom: 3px;
    }
}

.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;
    }
}

.pt-120 {
    padding-top: clamp(60px, 6.25vw, 320px);

    @include media-query(575px) {
        padding-top: 48px;
    }
}

.pb-120 {
    padding-bottom: clamp(60px, 6.25vw, 320px);

    @include media-query(575px) {
        padding-bottom: 48px;
    }
}

.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;
    }
}

.pb-48 {
    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;
    }
}

.pt-12 {
    padding-top: clamp(8px, 0.625vw, 24px);

    @include media-query(575px) {
        padding-top: 8px;
    }
}

.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: clamp(18px, 1.25vw, 48px);
}

.pr-24 {
    padding-right: 24px;

    @include media-query(1199px) {
        padding-right: 22px;
    }

    @include media-query(991px) {
        padding-right: 22px;
    }

    @include media-query(767px) {
        padding-right: 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;
    }
}

.p-24 {
    padding: 24px;

    @include media-query(1199px) {
        padding: 22px;
    }

    @include media-query(991px) {
        padding: 22px;
    }

    @include media-query(767px) {
        padding: 20px;
    }
}

.py-16 {
    padding: clamp(12px, 0.833vw, 32px) 0;

    @include media-query(1199px) {
        padding: 15px 0;
    }

    @include media-query(991px) {
        padding: 14px 0;
    }

    @include media-query(767px) {
        padding: 10px 0;
    }
}

.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: $gap-4 !important;
}

.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);
}
