* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Habibi';
    src: url('/static/fonts/Habibi-Regular.woff2') format('woff2'), url('/static/fonts/Habibi-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Flex';
    src: url('/static/fonts/RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('/static/fonts/RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-display: swap;
}

:root {
    /* colors */
    --main-text-color: black;
    --inverted-color: #EFEDEB;
    --main-menu-background-color: black;
    --main-menu-text-color: white;
    --speccolor: black;
    /* fonts */
    --font-body: 'Roboto Flex';
    --font-headers: Habibi, serif;
    /* FONTS SIZE */
    --step-0: clamp(1.10rem, calc(1.08rem + 0.22vw), 1.13rem);
    --step-1: clamp(1.35rem, calc(1.24rem + 0.55vw), 1.67rem);
    --step-2: clamp(1.62rem, calc(1.41rem + 1.05vw), 2.22rem);
    --step-3: clamp(1.94rem, calc(1.59rem + 1.77vw), 2.96rem);
    --step-4: clamp(2.33rem, calc(1.77rem + 2.81vw), 3.95rem);
    --step-5: clamp(2.80rem, calc(1.94rem + 4.28vw), 5.26rem);
    --step-6: clamp(3.36rem, calc(2.33rem + 6.45vw), 6.30rem);
    /* columns set */
    --gap20: 20px;
    --col-6: calc((100% - var(--gap20)) / 6);
    --col-5: calc((100% - var(--gap20)) * 5 / 12);
    --col-4: calc((100% - var(--gap20)) * 4 / 12);
    --col-3: calc((100% - var(--gap20)) / 4);
    --col-1: calc((100% - var(--gap20)) / 12);
}

body {
    align-items: center;
    font-size: var(--step-0);
    background-color: var(--inverted-color);
    flex-direction: column;
    font-family: var(--font-body);
    line-height: 1.5;
    font-weight: 300;
    justify-content: center;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.wrapper {
    margin-inline: auto;
}

.wrapper,
.menu-wrapper {
    max-width: 1216px;
}

.menu-wrapper {
    /* display: inline; */
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
}


/* MENU */

.book-link {
    text-align: center;
}

.button-header {
    position: relative;
    background-color: #000000;
    border: none;
    font-size: var(--step-0);
    color: #FFFFFF;
    width: 206px;
    height: 43px;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
}

header {
    position: fixed;
    padding: 20px 0 0 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* max-width: 1216px; */
    width: 100%;
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    background-color: var(--main-menu-background-color);
    z-index: 1000;
}

.second-head {
    width: 100%;
    background-color: var(--inverted-color);
}

header ul li,
header ul li a {
    color: var(--main-menu-text-color) !important;
}

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

.second-head ul li,
.second-head ul li a {
    color: black!important;
}

.external-link::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 14px;
    height: 14px;
    background: url('../images/icon-external-link.svg') no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

a.no-link-after::after {
    background: none;
}

.no-link-after {
    text-decoration-line: none !important;
}

.header-menu {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}

.logo-text {
    color: var(--main-menu-text-color);
    font-family: var(--font-headers);
    text-align: end;
    line-height: 100%;
    display: flex;
    margin: 0;
    flex-shrink: 0;
}

.logo-text a {
    color: var(--main-menu-text-color);
}

.hamburger-icon {
    border: none;
    display: none;
    background-color: transparent;
    /* background-color: white; */
}

.hamburger-icon .burger,
.hamburger-icon .close {
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

.hamburger-icon input[type="checkbox"] {
    appearance: none;
}

.hamburger-icon input[type="checkbox"] {
    appearance: none;
}

.navigation-main-menu li:first-child {
    margin-left: 0;
}

.navigation-main-menu a {
    color: var(--main-text-color);
    text-decoration: underline;
}

.navigation-main-menu li {
    margin-right: 20px;
}

.navigation-main-menu li:last-of-type {
    margin-right: 0;
}

.navigation-main-menu {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}

.navigation-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    background-color: var(--inverted-color);
    z-index: 1000;
}

.navigation-breadcrumbs .book-link {
    margin-left: auto;
}

.navigation-breadcrumbs a.highlight {
    font-weight: 500;
}

.last-test {
    margin-left: auto !important;
}

.navigation-breadcrumbs li:not(:last-child) {
    padding: 4px 8px 4px 0;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.navigation-breadcrumbs li:not(:first-child):not(:last-child):hover {
    cursor: pointer;
    transform: scale(1.05);
}

.active-page {
    font-weight: 500;
    display: flex;
    align-items: center;
}

.border-zero {
    border: 0 !important;
}


/* END MENU */


/* HEADINGS */

.first-section {
    margin-top: 20vh !important;
}

h1,
h2,
h3 {
    text-wrap: balance;
    font-family: var(--font-headers);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-bottom: 20px;
}

h1 {
    margin: 200px 0 0;
    text-align: left;
    line-height: 110%;
    font-weight: 400;
    letter-spacing: 1.92px;
    font-size: var(--step-6);
    left: 0;
    right: 0;
}

h2 {
    font-size: var(--step-3);
    line-height: 130%;
}

h3 {
    font-size: var(--step-2);
    line-height: 130%;
}

.cental {
    text-align: center;
}


/* END HEADINGS */

strong,
b {
    font-weight: 700;
}

a {
    display: inline-block;
    color: var(--main-text-color);
}

.question a {
    text-decoration: underline;
}

.underline-link {
    text-decoration: underline !important;
}

ul li {
    color: var(--main-text-color);
    margin-top: auto;
    margin-bottom: auto;
    list-style-type: none;
}


/* FOOTER */

footer {
    margin-top: 150px;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 100;
    color: var(--inverted-color);
    width: 100%;
    height: auto;
    background-color: var(--speccolor);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.left-div-footer {
    width: 40%;
    min-width: 0;
}

.right-div-footer {
    flex: 1;
    min-width: 0;
}

.one-line {
    display: flex;
    flex-direction: row;
}

.footer-zone {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

footer a {
    color: var(--inverted-color);
    text-decoration: underline;
}

footer li {
    color: var(--inverted-color);
    margin-left: 20px;
}

.right-div-footer {
    display: flex;
    flex-direction: column;
}

.right-div-footer nav {
    margin-top: auto;
    align-self: flex-end;
}

.section {
    display: flex;
    flex-direction: row;
    margin-top: 100px;
}

.aspect-ratio-wrapper {
    position: relative;
    width: 100%;
    padding-top: 50%;
    overflow: hidden;
}

.aspect-ratio-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottom-30 {
    margin-bottom: 30px;
}

.top-zero {
    margin-top: 0 !important;
}

.read-more {
    margin-top: 30px;
    display: block;
}

.read-more a {
    text-decoration: underline;
}


/* HOW TO GET */

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-item {
    margin-top: 50px;
    gap: 20px;
    text-align: left;
}

.grid-item a {
    text-decoration: underline;
}

.grid-item button {
    margin-top: 1em;
}

.button {
    position: relative;
    background-color: #000000;
    border: none;
    font-size: var(--step-0);
    color: #FFFFFF;
    width: 230px;
    height: 43px;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
}


/*END HOW TO GET */


/* END FOOTER */

.zero-top {
    margin-top: 0 !important;
}


/* END GLOBAL */

@media (max-width: 1024px) {
    /* MOBILE GLOBAL */
    h1 {
        font-size: var(--step-5);
        line-height: 130%;
        margin: 0;
    }
    .first-section {
        margin-top: 0 !important;
    }
    .read-more {
        align-self: start;
    }
    .menu-wrapper {
        max-width: 100%;
        background-color: var(--inverted-color);
        display: block;
    }
    .wrapper {
        padding: 120px 16px 0;
    }
    header {
        display: block;
        height: 70px;
        background-color: var(--inverted-color);
    }
    .menu-main {
        height: auto;
        overflow: hidden;
    }
    .logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .logo-text a {
        color: black;
        margin-left: 16px;
    }
    .navigation-main-menu {
        margin: 0;
        /* padding-top: 30px; */
        padding-right: 16px;
        height: 0;
        overflow: hidden;
        flex-direction: column;
        align-items: end;
        transition: all 0.1s ease-in-out;
        justify-content: unset;
    }
    .navigation-main-menu li {
        margin-right: 0;
        margin-top: 30px;
    }
    /* NEW */
    /* Mobile styles for navigation breadcrumbs */
    .second-head {
        padding: 16px;
    }
    .navigation-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        list-style-type: none;
        justify-content: start;
        gap: 0;
    }
    .navigation-breadcrumbs li {
        text-decoration: none !important;
        padding: 0 !important;
        margin: 0 10px 10px 0 !important;
    }
    .navigation-breadcrumbs li a {
        display: block;
        box-sizing: border-box;
        text-decoration: none;
        border: 1px solid #000;
        white-space: nowrap;
        padding: 2px 4px;
    }
    .navigation-breadcrumbs li.active-page a {
        border: 0;
    }
    .navigation-breadcrumbs li:last-child {
        margin-left: 0;
        background-color: black;
    }
    .button-header {
        height: auto;
        width: auto;
        border-radius: 0;
    }
    /* END */
    .hamburger-icon {
        display: block;
        padding-right: 16px;
    }
    .close {
        display: none;
    }
    header:has(.hamburger-icon input[type="checkbox"]:checked) {
        background: black;
    }
    header:has(.hamburger-icon input[type="checkbox"]:checked) .navigation-main-menu {
        font-size: 1.5em;
        line-height: 100%;
        min-height: 100vh;
        background: black;
    }
    header:has(.hamburger-icon input[type="checkbox"]:checked) .menu-wrapper {
        background: black;
    }
    header:has(.hamburger-icon input[type="checkbox"]:checked) .burger {
        display: none;
    }
    header:has(.hamburger-icon input[type="checkbox"]:checked) .logo-text a {
        color: white;
    }
    header:has(.hamburger-icon input[type="checkbox"]:checked) .close {
        display: inline-block;
    }
    ul li {
        color: var(--main-text-color);
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        list-style-type: none;
    }
    .top-10 {
        margin-left: 20px;
    }
    .top-30 {
        margin-top: 30px;
    }
    .section {
        margin-top: 50px;
        flex-direction: column;
    }
    .left-div {
        width: 100% !important;
    }
    .right-div {
        width: 100% !important;
    }
    .reverse-order {
        order: -1;
    }
    .margin-left-1 {
        margin-left: 0;
    }
    .footer-zone {
        flex-direction: column;
    }
    footer {
        margin-top: 50px;
    }
    .left-div-footer {
        width: 100%;
    }
    .right-div-footer {
        width: 100%;
    }
    .one-line {
        display: flex;
        flex-direction: column;
    }
    .one-line li {
        display: block;
        margin-top: 20px;
        color: var(--inverted-color)
    }
    .right-div-footer nav {
        margin-top: 10px;
        align-self: self-start;
    }
    .left-div-footer b {
        display: block;
    }
    table {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        border-collapse: collapse;
    }
    .section.inverted-sections-mobile {
        flex-direction: column-reverse;
    }
    /* OFFERS */
    .offer-select-date {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }
    .first-page-offer {
        margin-top: 100px;
    }
    .top-zero-mobile {
        margin-top: 0 !important;
    }
    /* HOW TO GET MOBILE  */
    .grid-container {
        grid-template-columns: 1fr;
    }
    .grid-item {
        margin-top: 20px;
    }
    .grid-item h3 {
        margin-bottom: 0;
    }
    /* END HOW TO GET MOBILE  */
    /* END MOBILE GLOBAL */
}