/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.is-expanded-menu .style-3 .menu-container>.menu-item.current>.menu-link {
    --cnvs-primary-menu-active-color: var(--bs-white);
    background-color: #1d4e38;
}

.is-expanded-menu .style-3 .menu-container>.menu-item:hover>.menu-link {
    background-color: #052215;
}

/* 1. Configuración base (Para MÓVIL) */
.bg-custom-carbon {
    /* Aquí pones la imagen chica para el celular */
    background: url('../images26/section-bg-carbon-md.jpg') no-repeat center bottom;
    background-size: cover;
}

/* 2. Configuración para MD en adelante (PC, Notebook, Tablet horizontal) */
@media (min-width: 768px) {
    .bg-custom-carbon {
        /* Aquí pones la imagen original grande */
        background-image: url('../images26/section-bg-carbon.jpg');
    }
}

/* Estilos para los botones de navegación del carrusel*/
/* Botones circulares del carousel, tamaño fijo y centrado */
#oc-portfolio-sidebar .owl-nav .owl-prev,
#oc-portfolio-sidebar .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    /* tamaño del círculo */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    padding: 0;
    /* IMPORTANTE: remove padding para no recortar ícono */
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Separación hacia adentro */
#oc-portfolio-sidebar .owl-nav .owl-prev {
    left: 20px;
}

#oc-portfolio-sidebar .owl-nav .owl-next {
    right: 20px;
}

/* Estilo del icono (bootstrap icons) */
#oc-portfolio-sidebar .owl-nav .owl-prev i,
#oc-portfolio-sidebar .owl-nav .owl-next i {
    font-size: 20px;
    /* controla tamaño del icono */
    line-height: 1;
    color: #fff;
    display: inline-block;
}

/* Si usás svg (fallback), forzá que ocupe el contenedor */
#oc-portfolio-sidebar .owl-nav svg {
    width: 18px;
    height: 18px;
}


/* --- Estilos base (Móvil) --- */
.promo-link-ajustado {
    display: block;
    padding: 1rem;
    /* Simula el m-3 en móviles */
    text-align: center;
}

.promo-link-ajustado img {
    max-width: 100%;
    height: auto;
}

/* --- Estilos Escritorio (Cuando se ponen lado a lado) --- */
@media (min-width: 992px) {
    .promo-link-ajustado {
        /* 1. Posición absoluta para no empujar la altura de la fila */
        position: absolute;

        /* 2. Simulamos el m-3 usando coordenadas exactas */
        /* m-3 en Bootstrap suele ser 1rem (aprox 16px) */
        top: 1rem;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;

        /* 3. Quitamos padding porque ya usamos las coordenadas para el espacio */
        padding: 0;

        /* 4. Flexbox para centrar la imagen perfectamente en el hueco disponible */
        display: flex;
        align-items: center;
        /* Centrado Vertical */
        justify-content: center;
        /* Centrado Horizontal */
    }

    .promo-link-ajustado img {
        /* La imagen intentará llenar el hueco pero sin deformarse */
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}


/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/
#gotoTop {
    --cnvs-gotoTop-position-boxed-bottom: 90px;
    bottom: var(--cnvs-gotoTop-position-boxed-bottom);
}