/* Order of arrangement
fonts
root
html
body
tags and their pseudos
tags combination and their pseudos
single style attribute => name of attribute then alphabetical
multiple style attributes => buttons, card, etc
nested and others
page specifics
*/

@font-face {
    font-family: "Baron Neue";
    src: url("/public/assets/fonts/baron_neue/Baron Neue Italic.otf")
        format("opentype");
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: "Baron Neue";
    src: url("/public/assets/fonts/baron_neue/Baron Neue.otf")
        format("opentype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Baron Neue";
    src: url("/public/assets/fonts/baron_neue/Baron Neue Bold Italic.otf")
        format("opentype");
    font-style: italic;
    font-weight: 500;
}

@font-face {
    font-family: "Baron Neue";
    src: url("/public/assets/fonts/baron_neue/Baron Neue Bold.otf")
        format("opentype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Baron Neue";
    src: url("/public/assets/fonts/baron_neue/Baron Neue Black Italic.otf")
        format("opentype");
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: "Baron Neue";
    src: url("/public/assets/fonts/baron_neue/Baron Neue Black.otf")
        format("opentype");
    font-style: normal;
    font-weight: 700;
}

:root {
    --accent-lemon-dark-0: #55661e;
    --accent-lemon-dark-1: #6b8026;
    --accent-lemon-dark-2: #81992d;
    --accent-lemon-dark-3: #97b335;
    --accent-lemon-dark-4: #adcc3d;
    --accent-lemon: #c7ea46;
    --accent-lemon-light-0: #e5f0c0;
    --accent-lemon-light-1: #daf090;
    --accent-lemon-light-2: #d5f078;
    --accent-lemon-light-3: #d0f060;
    --accent-lemon-light-4: #cbf048;
    --accent-orange-dark-0: #805f11;
    --accent-orange-dark-1: #997214;
    --accent-orange-dark-2: #b3862d;
    --accent-orange-dark-3: #cc981a;
    --accent-orange-dark-4: #e6ab1d;
    --accent-orange: #fcc132;
    --accent-orange-light-0: #fcecca;
    --accent-orange-light-1: #fcde97;
    --accent-orange-light-2: #fcd67e;
    --accent-orange-light-3: #fcce65;
    --accent-orange-light-4: #fcc84c;
    --blue-0: #171c23;
    --blue-1: #303848;
    --blue-2: #444f66;
    --blue-3: #556380;
    --blue-4: #667699;
    --blue-5: #778ab3;
    --blue-6: #6b82b3;
    --blue-7: #5a76b3;
    --blue-8: #4869b3;
    --blue-9: #365cb3;
    --blue-10: #244fb3;
    --blue-11: #1877f2;
    --neutral-0: #000000;
    --neutral-1: #1a1a1a;
    --neutral-2: #333333;
    --neutral-3: #4d4d4d;
    --neutral-4: #666666;
    --neutral-5: #808080;
    --neutral-6: #999999;
    --neutral-7: #b3b3b3;
    --neutral-8: #cccccc;
    --neutral-9: #e6e6e6;
    --neutral-10: #fcfcfc;
    --red: #ed3d3d;
    --white: #ffffff;
    --yellow: #fdf655;
    --accent-bg: #fbfcf7;
    --success-green: #198754;
    --light-blue: #f5f8ff;
    --utility-neutral: linear-gradient(var(--white), var(--neutral-0));
    --background: #f0f5ff;
    --tertiary: #d6e4ff;
    --secondary: #b8cfff;
    --primary: #4785ff;
    --darkblue: #264073;
    --bg-body: #f5f5f5;
    --footer-margin-desktop: 100px;
    --footer-margin-mobile: 60px;
    --header-margin-desktop: 60px;
    --header-margin-mobile: 40px;
    --container-alignment-padding-mobile: 16px;
    --container-alignment-padding-tablet: 50px;
    --container-alignment-padding-desktop: 70px;
}

body {
    background-color: var(--bg-body);
    margin: 0;
    font-family: "Inter", sans-serif;
}

header {
    font-size: 15px;
    background-color: var(--white);
}

header .logo {
    max-width: 40%;
}

header form svg {
    margin-top: 17px;
}

footer {
    margin-top: var(--footer-margin-desktop) !important;
}

a {
    color: var(--accent-lemon-dark-2);
}

b {
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
}

h1 {
    font-size: 61px;
}

h2 {
    font-size: 49px;
}

h3 {
    font-size: 39px;
}

h4 {
    font-size: 31px;
    /*font-size: 1.2rem !important;*/
}

h5 {
    font-size: 25px;
}

h6 {
    font-size: 20px;
}

p {
    font-weight: 400 !important;
}

/* Utitlities */
/* link */
.link-primary {
    color: var(--accent-lemon-dark-2) !important;
}
.link-secondary {
    color: var(--accent-orange-dark-3) !important;
}
.link-1 {
    color: var(--accent-lemon) !important;
}
/* end link */
.font-bold {
    font-weight: bolder !important;
}

/* breadcrumbs */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--neutral-0);
    content: "|" !important;
}

