
body {
    font-family: 'Krub', sans-serif;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrar verticalmente */
    align-items: center;
    
}
/********************** HEADER *************************/

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrar verticalmente */
    align-items: center;  /* Centrar horizontalmente */
    margin: auto;  /* Para centrar horizontalmente en el body */
    
}
/*
.color-row {
    margin: 1rem;
    width:100%;
    height: 40px;
    background-color: rgb(44, 134, 3);
}
*/

.color-row {
    margin: 1rem;
    width:100%;
    height: 37px;
    background-color: rgb(44, 134, 3);
}

.iconos {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.iconos a img{
    width: 1rem;
    height: 1rem;
}


.image-header {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrar verticalmente */
    align-items: center;  /* Centrar horizontalmente */

    
 }
/* .image-header img {
    width: 50%;
    max-height: 100%;
    padding: 0;
}*/

.image-header img {
    width: 50%;
    max-height: 100%;
    padding: 0;
}


.grow-logo {
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.grow-logo:hover {
    transform: scale3d(1.1, 1.1, 0.3);
        -webkit-transform: scale3d(1.1, 1.1, 0.3);
        -moz-transform: scale3d(1.1, 1.1, 0.3);
}



.color-row2 {
    margin: 1rem;
    width:100%;
    background-color: rgb(44, 134, 3);
}
/********************** NAV *************************/

.navbar-toggler {
    transform: scale(0.5);  /* Aumenta el tamaño del botón */
    border: none;  /* Quita el borde si lo deseas */
}

.dovan-name {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: 3.5rem;
}

.dovan-text {
    font-size: 1.2rem;
    font-weight: bold;
}


/********************** SECCION JUEGOS *************************/
.sombra {
    -webkit-box-shadow: 0px 0px 23px -6px rgba(66,232,60,1);
    -moz-box-shadow: 0px 0px 23px -6px rgba(66,232,60,1);
    box-shadow: 0px 0px 23px -6px rgba(66,232,60,1);
}

   
.info-conteiner {
    width: 80%;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.titles-sections {
    color: rgba(218, 99, 2, 0.673);
    font-size: 1.5rem;
    font-weight:bolder;
}
.games {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrar verticalmente */
    align-items: center;  /* Centrar horizontalmente */
    margin: auto;  /* Para centrar horizontalmente en el body */
}
.description-games {
    width: 100%;
    margin-top: 1rem;
    color: rgba(240, 255, 255, 0.744);
    text-align: justify;
    font-size: 0.8rem;
}

.carousel {
    max-width: 700px; /* Fija el ancho del carrusel */
    width: 100%;
}

.carousel-inner {
    max-width: 700px;
    width: 100%;
}

.row-links{
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: flex-end; /* Alinea al final horizontalmente */
    margin: auto;
    gap: 0.5rem;
}

/*.button-nav {
    height: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: rgb(34, 33, 33);
}
*/

.button-nav {
    height: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    color: rgb(34, 33, 33);
    max-width: 100%;
    justify-content: start;
    border: none;

}

/********************** SECCION DESCARGAS *************************/

.downloads-conteiner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrar verticalmente */
    margin: auto;  /* Para centrar horizontalmente en el body */
    padding: 1rem;
}

.card-download {
    display: flex;
    flex-direction: row;
    justify-content: center;  /* Centrar verticalmente */
    align-items: center;  /* Centrar horizontalmente */  
}
.card {
    max-width: 60%;
}

.card-header {
    background-color: rgb(0, 0, 0);
    padding: 0;
    margin: 0;
}
.btn-download {
    width: 100;
    font-size: 0.8rem;
    font-weight: bold;
    color: rgba(232, 232, 232, 0.812);

}
a.btn-download:hover {
    color: #1d9705bd !important;
}

.img-download-card {
    width: 100%;  /* Hace que la imagen cubra todo el ancho */
    height: 100%; /* Hace que la imagen cubra todo el alto */
    object-fit: cover; /* Asegura que la imagen se recorte para llenar el espacio */
}

.card-body {
    background-color: black;
}

.row-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;  /* Centrar verticalmente */
    align-items: center;  /* Centrar horizontalmente */
    margin: auto;  /* Para centrar horizontalmente en el body */
    width: 80%;
} 
.text-footer {
    font-size: 0.6rem;
    text-align: center;
}

.footer-derechos{
    font-size: 0.6rem;
    text-align: center;
}
.footer-contacto {
    font-size: 0.6rem;
    text-align: center;
}
    



/********************** MEDIA QUERIS *************************/


@media (min-width: 750px) {

    header {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;  /* Centrar verticalmente */
        align-items: center;  /* Centrar horizontalmente */
        margin: auto;  /* Para centrar horizontalmente en el body */
    }
    .iconos {
        gap: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    
    }
    .iconos a img{
        width: 1.5rem;
        height: 1.5rem;
    }

    .dovan-text {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .button-nav {
        height: 10px;
        font-size: 0.9rem;
        font-weight: bold;
        color: rgb(34, 33, 33);
        max-width: 100%;
        justify-content: start;
    }
    
    .card-header {
        background-color: rgb(0, 0, 0);
        padding: 0;
        margin: 0;
    }
    .btn-download {
        width: 100;
        font-size: 1.1rem;
        font-weight: bold;
        color: rgba(232, 232, 232, 0.812);
    
    }
            
}

@media (min-width: 768px){
    .footer-derechos{
        font-size: 0.8rem;
        text-align: start;
    }
    .footer-contacto {
        font-size: 0.8rem;
        text-align: end;
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .iconos {
        gap: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    
    }
    .iconos a img{
        width: 1.5rem;
        height: 1.5rem;
    }
    .dovan-name {
        justify-content: left;
        margin-left: 0.8rem;
    }

    .dovan-text {
        font-size: 1.7rem;
        font-weight: bold;

    }

    .button-nav {
        height: 10px;
        font-size: 0.9rem;
        font-weight: bold;
        color: rgb(34, 33, 33);
        max-width: 100%;
        justify-content: start;
    }


    /**SECCION JUEGOS **/

    .titles-sections {
        color: hsla(27, 98%, 43%, 0.673);
        font-size: 1.7rem;
        font-weight:bolder;
    }

    .games {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;  /* Centrar verticalmente */
        align-items: center;  /* Centrar horizontalmente */
        margin: 0;  /* Para centrar horizontalmente en el body */

    }
    .description-games {
        width: 100%;
        margin-top: 1rem;
        color: rgba(240, 255, 255, 0.744);
        text-align: justify;
        font-size: 1.1rem;
    }

    .carousel-game {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button-nav {
        font-size:1.2rem;
    }


    /** SECCION DESCARGAS **/
    .card-download {
        display: flex;
        justify-content: center;  
        align-items: center;
        width: 100%;
    }

    .card {
        max-width: 40%;
    }

    .btn-download {
        font-size: 1rem;
        font-weight: bold;
        color: rgba(232, 232, 232, 0.812);
    }

    .row-footer {
        display: flex;
        flex-direction: row;
        justify-content: start;  /* Centrar verticalmente */
        align-items: start;  /* Centrar horizontalmente */
  
    } 

    .footer-derechos{
        font-size: 1rem;
        text-align: start;
    }
    .footer-contacto {
        font-size: 1rem;
        text-align: end;
        margin-bottom: 0;
    }


    .transUp{
        transition: .5s, color .10s !important; 
        -webkit-transition: .5s, color .10s !important;
        -moz-transition: .5s, color .10s !important;
    } 
    .transUp:hover{
        transform: translatey(-5px) !important;
        -webkit-transform: translatey(-5px) !important;
        -moz-transform: translatey(-5px)!important;
        color: rgb(200, 200, 200)!important;
    }
            
}


/********************** EFECTOS TEXTOS *************************/

.transUp{
    transition: .5s, color .10s;
    -webkit-transition: .5s, color .10s;
    -moz-transition: .5s, color .10s;
}
.transUp:hover{
    transform: translatex(20px);
    -webkit-transform: translatex(20px);
    -moz-transform: translatex(20px);
    color: rgb(200, 200, 200);
}

  .grow{
    transition: .5s, color .10s;
    -webkit-transition: .5s, color .10s;
    -moz-transition: .5s, color .10s;
}
.grow:hover{
    transform: scale3d(1.15, 1.15, 0.3);
    -webkit-transform: scale3d(1.15, 1.15, 0.3);
    -moz-transform: scale3d(1.15, 1.15, 0.3);
}

/* **********************  PAGINA INICIO ******************** */

.us-text{
    font-size: 0.8rem;
    text-align: justify;
    padding: 0.7rem;
}

span{
    font-weight: bold;
    text-transform: uppercase;
}

.row-icons {
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 0;
}

.icons-entertainment{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}
.icons-us{
    max-width: 70%;
    border-radius: 3rem;
    background-color: #fcc708a4;
    justify-content: space-evenly;
    padding:0.5rem;
    align-items: center; 
}

.text-icons{
    padding: 0;
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    color: rgb(227, 228, 225);
}

.row-3-icons{
    background-color:rgba(0, 0, 0, 0.627);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.img-us {
    width: 80%;
}

.text-welcome{
    font-size: 1rem;
    text-align: center;
}

@media (min-width:750px) {
    .us-text{
        font-size: 1rem;
    }
    
    .icons-us{
        max-width: 50%;
        border-radius: 5rem; 
    }
    
    .text-icons{
        font-size: 1rem;
    }

    .row-description {
        padding-right: 1rem;
    }
    
    .row-3-icons{
        background-color:rgba(0, 0, 0, 0.627);
        margin-bottom: 1rem;
        margin-top: 2rem;
    }
    
    .img-us {
        width: 50%;
    }
    
    .text-welcome{
        font-size: 1rem;
        text-align: center;
    }
}


@media (min-width: 1200px) {
    .us-text{
        font-size: 1.2rem;
    }
    
    .row-icons {
        width: 90%;
    }

    .icons-us{
        width: 100%;
        border-radius: 50rem;
    }
    
    .text-icons{
        font-size: 1.2rem;
    }

    .row-description {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    .img-us {
        padding-top: 1rem;
        width: 78%;
        border-radius: 30rem;
    }
    
    .text-welcome{
        font-size: 1.5rem;
    }
    
}



/*      OCULTAR EN LA PAGINA WEB SUBIDA     */
.dev-only {
    display: none;
}
