/* Theme Name: The Project - Responsive Website Template
Author:HtmlCoder
Author URI:http://www.htmlcoder.me
Author e-mail:htmlcoder.me@gmail.com
Version:1.2.0
Created:December 2014
License URI:http://support.wrapbootstrap.com/
File Description: Place here your custom CSS styles
*/

html {
    scroll-behavior: smooth;
}

.main-navigation .navbar-nav > li {
    margin: 0 0 0 0;
}

.dropdown > a:before {
    display: none;
}

.dropdown:hover>.dropdown-menu,
.dropend:hover>.dropdown-menu {
    display: block;
    margin-top: .1em;
    margin-left: .1em;
}
@media screen and (min-width:769px) {
    .dropend:hover>.dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
    }
    .dropend .dropdown-toggle {
        margin-left: .5em;
    }
}

.text-justify {
    text-align: justify;
}

/* Change link colors in dark footer */
.dark .footer a,
.dark .footer h1 a,
.dark .footer h2 a,
.dark .footer h3 a,
.dark .footer h4 a,
.dark .footer h5 a,
.dark .footer h6 a {
    color: #999999;
}

.dark .footer a:active,
.dark .footer h1 a:active,
.dark .footer h2 a:active,
.dark .footer h3 a:active,
.dark .footer h4 a:active,
.dark .footer h5 a:active,
.dark .footer h6 a:active,
.dark .footer a:hover,
.dark .footer h1 a:hover,
.dark .footer h2 a:hover,
.dark .footer h3 a:hover,
.dark .footer h4 a:hover,
.dark .footer h5 a:hover,
.dark .footer h6 a:hover {
    color: #3697d9;
}

/* Adjust index & DSLAB-TI carousels */
#carouselCaptions .carousel-item {
    height: 450px;
}

#carouselCaptions .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(90%);
}

#carouselCaptions .carousel-caption {
    bottom: 50%;
    transform: translateY(50%);
    text-align: center;
}

/* Fix styles for group photos carousel to keep aspect-ratio & brightness */
#carouselGroup .carousel-item img {
    aspect-ratio: 4 / 3;
    height: auto;
}

/* Fix styles for prev & next buttons in blog carousels */
.carousel-blog .carousel-control-prev,
.carousel-blog .carousel-control-next {
    position: absolute;
    width: 7%;
}

