/* Import Work Sans font */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');

/* Apply Work Sans font */
html, body {
    overflow-x: hidden;
    font-family: 'Work Sans', sans-serif;
    
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), /* Gradiente blanco con opacidad */
    linear-gradient(to top, white, white 65%, transparent), /* Gradiente de blanco hacia arriba */
    url("../img/bg.png");
    background-size: cover; /* Asegura que la imagen cubra toda la página */
    background-attachment: fixed; /* Fija la imagen de fondo */
    background-position: center; /* Centra la imagen de fondo */
    
}

@media (max-width: 768px) {
    html, body {
        background-image: none; /* Elimina la imagen de fondo */
        background-color: white; /* Solo se muestra el fondo blanco */
    }
}


/* Example for headings */
h1, h2, h3 {
    font-family: 'Work Sans', sans-serif;
}


/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-xl-square {
    width: 66px;
    height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
   
    color: var(--bs-white);
    border: none;
}

.btn.btn-primary:hover {
    background: var(--bs-dark);
    color: var(--bs-white);
}

.btn.btn-light {
    color: var(--bs-primary);
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white);
    background: var(--bs-dark);
}

.btn.btn-dark {
    color: var(--bs-white);
    border: none;
}

.btn.btn-dark:hover {
    color: var(--bs-primary);
    background: var(--bs-light);
}





/*** Navbar Start ***/
.nav-bar {
    background: var(--bs-white);
    transition: 1s;
}

.navbar-light .navbar-brand img {
    max-height: 60px;
    transition: .5s;
}

.nav-bar .navbar-light .navbar-brand img {
    max-height: 50px;
}

.navbar .navbar-nav .nav-item .nav-link {
    padding: 0;
}

.navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 15px;
}

.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: var(--bs-primary);
}

@media (max-width: 991px) {
    .navbar {
        padding: 20px 0;
    }

    .navbar .navbar-nav .nav-link {
        padding: 0;
    }

    .navbar .navbar-nav .nav-item {
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }

    .navbar .navbar-nav .nav-btn {
        display: flex;
        justify-content: start;
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        margin-top: 20px;
        padding-bottom: 20px;
        background: var(--bs-light);
        border-radius: 30px;
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 8px 15px;
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary);
    }
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown .dropdown-menu .dropdown-item:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

@media (min-width: 992px) {
    .navbar {
        padding: 20px 0;
    }

    .navbar .nav-btn {
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--bs-light);
        border-radius: 30px;
    }

    .navbar .navbar-nav .nav-btn {
        width: 100%;
        display: flex;
        margin-left: auto;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        margin-top: 20px;
        background: var(--bs-light);
        transition: .5s;
        opacity: 1;
    }
}
/*** Navbar End ***/



/*** Estilo para las tarjetas de Team ***/
.team .team-item {
    border: 1px solid var(--bs-primary); /* Borde de color primary */
    border-radius: 18px; /* Redondeo de las esquinas */
    overflow: hidden; /* Asegura que el contenido dentro del contenedor no sobresalga */
}

/* Contenedor de la imagen */
.team .team-item .team-img {
    position: relative;
    overflow: hidden;
    padding: 10px; /* Padding entre la imagen y el borde del contenedor */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ancho del contenedor */
}

/* Estilo de la imagen */
.team .team-item .team-img img {
    max-width: 100%;
    max-height: 318px; /* Controla la altura máxima de la imagen */
    object-fit: cover;
    border-radius: 8px; /* Borde redondeado para la imagen */
    transition: transform 0.3s ease; /* Suavizar el efecto de zoom */
}

/* Contenedor del texto debajo de la imagen */
.team .team-item .team-title {
    text-align: center;
    background-color: #ffffff; /* Establece el fondo blanco */
    color: var(--bs-primary); /* Establece el texto con el color primary */
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    font-size: 14px; /* Tamaño de fuente más pequeño para hacerlo más compacto */
    height: auto; /* Permite que el contenedor se ajuste automáticamente a la altura del contenido */
    padding: 10px; /* Añade padding al contenedor del texto */
}

/* Estilo del texto dentro del contenedor */
.team .team-item .team-title h4 {
    font-weight: bold; /* Esto hace que el texto sea en negrita */
    margin: 0;
    font-size: 1.2rem;
}

.team .team-item .team-title p {
    font-size: 1.2rem;
}

/* Efecto al pasar el ratón sobre la tarjeta */
.team .team-item:hover .team-img img {
    transform: scale(1.03); /* Efecto de zoom al pasar el ratón sobre la imagen */
}

.team .team-item:hover .team-title {
    background-color: var(--bs-white); /* Cambiar el color del fondo del texto al pasar el ratón */
}

/*** Team End ***/







/* Ajustes de fuente para móviles */
@media (max-width: 768px) {
    .team-title h4 {
        font-size: 20px; /* Tamaño de texto más pequeño en móvil */
    }

    .bio-container p {
        font-size: 16px; /* Reduce el tamaño del texto en móviles */
    }

    .bio-container {
        margin-bottom: 20px; /* Añade margen inferior para separación */
    }

    #donorCarousel .carousel-image {
        height: 400px !important; /* Menor altura en vista móvil */
    }

    /* Ajustes para los botones prev/next en móvil */
    .owl-nav div {
        width: 45px;  /* Botones más grandes en móvil */
        height: 45px; 
    }

    .owl-prev, .owl-next {
        padding: 5px;
    }

    .owl-nav {
        width: 100%;
    }

    
}

#donorCarousel {
    border: 1px solid #1E4B83; /* Blue border around carousel */
    border-radius: 10px;
}

#donorCarousel .carousel-image {
    width: 100%;
    height: 700px; /* Adjust based on your design */
    object-fit: contain; /* Ensure images fill the container */
}



.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%; /* Ocupa todo el ancho del carrusel */
    display: flex;
    justify-content: space-between;
    z-index: 1; /* Asegura que las flechas estén por encima de las imágenes */
}


  
.owl-nav div {
    position: absolute;
    top: 50%;
    border: 1px solid #1E4B83;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
  
.owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid #1E4B83; /* Borde de los botones */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Asegura que los botones estén por encima de las imágenes */
}

/* Alineación del botón prev */
.owl-prev {
    left: -20px; /* Ajusta la posición del botón prev al borde izquierdo */
}

/* Alineación del botón next */
.owl-next {
    right: -20px; /* Ajusta la posición del botón next al borde derecho */
}

.owl-prev i, .owl-next i {
    font-size: 20px; /* Tamaño del icono */
    color: #1E4B83; /* Color del icono */
}

  
#donorCarousel .owl-item {
box-sizing: border-box;
padding: 40px;
text-align: center;
}

#donorCarousel .owl-item p {
font-size: 16px;
}