/* end breadcrumb */
.iziToast.iziToast-color-red {
    background-color: var(--red);
}
select[value="disabled"],
::-webkit-input-placeholder {
    color: var(--neutral-6);
}

/* Background */
.bg-success {
    background-color: var(--success-green) !important;
}

.bg-neutral {
    background-color: var(--neutral-0) !important;
}

.bg-neutral-8 {
    background-color: var(--neutral-8) !important;
}
.bg-neutral-9 {
    background-color: var(--neutral-9) !important;
}

.bg-neutral-10 {
    background-color: var(--neutral-10) !important;
}

.bg-lemon {
    background-color: var(--accent-lemon) !important;
}

.bg-lemon-dark-1 {
    background-color: var(--accent-lemon-dark-1) !important;
}
.bg-lemon-dark-2 {
    background-color: var(--accent-lemon-dark-2) !important;
}

.bg-lemon-dark-2 {
    background-color: var(--accent-lemon-dark-2) !important;
}

.bg-lemon-light-0 {
    background-color: var(--accent-lemon-light-0) !important;
}

.bg-lemon-light-1 {
    background-color: var(--accent-lemon-light-1) !important;
}

.bg-lemon-light-2 {
    background-color: var(--accent-lemon-light-2) !important;
}

.bg-blue-0 {
    background-color: var(--blue-0) !important;
}
.bg-blue-1 {
    background-color: var(--blue-1) !important;
}

.bg-blue-2 {
    background-color: var(--blue-2) !important;
}
.bg-blue-light {
    background-color: var(--light-blue);
}

.bg-body {
    background-color: var(--bg-body) !important;
}

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

