:root {
    --serif-font: serif;
    --sans-serif-font: sans-serif;
    --font-size-title: 2rem;

    --white: #FFFFFF;
    --gray-1: #EEEEEE;
    --gray-2: #DDDDDD;
    --gray-3: #CCCCCC;
    --gray-4: #BBBBBB;
    --gray-5: #AAAAAA;
    --gray-6: #999999;
    --gray-7: #888888;
    --gray-8: #888888;
    --gray-9: #777777;
    --gray-10: #666666;
    --gray-11: #555555;
    --gray-12: #444444;
    --gray-13: #333333;
    --gray-14: #222222;
    --gray-15: #111111;
    --black: #000000;
}

body {
    font-size: var(--font-size-title);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.px-2 a.text-light:hover {
    color: var(--gray-3) !important;
    transition: color 0.5s;
}

header {
    z-index: 10;

    /* hide responsive menu */
    #topnav_hamburger_icon,
    #topnav_responsive_menu {
        display: none;
    }

    .header-content {
        width: 100%;
        max-width: 1400px;
        letter-spacing: 0.1rem;

        a {
            display: flex;
            text-decoration: none !important;
        }

        .d-flex {
            flex-wrap: wrap;
        }

        .header-link {
            font-size: 1rem;
            justify-content: end;
            text-align: end;
            font-weight: 500;
        }

        h1 {
            font-size: var(--font-size-title);
        }
    }

    .header-link,
    .insta-icon,
    nav {
        color: var(--gray-5);
        transition: all 0.3s;
    }

    .header-link:hover,
    .insta-icon:hover,
    nav {
        color: var(--gray-9);
    }

}

.text-xxs {
    font-size: 0.3em;
}

.text-xs {
    font-size: 0.5em;
}

.text-s {
    font-size: 0.8em;
}

.text-m {
    font-size: 1em;
}

.text-l {
    font-size: 1.2em;
}

.text-xl {
    font-size: 1.5em;
}

.text-xxl {
    font-size: 2em;
}



footer {
    z-index: 9;
    flex-shrink: 0;
    font-size: medium;
    background-color: var(--gray-1) !important;
}

.bg-gray {
    background-color: var(--gray-1);
}

.fix-bottom {
    display: flex;
    flex-direction: column;

    .fixed-main-content {
        flex: 1 0 auto;
    }

    .fixed-bottom-row {
        flex-shrink: 0;
    }
}

.card {
    .card-text {
        font-size: 0.5em !important;
    }
}

.container,
.container-fluid {
    flex: 1 0 auto;
}

.no-scrollable {
    overflow: hidden !important;
}

@media only screen and (max-width: 575px) {}

@media (max-width: 767px) {}

@media (max-width: 991px) {}

@media only screen and (max-width: 1199px) {

    /* hide classic menu */
    .header-div {
        display: none !important;
    }

    /* position home link at left and hamburger will be positionned at right */
    .topnav {
        width: 100%;
        display: flex;
        align-items: center;
    }

    #home_link {
        flex-grow: 1;
    }

    /* disable horizontal scrolling  */
    #root {
        position: relative;
        overflow-x: hidden;
    }

    /* position responsive menu at the right of the screen */
    #topnav_responsive_menu {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);

        z-index: 99;

        transform-origin: 0% 0%;
        transform: translate(200%, 0);

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);

        /* position responsive menu at the right of the screen */
        ul {
            list-style-type: none;
            /* text-align: center; */
            width: 100%;
            min-width: 50vw;

            li {
                margin-top: 10px;
            }
        }

        li a {
            text-decoration: none !important;
        }

        .fixed-main-content {
            display: flex;
            flex-direction: column;

            position: absolute;
            margin: 0;
            right: 0;
            top: 33px;

            height: 50vh;
        }

        .fixed-bottom-row {
            display: flex;
            flex-direction: column;

            position: absolute;
            margin: 0;
            right: 0;
            bottom: 33px;
        }
    }

    /* and let's slide it in from the right */
    #topnav_responsive_menu.open {
        display: block;
        transform: none;
        position: fixed;
    }

    /* define size and position of the hamburger link */
    #topnav_hamburger_icon {
        display: block !important;
        position: relative;
        margin: 16px;
        width: 33px;
        height: 28px;
        z-index: 100;
        user-select: none;
        cursor: pointer;
    }

    /* define the style (size, color, position, animation, ...) of the 3 spans */
    #topnav_hamburger_icon span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        margin-bottom: 5px;
        background: #ededed;
        border-radius: 3px;
        z-index: 100;
        opacity: 1;
        left: 0;

        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }

    /* set the 3 spans position to look like a hamburger */
    #topnav_hamburger_icon span:nth-child(1) {
        top: 0px;
        transform-origin: left top;
    }

    #topnav_hamburger_icon span:nth-child(2) {
        top: 12px;
        transform-origin: left center;
    }

    #topnav_hamburger_icon span:nth-child(3) {
        top: 24px;
        transform-origin: left bottom;
    }

    /* the first span rotates 45° \ */
    #topnav_hamburger_icon.open span:nth-child(1) {
        width: 35px;
        transform: rotate(45deg);
    }

    /* the second span disappears */
    #topnav_hamburger_icon.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    /* the last span rotates -45° / */
    #topnav_hamburger_icon.open span:nth-child(3) {
        width: 35px;
        transform: rotate(-45deg);
    }
}

