:root {

    /* =====================================================
       COLORS
       Property: color / background-color
    ===================================================== */

    /* ---------------- Red ---------------- */

    --bs-color-red-50: #fef2f2;
    --bs-color-red-100: #fee2e2;
    --bs-color-red-500: #ef4444;
    --bs-color-red-600: #dc2626;
    --bs-color-red-800: #991b1b;


    /* ---------------- Orange ---------------- */

    --bs-color-orange-50: #fff7ed;
    --bs-color-orange-100: #ffedd5;
    --bs-color-orange-200: #fed7aa;
    --bs-color-orange-300: #fdba74;
    --bs-color-orange-500: #f97316;
    --bs-color-orange-600: #ea580c;


    /* ---------------- Amber ---------------- */

    --bs-color-amber-50: #fffbeb;
    --bs-color-amber-400: #fbbf24;
    --bs-color-amber-600: #d97706;


    /* ---------------- Yellow ---------------- */

    --bs-color-yellow-50: #fefce8;
    --bs-color-yellow-100: #fef9c3;
    --bs-color-yellow-400: #facc15;
    --bs-color-yellow-600: #ca8a04;


    /* ---------------- Green ---------------- */

    --bs-color-green-100: #dcfce7;
    --bs-color-green-600: #16a34a;
    --bs-color-green-700: #15803d;


    /* ---------------- Blue ---------------- */

    --bs-color-blue-100: #dbeafe;
    --bs-color-blue-500: #3b82f6;
    --bs-color-blue-600: #2563eb;
    --bs-color-blue-700: #1d4ed8;


    /* ---------------- Pink ---------------- */

    --bs-color-pink-100: #fce7f3;
    --bs-color-pink-600: #db2777;


    /* ---------------- Gray ---------------- */

    --bs-color-gray-50: #f9fafb;
    --bs-color-gray-200: #e5e7eb;
    --bs-color-gray-500: #6b7280;
    --bs-color-gray-600: #4b5563;
    --bs-color-gray-700: #374151;
    --bs-color-gray-900: #111827;


    /* ---------------- White ---------------- */

    --bs-color-white: #ffffff;



    /* =====================================================
       FONT FAMILY
       Property: font-family
    ===================================================== */

    --bs-font-heading: "Days One", sans-serif;
    --bs-font-body: "Chakra Petch", sans-serif;



    /* =====================================================
       FONT SIZE
       Property: font-size
    ===================================================== */

    --bs-text-xs: 0.75rem;
    --bs-text-xs-line-height: calc(1 / 0.75);

    --bs-text-sm: 0.875rem;
    --bs-text-sm-line-height: calc(1.25 / 0.875);

    --bs-text-base: 1rem;
    --bs-text-base-line-height: 1.5;

    --bs-text-lg: 1.125rem;
    --bs-text-lg-line-height: calc(1.75 / 1.125);

    --bs-text-xl: 1.25rem;
    --bs-text-xl-line-height: calc(1.75 / 1.25);

    --bs-text-2xl: 1.5rem;
    --bs-text-2xl-line-height: calc(2 / 1.5);

    --bs-text-4xl: 2.25rem;
    --bs-text-4xl-line-height: calc(2.5 / 2.25);



    /* =====================================================
       FONT WEIGHT
       Property: font-weight
    ===================================================== */

    --bs-font-weight-medium: 500;
    --bs-font-weight-semibold: 600;
    --bs-font-weight-bold: 700;



    /* =====================================================
       SPACING
       Base value
       Used for: margin / padding / gap
    ===================================================== */

    --bs-spacing: 0.25rem;



    /* =====================================================
       CONTAINER
       Property: max-width
    ===================================================== */
    --bs-container-xl: 36rem;
    --bs-container-7xl: 80rem;

    /* =====================================================
       BORDER RADIUS
       Property: border-radius
    ===================================================== */

    --bs-radius-lg: 0.5rem;
    --bs-radius-xl: 0.75rem;
    --bs-radius-2xl: 1rem;
    --bs-radius-3xl: 1.5rem;




    /* =====================================================
       BLUR
       Property: filter
    ===================================================== */

    --bs-blur-sm: 8px;



    /* =====================================================
       TRANSITION
       Properties:
       transition-duration
       transition-timing-function
    ===================================================== */

    --bs-transition-duration: 0.15s;

    --bs-transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);



    /* =====================================================
       SCROLLBAR
       Property: background-color
    ===================================================== */

    --bs-color-scrollbar-thumb: #fe886a4d;

    --bs-color-scrollbar-thumb-hover:
        rgba(217, 119, 6, 0.5);
}


