.header {
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: -1;
    animation: slider 10s linear infinite;
}

@keyframes slider {
    0%{
        background-image: url("../images/background01.jpg");
    }
    30%{
        background-image: url("../images/background02.jpg");
    }
    60%{
        background-image: url("../images/background03.jpg");
    }
    100%{
        background-image: url("../images/background04.jpg");
    }
}

.titleBanner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vw; 
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    mix-blend-mode: screen;
    background-color: #fff;
    padding: 10px;
}

h3 {
    margin-bottom: 20px;
}

.boxCategories{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.boxCategory {
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    background-color: darkblue;
    text-transform: capitalize;
}

@media (max-width: 1000px) {
    .titleBanner{
        text-align: center;
        font-size: 50px;
    }

    .header {
        width: 100%;
        height: 50vh;
    }

    h3 {
        font-size: 1.5rem;
    }

    .boxCategories {
        margin-top: 150px;
    }

    .boxCategory {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-weight: 400;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .header {
        width: 100%;
        height: 40vh;
    }

    h3 {
        font-size: 1.2rem;
    }

    .boxCategory {
        display: none;
    }
}

@media (min-width: 1000px) {
    .boxCategory {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .header {
        background-size: 100% 100%;
    }
}