@font-face {

    font-family: 'menseal-black';

    src: url('./fonts/menseal-black.ttf') format('truetype');

    font-weight: bold;  /* meseal */

    font-style: normal;

}



@font-face {

    font-family: 'menseal-bold';

    src: url('./fonts/menseal-bold.ttf') format('truetype');

    font-weight: 500; /* bold */

    font-style: normal;

}



@font-face {

    font-family: 'menseal-extrabold';

    src: url('./fonts/menseal-extrabold.ttf') format('truetype');

    font-weight: 600; /* extrabold */

    font-style: normal;

}



@font-face {

    font-family: 'menseal-medium';

    src: url('./fonts/menseal-medium.ttf') format('truetype');

    font-weight: 600; /* medium */

    font-style: normal;

}



@font-face {

    font-family: 'menseal-regular';

    src: url('./fonts/menseal-regular.ttf') format('truetype');

    font-weight: 600; /* regular */

    font-style: normal;

}



@font-face {

    font-family: 'menseal-semibold';

    src: url('./fonts/menseal-semibold.ttf') format('truetype');

    font-weight: 600; /* semi-bold */

    font-style: normal;

}



@font-face {

    font-family: 'menseal-extrabold';

    src: url('./fonts/menseal-extrabold.ttf') format('truetype');

    font-weight: 600; /* semi-bold */

    font-style: normal;

}



.title{

    letter-spacing: 3.9px;

    font-size: 2rem;

}



.subtitle{

    letter-spacing: 16px;

}



.subtitle-index{

    font-size: 3.7rem;

}



.subtitle-menu{

    font-size: 4rem;

}



body {

    font-family: 'menseal-medium', sans-serif !important;

}



h1,h2,h3,h4,h5{

    font-family: 'menseal-black', sans-serif !important;

}



.bg-blue{

    background-color: #224bc0;

}



.color-blue{

    color: #224bc0;

}



.btn-primary {

    color: #fff;

    background-color: #224bc0;

}



.btn:hover {

    color: white;

    background-color: #2d65ff;

}



.bg-green{

    background-color: #b8fa5f;

}



.color-green{

    color: #b8fa5f;

}



body {

   

    font-family: 'Arial', sans-serif;

    text-align: center;

}



.container-partida {

    max-width: 600px;

    margin: 20px auto;

    padding: 20px;

    border: 2px solid #fff;

}



.logo img {

    width: 100px;

    height: auto;

}



.section-title {

    margin: 10px 0;

    font-size: 24px;

}



.team {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 20px 0;

    padding: 10px;

    border: 1px solid #fff;

}



.team img {

    width: 60px;

    height: auto;

    border-radius: 50%;

}



.team-name {

    font-size: 24px;

}



.score {

    font-size: 20px;

}



.footer-logo img {

    width: 100px;

    height: auto;

}



.slick-list .draggable{

    width: 100% !important;

}



.slick-track{

    width: 100% !important;

}



.slick-slide img { 

    width: 100px; /* Ajusta el ancho */ 

    height: 60px; /* Ajusta la altura */ 

    object-fit: cover; /* Asegura que la imagen se ajuste sin distorsión */ 

}



.slick-slide {

    margin: 0 5px; 

}



.slick-list {

    padding: 0 10px; /* Ajusta el espacio a los lados del carrusel */

}



 .carousel .slick-track {

    display: flex !important; 

}

.player-img{

    border-radius: 20px;
    
    flex: 1 0 100px;
    
    display: flex
;
    justify-content: center;

    align-items: center;

    max-width: 170px;

    max-height: 170px;

}

.carousel .slick-slide {

     height: auto !important;

}



.padel-ball{

    position: absolute;

    top: 80px;

    right: 100px;

    width: 50px !important;

    height: auto;

    z-index: 10;

}



.altura-desktop{

    height: auto;

}



/* styles.css */