.bg-orange-1 {
    background-color: var(--accent-orange-light-1) !important;
}
.bg-orange-3 {
    background-color: var(--accent-orange-light-3) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

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

.bg-body {
    background-color: var(--bg-body) !important;
}
@media screen and (min-width: 992px) {
    .bg-lg-neutral-1 {
        background-color: var(--neutral-1) !important;
    }
    .bg-lg-neutral-8 {
        background-color: var(--neutral-8) !important;
    }
    .bg-lg-lemon {
        background-color: var(--accent-lemon) !important;
    }
}
/* end text color */

/* Button */
/* standard button styles */
.btn {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    font-style: normal !important;
    font-weight: 700 !important;
    gap: 10px !important;
    line-height: 30px !important;
}

/* button blue */
.btn-blue {
    background-color: var(--blue-11);
    color: var(--white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}
/* button neutral 10 */
.btn-neutral-10 {
    background-color: var(--neutral-10);
    color: var(--neutral-0);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}
/* button neutral 1 */
.btn-neutral-2 {
    background-color: var(--neutral-9);
    color: var(--neutral-1);
}

/* button orange light */
.btn-orange-light {
    background-color: var(--accent-orange-light-2);
    color: var(--blue-1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

/* button orange */
.btn-orange {
    background-color: var(--accent-orange);
    color: var(--blue-1);
}

/* button lemon dark */
.btn-lemon-dark {
    background-color: var(--accent-lemon-dark-2);
    color: var(--accent-lemon-light-0);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-lemon-dark:hover {
    background-color: var(--accent-lemon-dark-2);
    color: var(--accent-lemon-light-0);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}
.btn-accent-lemon {
    background-color: var(--accent-lemon);
    color: var(--blue-2);
}

/* button lemon light */
.btn-lemon-light {
    background-color: var(--accent-lemon-light-0) !important;
    color: var(--accent-lemon-dark-2) !important;
}

.btn-lemon-light:hover {
    background-color: var(--accent-lemon-dark-2) !important;
    color: var(--accent-lemon-light-0) !important;
}

/* button lemon light-2 */
.btn-lemon-light-2 {
    background-color: var(--accent-lemon-light-2);
    color: var(--blue-1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

/* button lemon  */
.btn-lemon {
    background-color: var(--accent-lemon) !important;
    color: var(--blue-1) !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1) !important;
}
/* button transparent  */
.btn-transparent {
    background-color: transparent !important;
    color: var(--accent-lemon-dark-2) !important;
}
/* button yellow  */
.btn-yellow {
    background-color: var(--yellow) !important;
    color: var(--neutral-2) !important;
}
/* button gray */
.btn-grey {
    background-color: #e6e6e6;
}

.btn-lemon:hover {
    background-color: var(--accent-lemon-light-2) !important;
    color: var(--blue-1) !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* button red */
.btn-red {
    background-color: var(--red);
    color: var(--white);
}

/* button neutral 1 */
.btn-neutral-1 {
    background-color: var(--neutral-9);
    color: var(--neutral-4);
    box-shadow: 0px 2px 6px rgba(104, 80, 80, 0.1);
}

.btn-lg {
    border-radius: 70px !important;
    padding: 24px 48px !important;
    font-size: 25px !important;
}

.btn-md {
    border-radius: 70px !important;
    padding: 24px 48px !important;
    font-size: 25px !important;
}

.btn-sm {
    border-radius: 50px !important;
    padding: 16px 32px !important;
    font-size: 25px !important;
}

.btn-xsm {
    border-radius: 40px !important;
    padding: 16px !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
.btn-xs-half {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    padding: 16px !important;
    font-size: 16px !important;
    line-height: 19px !important;
}

.btn-xs {
    border-radius: 30px !important;
    padding: 16px 24px !important;
    font-size: 20px !important;
    line-height: 24px !important;
}

.btn-xxs {
    border-radius: 30px !important;
    padding: 10px 16px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: 0 0 0 0 rgb(13 110 253 / 25%);
}
@media screen and (min-width: 992px) {
    .btn-xsm {
        font-size: 20px !important;
        line-height: 24.2px !important;
    }
}
.shadow-none {
    box-shadow: none !important;
}
/* dropdown */
.dropdown-item:focus,
.dropdown-item:hover {
    color: #1e2125;
    background-color: transparent !important;
}

/* Text color */
.text-lemon {
    color: var(--accent-lemon);
}

.text-lemon-dark-1 {
    color: var(--accent-lemon-dark-1);
}

.text-lemon-dark-2 {
    color: var(--accent-lemon-dark-2);
}

.text-lemon-dark-3 {
    color: var(--accent-lemon-dark-3);
}

.text-lemon-light-2 {
    color: var(--accent-lemon-light-2);
}

.text-neutral {
    color: var(--neutral-0) !important;
}

.text-neutral-1 {
    color: var(--neutral-1) !important;
}

.text-neutral-2 {
    color: var(--neutral-2) !important;
}

.text-neutral-3 {
    color: var(--neutral-3) !important;
}

.text-neutral-4 {
    color: var(--neutral-4);
}

.text-neutral-5 {
    color: var(--neutral-5);
}

.text-neutral-6 {
    color: var(--neutral-6);
}

.text-neutral-7 {
    color: var(--neutral-7) !important;
}

.text-neutral-8 {
    color: var(--neutral-8) !important;
}
.text-neutral-9 {
    color: var(--neutral-9) !important;
}
.text-neutral-10 {
    color: var(--neutral-10) !important;
}

.text-orange-light-4 {
    color: var(--accent-orange-light-4) !important;
}

.text-orange-dark-4 {
    color: var(--accent-orange-dark-4) !important;
}

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

.text-blue-1 {
    color: var(--blue-1);
}

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

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

.text-success {
    color: var(--success-green) !important;
}
/* end text color */

/* text size */
.fs-xsmall {
    font-size: 10px !important;
}

.fs-small {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-24 {
    font-size: 24px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-30 {
    font-size: 30px !important;
}
.fs-32 {
    font-size: 32px !important;
}
.fs-40 {
    font-size: 40px !important;
}
.fs-48 {
    font-size: 48px !important;
}
.fs-49 {
    font-size: 49px !important;
}
.fs-50 {
    font-size: 50px !important;
}
.fs-60 {
    font-size: 60px !important;
}

.px-half {
    padding-left: 2px;
    padding-right: 2px;
}
.py-half {
    padding-top: 2px;
    padding-bottom: 2px;
}
@media screen and (min-width: 300px) {
    .fs-xs-10 {
        font-size: 10px !important;
    }
    .fs-xs-13 {
        font-size: 13px !important;
    }
    .fs-xs-14 {
        font-size: 14px !important;
    }
    .fs-xs-16 {
        font-size: 16px !important;
    }
    .fs-xs-24 {
        font-size: 24px !important;
    }
    .fs-xs-20 {
        font-size: 20px !important;
    }
    .fs-xs-30 {
        font-size: 30px !important;
    }
    .fs-xs-32 {
        font-size: 32px !important;
    }
    .fs-xs-40 {
        font-size: 40px !important;
    }
    .fs-xs-48 {
        font-size: 48px !important;
    }
    .fs-xs-49 {
        font-size: 49px !important;
    }
    .fs-xs-50 {
        font-size: 50px !important;
    }
    .fs-xs-60 {
        font-size: 60px !important;
    }
    .px-xs-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .px-xs-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-xs-16px {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .px-xs-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px-xs-24px {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .px-xs-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    .px-xs-32px {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .px-xs-36px {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .px-xs-40px {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .py-xs-4px {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .py-xs-8px {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .py-xs-16px {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .py-xs-20px {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py-xs-24px {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .py-sx-28px {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .py-xs-32px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-xs-36px {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .py-xs-40px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
@media screen and (min-width: 576px) {
    .fs-sm-10 {
        font-size: 10px !important;
    }
    .fs-sm-13 {
        font-size: 13px !important;
    }
    .fs-sm-14 {
        font-size: 14px !important;
    }
    .fs-sm-16 {
        font-size: 16px !important;
    }
    .fs-sm-24 {
        font-size: 24px !important;
    }
    .fs-sm-20 {
        font-size: 20px !important;
    }
    .fs-sm-30 {
        font-size: 30px !important;
    }
    .fs-sm-32 {
        font-size: 32px !important;
    }
    .fs-sm-40 {
        font-size: 40px !important;
    }
    .fs-sm-48 {
        font-size: 48px !important;
    }
    .fs-sm-49 {
        font-size: 49px !important;
    }
    .fs-sm-50 {
        font-size: 50px !important;
    }
    .fs-sm-60 {
        font-size: 60px !important;
    }

    .px-sm-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .px-sm-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-sm-16px {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .px-sm-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px-sm-24px {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .px-sm-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    .px-sm-32px {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .px-sm-36px {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .px-sm-40px {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .py-sm-4px {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .py-sm-8px {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .py-sm-16px {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .py-sm-20px {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py-sm-24px {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .py-sm-28px {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .py-sm-32px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-sm-36px {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .py-sm-40px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
@media screen and (min-width: 768px) {
    .fs-md-10 {
        font-size: 10px !important;
    }
    .fs-md-13 {
        font-size: 13px !important;
    }
    .fs-md-14 {
        font-size: 14px !important;
    }
    .fs-md-16 {
        font-size: 16px !important;
    }
    .fs-md-24 {
        font-size: 24px !important;
    }
    .fs-md-20 {
        font-size: 20px !important;
    }
    .fs-md-30 {
        font-size: 30px !important;
    }
    .fs-md-32 {
        font-size: 32px !important;
    }
    .fs-md-40 {
        font-size: 40px !important;
    }
    .fs-md-48 {
        font-size: 48px !important;
    }
    .fs-md-49 {
        font-size: 49px !important;
    }
    .fs-md-50 {
        font-size: 50px !important;
    }
    .fs-md-60 {
        font-size: 60px !important;
    }

    .px-md-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .px-md-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-md-16px {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .px-md-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px-md-24px {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .px-md-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    .px-md-32px {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .px-md-36px {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .px-md-40px {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .py-md-4px {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .py-md-8px {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .py-md-16px {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .py-md-20px {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py-md-24px {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .py-md-28px {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .py-md-32px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-md-36px {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .py-md-40px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
@media screen and (min-width: 992px) {
    .fs-lg-10 {
        font-size: 10px !important;
    }
    .fs-lg-13 {
        font-size: 13px !important;
    }
    .fs-lg-14 {
        font-size: 14px !important;
    }
    .fs-lg-16 {
        font-size: 16px !important;
    }
    .fs-lg-24 {
        font-size: 24px !important;
    }
    .fs-lg-20 {
        font-size: 20px !important;
    }
    .fs-lg-30 {
        font-size: 30px !important;
    }
    .fs-lg-32 {
        font-size: 32px !important;
    }
    .fs-lg-40 {
        font-size: 40px !important;
    }
    .fs-lg-48 {
        font-size: 48px !important;
    }
    .fs-lg-49 {
        font-size: 49px !important;
    }
    .fs-lg-50 {
        font-size: 50px !important;
    }
    .fs-lg-60 {
        font-size: 60px !important;
    }

    .px-lg-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .px-lg-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-lg-16px {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .px-lg-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px-lg-24px {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .px-lg-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    .px-lg-32px {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .px-lg-36px {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .px-lg-40px {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .py-lg-4px {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .py-lg-8px {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .py-lg-16px {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .py-lg-20px {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py-lg-24px {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .py-lg-28px {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .py-lg-32px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-lg-36px {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .py-lg-40px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
@media screen and (min-width: 1200px) {
    .fs-xl-10 {
        font-size: 10px !important;
    }
    .fs-xl-13 {
        font-size: 13px !important;
    }
    .fs-xl-14 {
        font-size: 14px !important;
    }
    .fs-xl-16 {
        font-size: 16px !important;
    }
    .fs-xl-24 {
        font-size: 24px !important;
    }
    .fs-xl-20 {
        font-size: 20px !important;
    }
    .fs-xl-30 {
        font-size: 30px !important;
    }
    .fs-xl-32 {
        font-size: 32px !important;
    }
    .fs-xl-40 {
        font-size: 40px !important;
    }
    .fs-xl-48 {
        font-size: 48px !important;
    }
    .fs-xl-49 {
        font-size: 49px !important;
    }
    .fs-xl-50 {
        font-size: 50px !important;
    }
    .fs-xl-60 {
        font-size: 60px !important;
    }

    .px-xl-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .px-xl-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-xl-16px {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .px-xl-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px-xl-24px {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .px-xl-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    .px-xl-32px {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .px-xl-36px {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .px-xl-40px {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .py-xl-4px {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .py-xl-8px {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .py-xl-16px {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .py-xl-20px {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py-xl-24px {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .py-xl-28px {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .py-xl-32px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-xl-36px {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .py-xl-40px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
@media screen and (min-width: 1400px) {
    .fs-xxl-10 {
        font-size: 10px !important;
    }
    .fs-xxl-13 {
        font-size: 13px !important;
    }
    .fs-xxl-14 {
        font-size: 14px !important;
    }
    .fs-xxl-16 {
        font-size: 16px !important;
    }
    .fs-xxl-24 {
        font-size: 24px !important;
    }
    .fs-xxl-20 {
        font-size: 20px !important;
    }
    .fs-xxl-30 {
        font-size: 30px !important;
    }
    .fs-xxl-32 {
        font-size: 32px !important;
    }
    .fs-xxl-40 {
        font-size: 40px !important;
    }
    .fs-xxl-48 {
        font-size: 48px !important;
    }
    .fs-xxl-49 {
        font-size: 49px !important;
    }
    .fs-xxl-50 {
        font-size: 50px !important;
    }
    .fs-xxl-60 {
        font-size: 60px !important;
    }

    .px-xxl-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .px-xxl-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-xxl-16px {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .px-xxl-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px-xxl-24px {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .px-xxl-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    .px-xxl-32px {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .px-xxl-36px {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .px-xxl-40px {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .py-xxl-4px {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .py-xxl-8px {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .py-xxl-16px {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .py-xxl-20px {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py-xxl-24px {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .py-xxl-28px {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .py-xxl-32px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-xxl-36px {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .py-xxl-40px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

.fs-normal {
    font-size: 16px !important;
}

.fs-xnormal {
    font-size: 20px !important;
}
.fs-xxnormal {
    font-size: 31px !important;
}
.fs-xl {
    font-size: 61px !important;
}

.fw-7 {
    font-weight: 700 !important;
}

.fw-6 {
    font-weight: 600 !important;
}

.fw-5 {
    font-weight: 500 !important;
}

.fw-4 {
    font-weight: 400 !important;
}
.fw-1 {
    font-weight: 100 !important;
}
.font-normal {
    font-weight: normal !important;
}
.full-width {
    width: 100% !important;
}
@media screen and (min-width: 992px) {
    .fs-lg-xsmall {
        font-size: 10px !important;
    }

    .fs-lg-small {
        font-size: 13px !important;
    }

    .fs-lg-normal {
        font-size: 16px !important;
    }

    .fs-lg-xnormal {
        font-size: 20px !important;
    }
    .fs-lg-xxnormal {
        font-size: 31px !important;
    }
    .fs-lg-xl {
        font-size: 61px !important;
    }

    .fw-lg-7 {
        font-weight: 700 !important;
    }

    .fw-lg-6 {
        font-weight: 600 !important;
    }

    .fw-lg-5 {
        font-weight: 500 !important;
    }

    .fw-lg-4 {
        font-weight: 400 !important;
    }
}

.badge {
    font-style: normal;
    font-weight: 400 !important;
    font-size: 13px;
    padding: 6px 12px !important;
    gap: 10px;
    border-radius: 4px !important;
}
.badge-sm {
    font-style: normal;
    font-weight: 400 !important;
    font-size: 10px;
    padding: 4px 8px !important;
    gap: 5px;
    border-radius: 2px !important;
}

.badge-rounded {
    border-radius: 44px !important;
}

.badge-danger {
    color: var(--white);
    background-color: var(--red);
}

.badge-lemon {
    color: var(--blue-2);
    background-color: var(--accent-lemon);
}

.badge-orange {
    color: var(--blue-2);
    background-color: var(--accent-orange);
}

.badge-success {
    color: var(--white);
    background-color: var(--success-green);
}

.badge-yellow {
    color: var(--neutral-2);
    background-color: var(--yellow);
}

.badge-blue-light {
    color: var(--neutral-1);
    background-color: var(--light-blue);
}

.badge-neutral {
    color: var(--neutral-0);
    background-color: var(--neutral-5);
}

.custom-badge,
.custom-badge-rounded {
    font-style: normal;
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 13px;
    padding: 6px 12px !important;
    gap: 10px;
}

.custom-badge-rounded {
    border-radius: 44px !important;
}

.cart-pop-up {
    padding: 0.35em 0.65em !important;
}
/* end text size */

/* Shadow */
.shadow {
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1) !important;
}

.shadow-434 {
    box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.1) !important;
}
.shadow-md {
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important;
}

.shadow-md-1 {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.shadow-sm {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) !important;
}
.shadow-lg {
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08) !important;
}

/* end shadow */

/* border */

.border-primary {
    border-color: var(--accent-lemon) !important;
}

.border-lemon-dark-1 {
    border-color: var(--accent-lemon-dark-1) !important;
}

.border-lemon-dark-2 {
    border-color: var(--accent-lemon-dark-2) !important;
}
.border-orange-dark-3 {
    border-color: var(--accent-orange-dark-3) !important;
}

.border-neutral-7 {
    border-color: var(--neutral-7) !important;
}

.border-orange-dark-4 {
    border-color: var(--accent-orange-dark-4) !important;
}

.border-neutral-8 {
    border-color: var(--neutral-8) !important;
}

.border-dashed {
    border-style: dashed !important;
}

.rounded-small {
    border-radius: 4px !important;
}
.rounded-1 {
    border-radius: 8px !important;
}

.rounded-2 {
    border-radius: 16px !important;
}

.rounded-3 {
    border-radius: 25px !important;
}

.rounded-4 {
    border-radius: 30px !important;
}
.rounded-20 {
    border-radius: 20px !important;
}
.rounded-40 {
    border-radius: 40px !important;
}
.rounded-50 {
    border-radius: 50px !important;
}
.rounded-5 {
    border-radius: 60px !important;
}

.rounded-top-1 {
    border-radius: 8px 8px 0px 0px !important;
}

.rounded-top-2 {
    border-radius: 16px 16px 0px 0px !important;
}

.rounded-top-3 {
    border-radius: 25px 25px 0px 0px !important;
}

.rounded-bottom-1 {
    border-radius: 0px 0px 8px 8px !important;
}

.rounded-bottom-2 {
    border-radius: 0px 0px 16px 16px !important;
}
.rounded-start-2 {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}
.rounded-end-2 {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}
.rounded-start-4 {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}
@media screen and (min-width: 992px) {
    .rounded-lg-0 {
        border-radius: 0px !important;
    }
    .rounded-lg-2 {
        border-radius: 16px !important;
    }
    .rounded-top-lg-2 {
        border-radius: 16px 16px 0px 0px !important;
    }
    .rounded-bottom-lg-2 {
        border-radius: 0px 0px 16px 16px !important;
    }
    .rounded-start-lg-2 {
        border-radius: 16px 0px 0px 16px !important;
    }
    .rounded-end-lg-2 {
        border-radius: 0px 16px 16px 0px !important;
    }
}
/* end border */

/* sizing */
.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-min-min {
    min-width: min-content;
}
.w-min-max {
    min-width: max-content;
}

.h-20 {
    height: 20px;
}
.h-25 {
    height: 25px;
}
.h-30 {
    height: 30px;
}
.h-35 {
    height: 35px;
}
.h-40 {
    height: 40px;
}
.h-45 {
    height: 45px;
}
.h-50 {
    height: 50px;
}
.h-55 {
    height: 55px;
}
.h-60 {
    height: 60px;
}
.h-65 {
    height: 65px;
}
.h-70 {
    height: 70px;
}
.h-75 {
    height: 75px;
}
.h-80 {
    height: 80px;
}
.h-85 {
    height: 85px;
}
.h-90 {
    height: 90px;
}
.h-95 {
    height: 95px;
}
.h-100 {
    height: 100px !important;
}
.item-h-100 {
    height: 100px !important;
}

.full-height {
    height: 100%;
}

@media screen and (min-width: 992px) {
    .w-lg-45 {
        width: 45%;
    }
}
/* end sizing */

/* spacing */
.px-10 {
    padding: 0 100px 0 100px;
}

.px-9 {
    padding: 0 90px 0 90px;
}

.px-8 {
    padding: 0 80px 0 80px !important;
}

.px-7 {
    padding: 0 70px 0 70px !important;
}

.px-6 {
    padding: 0 60px 0 60px;
}

.px-1-6 {
    padding: 0 16px 0 16px;
}

.py-10 {
    padding: 100px 0 100px 0;
}

.py-9 {
    padding: 90px 0 90px 0;
}

.py-8 {
    padding: 80px 0 80px 0;
}

.py-7 {
    padding: 70px 0 70px 0;
}

.py-6 {
    padding: 60px 0 60px 0;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.pt-10 {
    padding-top: 100px;
}

.pt-9 {
    padding-top: 90px;
}

.pt-8 {
    padding-top: 80px;
}

.pt-7 {
    padding-top: 70px;
}

.pt-6 {
    padding-top: 60px;
}

.pb-10 {
    padding-bottom: 100px;
}

.pb-9 {
    padding-bottom: 90px;
}

.pb-8 {
    padding-bottom: 80px;
}

.pb-7 {
    padding-bottom: 70px;
}

.pb-6 {
    padding-bottom: 60px;
}

.ps-10 {
    padding-left: 100px;
}

/* page px alignment */
.px-alignment {
    padding: 0 70px 0 70px;
}

.mt-6 {
    margin-top: 60px;
}
.ms-6 {
    margin-left: 60px;
}
.ms-7 {
    margin-left: 70px;
}
.ms-8 {
    margin-left: 80px;
}
/* end spacing */

/* Positioning */
.end-1 {
    right: 1% !important;
}

.end-5 {
    right: 5% !important;
}

.end-10 {
    right: 10% !important;
}
/* end positoning */

.disable {
    pointer-events: none;
    opacity: 0.4;
}

/* cards */

.card-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 !important;
    border-radius: 16px 16px 16px 16px !important;
}

.card-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 !important;
    border-radius: 8px 8px 8px 8px !important;
}

.card-header-2 {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    border-bottom: 0 !important;
}

.card-header h4,
.card-header h6,
.card-header-2 h4,
.card-header-2 h6 {
    font-weight: 700 !important;
}
/* end cards */

/* end utilities */