/* =========================================================
   TEXT COLORS
   Property: color
========================================================= */


/* ---------------- Red ---------------- */

.text-red-50 {
    color: var(--bs-color-red-50) !important;
}

.text-red-100 {
    color: var(--bs-color-red-100) !important;
}

.text-red-500 {
    color: var(--bs-color-red-500) !important;
}

.text-red-600 {
    color: var(--bs-color-red-600) !important;
}

.text-red-800 {
    color: var(--bs-color-red-800) !important;
}


/* ---------------- Orange ---------------- */

.text-orange-50 {
    color: var(--bs-color-orange-50) !important;
}

.text-orange-100 {
    color: var(--bs-color-orange-100) !important;
}

.text-orange-200 {
    color: var(--bs-color-orange-200) !important;
}

.text-orange-300 {
    color: var(--bs-color-orange-300) !important;
}

.text-orange-500 {
    color: var(--bs-color-orange-500) !important;
}

.text-orange-600 {
    color: var(--bs-color-orange-600) !important;
}


/* ---------------- Amber ---------------- */

.text-amber-50 {
    color: var(--bs-color-amber-50) !important;
}

.text-amber-400 {
    color: var(--bs-color-amber-400) !important;
}

.text-amber-600 {
    color: var(--bs-color-amber-600) !important;
}


/* ---------------- Yellow ---------------- */

.text-yellow-50 {
    color: var(--bs-color-yellow-50) !important;
}

.text-yellow-100 {
    color: var(--bs-color-yellow-100) !important;
}

.text-yellow-400 {
    color: var(--bs-color-yellow-400) !important;
}

.text-yellow-600 {
    color: var(--bs-color-yellow-600) !important;
}


/* ---------------- Green ---------------- */

.text-green-100 {
    color: var(--bs-color-green-100) !important;
}

.text-green-600 {
    color: var(--bs-color-green-600) !important;
}

.text-green-700 {
    color: var(--bs-color-green-700) !important;
}


/* ---------------- Blue ---------------- */

.text-blue-100 {
    color: var(--bs-color-blue-100) !important;
}

.text-blue-500 {
    color: var(--bs-color-blue-500) !important;
}

.text-blue-600 {
    color: var(--bs-color-blue-600) !important;
}

.text-blue-700 {
    color: var(--bs-color-blue-700) !important;
}


/* ---------------- Pink ---------------- */

.text-pink-100 {
    color: var(--bs-color-pink-100) !important;
}

.text-pink-600 {
    color: var(--bs-color-pink-600) !important;
}


/* ---------------- Gray ---------------- */

.text-gray-50 {
    color: var(--bs-color-gray-50) !important;
}

.text-gray-200 {
    color: var(--bs-color-gray-200) !important;
}

.text-gray-500 {
    color: var(--bs-color-gray-500) !important;
}

.text-gray-600 {
    color: var(--bs-color-gray-600) !important;
}

.text-gray-700 {
    color: var(--bs-color-gray-700) !important;
}

.text-gray-900 {
    color: var(--bs-color-gray-900) !important;
}


/* ---------------- White ---------------- */

.text-white-custom {
    color: var(--bs-color-white) !important;
}


/* =========================================================
   BACKGROUND COLORS
   Property: background-color
========================================================= */


/* ---------------- Red ---------------- */

.bg-red-50 {
    background-color: var(--bs-color-red-50) !important;
}

.bg-red-100 {
    background-color: var(--bs-color-red-100) !important;
}

.bg-red-500 {
    background-color: var(--bs-color-red-500) !important;
}

.bg-red-600 {
    background-color: var(--bs-color-red-600) !important;
}

.bg-red-800 {
    background-color: var(--bs-color-red-800) !important;
}


/* ---------------- Orange ---------------- */

.bg-orange-50 {
    background-color: var(--bs-color-orange-50) !important;
}

.bg-orange-100 {
    background-color: var(--bs-color-orange-100) !important;
}

.bg-orange-200 {
    background-color: var(--bs-color-orange-200) !important;
}

.bg-orange-300 {
    background-color: var(--bs-color-orange-300) !important;
}

.bg-orange-500 {
    background-color: var(--bs-color-orange-500) !important;
}

.bg-orange-600 {
    background-color: var(--bs-color-orange-600) !important;
}


/* ---------------- Amber ---------------- */

.bg-amber-50 {
    background-color: var(--bs-color-amber-50) !important;
}

