/* Fonts import */
@font-face {
    font-family: 'Quicksand Regular';
    src: url("../fonts/Quicksand/Quicksand-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

.font-quicksand {
	font-family: 'Quicksand Regular';
}

/* Color variables */
:root {
    /* Navbar colors */
    --primary-color: #FFFFFF;
    --secondary-color: #218EC0;
    --secondary-hover-color: #17375e;
    --tertiary-color: #e31e24;
    --title-color: #218EC0;
    --font-color: #3C4858;
    --form-bg-color: #f0f9ff;
}

/* COLORS #e31e24 #17375e  #218EC0 */

/* Height, width */
.vh-25 {
    height: 25vh !important;
}

.vh-50 {
    height: 50vh !important;
}

.vh-75 {
    height: 75vh !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}

.min-vh-50 {
    min-height: 50vh !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}

.max-vh-25 {
    max-height: 25vh !important;
}

.max-vh-50 {
    max-height: 50vh !important;
}

.max-vh-75 {
    max-height: 75vh !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .vh-sm-25 {
        height: 25vh !important;
    }
    .vh-sm-50 {
        height: 50vh !important;
    }
    .vh-sm-75 {
        height: 75vh !important;
    }
    .vh-sm-100 {
        height: 100vh !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .vh-md-25 {
        height: 25vh !important;
    }
    .vh-md-50 {
        height: 50vh !important;
    }
    .vh-md-75 {
        height: 75vh !important;
    }
    .vh-md-100 {
        height: 100vh !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .vh-lg-25 {
        height: 25vh !important;
    }
    .vh-lg-50 {
        height: 50vh !important;
    }
    .vh-lg-75 {
        height: 75vh !important;
    }
    .vh-lg-100 {
        height: 100vh !important;
    }
}

/* Background Classes */
.bg-position {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-parallax {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Overlay */
.overlay {
    background-color: rgba(99, 99, 99, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Commons */
.submit-button {
    background-color: var(--secondary-color);
    color: #fff;
}

.submit-button:hover {
    background-color: var(--secondary-hover-color);
}

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

.text-shadow {
    text-shadow: 2px 2px #252525;
}

/* Image */
.image-container {
    aspect-ratio: 4/3;
}

/* Content Styling */
.header .padding {
    padding: 1rem 0;
}

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

.header a {
    color: var(--title-color);
    text-shadow: none;
}

.title-color {
    color: var(--title-color);
}

/* Menu Settings */
.menu_active a {
    color: var(--tertiary-color);
}

.menu_hover a:hover {
    color: var(--tertiary-color);
}

#mobile_navbar {
    color: var(--font-color);
}

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

.mobile_menu_hover:hover  {
    background-color: var(--primaty-color);
    color: var(--tertiary-color);
}

#nav_icon {
    color: var(--tertiary-color);
}

/* Current - switch boxes */
@media (min-width: 1024px) {
    .list .boxes:nth-child(2n) .box-1 {
        order: 2;
    }

    .list .boxes .box-2 .image-box {
        float: right;
    }

    .list .boxes:nth-child(2n) .box-2 .image-box {
        float: left;
    }
}

#contact_form .contact-form {
    background-color: var(--form-bg-color);
}

/* Footer */
#footer {
    background-color: var(--font-color);
}

#footer a:hover {
    color: var(--secondary-color);
}

/* Privacy */
#privacy-policy h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    color: var(--secondary-color);
}

#privacy-policy h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
    color: var(--secondary-color);
    padding-top: 1rem;
}

#privacy-policy p {
    line-height: 1.75rem;
}

/* Discounts - select */
#discount_items select {
    appearance: none;
}

#discount_items select option:hover {
    background-color: var(--primary-color) !important;
}