@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito',sans-serif;
    font-size: 20px;
}

body{
    background-color:#46aaf5;
    min-width: 320px;    
    background: linear-gradient(to bottom, #46aaf5, #ffffff);
    min-height: 1200px;

    padding-top: 20px;

}



nav{
    z-index: 1200;
}



.card{
    padding-bottom: 2px;
    z-index: 1000;
}

.btn.btn-primary{
    background-color: #46aaf5;
}

       /* Estilos para imágenes del carrusel */
       .carousel-inner img {
        height: 400px; /* Ajusta el tamaño según tus necesidades */
        object-fit: cover;
    }

    /* Estilos para tarjetas */
    .card {
        height: 100%; /* Permite que todas las tarjetas tengan el mismo alto */
    }

    .card img {
        height: 150px; /* Ajusta el tamaño de la imagen */
        opacity: 1;
        object-fit: cover; /* Asegura que la imagen se ajuste correctamente */
    }

    .card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Espaciado entre título, texto y botón */
    }


  

    .carousel-item img{
        opacity: 0.6;
    }

    .carousel-caption{
        opacity: 0.8;
        transition: all 0.2s ease;
        color: white;
        background-color: #46aaf511;
    }

    .carousel-caption:hover{
        opacity: 1;
        color: black;
    }


.card{
    padding-left: 2%;
}

.main-content{
    position:sticky;
    top:0px;
}


.filter{
    position: sticky;
    top:0px;
}

.img-fluid {
    opacity: 1;
    transition: all 0.3s ease;
    object-fit: cover;
  
}

.img-fluid:hover{
    
    opacity: 1;
    transform: scale(1.15);
    margin:  1%;
}

.button-filter{
 
}


/* Para pantallas extra pequeñas (xs) */
@media (max-width: 575.98px) {
    .img-fluid:hover{
        height: 50%;
        opacity: 1;
        transform: scale(1.02);
    }
 
.img-fluid:hover{
    height: 50%;
    opacity: 1;
    transform: scale(1.02);
}
  }
  
  /* Para pantallas pequeñas (sm y menores) */
  @media (max-width: 767.98px) {
    .img-fluid:hover{
        height: 50%;
        opacity: 1;
        transform: scale(1.02);
    }

    .index-card{
        background-color: red;
        margin: 2%;
        height: 20%;
        opacity: 0.1;
        transform: scale(1.02);
    }
 
.img-fluid:hover{
    height: 50%;
    opacity: 1;
    transform: scale(1.02);
}
  }