.bg-amber-400 {
    background-color: var(--bs-color-amber-400) !important;
}

.bg-amber-600 {
    background-color: var(--bs-color-amber-600) !important;
}


/* ---------------- Yellow ---------------- */

.bg-yellow-50 {
    background-color: var(--bs-color-yellow-50) !important;
}

.bg-yellow-100 {
    background-color: var(--bs-color-yellow-100) !important;
}

.bg-yellow-400 {
    background-color: var(--bs-color-yellow-400) !important;
}

.bg-yellow-600 {
    background-color: var(--bs-color-yellow-600) !important;
}


/* ---------------- Green ---------------- */

.bg-green-100 {
    background-color: var(--bs-color-green-100) !important;
}

.bg-green-600 {
    background-color: var(--bs-color-green-600) !important;
}

.bg-green-700 {
    background-color: var(--bs-color-green-700) !important;
}


/* ---------------- Blue ---------------- */

.bg-blue-100 {
    background-color: var(--bs-color-blue-100) !important;
}

.bg-blue-500 {
    background-color: var(--bs-color-blue-500) !important;
}

.bg-blue-600 {
    background-color: var(--bs-color-blue-600) !important;
}

.bg-blue-700 {
    background-color: var(--bs-color-blue-700) !important;
}


/* ---------------- Pink ---------------- */

.bg-pink-100 {
    background-color: var(--bs-color-pink-100) !important;
}

.bg-pink-600 {
    background-color: var(--bs-color-pink-600) !important;
}


/* ---------------- Gray ---------------- */

.bg-gray-50 {
    background-color: var(--bs-color-gray-50) !important;
}

.bg-gray-200 {
    background-color: var(--bs-color-gray-200) !important;
}

.bg-gray-500 {
    background-color: var(--bs-color-gray-500) !important;
}

.bg-gray-600 {
    background-color: var(--bs-color-gray-600) !important;
}

.bg-gray-700 {
    background-color: var(--bs-color-gray-700) !important;
}

.bg-gray-900 {
    background-color: var(--bs-color-gray-900) !important;
}

/* =========================================================
   BORDER COLORS
   Property: border-color
========================================================= */


/* ---------------- Red ---------------- */

.border-red-50 {
    border-color: var(--bs-color-red-50) !important;
}

.border-red-100 {
    border-color: var(--bs-color-red-100) !important;
}

.border-red-500 {
    border-color: var(--bs-color-red-500) !important;
}

.border-red-600 {
    border-color: var(--bs-color-red-600) !important;
}

.border-red-800 {
    border-color: var(--bs-color-red-800) !important;
}


/* ---------------- Orange ---------------- */

.border-orange-50 {
    border-color: var(--bs-color-orange-50) !important;
}

.border-orange-100 {
    border-color: var(--bs-color-orange-100) !important;
}

.border-orange-200 {
    border-color: var(--bs-color-orange-200) !important;
}

.border-orange-300 {
    border-color: var(--bs-color-orange-300) !important;
}

.border-orange-500 {
    border-color: var(--bs-color-orange-500) !important;
}

.border-orange-600 {
    border-color: var(--bs-color-orange-600) !important;
}


/* ---------------- Amber ---------------- */

.border-amber-50 {
    border-color: var(--bs-color-amber-50) !important;
}

.border-amber-400 {
    border-color: var(--bs-color-amber-400) !important;
}

.border-amber-600 {
    border-color: var(--bs-color-amber-600) !important;
}


/* ---------------- Yellow ---------------- */

.border-yellow-50 {
    border-color: var(--bs-color-yellow-50) !important;
}

.border-yellow-100 {
    border-color: var(--bs-color-yellow-100) !important;
}

.border-yellow-400 {
    border-color: var(--bs-color-yellow-400) !important;
}

.border-yellow-600 {
    border-color: var(--bs-color-yellow-600) !important;
}


/* ---------------- Green ---------------- */

.border-green-100 {
    border-color: var(--bs-color-green-100) !important;
}

.border-green-600 {
    border-color: var(--bs-color-green-600) !important;
}

.border-green-700 {
    border-color: var(--bs-color-green-700) !important;
}


/* ---------------- Blue ---------------- */

.border-blue-100 {
    border-color: var(--bs-color-blue-100) !important;
}

.border-blue-500 {
    border-color: var(--bs-color-blue-500) !important;
}

.border-blue-600 {
    border-color: var(--bs-color-blue-600) !important;
}

