:root {
    --primary: #011200;
    --secondary: #f7f5ee;
    --dark: #011200;
    --dark-alt: #999999;
    --base: #232d23;
    --star: #c3e53b;
    --alt: #f7f5ee;
    --light: #ffffff;
    --black: #000000;
    --white: #ffffff;

    --green: #00a93c;
    --purple: #ca00e7;
    --blue: #0062e7;

    /* width */
    --content-width: 1000px;

    --gutter: clamp(2rem, -7.2132rem + 19.2192vw, 6rem);
    --section-block-padding: clamp(4rem, -5.2132rem + 19.2192vw, 8rem);

    --text-m: clamp(1.5rem, 0.809rem + 1.4414vw, 1.8rem);
    --text-s: clamp(1.2rem, 0.7393rem + 0.961vw, 1.4rem);

    --header-height: 7.856rem;
}

html {
    scroll-behavior: smooth;
    font-size: 10px;
}

* {
    padding: 0;
    margin: 0;
    color: var(--base);
    font-weight: 300;
}

body {
    font-size: var(--text-m);
    line-height: 1.5;
    font-family: "DM Sans", sans-serif;
}

.rich-content * {
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
    font-family: "Instrument Serif", serif;
    color: var(--dark);
    line-height: 1.4;
}

.font--heading {
    font-family: "Instrument Serif", serif;
    line-height: 1.2;
}

.font--body {
    font-family: "DM Sans", sans-serif;
}

.text--white * {
    color: inherit;
}

.tracking-heading {
    letter-spacing: -0.1rem;
}

.section {
    padding-top: var(--section-block-padding);
    padding-bottom: var(--section-block-padding);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.inner_wrapper {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.margin-top-header {
    margin-top: calc(var(--header-height));
}
.min-h-screen-custom{
    min-height: calc(100vh - var(--header-height));
}

.px--section {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.py--section {
    padding-top: var(--section-block-padding);
    padding-bottom: var(--section-block-padding);
}

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

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

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

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

.bg--dark-alt {
    background-color: var(--dark-alt);
}

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

.text--primary {
    color: var(--primary);
}

.text--secondary {
    color: var(--secondary);
}

.text--star,
.text-star i {
    color: var(--star);
}

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

.text--dark-alt {
    color: var(--dark-alt);
}

.text--m {
    font-size: var(--text-m);
}

.text--s {
    font-size: var(--text-s);
}

.nav-link {
    color: var(--alt);
}

.underline-control {
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

/* button */
.btn {
    padding: 0.8rem 2.6rem;
    border-radius: 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-align: center;
    font-weight: 500;
    background-color: var(--dark);
    color: var(--white);
    border: 1px solid var(--black);
    border-radius: 99rem;
    transition: 0.3s;
}

.btn *{
    color: inherit;
}

.btn:hover {
    background-color: transparent;
    border-color: var(--dark);
    color: var(--dark);
}

.btn--light {
    background-color: var(--light);
    border-color: var(--light);
    color: var(--dark);
}

.btn--light-alt {
    background-color: transparent;
    border-color: var(--light);
    color: var(--light);
}

.btn--dark-alt {
    background-color: transparent;
    border-color: var(--dark);
    color: var(--dark);
}

.btn--primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--black);
}

.btn--secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.btn--link-light {
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--light);
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn--link-light * {
    color: var(--light);
}

.btn--link-light:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--light);
}

/* button */

.gap-star {
    gap: 2px;
}

.text--subheading-s {
    font-size: clamp(0.9rem, 0.4393rem + 0.961vw, 1.1rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.online_circle_wrapper {
    position: relative;
    width: clamp(0.6rem, 0.1393rem + 0.961vw, 0.8rem);
    height: clamp(0.6rem, 0.1393rem + 0.961vw, 0.8rem);
    background-color: #00a93c;
    border-radius: 50%;
}

.online_circle_wrapper .online_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #00a93c66;
    border-radius: 50%;
    animation: online_pulse 1.5s linear infinite;
}

@keyframes online_pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* header mobile menu */
.drawer .margin-top-header {
    margin-top: calc(var(--header-height) + 1.6rem);
}

/* Hamburger */
.hamburger {
    width: clamp(2.2rem, 0.3574rem + 3.8438vw, 3rem);
    height: clamp(1.4rem, 0.9393rem + 0.961vw, 1.6rem);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--dark);
}

/* Drawer (start hidden off-screen) */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
    z-index: 10;
    padding-bottom: var(--gutter);
}

.mobile-menu-link {
    display: inline-block;
    font-size: clamp(1.6rem, 0.6787rem + 1.9219vw, 2rem);
    /* transform: translateX(-1rem); */
}

/* header mobile menu */

@media (max-width: 767px){
    :root {
        --header-height: 6.677rem;
    }
}