.hover-text {

    position: relative; /* Necesario para posicionar la flecha */

    color: black; /* Color de texto original */

    cursor: pointer;

    transition: color 0.3s ease; /* Transición suave para el cambio de color */

    margin-left: 40px;

}

    

.hover-text::before {

    content: '>> '; /* Flecha por defecto */

    position: absolute;

    left: -50px; /* Ajusta la posición de la flecha */

    opacity: 0; /* Por defecto, la flecha es invisible */

    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */

}

    

.hover-text:hover {

    color: green; /* Color de texto al hacer hover */

}

    

.hover-text:hover::before {

    opacity: 1; /* Hace visible la flecha */

    transform: translateX(-5px); /* Anima la flecha hacia la izquierda */

}



.hover-text-subtitle {

    position: relative; /* Necesario para posicionar la flecha */

    color: black; /* Color de texto original */

    cursor: pointer;

    transition: color 0.3s ease; /* Transición suave para el cambio de color */

    /* margin-left: 40px; */

}

    

.hover-text-subtitle::before {

    content: '>> '; /* Flecha por defecto */

    position: absolute;

    left: 200px; /* Ajusta la posición de la flecha */

    opacity: 0; /* Por defecto, la flecha es invisible */

    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */

}

    

.hover-text-subtitle:hover {

    color: green; /* Color de texto al hacer hover */

}

    

.hover-text-subtitle:hover::before {

    opacity: 1; /* Hace visible la flecha */

    transform: translateX(-5px); /* Anima la flecha hacia la izquierda */

}



.loader {

    border: 8px solid #f3f3f3; /* Light grey */

    border-top: 8px solid #3498db; /* Blue */

    border-radius: 50%;

    width: 50px;

    height: 50px;

    animation: spin 2s linear infinite;

    margin-left: 10px; /* Ajusta según lo necesites */

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}





/* PELOTAS EN MOVIMIENTO */

.ball_login {

    position: absolute;

    width: 60px;

    height: 60px;

    background-image: url('../assets/1-removebg-preview.png'); /* Asegúrate de que la ruta a la imagen sea correcta */

    background-size: cover;

    clip-path: circle(100% at center); /* Ajusta para mantener la pelota redonda */

    z-index: -1; /* Posiciona las pelotas detrás del contenido */

    animation-timing-function: linear;

}



.ball1 {

    top: 10px;

    left: 10px;

    animation: moveBall1 3s infinite;

}



.ball2 {

    bottom: 220px;

    left: 10px;

    animation: moveBall2 2.5s infinite; /* Animación específica para ball2 */

}



.ball3 {

    top: 50%;

    right: 400px;

    transform: translateY(-50%);

    animation: moveBall3 3s infinite; /* Animación específica para ball3 */

}

.numeros-timer{
    font-size: 30rem;
}

/* PELOTAS SIN MOVIMIENTO */


.bg-gray{

    background-color: #F2F2F2 !important;

}


.ball-nomove {

    position: absolute;

    width: 220px;

    height: 220px;

    background-image: url('../assets/1-removebg-preview.png'); /* Asegúrate de que la ruta a la imagen sea correcta */

    background-size: cover;

    clip-path: circle(110px at center); /* Ajusta para mantener la pelota redonda */

    z-index: -1; /* Posiciona las pelotas detrás del contenido */    

}



.ball1-nomove {

    top: 0;

    left: -30px;    

}



.ball2-nomove {

    bottom: 0;

    left: -30px;    

}



.ball3-nomove {

    top: 50%;

    right: 0;

    transform: translateY(-50%);    

}



.ball4-nomove {

    bottom: -300px;

    right: 0;

}



.gaap { 

    gap: 150px !important; /* Definido para desktops */ 

} 

.columnas {
    height: 250px;
}


/* Para laptops con resoluciones específicas */
@media (min-width: 1280px) and (max-width: 1440px) {
    .gaap {
      gap: calc(min(90px, 12vw)) !important;
    }
  }