@media (max-width: 1399px) {}



/* pricing elements */
.custom-pricing {
    font-family: "Segoe UI", sans-serif;
    text-align: center;
}

.custom-row {
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    font-size: 1.2rem;
}

.custom-heading {
    margin-bottom: 0.5rem;
    color: #1e1e2f;
}

.custom-subheading {
    font-size: 1.15rem;
    color: #555;
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.custom-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 2.2rem;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.07);
    border: var(--gray-2) solid 1px;
    transition: all 0.3s ease;
    text-align: left;
    backdrop-filter: blur(6px);
    position: relative;
}

.custom-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
}

.highlighted {
    border: 2px solid #4f46e5;
    background: linear-gradient(to right, #4f46e5, #6d28d9);
    color: #fff;
}

.highlighted .btn-filled {
    background: #fff;
    color: #4f46e5;
}

.custom-icon {
    margin-bottom: 1.2rem;
    color: #4f46e5;
}

.highlighted .custom-icon {
    color: #fff;
}

.custom-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.price {
    font-size: 2rem;
    font-weight: bold;
    margin: 1rem 0;
    color: #333;
}

.highlighted .price {
    color: #fff;
}

.price span {
    font-size: 1rem;
    color: #888;
}

.highlighted .price span {
    color: #e0e0e0;
}

.supplements {
    padding-top: 20px !important;
}

.supplements,
.features {
    list-style: none;
    margin: 0;
    padding: 1rem 0 2rem;
}

.supplements li,
.features li {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: #444;
}

.list-checked {
    list-style: none;

    li:before {
        content: '✓';
        margin-right: 10px;
        color: green;
    }
}

.highlighted .supplements li,
.highlighted .features li {
    color: #eaeaea;
}

.price .ttc {
    font-size: 0.3em;
    vertical-align: super;
    margin-left: 4px;
}

.btn-outline,
.btn-filled {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #4f46e5;
}

.btn-outline {
    background: transparent;
    color: #4f46e5;
}

.btn-outline:hover {
    background: #4f46e5;
    color: #fff;
}

.btn-filled {
    background: #fff;
    color: #4f46e5;
    border: none;
}

.btn-filled:hover {
    background: #e6e6ff;
}

a.dropdown-toggle::after {
    margin: auto auto auto 4px;
}

.font-xs {
    font-size: 0.6em;
}

.font-xxs {
    font-size: 0.4em;
}

.form-group {
    display: flex;
    margin: 0 15px 15px 15px;
    justify-content: space-around;
}

.btn-save-group {
    display: flex;
    justify-content: space-evenly;
    margin-top: auto;
    margin-bottom: 15px;
}

#jgsForm {
    max-width: 900px;
    margin: auto;
}

.nav-tabs {
    border: none !important;
    flex-wrap: nowrap;
    white-space: nowrap;

    .nav-link {
        border: none !important;
    }
}

#toast {
    position: fixed;
    margin: 5px 5px auto 0;
    right: 0;
    z-index: 999;
}