/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900 */

/* .big-shoulders display-<uniquifier> {
    font-family: "Big Shoulders Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
} */


@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&display=swap');


:root {
    --color-primary: #003865;
    --color-secondary: #169BD8;
    --color-light: #fff;
    --color-dark: #151618;

    /* --bs-body-font-family: 'Big Shoulders Display', sans-serif !important; */
}

body {
    /* font-family: 'Big Shoulders Display', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    color: var(--color-primary) !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Big Shoulders Display', sans-serif;
}

a {
    text-decoration: none !important;
    transition: all .35s;
}

footer a:hover {
    filter: brightness(.8);
}

a.basic {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    transition: all .35s;
}

a.basic:hover {
    filter: brightness(1.4);
}

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

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

.hk-btn {
    background-color: var(--color-primary);
    color: var(--color-light);
    display: inline-block;
    text-decoration: none;
    padding: .5rem 2.5rem;
    border-radius: 30px;
    transition: all .35s;
    font-size: 1.125rem;
}

.hk-btn:hover {
    filter: brightness(1.4);
}

.hk-btn.ghost {
    background-color: transparent !important;
    color: var(--color-dark);
    font-size: 1.75rem;
    border: 1px solid var(--color-secondary);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .125rem;
    padding-bottom: .0;
    transition: all .35s;
}

.hk-btn.phone::before {
    content: url("/img/ico-phone.svg");
    position: relative;
    left: -.75rem;
    top: .125rem;
    transition: all .35s;
}

.hk-btn.phone:hover::before {
    filter: brightness(.4);
}

.hk-btn.ghost:hover {
    background-color: var(--color-secondary) !important;
}

hr {
    border-top: 2px solid var(--color-secondary) !important;
    /* color: var(--color-secondary); */
    margin: 1rem 0;
}

h1,
h2 {
    color: var(--color-primary) !important;
}

h1 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-size: 5rem !important;
    line-height: 5rem !important;
}

h1 .fs-50 {
    display: inline-block;
    line-height: 3rem !important;
}

h2 {
    font-size: 3.125rem !important;
}

h3 {
    font-size: 4.375rem !important;
}

h4 {
    font-size: 2.313rem !important;
}

h5 {
    font-size: 4.375rem !important;
}

.emp {
    color: var(--color-secondary) !important;
}

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

.ps-1 {
    padding-left: .25rem;
}

.ps-2 {
    padding-left: .5rem;
}

.ps-3 {
    padding-left: 1rem;
}

.ps-4 {
    padding-left: 2rem;
}

.ps-5 {
    padding-left: 3rem;
}

.fs-50 {
    font-size: 3.125rem;
}

.fs-80 {
    font-size: 5rem;
}

.hero {
    width: 100%;
    background-image: url(/img/horni-2.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-position-x: 40%;
}

p {
    font-size: 1.125rem;
}

.chair {
    width: 26px;
    height: 36px;
}

.opening,
.address {
    position: relative;
    margin-left: .5rem;
}

.opening::before {
    content: url('/img/open-hours.svg');
    position: absolute;
    left: -55px;
    top: 0;
    display: none;
}

.address::before {
    display: none;
    content: url('/img/ico-karavan.svg');
    position: absolute;
    left: -55px;
    top: 0;
}

@media screen and (min-width: 768px) {
    .hero {
        background-position-x: 20%;
        background-position-y: -44%;
    }

    h1 {
        line-height: 3rem !important;
    }

    h1 .fs-50 {
        display: inline;
    }

    .address::before,
    .opening::before {
        display: block;
    }

    .opening,
    .address {
        margin-left: 2rem;
    }
}

@media screen and (min-width: 992px) {
    .reverse-order {
        flex-direction: row-reverse;
    }

    .car .reverse-order h5 {
        text-align: left;
    }

    .reverse-order .chairs-wrap {
        justify-content: left;
    }

    .hero {
        background-position-x: 20%;
    }
}

@media screen and (min-width: 1200px) {
    .chair {
        width: 37px;
        height: 52px;
    }
}


@media screen and (min-width: 1400px) {
    .hero {
        min-height: 990px;
    }

}