.carousel-blog .carousel-control-prev-icon,
.carousel-blog .carousel-control-next-icon {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.carousel-blog .carousel-indicators {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.under-construction-image {
    background: url('/assets/images/banners/under_construction.jpg') no-repeat center;
    background-size: contain;
    width: auto;
    height: 70%;
    min-height: 400px;
}

/* Customize list-icons list class */
.list-icons {
    margin-bottom: 0;
}

.list-icons.nav-pills {
    display: block;
}

.list-icons.nav-pills > li > a {
    text-decoration: none;
    text-transform: lowercase;
    font-weight: 300;
    color: #777777!important;
}

.list-icons > li:before {
    content: "\f138"; /* FontAwesome Icon Unicode */
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 2em;
    width: 1.3em;
}

/* Nested list (only 2nd level) */
.list-icons > .list-icons {
    padding-left: 2rem;
}

.list-icons > .list-icons > li:before {
    content: "\f054"; /* FontAwesome Icon Unicode*/
    color: #3697d9;
}

/* List with address and contact in footer */
.list-footer {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.list-footer > li {
    display: flex;
    align-items: flex-start; /* Asegura que los íconos se alineen al inicio */
    gap: 10px; /* Espacio entre el icono y el texto */
    padding: 10px 0; /* Espaciado vertical */
    margin-left: 5px;
}

.list-footer > li i {
    font-size: 1.2rem; /* Tamaño del ícono */
    flex-shrink: 0; /* Evita que el ícono cambie de tamaño */
}

.list-footer > li div {
    line-height: 1.5; /* Mejora la legibilidad del texto */
}

.list-footer > li div a {
    text-decoration: none;
    color: inherit; /* Usa el color de texto definido */
    transition: color 0.3s ease;
    border-radius: var(--bs-nav-pills-border-radius);
    padding: 4px 0;
}

.list-footer > li div a:hover {
    color: #3697d9;
    border-bottom: 1px solid #777777;
}

/* Animate image-box elements */
.image-box {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    border-radius: 10px;
}
.image-box:hover {
    transform: translateY(-5px);
}
.image-box > div > img {
    border-radius: 10px 10px 0 0;
}

.btn-animated:hover:after {
    opacity: 0 !important;
    /*border-radius: 0 10px 10px 0 !important;*/
}

/* Social icons for team */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.social-icons a {
    text-decoration: none;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.social-icons a:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.mail-icon i {
    color: #cb0017;
}

.scholar-icon i {
    color: #4086f4;
}

.orcid-icon i {
    color: #a6ce39;
}

/* Cambiar color a elementos <strong> (negrita) */
/* Se puede usar <b> para no aplicar estos cambios */
strong {
    color: #3697d9;
    font-weight: 300;
}

/* Cambiar color para logo bluesky */
.social-links.animated-effect-1 li.bluesky a:hover {
    border-color: #0886fe;
}
.social-links:not(.animated-effect-1) li.bluesky a:hover,
.colored.social-links li.bluesky a,
.social-links.animated-effect-1 li.bluesky a:after,
.btn.bluesky {
    background-color: #0886fe;
    border-color: #0886fe;
    color: #fff;
}

/* Cambiar estilo de botones */
.btn {
    border-radius: 10px;
}
.btn-hvr {
    &.hvr-fade::before,
    &.hvr-back::before,
    &.hvr-pulse::before,
    &.hvr-sweep-to-right::before,
    &.hvr-sweep-to-left::before,
    &.hvr-sweep-to-bottom::before,
    &.hvr-sweep-to-top::before,
    &.hvr-bounce-to-right::before,
    &.hvr-bounce-to-left::before,
    &.hvr-bounce-to-bottom::before,
    &.hvr-bounce-to-top::before,
    &.hvr-radial-out::before,
    &.hvr-radial-in::before,
    &.hvr-rectangle-in::before,
    &.hvr-rectangle-out::before,
    &.hvr-shutter-in-horizontal::before,
    &.hvr-shutter-out-horizontal::before,
    &.hvr-shutter-in-vertical::before,
    &.hvr-shutter-out-vertical::before {
        border-radius: 8px;
    }
}

.btn-carousel {
    font-size: 16px;
    font-weight: 300;
}

/* Logos de research partners */
.image-box-logo {
    aspect-ratio: 4/1.5;
    width: 100%;
    padding: 1.5rem;
    object-fit: contain;
}

/* Bordes del link en las imágenes de las tarjetas image-box */
.overlay-link {
    border-radius: 10px 10px 0 0;
}

/* Añadir efecto cuando se va a un team-member desde research-lines */
.team-member {
    scroll-margin-top: 30vh;
}

.team-member:target {
    animation: highlight 5s ease-in-out;
}

@keyframes highlight {
    0% {
        box-shadow: 0 0 0 rgba(0,0,0,0);
        background-color: transparent;
    }
    20% {
        box-shadow: 0 0 20px rgba(0,123,255,0.7);
        background-color: rgba(0,123,255,0.1);
    }
    100% {
        box-shadow: 0 0 0 rgba(0,0,0,0);
        background-color: transparent;
    }
}

/* Añadir sombra a imágenes */
.img-shadow {
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.3));
}

/* Añadir espacio encima de las tarjetas que llevan antes un párrafo con clase "lead" (intro de página) */
p.lead + div.row.justify-content-evenly {
    margin-top: 2rem;
}

/* Modificar el estilo de las tarjetas */
.card {
    --bs-card-color: #777777;
    background-color: #fafafa;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card:hover {
    transform: translateY(-5px);
}

.card.border-1 {
    border-width: 1px !important;
    border-color: rgba(0, 0, 0, 0.05);
}

.card > .card-body > .card-title {
    padding-bottom: 0.25rem !important;
}

.card > .card-footer {
    background-color: #fafafa;
    border: 0 !important;
}

.card > .card-footer > .separator-2 {
    margin-bottom: 10px;
}

/* Colores cuando la tarjeta usa el fondo azul default-bg */
.card.default-bg {
    --bs-card-color: #fff;
    --bs-secondary-color: #ededed;
    --bs-code-color: #ffcdce;
    background-color: #3697d9;
    color: #fff;
}