*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
 
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #E5E5E5;
       
}
.nav-link{
    font-family: 'Allerta', sans-serif;
    font-size: 15px;
    letter-spacing: 0.75px;
    font-weight: 400;
    width: 120px;
    height: 28px;
    line-height: 16px;
    letter-spacing: 0.75px;
    text-transform: capitalize;
    color:#354248;

}

#SLIDE_BG{
    width: 100%;
    height: 110vh;
    margin-top: 0%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    backface-visibility: hidden;
    animation: slidebg 8s linear infinite 0s;
    animation-timing-function: ease-in-out;
    background-image: url('../imagenes/7.png');
}

@keyframes slidebg {
    0% {
        background-image: url('../imagenes/7.png')
    }
    25% {
        background-image: url('../imagenes/8.png')
    }
}
.primero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 10% 10% 5% 10%;
}
.texto1{
    font-family: 'Allerta', sans-serif;
    width: 960px;
    height: 142px;
    margin-top: -5%;
    font-size: 36px;
    text-align: left;
    line-height: 37px;
    letter-spacing: 0.75px;
    color: black;
    font-weight: 600;
    text-transform: capitalize;
    
}
.boton{
    font-family: 'Allerta', sans-serif;
    width: 200px;
    height: 60px;
    color: #F5A220;
 
}
.container-fluid{
    display: flex;
    justify-content: flex-end !important;
}
#navbarNav{
    width: 50%;
}

.logo{
    height: 98px;
    width: 98px;
    justify-content: flex-end;
}

.boton{
    font-family: 'Allerta', sans-serif;
    width: 200px;
    height: 60px;
    color: #F5A220;
    margin-bottom: 5%;
    border-radius: 20px;
    border-color: #354248;
    border-style: none;
}
#productos{
    font-family: 'Allerta', sans-serif;
    font-size: 48px;
    letter-spacing: 0.75px;
    width: 266px;
    height: 84px;
    text-transform: capitalize;
    letter-spacing: 0.75px;
    margin: 7% 7% 3% 3%;
    align-self: flex-start;
    font-style: normal;
    font-weight: 400;
    color: black;
    line-height: 37px;
    }
    .carousel1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 60vh;
        margin: 3% 8% 3% 8%; 
    }

    #carousel{
        width: 500px;
        height: 480px; 
        background-repeat: no-repeat;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-right: 5%;
        background-size: cover;
        background-position: 14% 0%;
        backface-visibility: hidden;
        animation: slidebg1 8s linear infinite 0s;
        animation-timing-function: ease-in-out;
        background-image: url('../imagenes/1.png');
    }
    @keyframes slidebg1 {
        0% {
            background-image: url('../imagenes/1.png')
        }
        25% {
            background-image: url('../imagenes/2.png')
        }
    }
    .vehicle{
        width: 500px;
        background-color: white;
        color:black;
        font-family: 'Allerta', sans-serif;
        font-size: 24px;
        text-align: center;
        margin-top: 443px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 15px 0 20px 0;
    }

    #carousel2{
            width: 500px;
            height: 225px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 14% 0%;
            margin-bottom: 10%;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            backface-visibility: hidden;
            animation: slidebg2 8s linear infinite 0s;
            animation-timing-function: ease-in-out;
            background-image: url('../imagenes/3.png');
    }
        @keyframes slidebg2 {
            0% {
                background-image: url('../imagenes/3.png')
            }
            25% {
                background-image: url('../imagenes/4.png')
            }
        }
        .spare{
                width: 500px;
                background-color: white;
                color:black;
                text-align: center;
                position: relative;
                top:180px;
                font-family: 'Allerta', sans-serif;
                font-size: 24px;
                text-transform: uppercase;
                padding: 10px 0 15px 0;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
            
        }
        #carousel3{
            width: 500px;
            height: 225px;
            background-repeat: no-repeat;
            background-size: cover;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            background-position: 14% 0%;
            backface-visibility: hidden;
            animation: slidebg3 8s linear infinite 0s;
            animation-timing-function: ease-in-out;
            background-image: url('../imagenes/5.png');
    }
        @keyframes slidebg3 {
            0% {
                background-image: url('../imagenes/5.png')
            }
            25% {
                background-image: url('../imagenes/6.png')
            }
        }
    .illumination{
            width: 500px;
            background-color: white;
            color:black;
            text-align: center;
            position: relative;
            top:180px;
            font-family: 'Allerta', sans-serif;
            font-size: 24px;
            text-transform: uppercase;
            padding: 10px 0 15px 0;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
    }
#services{
    background: url('../imagenes/Group\ 10\ \(1\).png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:15% 0% 0% 0%;
}

.img2{
    width: 1440px;
    height: 146px;
}
.tercero{
    position: absolute;
    right: 100px;
}
.volante{
    width: 100vw;
    margin-top: 20px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}
.texto2{
    color:#F5A220;
    font-family: 'Allerta', sans-serif;
    text-align: center;
    font-size: 16px;
    line-height: 37px;
    letter-spacing: 0.75px;
    font-weight: bolder;
    padding: 0 2% 0 2%;
    text-transform: uppercase;
    width: 100%;
    
}
.need{
    font-family: 'Allerta', sans-serif;
    font-size: 48px;
    margin: 7% 7% 3% 3%;
    align-self: flex-start;
    width: 484px;
    height: 84px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.75px;
    text-transform: capitalize;
    line-height: 37px;
    color: #000000
}
.muestrario{
    width: 90%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin:2% 5% 5% 5%;
    background-color: #E5E5E5;
}
.catalogo{
    width: 16%;
    height: 310px;
    margin:2.5% 1% 2.5% 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    padding: 1% 1% 1% 1%;
    border-radius: 20px;


}
.card-title{
text-align: center;
margin-top: 5%;
border-top:solid 0.1em #354248;
font-family: 'Inter', sans-serif;
font-size: 23px;
font-weight: 500;
padding-top: 3%;
}
footer{
    background-color: #F5A220;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}
.logofooter{
    height: 110px;
    width: 110px;
}
.final{
    font-size: 24px;
    text-align: center;
    font-family: 'Allerta', sans-serif;
    letter-spacing: 0.75px;
    font-weight: 400;
    margin-left: calc(30% - 825px/2 + 1.5px);
    line-height: 37px;
    text-align: center;
    line-height: 37px;
    text-transform: capitalize;
    color: #000000;
    width: 825px;
    height: 74px;

}
.datos{
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 45px;
    text-align: center;
    color: #000000;
    width: 252px;
    height: 92px;
    margin-left: calc(10% - 252px/2 + 1px);

}
#contacto{
    background-image: url('../imagenes/Group\ 11.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 50vh;
}