:root {
    --animate-delay: 250ms !important;
}

.poppins-thin {
    font-family: "Poppins", serif !important;
    font-weight: 100 !important;
    font-style: normal !important;
}

.poppins-extralight {
    font-family: "Poppins", serif !important;
    font-weight: 200 !important;
    font-style: normal !important;
}

.poppins-light {
    font-family: "Poppins", serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
}

.poppins-regular {
    font-family: "Poppins", serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.poppins-medium {
    font-family: "Poppins", serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
}

.poppins-semibold {
    font-family: "Poppins", serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

.poppins-bold {
    font-family: "Poppins", serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.poppins-extrabold {
    font-family: "Poppins", serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

.poppins-black {
    font-family: "Poppins", serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.vozidloCard {
    transition: all ease-in-out 250ms !important;
    height: 200px;
    background-color: #E63425;
    background-position: center !important;
    background-size: cover !important;
}

.vozidloCard h1 {
    font-size: 2rem !important;
}

#dodavky {
    background: linear-gradient(90deg, #E63425, #e6352500), url("src/dodavky.png");
}
#dodavky:hover {
    background: linear-gradient(90deg, #E63425, #e6352567), url("src/dodavky.png");
}

#soupravy {
    background: linear-gradient(90deg, #E63425, #e6352500), url("src/soupravy.jpg");
}
#soupravy:hover {
    background: linear-gradient(90deg, #E63425, #e6352567), url("src/soupravy.jpg");
}

#soupravydotritun {
    background: linear-gradient(90deg, #E63425, #e6352500), url("src/soupravydotritun.png");
}
#soupravydotritun:hover {
    background: linear-gradient(90deg, #E63425, #e6352567), url("src/soupravydotritun.png");
}

#kamiony {
    background: linear-gradient(90deg, #E63425, #e6352500), url("src/kamiony.png");
}
#kamiony:hover {
    background: linear-gradient(90deg, #E63425, #e6352567), url("src/kamiony.png");
}

#scrollBtn {
    animation-name: scrollAnimation;
    animation-duration: 1.5s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes scrollAnimation {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-10%);
    }
}

.nav-link {
    transition: all ease-in-out 200ms !important;
    border-bottom: 2px solid transparent !important;
}
.nav-link:hover {
    border-bottom: 2px solid white !important;
}

#mainHeader {
    background: linear-gradient(#E63425, #e6352533), url("src/bgImgPhone.jpg");
    background-size: cover;
    background-position: center;
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .vozidloCard {
        height: 300px;
    }
    .vozidloCard h1 {
        font-size: 3.5rem !important;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .vozidloCard {
        height: 400px;
    }
    .vozidloCard h1 {
        font-size: 4.8rem !important;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .vozidloCard {
        height: 450px;
    }
    .vozidloCard h1 {
        font-size: 6rem !important;
    }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .vozidloCard {
        height: 500px;
    }
    .vozidloCard h1 {
        font-size: 7rem !important;
    }
    #mainHeader {
        background: linear-gradient(#E63425, #e6352533), url("src/bgImg.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .vozidloCard {
        height: 600px;
    }
    .vozidloCard h1 {
        font-size: 8rem !important;
    }
}