.bg-balls-movement{

    background: url('../assets/bg.png') no-repeat center center fixed;

    background-size: cover;

}



.bg-login-balls{

    background: url('../assets/bg-login.jpg') no-repeat center center fixed;
    
    background-size: cover;

}



@keyframes moveBall1 {

    0%, 100% {

        transform: translate(50px, 900px);

        animation-timing-function: ease-in-out;

    }

    25% {

        transform: translate(900px, 150px);

        animation-timing-function: ease-in;

    }

    50% {

        transform: translate(100px, 10px);

        animation-timing-function: ease-out;

    }

    75% {

        transform: translate(00px, 450px);

        animation-timing-function: ease-in;

    }

}



@keyframes moveBall2 {

    0% {

        transform: translate(0, 0);

    }

    25% {

        transform: translate(60px, -600px);

    }

    50% {

        transform: translate(420px, 0);

    }

    75% {

        transform: translate(60px, -200px);

    }

    100% {

        transform: translate(200px, 10px);

    }

}



@keyframes moveBall3 {

    0% {

        transform: translate(0, -500px);

    }

    25% {

        transform: translate(-50px, -30px);

    }

    50% {

        transform: translate(0, -400px);

    }

    75% {

        transform: translate(30px, -30px);

    }

    100% {

        transform: translate(0, 0);

    }

}





.ball {

    position: absolute; 

    width: 50px; 

    height: 50px; 

    background-size: cover; 

    background-position: center; 

    background-repeat: no-repeat; 

    animation: complex-bounce 2s infinite linear; 

}



.ball_2 {

    position: absolute; 

    width: 50px; 

    height: 50px; 

    background-size: cover; 

    background-position: center; 

    background-repeat: no-repeat; 

    animation: complex-bounce-reverse 2s infinite linear; 

} 



@keyframes complex-bounce {

    0% { transform: translate(0, 0); } 

    25% { transform: translate(160px, -10px); } 

    50% { transform: translate(380px, 0); } 

    75% { transform: translate(100px, 210px); } 

    100% { transform: translate(-50px, 0); } 

}



@keyframes complex-bounce-reverse {

    0% { transform: translate(-200px, 0); } 

    25% { transform: translate(0, 105px); } 

    50% { transform: translate(180px, -100px ); } 

    75% { transform: translate(0, 0); } 

    90% { transform: translate(-100px, 105px); } 

    100% { transform: translate(-180px, 0); } 

}

       

@keyframes complex-bounce-mobile {

    0% { transform: translate(0, 0); } 

    25% { transform: translate(05px, -10px); } 

    50% { transform: translate(10px, 0); } 

    75% { transform: translate(05px, 10px); } 

    100% { transform: translate(0px, 0); } 

}



@keyframes complex-bounce-reverse-mobile {

    0% { transform: translate(0, 0); } 

    25% { transform: translate(0, 10px); } 

    50% { transform: translate(40px, -10px ); } 

    75% { transform: translate(0, 0); } 

    90% { transform: translate(0px, 10px); } 

    100% { transform: translate(40px, 0); } 

}