.border-blue-700 {
    border-color: var(--bs-color-blue-700) !important;
}


/* ---------------- Pink ---------------- */

.border-pink-100 {
    border-color: var(--bs-color-pink-100) !important;
}

.border-pink-600 {
    border-color: var(--bs-color-pink-600) !important;
}


/* ---------------- Gray ---------------- */

.border-gray-50 {
    border-color: var(--bs-color-gray-50) !important;
}

.border-gray-200 {
    border-color: var(--bs-color-gray-200) !important;
}

.border-gray-500 {
    border-color: var(--bs-color-gray-500) !important;
}

.border-gray-600 {
    border-color: var(--bs-color-gray-600) !important;
}

.border-gray-700 {
    border-color: var(--bs-color-gray-700) !important;
}

.border-gray-900 {
    border-color: var(--bs-color-gray-900) !important;
}


/* ---------------- White ---------------- */

.border-white-custom {
    border-color: var(--bs-color-white) !important;
}

/* =========================================================
   FONT FAMILY
   Property: font-family
========================================================= */

.font-heading {
    font-family: var(--bs-font-heading) !important;
}

.font-body {
    font-family: var(--bs-font-body) !important;
}


/* =========================================================
   FONT SIZE
   Properties:
   font-size
   line-height
========================================================= */

.text-xs {
    font-size: var(--bs-text-xs) !important;
    line-height: var(--bs-text-xs-line-height) !important;
}

.text-sm {
    font-size: var(--bs-text-sm) !important;
    line-height: var(--bs-text-sm-line-height) !important;
}

.text-base {
    font-size: var(--bs-text-base) !important;
    line-height: var(--bs-text-base-line-height) !important;
}

.text-lg {
    font-size: var(--bs-text-lg) !important;
    line-height: var(--bs-text-lg-line-height) !important;
}

.text-xl {
    font-size: var(--bs-text-xl) !important;
    line-height: var(--bs-text-xl-line-height) !important;
}

.text-2xl {
    font-size: var(--bs-text-2xl) !important;
    line-height: var(--bs-text-2xl-line-height) !important;
}

.text-4xl {
    font-size: var(--bs-text-4xl) !important;
    line-height: var(--bs-text-4xl-line-height) !important;
}

/* =========================================================
   Small devices - min-width: 576px
========================================================= */

@media (min-width: 576px) {

    .text-xs-sm {
        font-size: var(--bs-text-xs) !important;
        line-height: var(--bs-text-xs-line-height) !important;
    }

    .text-sm-sm {
        font-size: var(--bs-text-sm) !important;
        line-height: var(--bs-text-sm-line-height) !important;
    }

    .text-base-sm {
        font-size: var(--bs-text-base) !important;
        line-height: var(--bs-text-base-line-height) !important;
    }

    .text-lg-sm {
        font-size: var(--bs-text-lg) !important;
        line-height: var(--bs-text-lg-line-height) !important;
    }

    .text-xl-sm {
        font-size: var(--bs-text-xl) !important;
        line-height: var(--bs-text-xl-line-height) !important;
    }

    .text-2xl-sm {
        font-size: var(--bs-text-2xl) !important;
        line-height: var(--bs-text-2xl-line-height) !important;
    }

    .text-4xl-sm {
        font-size: var(--bs-text-4xl) !important;
        line-height: var(--bs-text-4xl-line-height) !important;
    }
}


/* =========================================================
   Medium devices - min-width: 768px
========================================================= */

@media (min-width: 768px) {

    .text-xs-md {
        font-size: var(--bs-text-xs) !important;
        line-height: var(--bs-text-xs-line-height) !important;
    }

    .text-sm-md {
        font-size: var(--bs-text-sm) !important;
        line-height: var(--bs-text-sm-line-height) !important;
    }

    .text-base-md {
        font-size: var(--bs-text-base) !important;
        line-height: var(--bs-text-base-line-height) !important;
    }

    .text-lg-md {
        font-size: var(--bs-text-lg) !important;
        line-height: var(--bs-text-lg-line-height) !important;
    }

    .text-xl-md {
        font-size: var(--bs-text-xl) !important;
        line-height: var(--bs-text-xl-line-height) !important;
    }

    .text-2xl-md {
        font-size: var(--bs-text-2xl) !important;
        line-height: var(--bs-text-2xl-line-height) !important;
    }

    .text-4xl-md {
        font-size: var(--bs-text-4xl) !important;
        line-height: var(--bs-text-4xl-line-height) !important;
    }

    /*========margin-right=====*/
    .mr-2px-md{
        margin-right: calc(var(--bs-spacing) * 2) !important; /*8px*/
    }
}


