/* ##### General configuration ##### */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root, :host {
    /* color - pattern */
    --red: #D22630;
    --white-base: #FBEFEE;
    --pink: #F552A0;
    --light-blue: #80B4BD;
    --yellow: #FEC442;
    --white: #ffff;
    /* fonts */
    --pretty-font: 'Ahsing';
    --base-font: "Montserrat", sans-serif;
    --poppins-font: "Poppins";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Ahsing';
    src: url('../assets/fonts/Ahsing.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


.font-ahsing {
    font-family: var(--pretty-font) !important;
}

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

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


/* ##### colors ##### */

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

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

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

.app-text-blue {
    color: var(--light-blue) !important;
}

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

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

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

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

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

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

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

.app-bg-yellow {
    background-color: var(--yellow) !important;
}
/* ##### End colors ##### */


/* ====================
  Titles by tag
==================== */

h1 {
    font-size: 12.5rem !important; /* 200px */
}

    h1.big {
        font-family: var(--pretty-font);
        font-size: 48px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 76.8px */
    }

    h1.middle {
        font-family: var(--pretty-font);
        font-size: 48px !important;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-box: trim-start cap alphabetic;
    }

    h1.small {
        font-family: var(--pretty-font);
        font-size: 48px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 76.8px */
    }

h2 {
    font-size: 2.5rem !important; /* 40px */
    font-family: var(--pretty-font);
    text-box: trim-start cap alphabetic;
}

    h2.big {
        font-family: var(--pretty-font);
        font-size: 64px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 144px */
    }

    h2.middle {
        font-family: var(--pretty-font);
        font-size: 48px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 57.6px */
    }

    h2.small {
        font-family: var(--pretty-font);
        font-size: 40px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 57.6px */
    }



h3 {
    font-family: var(--pretty-font);
    font-size: 50px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 144px */
    text-box: trim-start cap alphabetic;
}

    h3.small {
        font-family: var(--base-font);
        font-size: 32px !important;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
    }

h4 {
    font-size: 2.25rem !important; /* 36px */
}

h5 {
    font-size: 2rem !important; /* 32px */
}

h6 {
    font-size: 1.375rem !important; /* 22px */
}

p {
    font-family: var(--base-font);
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
}

    p.big-bold {
        font-family: var(--base-font);
        font-size: 20px !important;
        font-style: normal;
        font-weight: 500;
        line-height: 120%; /* 28.8px */
    }

    p.medium {
        font-family: var(--base-font);
        font-size: 16px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 24px */
    }


    p.small {
        font-family: var(--base-font);
        font-size: 14px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 24px */
    }

    p.tiny {
        font-family: var(--base-font);
        font-size: 14px !important;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

a {
    font-size: 0.875rem; /* 14px */
    text-decoration: none;
}

/* ====================
Short utility classes
==================== */

.fs-10 {
    font-size: 0.625rem !important; /* 10px */
}

.fs-12 {
    font-size: 0.75rem !important; /* 12px */
}

.fs-14 {
    font-size: 0.875rem !important; /* 14px */
}

.fs-16 {
    font-size: 1rem !important; /* 16px */
}

.fs-18 {
    font-size: 1.125rem !important; /* 18px */
}

.fs-20 {
    font-size: 1.25rem !important; /* 20px */
}

.fs-22 {
    font-size: 1.375rem !important; /* 22px */
}

.fs-23 {
    font-size: 1.438rem !important; /* 23px */
}

.fs-24 {
    font-size: 1.5rem !important; /* 24px */
}

.fs-26 {
    font-size: 1.625rem !important; /* 26px */
}

.fs-28 {
    font-size: 28px !important; /* 28px */
}

.fs-32 {
    font-size: 2rem !important; /* 32px */
}

.fs-36 {
    font-size: 2.25rem !important; /* 36px */
}

.fs-45 {
    font-size: 45px !important; /* 64px */
}

.fs-56 {
    font-size: 56px !important; /* 56px */
}

.fs-64 {
    font-size: 4rem !important; /* 64px */
}

.fs-128 {
    font-size: 8rem !important; /* 128px */
}

.fs-200 {
    font-size: 12.5rem !important; /* 200px */
}

.fs-108 {
    font-size: 6.75rem !important; /* 108px */
}

.fs-100 {
    font-size: 6.25rem !important; /* 100px */
}

.fs-180 {
    font-size: 11.25rem !important; /* 180px */
}

.fs-120 {
    font-size: 7.5rem !important; /* 120px */
}

.fs-110 {
    font-size: 6.875rem !important; /* 110px */
}

.fs-96 {
    font-size: 6rem !important; /* 96px */
}

.fs-48 {
    font-size: 3rem !important; /* 48px */
}

.fs-40 {
    font-size: 2.5rem !important; /* 40px */
}

.fs-60 {
    font-size: 3.75rem !important; /* 60px */
}

.fs-76 {
    font-size: 4.75rem !important; /* 76px */
}

.fs-70 {
    font-size: 4.375rem !important; /* 70px */
}

.fs-104 {
    font-size: 6.5rem !important; /* 104px */
}

.fs-34 {
    font-size: 2.125rem !important; /* 34px */
}

.lh-0 {
    line-height: 0;
}

.lh-186 {
    line-height: normal !important;
}

.lh-82 {
    line-height: 82px !important;
}

.lh-140 {
    line-height: 140% !important;
}

.lh-40 {
    line-height: 40px;
}

.lh-123 {
    line-height: 64px !important;
}

button {
    background-color: transparent !important;
    border: none !important;
}

    button:focus {
        outline: none;
        border: none;
    }

    button:focus-visible {
        outline: none;
        border: none;
    }

    button:active {
        outline: none;
        border: none;
    }

.w-fit {
    width: fit-content !important;
}

.fw-normal {
    font-weight: normal;
}

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

.py-72 {
    padding-top: 72px;
    padding-bottom: 72px;
}

.fw-max-normal {
    font-weight: 500;
}

.lh-normal {
    line-height: normal;
}

.fw-bold {
    font-weight: bold;
}

.fw-800 {
    font-weight: 800 !important;
}

.pt-45 {
    padding-top: 45px !important;
}

.mt-56 {
    margin-top: 56px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.gap-30 {
    gap: 30px;
}

.mt-n {
    margin-top: 0;
}

.pt-23 {
    padding-top: 23px !important;
}

.w-55 {
    width: 55%;
}

.max-w-112 {
    width: 112px !important;
}

.bg-shadow {
    background-color: #0000001c;
}

.mt-60 {
    margin-top: 60px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-37 {
    margin-top: 37px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.ml-46 {
    margin-left: 46px;
}


.mr-50 {
    margin-right: 50px;
}

.p-32 {
    padding: 32px;
}

.fw-900 {
    font-weight: 900;
}

.gap-64 {
    gap: 64px;
}

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

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-29 {
    margin-bottom: 29px;
}

.mb-16 {
    margin-bottom: 16px;
}

.lh-100 {
    line-height: 100%;
}


.lh-109 {
    line-height: 109% !important;
}



.carousel-indicators {
    margin-top: 56px;
    margin-bottom: 0;
    position: relative;
}

    .carousel-indicators .dot {
        height: 8px;
        width: 8px;
        margin: 0 5px;
        background-color: var(--red);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        .carousel-indicators .dot.active {
            background-color: var(--red);
            width: 38px;
            height: 8px;
            border-radius: 9999px;
        }


.video-diy {
    object-position: left;
    object-fit: cover;
}
/* ##### privacy and terms css ##### */

.letter-terms-and-privacy h1 {
    font-size: 40px !important;
    color: var(--red);
    font-family: var(--pretty-font);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.letter-terms-and-privacy h4 {
    font-size: 40px !important;
    color: var(--red);
    font-family: var(--font-base);
    font-size: 18px !important;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.letter-terms-and-privacy p {
    font-size: 16px !important;
    color: var(--red);
    font-family: var(--font-base);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.letter-terms-and-privacy ul, li {
    font-size: 16px !important;
    color: var(--red);
    font-family: var(--font-base);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.letter-terms-and-privacy a {
    font-size: 16px !important;
    color: var(--red);
    font-family: var(--font-base);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* ##### End privacy and terms css ##### */













/* ##### buttons ##### */
.btn-primary {
    color: var(--white-base);
    width: 100%;
    max-width: 309px;
    height: 59px;
    text-align: center;
    font-family: Poppins !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--red) !important;
    border: 1px solid var(--white-base) !important;
    border-radius: 9999px;
    box-shadow: none !important;
    transition: all 0.3s;
}

    .btn-primary span::after {
        content: "";
        position: relative;
        background-image: url('/assets/icons/red-arrow.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        display: inline-flex;
        pointer-events: none;
        bottom: -4px;
        width: 12px;
        height: 24px;
        margin-left: 8px;
        transition: background-image 0.3s;
    }

    .btn-primary:hover {
        background-color: var(--red);
        box-shadow: none;
        color: var(--white-base);
    }

        .btn-primary:hover span::after {
            background-image: url('/assets/icons/white-arrow.svg');
        }


.btn-secondary {
    color: var(--red);
    width: 100%;
    max-width: 309px;
    height: 59px;
    text-align: center;
    font-family: Poppins !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--white) !important;
    border: 2px solid var(--white) !important;
    border-radius: 9999px;
    box-shadow: none !important;
    transition: all 0.3s;
}

    .btn-secondary span::after {
        content: "";
        position: relative;
        background-image: url('/assets/icons/white-arrow.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        display: inline-flex;
        pointer-events: none;
        bottom: -6px;
        width: 12px;
        height: 24px;
        margin-left: 8px;
        transition: background-image 0.3s;
    }

    .btn-secondary:hover {
        background-color: var(--white);
        box-shadow: none;
        color: var(--red);
    }

        .btn-secondary:hover span::after {
            background-image: url('/assets/icons/red-arrow.svg');
        }


    .btn-secondary.small {
        font-size: 16px !important;
        width: 113px;
        height: 45px;
        padding: 10px;
    }

.btn-primary .prev::before {
    content: "";
    position: relative;
    background-image: url('/assets/icons/red-back-arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-flex;
    pointer-events: none;
    bottom: -6px;
    width: 12px;
    height: 24px;
    margin-right: 8px;
    transition: background-image 0.3s;
}

.btn-primary .prev::after {
    background-image: none;
    display: none;
}

.btn-secondary:hover {
    background-color: var(--white);
    box-shadow: none;
    color: var(--red);
}

.btn-primary:hover .prev::before {
    background-image: url('/assets/icons/white-arrow.svg');
    transform: rotate(180deg);
}

/* ##### buttons ##### */
/* ##### inputs ##### */
.input-email {
    background-color: white;
    border-radius: 9999px;
    border: 0.912px solid rgba(212, 49, 47, 0.60);
    color: var(--red);
    display: flex;
    padding: 14.59px;
    width: 100%;
    padding-left: 40px;
    align-items: center;
    height: 43.769px;
    transition: border-width .15s ease-in-out;
}

    .input-email::placeholder {
        color: rgba(212, 49, 47, 0.60);
        font-family: Poppins;
        font-size: 12.766px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        font-size: 16px !important;
    }

    .input-email[type=text] {
        background-image: url('/assets/icons/email-line.svg');
        background-position: 14px 13px;
        background-repeat: no-repeat;
    }

    .input-email:focus {
        color: rgba(212, 49, 47, 0.60);
        background-color: var(--white);
        border-color: rgba(212, 49, 47, 0.60);
        border-width: 2px;
        outline: 0;
        box-shadow: none;
    }

.input-email-white {
    background-color: transparent;
    border-radius: 9999px;
    border: 0.912px solid #FBEFEE;
    color: #FBEFEE;
    display: flex;
    padding: 14.59px;
    padding-left: 40px;
    align-items: center;
    width: 100%;
    /*max-width: 270px;*/
    height: 43.769px;
    transition: border-width .15s ease-in-out;
}

    .input-email-white::placeholder {
        color: #FBEFEE;
        font-family: Poppins;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: 120%; /* 16.8px */
    }

    .input-email-white[type=text] {
        background-image: url('/assets/icons/white-email.svg');
        background-position: 14px 13px;
        background-size: 18px;
        background-repeat: no-repeat;
    }

    .input-email-white:focus {
        color: rgba(251, 239, 238, 1);
        background-color: transparent;
        border-color: rgba(251, 239, 238, 1);
        border-width: 2px;
        outline: 0;
        box-shadow: none;
    }


/* ##### End inputs ##### */



/* ##### Menu ##### */


/* white-red */
.nav-mjf.white-red .nav-links a {
    color: white;
    font-family: var(--base-font);
    /*font-size: 14px;*/
    font-style: normal;
    font-weight: 400;
    border-radius: 9999px;
    line-height: normal;
    background-color: transparent;
    padding: 10px;
    text-decoration: none;
    width: fit-content;
}

    .nav-mjf.white-red .nav-links a:hover {
        font-weight: 700 !important;
        background-color: var(--red);
        padding: 10px;
        border-radius: 9999px;
        color: white !important;
    }

.nav-mjf.white-red .nav-links .active-link {
    background-color: var(--red) !important;
    border-radius: 9999px;
    font-weight: 700 !important;
    width: fit-content;
    color: white !important;
}


.nav-mjf.white-red .logo-mjf {
    background-image: url('../assets/logo-red.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 46px;
    height: 45.198px;
    flex-shrink: 0;
    aspect-ratio: 80.00/78.60;
}

.nav-mjf.white-red .logo-mjf {
    background-image: url('../assets/logo-red.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 46px;
    height: 45.198px;
    flex-shrink: 0;
    aspect-ratio: 80.00/78.60;
}

.nav-mjf.white-red .logo-menu {
    background-image: url('../assets/icons/red-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}



.nav-mjf.white-red .offcanvas {
    background-color: var(--white-base) !important;
    max-width: 284px;
    width: 100%;
    padding-top: 32px;
    padding-right: 40px;
    padding-bottom: 32px;
}

    .nav-mjf.white-red .offcanvas .nav-links a {
        color: var(--red) !important;
    }

    .nav-mjf.white-red .offcanvas .nav-links .active-link {
        color: var(--white) !important;
        background-color: var(--red);
    }

    .nav-mjf.white-red .offcanvas .nav-links a:hover {
        color: var(--white) !important;
        background-color: var(--red);
    }

    .nav-mjf.white-red .offcanvas .close-menu {
        background-image: url('../assets/icons/close.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }


    .nav-mjf.white-red .offcanvas .logo-mjf-small {
        background-image: url('../assets/logo-red.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 46px;
        height: 45.198px;
        flex-shrink: 0;
        aspect-ratio: 80.00/78.60;
    }

@media (min-width: 390px) {
    .nav-mjf.white-red .offcanvas {
        max-width: 284px;
    }

    .nav-mjf.white-red .logo-mjf {
        width: 46px;
        height: 45.198px;
    }

    .nav-mjf.white-red .offcanvas .logo-mjf-small {
        width: 46px;
        height: 45.198px;
    }
}


@media (min-width: 768px) {

    .nav-mjf.white-red .offcanvas .close-menu {
        width: 28px;
        height: 28px;
    }

    .nav-mjf.white-red .offcanvas {
        max-width: 362px;
    }

    .nav-mjf.white-red .logo-mjf {
        width: 67px;
        height: 66.198px;
    }

    .nav-mjf.white-red .offcanvas .logo-mjf-small {
        width: 79.999px;
        height: 78.604px;
    }
}

@media (min-width: 992px) {
    .nav-mjf.white-red .logo-mjf {
        width: 79.999px;
        height: 78.604px;
    }
}
/* End white-red */







/* red */
.nav-mjf.red .nav-links a {
    color: var(--red);
    font-family: var(--base-font);
    /*font-size: 14px;*/
    font-style: normal;
    font-weight: 400;
    border-radius: 9999px;
    line-height: normal;
    background-color: transparent;
    padding: 10px;
    text-decoration: none;
    width: fit-content;
}

    .nav-mjf.red .nav-links a:hover {
        font-weight: 700 !important;
        background-color: var(--red);
        padding: 10px;
        border-radius: 9999px;
        color: var(--white) !important;
    }

.nav-mjf.red .nav-links .active-link {
    background-color: var(--red) !important;
    border-radius: 9999px;
    font-weight: 700 !important;
    width: fit-content;
    color: white !important;
}


.nav-mjf.red .logo-mjf {
    background-image: url('../assets/logo-red.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 46px;
    height: 45.198px;
    flex-shrink: 0;
    aspect-ratio: 80.00/78.60;
}

.nav-mjf.red .logo-menu {
    background-image: url('../assets/icons/red-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.nav-mjf.red .offcanvas {
    background-color: var(--red) !important;
    max-width: 284px;
    width: 100%;
    padding-top: 32px;
    padding-right: 40px;
    padding-bottom: 32px;
}

    .nav-mjf.red .offcanvas .nav-links a {
        color: var(--white) !important;
    }

    .nav-mjf.red .offcanvas .nav-links .active-link {
        color: var(--red) !important;
        background-color: var(--white) !important;
    }

    .nav-mjf.red .offcanvas .nav-links a:hover {
        color: var(--red) !important;
        background-color: var(--white) !important;
    }

    .nav-mjf.red .offcanvas .close-menu {
        background-image: url('../assets/icons/white-close.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }


    .nav-mjf.red .offcanvas .logo-mjf-small {
        background-image: url('../assets/logo-white.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 46px;
        height: 45.198px;
        flex-shrink: 0;
        aspect-ratio: 80.00/78.60;
    }

@media (min-width: 390px) {
    .nav-mjf.red .offcanvas {
        max-width: 284px;
    }

    .nav-mjf.red .logo-mjf {
        width: 46px;
        height: 45.198px;
    }

    .nav-mjf.red .offcanvas .logo-mjf-small {
        width: 46px;
        height: 45.198px;
    }
}


@media (min-width: 768px) {
    .nav-mjf.red .offcanvas {
        max-width: 362px;
    }

    .nav-mjf.red .logo-mjf {
        width: 46px;
        height: 45.198px;
    }

    .nav-mjf.red .offcanvas .logo-mjf-small {
        width: 79.999px;
        height: 78.604px;
    }
}

@media (min-width: 992px) {
    .nav-mjf.red .logo-mjf {
        width: 79.999px;
        height: 78.604px;
    }
}

/* End red */



/* white */
.nav-mjf.white .nav-links a {
    color: var(--white);
    font-family: var(--base-font);
    /*font-size: 14px;*/
    font-style: normal;
    font-weight: 400;
    border-radius: 9999px;
    line-height: normal;
    background-color: transparent;
    padding: 10px;
    text-decoration: none;
    width: fit-content;
}

    .nav-mjf.white .nav-links a:hover {
        font-weight: 700 !important;
        background-color: var(--white);
        padding: 10px;
        border-radius: 9999px;
        color: var(--red) !important;
    }

.nav-mjf.white .nav-links .active-link {
    background-color: var(--white) !important;
    border-radius: 9999px;
    font-weight: 700 !important;
    width: fit-content;
    color: var(--red) !important;
}


.nav-mjf.white .logo-mjf {
    background-image: url('../assets/logo-white.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 46px;
    height: 45.198px;
    flex-shrink: 0;
    aspect-ratio: 80.00/78.60;
}

.nav-mjf.white .logo-menu {
    background-image: url('../assets/icons/white-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.nav-mjf.white .offcanvas {
    background-color: var(--white-base) !important;
    max-width: 284px;
    width: 100%;
    padding-top: 32px;
    padding-right: 40px;
    padding-bottom: 32px;
}

    .nav-mjf.white .offcanvas .nav-links a {
        color: var(--red) !important;
    }

    .nav-mjf.white .offcanvas .nav-links .active-link {
        color: var(--white) !important;
        background-color: var(--red) !important;
    }

    .nav-mjf.white .offcanvas .nav-links a:hover {
        color: var(--red) !important;
        background-color: var(--white);
    }

    .nav-mjf.white .offcanvas .close-menu {
        background-image: url('../assets/icons/close.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }


    .nav-mjf.white .offcanvas .logo-mjf-small {
        background-image: url('../assets/logo-red.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 46px;
        height: 45.198px;
        flex-shrink: 0;
        aspect-ratio: 80.00/78.60;
    }

@media (min-width: 390px) {

    .nav-mjf.white .offcanvas {
        max-width: 284px;
    }

    .nav-mjf.white .logo-mjf {
        width: 46px;
        height: 45.198px;
    }

    .nav-mjf.white .offcanvas .logo-mjf-small {
        width: 46px;
        height: 45.198px;
    }
}


@media (min-width: 768px) {

    .nav-mjf.white .offcanvas {
        max-width: 362px;
    }

    .nav-mjf.white .logo-mjf {
        width: 46px;
        height: 45.198px;
    }

    .nav-mjf.red .offcanvas .logo-mjf-small {
        width: 79.999px;
        height: 78.604px;
    }
}

@media (min-width: 992px) {
    .nav-mjf.white .logo-mjf {
        width: 79.999px;
        height: 78.604px;
    }
}

/* End white */



/* small-red */
.nav-mjf.small-red {
    padding-top: 32px;
    padding-bottom: 32px;
    height: 100px;
    background-color: var(--red) !important;
}


    .nav-mjf.small-red .nav-links a {
        color: var(--white);
        font-family: var(--base-font);
        /*font-size: 14px;*/
        font-style: normal;
        font-weight: 400;
        border-radius: 9999px;
        line-height: normal;
        background-color: transparent;
        padding: 10px;
        text-decoration: none;
        width: fit-content;
    }

        .nav-mjf.small-red .nav-links a:hover {
            font-weight: 700 !important;
            background-color: var(--white);
            padding: 10px;
            border-radius: 9999px;
            color: var(--red) !important;
        }

    .nav-mjf.small-red .nav-links .active-link {
        background-color: var(--white);
        border-radius: 9999px;
        font-weight: 700 !important;
        width: fit-content;
        color: var(--red) !important;
    }


    .nav-mjf.small-red .logo-mjf {
        background-image: url('../assets/small-logo-white.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 84px;
        height: 24.011px;
        flex-shrink: 0;
        aspect-ratio: 80.00/78.60;
    }

    .nav-mjf.small-red .logo-menu {
        background-image: url('../assets/icons/white-menu.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }


    .nav-mjf.small-red .offcanvas {
        background-color: var(--white-base) !important;
        max-width: 284px;
        width: 100%;
        padding-top: 32px;
        padding-right: 40px;
        padding-bottom: 32px;
    }

        .nav-mjf.small-red .offcanvas .nav-links a {
            color: var(--red) !important;
        }

        .nav-mjf.small-red .offcanvas .nav-links .active-link {
            color: var(--white) !important;
            background-color: var(--red);
        }

        .nav-mjf.small-red .offcanvas .nav-links a:hover {
            color: var(--white) !important;
            background-color: var(--red);
        }

        .nav-mjf.small-red .offcanvas .close-menu {
            background-image: url('../assets/icons/close.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            aspect-ratio: 1/1;
        }


        .nav-mjf.small-red .offcanvas .logo-mjf-small {
            background-image: url('../assets/logo-red.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 46px;
            height: 45.198px;
            flex-shrink: 0;
            aspect-ratio: 80.00/78.60;
        }

@media (min-width: 390px) {
    .nav-mjf.small-red .offcanvas {
        max-width: 284px;
    }

    /*        .nav-mjf.small-red .offcanvas .logo-mjf-small {
            width: 84px;
            height: 45.198px;
        }*/
}

@media (min-width: 768px) {

    .nav-mjf.small-red .offcanvas {
        max-width: 362px;
    }

        .nav-mjf.small-red .offcanvas .logo-mjf-small {
            width: 79.999px;
            height: 78.604px;
        }
}


@media (min-width: 992px) {
    .nav-mjf.small-red .logo-mjf {
        width: 115px;
        height: 32.011px;
    }
}
/* End small-red */



/* small-white */
.nav-mjf.small-white {
    padding-top: 32px;
    padding-bottom: 32px;
    height: 100px;
    background-color: var(--white-base) !important;
}

    .nav-mjf.small-white .logo-menu {
        background-image: url('../assets/icons/red-menu.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .nav-mjf.small-white .nav-links a {
        color: var(--red);
        font-family: var(--base-font);
        /*font-size: 14px;*/
        font-style: normal;
        font-weight: 400;
        border-radius: 9999px;
        line-height: normal;
        background-color: transparent;
        padding: 10px;
        text-decoration: none;
        width: fit-content;
    }

        .nav-mjf.small-white .nav-links a:hover {
            font-weight: 700 !important;
            background-color: var(--red);
            padding: 10px;
            border-radius: 9999px;
            color: var(--white) !important;
        }

    .nav-mjf.small-white .nav-links .active-link {
        background-color: var(--red) !important;
        border-radius: 9999px;
        font-weight: 700 !important;
        width: fit-content;
        color: var(--white) !important;
    }


    .nav-mjf.small-white .logo-mjf {
        background-image: url('../assets/small-logo-red.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 84px;
        height: 24.011px;
        flex-shrink: 0;
        aspect-ratio: 80.00/78.60;
    }

    .nav-mjf.small-white .offcanvas {
        background-color: var(--red) !important;
        max-width: 284px;
        width: 100%;
        padding-top: 32px;
        padding-right: 40px;
        padding-bottom: 32px;
    }

        .nav-mjf.small-white .offcanvas .nav-links a {
            color: var(--white) !important;
        }

        .nav-mjf.small-white .offcanvas .nav-links .active-link {
            color: var(--red) !important;
            background-color: var(--white) !important;
        }

        .nav-mjf.small-white .offcanvas .nav-links a:hover {
            color: var(--red) !important;
            background-color: var(--white) !important;
        }

        .nav-mjf.small-white .offcanvas .close-menu {
            background-image: url('../assets/icons/white-close.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            aspect-ratio: 1/1;
        }


        .nav-mjf.small-white .offcanvas .logo-mjf-small {
            background-image: url('../assets/logo-white.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 46px;
            height: 45.198px;
            flex-shrink: 0;
            aspect-ratio: 80.00/78.60;
        }


@media (min-width: 390px) {
    .nav-mjf.small-white .offcanvas {
        max-width: 284px;
    }

        .nav-mjf.small-white .offcanvas .logo-mjf-small {
            width: 46px;
            height: 45.198px;
        }
}


@media (min-width: 768px) {
    .nav-mjf.small-white .offcanvas {
        max-width: 362px;
    }

        .nav-mjf.small-white .offcanvas .logo-mjf-small {
            width: 79.999px;
            height: 78.604px;
        }
}

@media (min-width: 992px) {
    .nav-mjf.small-white .logo-mjf {
        width: 115px;
        height: 32.011px;
    }
}
/* End small-white */








/* small-white-red */
.nav-mjf.small-white-red .logo-menu {
    background-image: url('../assets/icons/red-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.nav-mjf.small-white-red .nav-links a {
    color: white;
    font-family: var(--base-font);
    /*font-size: 14px;*/
    font-style: normal;
    font-weight: 400;
    border-radius: 9999px;
    line-height: normal;
    background-color: transparent;
    padding: 10px;
    text-decoration: none;
    width: fit-content;
}

    .nav-mjf.small-white-red .nav-links a:hover {
        font-weight: 700 !important;
        background-color: var(--red);
        padding: 10px;
        border-radius: 9999px;
        color: white !important;
    }

.nav-mjf.small-white-red .nav-links .active-link {
    background-color: var(--red) !important;
    border-radius: 9999px;
    font-weight: 700 !important;
    width: fit-content;
    color: white !important;
}


.nav-mjf.small-white-red .logo-mjf {
    background-image: url('../assets/small-logo-red.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 84px;
    height: 24.011px;
    flex-shrink: 0;
    aspect-ratio: 80.00/78.60;
}


.nav-mjf.small-white-red .logo-menu {
    background-image: url('../assets/icons/red-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.nav-mjf.small-white-red .offcanvas {
    background-color: var(--white-base) !important;
    max-width: 284px;
    width: 100%;
    padding-top: 32px;
    padding-right: 40px;
    padding-bottom: 32px;
}

    .nav-mjf.small-white-red .offcanvas .nav-links a {
        color: var(--red) !important;
    }

    .nav-mjf.small-white-red .offcanvas .nav-links .active-link {
        color: var(--white) !important;
    }

    .nav-mjf.small-white-red .offcanvas .nav-links a:hover {
        color: var(--white) !important;
    }

    .nav-mjf.small-white-red .offcanvas .close-menu {
        background-image: url('../assets/icons/close.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }


    .nav-mjf.small-white-red .offcanvas .logo-mjf-small {
        background-image: url('../assets/logo-red.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 46px;
        height: 45.198px;
        flex-shrink: 0;
        aspect-ratio: 80.00/78.60;
    }

@media (min-width: 390px) {
    .nav-mjf.small-white-red .offcanvas {
        max-width: 284px;
    }

        .nav-mjf.small-white-red .offcanvas .logo-mjf-small {
            width: 46px;
            height: 45.198px;
        }
}


@media (min-width: 768px) {
    .nav-mjf.small-white-red .offcanvas {
        max-width: 362px;
    }

        .nav-mjf.small-white-red .offcanvas .logo-mjf-small {
            width: 79.999px;
            height: 78.604px;
        }
}

@media (min-width: 992px) {
    .nav-mjf.small-white-red .logo-mjf {
        width: 115px;
        height: 32.011px;
    }
}
/* End small-white-red */

/* ##### End Menu ##### */







/* ##### Footer ##### */


.footer-mjf.red-footer {
    background-color: var(--red);
}

    .footer-mjf.red-footer .mjf-footer-logo {
        background-image: url('/assets/big-logo-white.svg');
    }

    .footer-mjf.red-footer .link-mjf {
        color: var(--white-base);
    }

    .footer-mjf.red-footer .small-link-mjf {
        color: var(--white-base);
    }

    .footer-mjf.red-footer .title-footer {
        color: var(--white-base);
    }

    .footer-mjf.red-footer .text-footer {
        color: var(--white-base);
    }

    .footer-mjf.red-footer .label-section {
        color: var(--white-base);
    }

    .footer-mjf.red-footer .input-email-footer {
        border: 0.912px solid var(--white-base);
        color: var(--white-base);
    }

        .footer-mjf.red-footer .input-email-footer::placeholder {
            color: var(--white-base);
        }

        .footer-mjf.red-footer .input-email-footer[type=text] {
            background-image: url('/assets/icons/white-email.svg');
        }

        .footer-mjf.red-footer .input-email-footer:focus {
            color: rgba(251, 239, 238, 1);
            border-color: rgba(251, 239, 238, 1);
        }

    .footer-mjf.red-footer .button-section {
        color: var(--white-base);
        background-color: var(--red);
        border: 1px solid var(--white-base);
        /*box-shadow: 4px 2px 0px 0px var(--white-base);*/
    }

        .footer-mjf.red-footer .button-section:hover {
            background-color: var(--white-base);
            box-shadow: none;
            color: var(--red);
        }

    .footer-mjf.red-footer .link-social {
        color: var(--white-base);
        background-color: var(--white);
        border: 1px solid var(--white-base);
        /*box-shadow: 1px 2px 0px 0px var(--white-base);*/
    }

    /*        .footer-mjf.red-footer .link-social:hover {
            background-color: var(--white-base);
            color: var(--red);
            box-shadow: none;
        }*/

    .footer-mjf.red-footer .instagram::before {
        background-image: url('/assets/icons/red-instagram.svg');
    }

    /*    .footer-mjf.red-footer .link-social:hover .instagram::before {
        background-image: url('/assets/icons/white-instagram.svg');
    }*/

    .footer-mjf.red-footer .facebook::before {
        background-image: url('/assets/icons/red-facebook.svg');
    }

    /*    .footer-mjf.red-footer .link-social:hover .facebook::before {
        background-image: url('/assets/icons/white-facebook.svg');
    }*/

    .footer-mjf.red-footer .tiktok::before {
        background-image: url('/assets/icons/red-tiktok.svg');
    }
    /*
    .footer-mjf.red-footer .link-social:hover .tiktok::before {
        background-image: url('/assets/icons/white-tiktok.svg');
    }
*/
    .footer-mjf.red-footer .youtube::before {
        background-image: url('/assets/icons/red-youtube.svg');
    }

    /*    .footer-mjf.red-footer .link-social:hover .youtube::before {
        background-image: url('/assets/icons/white-youtube.svg');
    }*/

    .footer-mjf.red-footer .pinterest::before {
        background-image: url('/assets/icons/red-pinterest.svg');
    }

    /*    .footer-mjf.red-footer .link-social:hover .pinterest::before {
        background-image: url('/assets/icons/white-pinterest.svg');
    }*/

    .footer-mjf.red-footer .email::before {
        background-image: url('/assets/icons/red-email.svg');
    }

    /*    .footer-mjf.red-footer .link-social:hover .email::before {
        background-image: url('/assets/icons/white-email.svg');
    }*/

    .footer-mjf.red-footer .btn-footer-small {
        color: var(--red);
        background-color: var(--white) !important;
        border: 1px solid var(--white-base);
        /*box-shadow: 2px 1px 0px 1px var(--white-base);*/
    }

        .footer-mjf.red-footer .btn-footer-small:hover {
            background-color: var(--white);
            color: var(--red);
            box-shadow: none;
        }

        .footer-mjf.red-footer .btn-footer-small span::after {
            content: "";
            position: relative;
            background-image: url('/assets/icons/white-arrow.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            display: inline-flex;
            pointer-events: none;
            bottom: -6px;
            width: 12px;
            height: 24px;
            margin-left: 0px;
            transition: background-image 0.3s;
        }


        .footer-mjf.red-footer .btn-footer-small:hover span::after {
            background-image: url('/assets/icons/red-arrow.svg');
        }


/*WHITE*/

.footer-mjf.white-footer {
    background-color: var(--white-base);
}

    .footer-mjf.white-footer .mjf-footer-logo {
        background-image: url('/assets/big-logo-red.svg');
    }

    .footer-mjf.white-footer .link-mjf {
        color: var(--red);
    }

    .footer-mjf.white-footer .small-link-mjf {
        color: var(--red);
    }

    .footer-mjf.white-footer .title-footer {
        color: var(--red);
    }

    .footer-mjf.white-footer .text-footer {
        color: var(--red);
    }

    .footer-mjf.white-footer .label-section {
        color: var(--red);
    }

    .footer-mjf.white-footer .input-email-footer {
        border: 0.912px solid var(--red);
        color: var(--red);
    }

        .footer-mjf.white-footer .input-email-footer::placeholder {
            color: var(--red);
        }

        .footer-mjf.white-footer .input-email-footer[type=text] {
            background-image: url('/assets/icons/red-email.svg');
        }

        .footer-mjf.white-footer .input-email-footer:focus {
            color: var(--red);
            border-color: var(--red);
        }

    .footer-mjf.white-footer .button-section {
        color: var(--red);
        background-color: var(--white-base);
        border: 1px solid var(--red);
        /*box-shadow: 4px 2px 0px 0px var(--red);*/
    }

        .footer-mjf.white-footer .button-section:hover {
            background-color: var(--white-base);
            box-shadow: none;
            color: var(--red);
        }

    .footer-mjf.white-footer .link-social {
        color: var(--red);
        background-color: var(--red);
        border: 1px solid var(--red);
        /*box-shadow: 1px 2px 0px 0px var(--red);*/
    }

    /*        .footer-mjf.white-footer .link-social:hover {
            background-color: var(--red);
            color: var(--white-base);
            box-shadow: none;
        }*/

    .footer-mjf.white-footer .instagram::before {
        background-image: url('/assets/icons/white-instagram.svg');
    }

    /*    .footer-mjf.white-footer .link-social:hover .instagram::before {
        background-image: url('/assets/icons/red-instagram.svg');
    }*/

    .footer-mjf.white-footer .facebook::before {
        background-image: url('/assets/icons/white-facebook.svg');
    }

    /*    .footer-mjf.white-footer .link-social:hover .facebook::before {
        background-image: url('/assets/icons/red-facebook.svg');
    }*/

    .footer-mjf.white-footer .tiktok::before {
        background-image: url('/assets/icons/white-tiktok.svg');
    }

    /*    .footer-mjf.white-footer .link-social:hover .tiktok::before {
        background-image: url('/assets/icons/red-tiktok.svg');
    }*/

    .footer-mjf.white-footer .youtube::before {
        background-image: url('/assets/icons/white-youtube.svg');
    }

    /*    .footer-mjf.white-footer .link-social:hover .youtube::before {
        background-image: url('/assets/icons/red-youtube.svg');
    }
*/
    .footer-mjf.white-footer .pinterest::before {
        background-image: url('/assets/icons/white-pinterest.svg');
    }

    /*    .footer-mjf.white-footer .link-social:hover .pinterest::before {
        background-image: url('/assets/icons/red-pinterest.svg');
    }*/

    .footer-mjf.white-footer .email::before {
        background-image: url('/assets/icons/white-email.svg');
    }

    /*    .footer-mjf.white-footer .link-social:hover .email::before {
        background-image: url('/assets/icons/red-email.svg');
    }*/

    .footer-mjf.white-footer .btn-footer-small {
        color: var(--white-base);
        background-color: var(--red) !important;
        border: 1px solid var(--red);
        /*box-shadow: 4px 3px 0px 0px var(--red);*/
    }

        /*        .footer-mjf.white-footer .btn-footer-small:hover {
            background-color: var(--red);
            color: var(--white-base);
            box-shadow: none;
        }*/

        .footer-mjf.white-footer .btn-footer-small span::after {
            content: "";
            position: relative;
            background-image: url('/assets/icons/red-arrow.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            display: inline-flex;
            pointer-events: none;
            bottom: -6px;
            width: 12px;
            height: 24px;
            margin-left: 0px;
            transition: background-image 0.3s;
        }


        .footer-mjf.white-footer .btn-footer-small:hover span::after {
            background-image: url('/assets/icons/white-arrow.svg');
        }

/* ##### End Footer ##### */
















/* ##### My endo story ##### */

.px-container {
    padding-left: 10px !important;
    padding-right: 12px !important;
}

.pt-navbar {
    padding-top: 77.1875px;
}


@media (min-width: 390px) {

    .btn-primary {
        width: 100%;
        max-width: 309px;
        height: 59px;
        /*box-shadow: 3px 2px 0px 1px var(--white);*/
    }

    .btn-secondary {
        width: 100%;
        max-width: 309px;
        height: 59px;
        /*box-shadow: 3px 2px 0px 1px var(--white-base);*/
    }

    .px-container {
        padding-left: 10px !important;
        padding-right: 12px !important;
    }

    .pt-navbar {
        padding-top: 77.1875px;
    }

    .letter-terms-and-privacy h1 {
        font-size: 40px !important;
    }

    .letter-terms-and-privacy p {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {

    .px-container {
        padding-left: 35px !important;
        padding-right: 35px !important;
    }

    .lh-123 {
        line-height: 93px !important;
    }

    h1.big {
        font-family: var(--pretty-font);
        font-size: 64px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 76.8px */
    }

    .fw-md-max-normal {
        font-weight: 500;
    }

    .fw-md-normal {
        font-weight: normal;
    }

    .fs-md-48 {
        font-size: 3rem !important; /* 48px */
    }

    .fs-md-50 {
        font-size: 50px !important; /* 50px */
    }

    .fs-md-56 {
        font-size: 56px !important; /* 56px */
    }

    .fs-md-64 {
        font-size: 4rem !important; /* 64px */
    }

    .fs-md-10 {
        font-size: 0.625rem !important; /* 10px */
    }

    .fs-md-12 {
        font-size: 0.75rem !important; /* 12px */
    }

    .fs-md-14 {
        font-size: 0.875rem !important; /* 14px */
    }

    .fs-md-16 {
        font-size: 1rem !important; /* 16px */
    }

    .fs-md-18 {
        font-size: 1.125rem !important; /* 18px */
    }

    .fs-md-20 {
        font-size: 1.25rem !important; /* 20px */
    }

    .fs-md-22 {
        font-size: 1.375rem !important; /* 22px */
    }

    .fs-md-24 {
        font-size: 1.5rem !important; /* 24px */
    }

    .fs-md-23 {
        font-size: 1.438rem !important; /* 23px */
    }

    .fs-md-32 {
        font-size: 2rem !important; /* 32px */
    }

    .fs-md-36 {
        font-size: 2.25rem !important; /* 36px */
    }

    .fs-md-64 {
        font-size: 4rem !important; /* 64px */
    }

    .fs-md-78 {
        font-size: 4.875rem !important; /* 78px */
    }

    .fs-md-116 {
        font-size: 116px !important; /* 116px */
    }

    .fs-md-128 {
        font-size: 8rem !important; /* 128px */
    }

    .fs-md-96 {
        font-size: 6rem !important; /* 96px */
    }

    .fs-md-94 {
        font-size: 94px !important; /* 94px */
    }

    .fs-md-200 {
        font-size: 12.5rem !important; /* 200px */
    }

    .fs-md-180 {
        font-size: 11.25rem !important; /* 180px */
    }

    .fs-md-100 {
        font-size: 6.25rem !important; /* 100px */
    }

    .fs-md-110 {
        font-size: 6.875rem !important; /* 110px */
    }

    .fs-md-40 {
        font-size: 2.5rem !important; /* 40px */
    }

    .fs-md-120 {
        font-size: 7.5rem !important; /* 120px */
    }

    .fs-md-104 {
        font-size: 6.5rem !important; /* 104px */
    }

    .fs-md-76 {
        font-size: 4.75rem !important; /* 76px */
    }

    .fs-md-70 {
        font-size: 4.375rem !important; /* 70px */
    }

    .px-container {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pt-navbar {
        padding-top: 77.1875px;
    }

    .mr-md-n {
        margin-right: 0;
    }

    .btn-primary {
        width: 100%;
        max-width: 382px;
        height: 57px;
        /*box-shadow: 3px 2px 0px 1px var(--white);*/
    }

    .btn-secondary {
        width: 100%;
        max-width: 382px;
        height: 57px;
        /*box-shadow: 3px 2px 0px 1px var(--white-base);*/
    }

    .gap-md-94 {
        gap: 94px;
    }

    .gap-md-n {
        gap: 0;
    }

    .pt-md-45 {
        padding-top: 45px !important;
    }

    .mt-md-56 {
        margin-top: 56px !important;
    }

    .mt-md-60 {
        margin-top: 60px;
    }

    .mt-md-32 {
        margin-top: 32px;
    }

    .mt-md-37 {
        margin-top: 37px;
    }

    .mt-md-76 {
        margin-top: 76px;
    }

    .mt-md-30 {
        margin-top: 30px;
    }

    .mt-md-20 {
        margin-top: 20px !important;
    }

    .mt-md-25 {
        margin-top: 25px !important;
    }

    .letter-terms-and-privacy h1 {
        font-size: 48px !important;
    }

    .letter-terms-and-privacy p {
        font-size: 18px !important;
    }

    h2 {
        font-size: 4rem !important; /* 64px */
    }

        h2.big {
            font-size: 96px !important;
        }

    p {
        font-size: 32px !important;
    }

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

        p.big-bold {
            font-size: 24px !important;
        }

        p.small {
            font-size: 20px !important;
        }

        p.medium {
            font-size: 20px !important;
        }

    h1.small {
        font-size: 70px !important;
    }

    h1.middle {
        font-size: 64px !important;
    }

    h2.small {
        font-size: 48px !important;
    }

    h2.middle {
        font-size: 96px !important;
    }

    h3 {
        font-size: 85px !important;
    }

        h3.small {
            font-size: 24px !important;
        }
}

@media (min-width: 992px) {

    .lh-123 {
        line-height: 96% !important;
    }


    h1.big {
        font-family: var(--pretty-font);
        font-size: 96px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 76.8px */
    }


    /* ##### colors ##### */

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

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

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

    .app-text-lg-blue {
        color: var(--light-blue) !important;
    }

    .app-text-lg-pink {
        color: var(--pink) !important;
    }

    .app-text-lg-yellow {
        color: var(--yellow) !important;
    }


    /* ##### font-size ##### */

    .lh-186 {
        line-height: 186px !important;
    }

    .fw-lg-bold {
        font-weight: 700;
    }

    .fs-lg-48 {
        font-size: 3rem !important; /* 48px */
    }

    .fs-lg-64 {
        font-size: 4rem !important; /* 64px */
    }

    .fs-lg-80 {
        font-size: 80px !important; /* 80px */
    }

    .fs-lg-10 {
        font-size: 0.625rem !important; /* 10px */
    }

    .fs-lg-12 {
        font-size: 0.75rem !important; /* 12px */
    }

    .fs-lg-14 {
        font-size: 0.875rem !important; /* 14px */
    }

    .fs-lg-16 {
        font-size: 1rem !important; /* 16px */
    }

    .fs-lg-18 {
        font-size: 1.125rem !important; /* 18px */
    }

    .fs-lg-20 {
        font-size: 1.25rem !important; /* 20px */
    }

    .fs-lg-22 {
        font-size: 1.375rem !important; /* 22px */
    }

    .fs-lg-23 {
        font-size: 1.438rem !important; /* 23px */
    }

    .fs-lg-32 {
        font-size: 2rem !important; /* 32px */
    }

    .fs-lg-36 {
        font-size: 2.25rem !important; /* 36px */
    }

    .fs-lg-64 {
        font-size: 4rem !important; /* 64px */
    }

    .fs-lg-54 {
        font-size: 56px !important; /* 56px */
    }

    .fs-lg-128 {
        font-size: 8rem !important; /* 128px */
    }

    .fs-lg-200 {
        font-size: 12.5rem !important; /* 200px */
    }

    .fs-lg-180 {
        font-size: 11.25rem !important; /* 180px */
    }

    .fs-lg-100 {
        font-size: 6.25rem !important; /* 100px */
    }

    .fs-lg-40 {
        font-size: 2.5rem !important; /* 40px */
    }

    .fs-lg-24 {
        font-size: 1.5rem !important; /* 24px */
    }

    .fs-lg-96 {
        font-size: 6rem !important; /* 96px */
    }

    .fs-lg-120 {
        font-size: 7.5rem !important; /* 120px */
    }

    .fs-lg-140 {
        font-size: 140px !important; /* 120px */
    }

    .fs-lg-119 {
        font-size: 119px !important; /* 120px */
    }

    .fs-lg-104 {
        font-size: 6.5rem !important; /* 104px */
    }

    .fs-lg-62 {
        font-size: 3.875rem !important; /* 62px */
    }

    .btn-primary {
        width: 377px;
        height: 59px;
        /*box-shadow: 3px 2px 0px 1px var(--white);*/
    }

    .lh-lg-116 {
        line-height: 116px !important;
    }


    .pt-lg-45 {
        padding-top: 45px !important;
    }

    .mt-lg-56 {
        margin-top: 56px !important;
    }

    .mt-lg-60 {
        margin-top: 60px;
    }

    .mt-lg-37 {
        margin-top: 37px;
    }

    .mt-lg-30 {
        margin-top: 30px;
    }

    .mt-lg-20 {
        margin-top: 20px;
    }

    .pt-navbar {
        padding-top: 110.594px;
    }

    .letter-terms-and-privacy h1 {
        font-size: 64px !important;
    }

    .letter-terms-and-privacy p {
        font-size: 18px !important;
    }

    .gap-lg-138 {
        gap: 138px;
    }

    .mt-lg-n {
        margin-top: 0;
    }

    p.small {
        font-size: 20px !important;
    }

    p.medium {
        font-size: 20px !important;
    }

    h1.small {
        font-size: 70px !important;
    }

    h1.middle {
        font-size: 119px !important;
    }

    h2.big {
        font-size: 120px !important;
    }

    h2.middle {
        font-size: 96px !important;
    }

    h3 {
        font-size: 96px !important;
    }

        h3.small {
            font-size: 32px !important;
        }

    .container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {

    /*    .btn-primary {
        width: 100%;
        max-width: 377px;
        height: 59px;
        box-shadow: 4px 3px 0px 2px var(--white);
    }*/

    .btn-secondary {
        width: 100%;
        max-width: 377px;
        height: 59px;
        /*box-shadow: 3px 2px 0px 1px var(--white-base);*/
    }

    .container {
        max-width: 960px !important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 960px !important;
    }

    /*    .btn-primary {
        width: 100%;
        max-width: 377px;
        height: 59px;
        box-shadow: 4px 3px 0px 2px var(--white);
    }*/

    .btn-secondary {
        width: 100%;
        max-width: 377px;
        height: 59px;
        /*box-shadow: 3px 2px 0px 1px var(--white-base);*/
    }
}