/* global variables */
:root {
    --fontsize: calc(0.3125rem + ((1vw - 3.6px) * 0.4965));
}

:root {
    /* add fluid rem function */
    font-size: max(37.5%, min(var(--fontsize), 62.5%));
    /* RWD */
    --global-width: min(calc(320px + ((1vw - 3.6px) * 100)), 123.5rem);

    /* colors */
    --color-white: #FFFFFF;
    --color-silver: #F2F2F2;
    --color-beige: #DCD8CD;
    --color-black: #000;
    --color-gold: #C9A979;
    --color-navy: #021827;
    --color-charcoal: #354652;
    --color-midnight-blue: #0F2432;
    --color-slate-dark: #1B2F3D;

    /* fonts */
    --font-family-main: "Karla", sans-serif;
    --font-size-46: max(46px, 4.6rem); /* H0 */
    --font-size-32: max(32px, 3.2rem);     /* H1 */
    --font-size-28: max(28px, 2.8rem);  /* H2 */
    --font-size-18: max(18px, 1.8rem); /* P0 */
    --font-size-15: max(15px, 1.5rem); /* P1, P2 */
    --font-size-14: max(14px, 1.4rem); /* P3 */
    --font-size-13: max(13px, 1.3rem);

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    font-family: var(--font-family-main);
}

@media(min-width: 2048px) {
    :root {
        font-size: 85%;
    }
}

@media(min-width: 3840px) {
    :root {
        font-size: 140%;
    }
}

/* Color Classes */
.color-white { color: var(--color-white); }
.color-silver { color: var(--color-silver); }
.color-beige { color: var(--color-beige); }
.color-black { color: var(--color-black); }
.color-gold { color: var(--color-gold); }
.color-navy { color: var(--color-navy); }
.color-charcoal { color: var(--color-charcoal); }
.color-midnight-blue { color: var(--color-midnight-blue); }
.color-slate-dark { color: var(--color-slate-dark); }

/* Background Color Classes */
.bg-white { background-color: var(--color-white); }
.bg-silver { background-color: var(--color-silver); }
.bg-beige { background-color: var(--color-beige); }
.bg-black { background-color: var(--color-black); }
.bg-gold { background-color: var(--color-gold); }
.bg-navy { background-color: var(--color-navy); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-midnight-blue { background-color: var(--color-midnight-blue); }
.bg-slate-dark { background-color: var(--color-slate-dark); }


/* Font Family Classes */
.font-family-main {
    font-family: var(--font-family-main);
}

/* Font Size Classes */
.font-size-46 { font-size: var(--font-size-46); }
.font-size-32 { font-size: var(--font-size-32); }
.font-size-28 { font-size: var(--font-size-28); }
.font-size-18 { font-size: var(--font-size-18); }
.font-size-15 { font-size: var(--font-size-15); }
.font-size-14 { font-size: var(--font-size-14); }
.font-size-13 { font-size: var(--font-size-13); }

.line-height-30 {
    line-height: max(30px, 3rem);
}

/* Font Weight Classes */
.font-weight-light {
    font-weight: var(--font-weight-light);
}

.font-weight-regular {
    font-weight: var(--font-weight-regular);
}

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.font-weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.karla {
    font-family: var(--font-family-main);
}

.cont {
    width: var(--global-width);
    max-width: 96%;
}

a {
    text-decoration: none;
}

.slick-track {
    display: flex !important;
}

.slick-slide {
    height: inherit !important;
}

/* ===== GLOBAL BUTTONS ===== */
.btn {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: max(1rem, 10px) max(25px ,2.5rem);
    width: calc(100% - 1rem);
    max-width: max-content;
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-medium);
    line-height: 2.153;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.btn--filled {
    background: var(--color-navy-dark);
    color: var(--color-white);
}

.btn--filled:hover {
    background: var(--color-gold);
    color: var(--color-white);
}

.btn--outline {
    background: #F5F5F5;
    color: var(--color-navy-dark);
}

.btn--outline:hover {
    background: var(--color-navy-dark);
    color: var(--color-white);
}

.btn--filled-gold {
    border: 1px solid var(--color-gold);
    background: var(--color-gold);
    color: var(--color-white);
}

.btn--filled-gold:hover {
    border-color: var(--color-white);
    background: var(--color-navy-dark);
    color: var(--color-white);
}

.hero-slider__btn svg,
.btn svg{
    transition: transform .3s ease;
}

.hero-slider__btn:hover svg,
.btn:hover svg{
    transform: rotate(45deg);
}

.text-uppercase {
    text-transform: uppercase;
}