/* =========================================================
   Large devices - min-width: 992px
========================================================= */

@media (min-width: 992px) {

    .text-xs-lg {
        font-size: var(--bs-text-xs) !important;
        line-height: var(--bs-text-xs-line-height) !important;
    }

    .text-sm-lg {
        font-size: var(--bs-text-sm) !important;
        line-height: var(--bs-text-sm-line-height) !important;
    }

    .text-base-lg {
        font-size: var(--bs-text-base) !important;
        line-height: var(--bs-text-base-line-height) !important;
    }

    .text-lg-lg {
        font-size: var(--bs-text-lg) !important;
        line-height: var(--bs-text-lg-line-height) !important;
    }

    .text-xl-lg {
        font-size: var(--bs-text-xl) !important;
        line-height: var(--bs-text-xl-line-height) !important;
    }

    .text-2xl-lg {
        font-size: var(--bs-text-2xl) !important;
        line-height: var(--bs-text-2xl-line-height) !important;
    }

    .text-4xl-lg {
        font-size: var(--bs-text-4xl) !important;
        line-height: var(--bs-text-4xl-line-height) !important;
    }
}


/* =========================================================
   Extra Large devices - min-width: 1200px
========================================================= */

@media (min-width: 1200px) {

    .text-xs-xl {
        font-size: var(--bs-text-xs) !important;
        line-height: var(--bs-text-xs-line-height) !important;
    }

    .text-sm-xl {
        font-size: var(--bs-text-sm) !important;
        line-height: var(--bs-text-sm-line-height) !important;
    }

    .text-base-xl {
        font-size: var(--bs-text-base) !important;
        line-height: var(--bs-text-base-line-height) !important;
    }

    .text-lg-xl {
        font-size: var(--bs-text-lg) !important;
        line-height: var(--bs-text-lg-line-height) !important;
    }

    .text-xl-xl {
        font-size: var(--bs-text-xl) !important;
        line-height: var(--bs-text-xl-line-height) !important;
    }

    .text-2xl-xl {
        font-size: var(--bs-text-2xl) !important;
        line-height: var(--bs-text-2xl-line-height) !important;
    }

    .text-4xl-xl {
        font-size: var(--bs-text-4xl) !important;
        line-height: var(--bs-text-4xl-line-height) !important;
    }
}
/* =========================================================
   FONT WEIGHT
   Property: font-weight
========================================================= */

.fw-medium {
    font-weight: var(--bs-font-weight-medium) !important;
}

.fw-semibold {
    font-weight: var(--bs-font-weight-semibold) !important;
}

.fw-bold {
    font-weight: var(--bs-font-weight-bold) !important;
}


/* =========================================================
   BORDER RADIUS
   Property: border-radius
========================================================= */

.rounded-lg {
    border-radius: var(--bs-radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--bs-radius-xl) !important;
}

.rounded-2xl {
    border-radius: var(--bs-radius-2xl) !important;
}

.rounded-3xl {
    border-radius: var(--bs-radius-3xl) !important;
}
.rounded-full{
    border-radius: 9999px !important;
}

/* =========================================================
   SPACING
   Properties:
   margin
   padding
   gap
========================================================= */


/* ---------------- Margin ---------------- */

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

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

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

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