@media (max-width: 767.98px) {

    .numeros-timer{
        font-size: 2rem;
    }

    .player-img{

        border-radius: 20px;
        
        flex: 1 0 100px;
        
        display: flex
    ;
        justify-content: center;
    
        align-items: center;
    
        max-width: 150px;
    
        max-height: 150px;
    
    }
  

    h4.number-score{

        font-size: 1.5rem;

    }

    .category{

        font-size: 1rem !important;

    }

    .subtitle-index{    

        font-size: 2.1rem;

    }

    .subtitle-menu{

        font-size: 2rem;

    }

    .subtitle{

        letter-spacing: 5px;

    }

    .subtitle-header{

        font-size: 1rem;    

    }

    .ball { 

        position: absolute; 

        width: 50px; 

        height: 50px; 

        background-size: cover; 

        background-position: center; 

        background-repeat: no-repeat; 

        animation: complex-bounce-mobile 2s infinite linear; 

    }

    .ball_2 { 

        position: absolute; 

        width: 50px; 

        height: 50px; 

        background-size: cover; 

        background-position: center; 

        background-repeat: no-repeat; 

        animation: complex-bounce-reverse-mobile 2s infinite linear; 

    }            

    .altura-desktop{

        height: 70vh;

    }    

    .carousel { flex-direction: row; /* Cambiar a dirección horizontal */ height: auto; /* Ajustar altura automáticamente */ }

    #player2-name{

        font-size: 1rem;

    }

    #player1-name{

        font-size: 1rem;

    }

    .label-green { background-color: #b8fa5f; color: white; padding: 0.375rem 0.75rem; border-radius: 0.25rem;min-width: 41.66%;}  

    .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 33.33%;
    }

    .columnas {
        height: 200px;
    }

}



@media (min-width: 768px) and (max-width: 1024px) {

    .numeros-timer{
        font-size: 2rem;
    }

    .player-img{

        border-radius: 20px;
        
        flex: 1 0 100px;
        
        display: flex
    ;
        justify-content: center;
    
        align-items: center;
    
        max-width: 150px;
    
        max-height: 150px;
    
    }

    .altura{

        height: 100px; 

        }

    h3.text-white.h2 {

        transform: scale(1, 1.5);

        font-size: .9rem !important; 

    }

    .gaap { 

        gap: 3rem !important; /* Definido para desktops */ 

    } 

    .subtitle-index{    

        font-size: 2.2rem;

    }

    .subtitle-menu{

        font-size: 3rem;

    }

    .menu h2{

        font-size: 1rem;

    }

    .altura-desktop{

        height: auto;

    }

    .carousel { flex-direction: row; /* Cambiar a dirección horizontal */ height: auto; /* Ajustar altura automáticamente */ }

    .ball { 
        position: absolute; 
        width: 30px; 
        height: 30px; 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
        animation: complex-bounce-mobile 2s infinite linear; 
    }
    .ball_2 { 
        position: absolute; 
        width: 30px; 
        height: 30px; 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
        animation: complex-bounce-reverse-mobile 2s infinite linear; 
    }

    .columnas {
        height: 200px;
    }

}

/* ipad pro */

@media (min-width: 1024px) and (max-width: 1366px) {

    .numeros-timer{
        font-size: 30rem;
    }

    .player-img{

        border-radius: 20px;
        
        flex: 1 0 100px;
        
        display: flex
    ;
        justify-content: center;
    
        align-items: center;
    
        max-width: 150px;
    
        max-height: 150px;
    
    }

    .altura{

        height: 100px; 

        }

    h3.text-white.h2 {

        transform: scale(1, 1.5);

        font-size: .9rem !important; 

    }    

    .subtitle-index{    

        font-size: 2.8rem;

    }

    .subtitle-menu{

        font-size: 4rem;

    }

    .menu h2{

        font-size: 1.4rem;

    }

    .altura-desktop{

        height: auto;

    }

    .carousel { flex-direction: row; /* Cambiar a dirección horizontal */ height: auto; /* Ajustar altura automáticamente */ }    

    .padel-ball{

        position: absolute;

        top: 5px;

        right: 50px;

        width: 50px !important;

        height: auto;

        z-index: 10;

    }

}



/* Media query para dispositivos tipo tablet */

@media (min-width: 600px) and (max-width: 900px) {

    .numeros-timer{
        font-size: 2rem;
    }

    .player-img{

        border-radius: 20px;
        
        flex: 1 0 100px;
        
        display: flex
    ;
        justify-content: center;
    
        align-items: center;
    
        max-width: 150px;
    
        max-height: 150px;
    
    }

    .padel-ball{

        position: absolute;

        top: 5px;

        right: 50px;

        width: 50px !important;

        height: auto;

        z-index: 10;

    }



}