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

#home {
    background-color: white;
}

#SCards {
    background-color: whitesmoke;
    padding: 20px 20px 20px !important;
}
#products {
    background: linear-gradient(to bottom, whitesmoke 50%, white 50%);
    padding: 20px 20px 45px !important;
}
#gropp {
    background-color: white;
}
#gallery{
    background-color:white;
}

#aion {
    background-color: white;
}

#doing {
    background-color: white;
}

#solutions {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#teampart {
    background-color: white;
    padding: 25px 25px 25px !important;
}
#ourteam {
    background-color: white;
    padding: 20px 20px 20px !important;
}
#planet {
    background-color: whitesmoke;
    padding: 20px 20px 20px !important;
}
#clients {
    background-color: white;
    padding: 20px 20px 20px !important;
}
#chat {
    background-color: white;
}
.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;
}
#carouselClientes img {
    max-height: 150px; /* Ajusta la altura máxima */
}

#home, #SCards, #products, #gropp, #aion, #doing, #solutions, #teampart, #ourteam, #clients, #chat, #footer, #gallery, #planet {
    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;
}
.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: #202585;
    font-weight: bold;
    margin-left: 10px;
    background-color: ghostwhite;
    padding-top: 15px;
    padding-bottom: 15px;
    border-color: #202585;
}
.btn-menu2:hover {
    color: black;
    background-color:aliceblue;
    border-color: #202585;
}

#chome {
    justify-content: center;
    margin-top: 50px;
}

#home #titulop, #home #pp, .infoCards #titCards, #ourteam #titOT, #pOT {
    text-align: left;
}
 #titSolution, #titChat {
    font-size: 60px;
    color: black;
    font-weight: bold;
}

 #pSolution, #pChat {
    color: black;
    font-size: 18px;
    margin-top: 20px;
    margin: 0 auto;
    width: 80%;
    margin-bottom: 20px
}

#titulop, #gropp #tituloGROPP, #aion #tituloAION, #supervisor #titulos, #operator #tituloO, .infoCards #titCards, #products #titProd, #doing #titDoing, #teampart
#titTP, #ourteam #titOT, #planet #planetTitle {
    font-size: 60px;
    font-weight: bolder;
    color: black;
}
#pp, #pGropp, #pAion, #ps, #po, #pOT, #planetText, #pTP {
    line-height: 26px;
    font-size: 18px;
    color: black;
}
/* Media query para pantallas móviles */
@media (max-width: 768px) {
    #titulop, #gropp #tituloGROPP, #aion #tituloAION, #supervisor #titulos, #operator #tituloO, .infoCards #titCards, #products #titProd, #doing #titDoing, #teampart #titTP, #ourteam #titOT, #titChat, #tituloC, #titSolution, #planet #planetTitle {
        font-size: 36px !important; /* Ajusta el tamaño según lo que necesites para móviles */
    }

#pp, #pGropp, #pAion, #ps, #po, #pCards, #pProd, #pOT, #pChat, #pSolution, #planetText, #pTP {
    font-size: 16px !important; /* También ajusta para el texto en párrafos */
    line-height: 28px !important;
}
.nombre{
    font-size: 18px !important;
}
#gas, #fra, #gus {
    border-radius: 10px !important;
}
#pOT, #titOT, #titulop, #pp, #titCards, #pCards {
    text-align: center !important;
}
}

#titProd, #pProd, #titDoing, #titSolution, #pSolution, #titTP, #pTP, #titChat, #pChat {
    text-align: center;
}

#mcards p, #solcards p {
    font-size: 16px;
}

.features {
    color: black;
}
#aionInfo, #groppInfo {
    margin-top: 120px;
}
/*#galleryimage {
    margin-top: auto;
    margin-bottom: auto;
}

@media (max-width: 1200px) and (min-width: 992px) {
    #aionInfo, #groppInfo {
        margin-top: 100px;
    }
    #galleryimage {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

@media (max-width: 992px) {
    #aionInfo, #groppInfo {
        margin-top: auto;
    }
    #galleryimage{
        margin-top:50px;
        margin-bottom:50px;
    }
}*/

#proc, #mon, #cap, #infoProd {
    border-radius: 15px;
    text-align: left;
    line-height: 26px;
    background-color: white;
}

#infoTP {
    border-radius: 15px;
    text-align: left;
    line-height: 26px;
    background-color: whitesmoke;
}
#clientscard {
    border-radius: 30px;
    text-align: left;
    line-height: 26px;
    background-color: #069CD8;
}

#ana, #dis, #imp, #pru, #p1, #p2 {
    border-radius: 15px;
    text-align: left;
    line-height: 24px;
    background-color: white;
}
#ana, #dis, #imp, #pru {
    width: 270px;
}

@media (max-width: 1200px) and (min-width: 992px) {
    #ana, #dis, #imp, #pru {
        width: 220px;
    }
}

@media (max-width: 992px) {
    #ana, #dis, #imp, #pru {
        width: 320px !important;
    }
}

#gas, #fra, #gus {
    border-radius: 50px;
    line-height: 30px;
    background-color: #242E8E;
}

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

.puesto, .apellido, .frase, .nombre {
    text-align: center;
}
.frase{
    font-size: 14px;
}

#clients #tituloC {
    font-size: 50px;
    font-weight: bolder;
    color: white;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
}

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

#clients img {
    height:60px; 
}

#proc:hover, #mon:hover, #cap:hover {
    background-color: #069CD8;
    color:white !important;
}
#proc:hover h2, #proc:hover p, #mon:hover h2, #mon:hover p, #cap:hover h2, #cap:hover p {
    color: white !important;
}
#ana:hover, #dis:hover, #imp:hover, #pru:hover {
    background-color: aliceblue;
}
#footer h2, #footer li {
    color: black;
}
#p1:hover, #p2:hover{
    background-color: #069CD8;
}
#p1:hover h2, #p1:hover p, #p2:hover h2, #p2:hover p {
    color: white !important;
}

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

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

#pProd {
    line-height: 26px;
    font-size: 18px;
    color: black;
    margin-top: 20px;
    margin-bottom: 20px
}

#infoProd {
    border-radius: 30px;
    text-align: left;
    line-height: 26px;
    background-color: white;
    width: 85%;
    margin: 0 auto; /* Center align the div */
    border: 2px solid rgba(255, 255, 255, 0.4); /* Light border */
    box-shadow: 0px 0px 10px #00ACC133; /* Soft glow effect */
}

#doingcard {
    border-radius: 30px;
    text-align: left;
    line-height: 26px;
    background-color: whitesmoke;
    width: 80%
}

#planetcards, #planetText {
    width: 90%
}