/* =========================================================
   Bootstrap 3 – Spacing utilities (Bootstrap 5–like)
   spacer = 1rem
   scale:
   0 = 0
   1 = spacer * .25
   2 = spacer * .5
   3 = spacer * 1
   4 = spacer * 1.5
   5 = spacer * 3
   6 = spacer * 2   (custom)
   ========================================================= */

:root {
    --spacer: 1rem;
}

/* =========================================================
   BASE (ALL SIDES)
   ========================================================= */

@media (min-width: 768px) {
    .p-0 {
        padding: 0 !important;
    }

    .p-1 {
        padding: calc(var(--spacer) * .25) !important;
    }

    .p-2 {
        padding: calc(var(--spacer) * .5) !important;
    }

    .p-3 {
        padding: calc(var(--spacer) * 1) !important;
    }

    .p-4 {
        padding: calc(var(--spacer) * 1.5) !important;
    }

    .p-5 {
        padding: calc(var(--spacer) * 3) !important;
    }

    .p-6 {
        padding: calc(var(--spacer) * 2) !important;
    }

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

    .m-1 {
        margin: calc(var(--spacer) * .25) !important;
    }

    .m-2 {
        margin: calc(var(--spacer) * .5) !important;
    }

    .m-3 {
        margin: calc(var(--spacer) * 1) !important;
    }

    .m-4 {
        margin: calc(var(--spacer) * 1.5) !important;
    }

    .m-5 {
        margin: calc(var(--spacer) * 3) !important;
    }

    .m-6 {
        margin: calc(var(--spacer) * 2) !important;
    }

    /* =========================================================
       AXES (X / Y)
       ========================================================= */
    /* padding */
    .px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .mx-1 {
        margin-left: calc(var(--spacer) * .25) !important;
        margin-right: calc(var(--spacer) * .25) !important;
    }

    .mx-2 {
        margin-left: calc(var(--spacer) * .5) !important;
        margin-right: calc(var(--spacer) * .5) !important;
    }

    .mx-3 {
        margin-left: calc(var(--spacer) * 1) !important;
        margin-right: calc(var(--spacer) * 1) !important;
    }

    .mx-4 {
        margin-left: calc(var(--spacer) * 1.5) !important;
        margin-right: calc(var(--spacer) * 1.5) !important;
    }

    .mx-5 {
        margin-left: calc(var(--spacer) * 3) !important;
        margin-right: calc(var(--spacer) * 3) !important;
    }

    .mx-6 {
        margin-left: calc(var(--spacer) * 2) !important;
        margin-right: calc(var(--spacer) * 2) !important;
    }

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

    .my-1 {
        margin-top: calc(var(--spacer) * .25) !important;
        margin-bottom: calc(var(--spacer) * .25) !important;
    }

    .my-2 {
        margin-top: calc(var(--spacer) * .5) !important;
        margin-bottom: calc(var(--spacer) * .5) !important;
    }

    .my-3 {
        margin-top: calc(var(--spacer) * 1) !important;
        margin-bottom: calc(var(--spacer) * 1) !important;
    }

    .my-4 {
        margin-top: calc(var(--spacer) * 1.5) !important;
        margin-bottom: calc(var(--spacer) * 1.5) !important;
    }

    .my-5 {
        margin-top: calc(var(--spacer) * 3) !important;
        margin-bottom: calc(var(--spacer) * 3) !important;
    }

    .my-6 {
        margin-top: calc(var(--spacer) * 2) !important;
        margin-bottom: calc(var(--spacer) * 2) !important;
    }

    /* =========================================================
       SIDES (T / B / L / R)
       ========================================================= */
    /* padding */
    .pt-0 {
        padding-top: 0 !important;
    }

    .pt-1 {
        padding-top: calc(var(--spacer) * .25) !important;
    }

    .pt-2 {
        padding-top: calc(var(--spacer) * .5) !important;
    }

    .pt-3 {
        padding-top: calc(var(--spacer) * 1) !important;
    }

    .pt-4 {
        padding-top: calc(var(--spacer) * 1.5) !important;
    }

    .pt-5 {
        padding-top: calc(var(--spacer) * 3) !important;
    }

    .pt-6 {
        padding-top: calc(var(--spacer) * 2) !important;
    }

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

    .pb-1 {
        padding-bottom: calc(var(--spacer) * .25) !important;
    }

    .pb-2 {
        padding-bottom: calc(var(--spacer) * .5) !important;
    }

    .pb-3 {
        padding-bottom: calc(var(--spacer) * 1) !important;
    }

    .pb-4 {
        padding-bottom: calc(var(--spacer) * 1.5) !important;
    }

    .pb-5 {
        padding-bottom: calc(var(--spacer) * 3) !important;
    }

    .pb-6 {
        padding-bottom: calc(var(--spacer) * 2) !important;
    }

    .pl-0 {
        padding-left: 0 !important;
    }

    .pl-1 {
        padding-left: calc(var(--spacer) * .25) !important;
    }

    .pl-2 {
        padding-left: calc(var(--spacer) * .5) !important;
    }

    .pl-3 {
        padding-left: calc(var(--spacer) * 1) !important;
    }

    .pl-4 {
        padding-left: calc(var(--spacer) * 1.5) !important;
    }

    .pl-5 {
        padding-left: calc(var(--spacer) * 3) !important;
    }

    .pl-6 {
        padding-left: calc(var(--spacer) * 2) !important;
    }

    .pr-0 {
        padding-right: 0 !important;
    }

    .pr-1 {
        padding-right: calc(var(--spacer) * .25) !important;
    }

    .pr-2 {
        padding-right: calc(var(--spacer) * .5) !important;
    }

    .pr-3 {
        padding-right: calc(var(--spacer) * 1) !important;
    }

    .pr-4 {
        padding-right: calc(var(--spacer) * 1.5) !important;
    }

    .pr-5 {
        padding-right: calc(var(--spacer) * 3) !important;
    }

    .pr-6 {
        padding-right: calc(var(--spacer) * 2) !important;
    }

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

    .mt-1 {
        margin-top: calc(var(--spacer) * .25) !important;
    }

    .mt-2 {
        margin-top: calc(var(--spacer) * .5) !important;
    }

    .mt-3 {
        margin-top: calc(var(--spacer) * 1) !important;
    }

    .mt-4 {
        margin-top: calc(var(--spacer) * 1.5) !important;
    }

    .mt-5 {
        margin-top: calc(var(--spacer) * 3) !important;
    }

    .mt-6 {
        margin-top: calc(var(--spacer) * 2) !important;
    }

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

    .mb-1 {
        margin-bottom: calc(var(--spacer) * .25) !important;
    }

    .mb-2 {
        margin-bottom: calc(var(--spacer) * .5) !important;
    }

    .mb-3 {
        margin-bottom: calc(var(--spacer) * 1) !important;
    }

    .mb-4 {
        margin-bottom: calc(var(--spacer) * 1.5) !important;
    }

    .mb-5 {
        margin-bottom: calc(var(--spacer) * 3) !important;
    }

    .mb-6 {
        margin-bottom: calc(var(--spacer) * 2) !important;
    }

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

    .ml-1 {
        margin-left: calc(var(--spacer) * .25) !important;
    }

    .ml-2 {
        margin-left: calc(var(--spacer) * .5) !important;
    }

    .ml-3 {
        margin-left: calc(var(--spacer) * 1) !important;
    }

    .ml-4 {
        margin-left: calc(var(--spacer) * 1.5) !important;
    }

    .ml-5 {
        margin-left: calc(var(--spacer) * 3) !important;
    }

    .ml-6 {
        margin-left: calc(var(--spacer) * 2) !important;
    }

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

    .mr-1 {
        margin-right: calc(var(--spacer) * .25) !important;
    }

    .mr-2 {
        margin-right: calc(var(--spacer) * .5) !important;
    }

    .mr-3 {
        margin-right: calc(var(--spacer) * 1) !important;
    }

    .mr-4 {
        margin-right: calc(var(--spacer) * 1.5) !important;
    }

    .mr-5 {
        margin-right: calc(var(--spacer) * 3) !important;
    }

    .mr-6 {
        margin-right: calc(var(--spacer) * 2) !important;
    }
}


@media(min-width: 768px) {
    .nopadding-right-sm{
        padding-right: 0 !important;
    }
}



/* =========================================================
   RESPONSIVE (Bootst