body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}
.content {
    padding: 15px 15px 15px;
}

#headerhome {
    background-color: white;
}
#CardsInfo {
    background-color: #F6F7FC;
}
#SCards {
    background-color: white;
}
#driver {
    background-color: white;
}
#DCards{
    background-color: white;
}
#supervisor {
    background-color: whitesmoke;
    padding: 25px 25px 25px !important;
}
#trucks{
    background-color: whitesmoke;
}
#ecotecno {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#ECards {
    background-color: white;
}
#coment {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#trazabilidad {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#working {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#support {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#SCCards {
    background-color: white;
}
#chat {
    background-color: white;
}
#footer {
    background-color: whitesmoke;
}
.icon-small {
    width: 20px; /* Ajusta el tamaño según sea necesario */
    height: 20px;
}

.icon-cross {
    display: block;
    font-size: 24px; /* Adjust size as needed */
    line-height: 24px; /* Adjust line height to match the size */
    color: white;
    text-align: center;
    width: 22px;
    height: 18px;
    margin-top: -5px;
}

#headerhome, #CardsInfo, #SCards, #driver, #DCards, #supervisor, #trucks, #ecotecno, #ECards, #coment, #trazabilidad, #working, #support, #SCCards, #chat, #footer {
    background-size: cover;
    background-repeat: no-repeat;
}

#home {
    height: auto !important;
}

.btn-transparent {
    color: white;
    background-color: #d3d3d3;
    margin-left: 15px;
}

.btn-transparent:hover {
    color: #f0f0f0;
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
}
.btn-transparent2 {
    color: white;
    background-color: #d3d3d3;
    margin-left: 15px;
}

.btn-transparent2:hover {
    color: #f0f0f0;
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
}

.cd {
    color: white !important;
}

.cd:hover {
    color: #069CD8 !important;
}

.dropdown-item:hover {
    color: #f0f0f0;
    background-color: #f0f0f0 !important;
}

.dropdown-item img {
    width: 24px; /* Ajusta el tamaño de las imágenes según tus necesidades */
    height: auto;
    margin-right: 8px; /* Espacio entre la imagen y el texto */
}

.btn-menu1 {
    background-color: #202585;
    margin-left: 10px;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
}

.btn-menu1:hover {
    background-color: #242E8E;
    color: white;
}

.btn-menu2 {
    color: black;
    margin-left: 10px;
    background-color: ghostwhite;
    padding-top: 15px;
    padding-bottom: 15px;
    border-color: black;
}

.btn-menu2:hover {
    color: black;
    background-color: aliceblue;
    border-color: black;
}

#chome {
    margin-top: 50px;
}

#home #titulop, #pp {
    text-align: left;
}

.infoCards #titCards {
    text-align: left;
}

#titChat {
    font-size: 60px;
    color: black;
}

#pChat {
    color: black;
    font-size: 18px;
}


#titulop, #trazabilidad #tituloTrazabilidad, #supervisor #titulos, #operator #tituloO, .infoCards #titCards, #supervisor #titSupervisor, #driver #titDriver, #ecotecno
#titEco, #support #titSup {
    font-size: 60px;
    font-weight: bolder;
    color: black;
}

#pTrazabilidad, #ps, #po, #pSupervisor, #pp, #pEco, #pSup, #pCards {
    color: black;
    line-height: 26px;
    font-size: 18px;
}
/* Media query para pantallas móviles */
@media (max-width: 768px) {
    #titulop, #trazabilidad #tituloTrazabilidad, #supervisor #titulos, #operator #tituloO, .infoCards #titCards, #supervisor #titSupervisor, #driver #titDriver, #titChat, #ecotecno
    #titEco, #support #titSup {
        font-size: 36px !important; /* Ajusta el tamaño según lo que necesites para móviles */
    }

    #pTrazabilidad, #ps, #po, #pCards, #pSupervisor, #pp, #pChat, #pEco, #pSup {
        font-size: 16px !important; /* También ajusta para el texto en párrafos */
        line-height: 28px !important;
    }
    #titulop, #pp, #titCards, #pCards, #tituloTrazabilidad, #pTrazabilidad {
        text-align: center !important;
    }


}
@media (min-width: 1200px) {
     #imgmon, #imgvis, #imgdet {
        width: 90% !important;
    }
     #imgprofile{
         width: 4% !important;
     }
}
#centralimage {
    width: 75% !important;
}
#Dcard1, #Dcard2, #Dcard4, #Dcard5, #Dcard6 {
    height: 300px;
}
#Dcard3{
    height: 380px;
}
@media (max-width: 1200px) and (min-width: 992px) {
    #Dcard1, #Dcard2, #Dcard4, #Dcard5, #Dcard6 {
        height: 360px; 
    }
    #Dcard3 {
        height: 450px;
    }
}
@media (max-width: 992px) {
    #Dcard1, #Dcard2, #Dcard3, #Dcard4, #Dcard5, #Dcard6 {
        height: auto !important;
    }
}

#titSupervisor, #titSolution, #pSolution, #titChat, #pChat, #pSupervisor, #titDriver, #titEco, #pEco, #titSup, #pSup {
    text-align: center;
}

#mcards p, #includescards p, #ecocards p, #coment p, #sccards p, #dcards p {
    font-size: 16px;
}

.features {
    color: black;
}

#gest, #opt, #plan, #eco1, #eco2, #eco3, #com, #sup1, #sup2, #sup3, #Dcard1, #Dcard2, #Dcard3, #Dcard4, #Dcard5, #Dcard6 {
    border-radius: 15px;
    text-align: left;
    line-height: 24px;
    background-color: white;
}
#infoEco, #infoSup , #trazabilidadcard {
    border-radius: 15px;
    text-align: left;
    line-height: 24px;
    background-color: whitesmoke;
}




#datacards h2 {
    font-size: 16px;
    text-align: center;
}

.puesto, .apellido {
    text-align: center;
}

#pc {
    color: white;
    line-height: 40px;
}

#navfooter li:hover {
    color: #069CD8;
}

#gest:hover, #opt:hover, #plan:hover {
    background-color: aliceblue;
}

#eco1:hover, #eco2:hover, #eco3:hover, #sup1:hover, #sup2:hover, #sup3:hover {
    background-color: aliceblue;
}

#Dcard1:hover, #Dcard2:hover, #Dcard3:hover, #Dcard4:hover, #Dcard5:hover, #Dcard6:hover {
    background-color: #e6ffe6;
}

/* Efecto hover para los cards */
#includescards .col-md-5:hover {
    background-color: white !important;
    color: black !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Asegura que los textos e imágenes dentro del card también cambien de color */
    #includescards .col-md-5:hover h2, #includescards .col-md-5:hover p {
        color: black !important;
    }

    /* Opcional: Si las imágenes no se ven bien con fondo blanco, puedes ajustar la opacidad o el filtro */
    #includescards .col-md-5:hover img {
        filter: brightness(0.2); /* Ajusta la imagen si es necesario */
    }

#pCards {
    color: black;
    line-height: 26px;
    font-size: 18px;
    padding-top: 20px;
}

#driver {
    padding-bottom: 25px !important;
}

#titDriver{
    padding-top: 20px
}

#roundedComment {
    border-radius: 15px;
    line-height: 20px;
    background-color: whitesmoke;
}

.companyLogo{
    padding: 50px
}

#pEco{
    margin-top: 5px !important;
}

#companyLogos{
    margin-bottom: 0px !important;
}