.m-5 {
    margin: calc(var(--bs-spacing) * 5) !important;
}
/*-----margin-right---*/
.mr-1px{
    margin-right: calc(var(--bs-spacing) * 1) !important;/*4px*/ 
}
.mr-12{
    margin-right: calc(var(--bs-spacing) * 3) !important;/*12px*/
}
/*-------margin-top-----*/
.mt-1px{
    margin-top: calc(var(--bs-spacing) * 1) !important; /*4px*/
}
.mt-8{
    margin-top: calc(var(--bs-spacing) * 8) !important;
}
.mt-16{
    margin-top: calc(var(--bs-spacing) * 4) !important; /*16px*/
}
/*-------margin-bottom----*/
.mb-6{
    margin-bottom: calc(var(--bs-spacing) * 6) !important;/*24px*/
}
.mb-8{
    margin-bottom: calc(var(--bs-spacing) * 8) !important;
}
.mb-2px{
    margin-bottom: calc(var(--bs-spacing) * 2) !important; /*8px*/
}
.mb-3px{
    margin-bottom: calc(var(--bs-spacing) * 3) !important;/*12px*/
}
/*-------margin-block-start-----*/
.mts-4{
    margin-block-start: calc(var(--bs-spacing) * 1) !important;/*==== 4px====*/
}
.mts-5{
    margin-block-start: calc(var(--bs-spacing) * 5) !important;/*==== 20px====*/
}
/*---------margin-block-end------*/
.mte-3{
    margin-block-end: calc(var(--bs-spacing) * 3) !important;/*====12px====*/
}
.mte-4{
    margin-block-end: calc(var(--bs-spacing) * 1) !important;/*==== 4px====*/
}
.mte-16{
    margin-block-end: calc(var(--bs-spacing) * 4) !important;/*16px*/
}
.mte-5{
    margin-block-end: calc(var(--bs-spacing) * 5) !important;  /*==== 20px====*/
}
.mte-6{
    margin-block-end: calc(var(--bs-spacing) * 6) !important;  /*==== 24px====*/
}
/*--------margin-inline-end------*/
.me-2px{
    margin-inline-end: calc(var(--bs-spacing) *2) !important;/*/8px*/
}
.me-6  
{ margin-inline-end: calc(var(--bs-spacing) * 6) !important; 
}
.me-12  
{ margin-inline-end: calc(var(--bs-spacing) * 3) !important; 
}
/* ---------------- Padding ---------------- */

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

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

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

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

.p-5 {
    padding: calc(var(--bs-spacing) * 5) !important;
}
.p-6{
    padding: calc(var(--bs-spacing) * 6) !important;
}
/*------padding-bottom---*/
.pb-2px{
    padding-bottom: calc(var(--bs-spacing) * 2) !important;/*8px*/
}
.pb-16{
    padding-bottom: calc(var(--bs-spacing) * 4) !important;/*16px*/
}
/*-------padding-top-----*/
.pt-2px{
    padding-top: calc(var(--bs-spacing) * 2) !important; /*8px*/
}
.pt-6{
    padding-top: calc(var(--bs-spacing) * 6) !important
}
.pt-16{
    padding-top: calc(var(--bs-spacing) * 4) !important; /*16px*/
}
/*---------padding-inline------*/
.px-3px{
    padding-inline: calc(var(--bs-spacing) * 3) !important;/*12px*/
}
.px-4{
    padding-inline: calc(var(--bs-spacing) * 4) !important;/*16px*/
}
.px-6{ 
    padding-inline: calc(var(--bs-spacing) * 6) !important; 
}
/*---------padding-block------*/
.py-16{
    padding-block: calc(var(--bs-spacing) * 4) !important;  /*====16px===*/
}
.py-1px{
    padding-block: calc(var(--bs-spacing) * 1) !important; /*8px*/
}
.py-8{
    padding-block: calc(var(--bs-spacing) * 8) !important;  /*====32px===*/
}

/* ---------------- Gap ---------------- */

.gap-1 {
    gap: calc(var(--bs-spacing) * 1) !important;
}

.gap-2 {
    gap: calc(var(--bs-spacing) * 2) !important;
}

.gap-3 {
    gap: calc(var(--bs-spacing) * 3) !important;
}

.gap-4 {
    gap: calc(var(--bs-spacing) * 4) !important;
}

.gap-5 {
    gap: calc(var(--bs-spacing) * 5) !important;
}


/* =========================================================
   CONTAINER
   Property: max-width
========================================================= */

.min-w-xl {
    max-width: var(--bs-container-xl) !important;
}

.max-w-7xl {
    max-width: var(--bs-container-7xl) !important;
}


/* =========================================================
   BLUR
   Property: filter
========================================================= */

.blur-sm {
    backdrop-filter: blur(var(--bs-blur-sm)) !important;
}


/* =========================================================
   TRANSITION
   Properties:
   transition-duration
   transition-timing-function
========================================================= */

.transition {
    transition-duration: var(--bs-transition-duration) !important;
    transition-timing-function: var(--bs-transition-timing-function) !important;
}


/* =========================================================
   SCROLLBAR
   Property: background-color
========================================================= */

::-webkit-scrollbar-thumb {
    background-color: var(--bs-color-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-color-scrollbar-thumb-hover);
}

/* =========================================================
   SHADOW
========================================================= */
.shadow-xl{
    box-shadow: 
    0 20px 25px -5px #0000001a,
    0 8px 10px  -6px #0000001a
    !important;
}
/* =========================================================
   Display:Flex
========================================================= */
.flex-1{
    flex: 1;
}