/* ============================================
   PALETA CORPORATIVA - Dr. Francisco Javier Vega Pinkney
   ============================================ */

:root {
    --color-primary: #f3e0c0;      /* fondo principal crema */
    --color-secondary: #6f685a;    /* navbar, footer, fondos oscuros */
    --color-accent: #b7a68b;       /* botones, enlaces activos, hover */
    --color-dark: #0c1417;         /* texto principal sobre fondos claros */
    --color-muted: #adaca7;        /* texto secundario, bordes suaves */
    --text-on-dark: #f3e0c0;       /* texto claro sobre fondos oscuros */
}

/* ============================================
   ESTILOS GENERALES
   ============================================ */
body {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

/* ============================================
   HEADER PRINCIPAL
   ============================================ */
/* Fondo del header completo */
.main-header.header-style-one {
    background-color: var(--color-secondary);
}

/* Barra superior (teléfono, email, redes) */
.header-top {
    background-color: var(--color-secondary);
    color: var(--text-on-dark);
}

/* ============================================
   BARRA SUPERIOR - TEXTOS E ÍCONOS EN BLANCO
   ============================================ */

/* Correo electrónico (texto del enlace) */
.header-contact-info ul li a[href^="mailto"] {
    color: #ffffff !important;
}

/* Teléfono (texto del enlace) */
.header-contact-info ul li a[href^="tel"] {
    color: #ffffff !important;
}

/* Ícono del sobre (correo) */
.header-contact-info .icon-envelope::before {
    color: #ffffff !important;
}

/* Ícono del teléfono */
.header-contact-info .icon-phone-call::before {
    color: #ffffff !important;
}

/* Redes sociales - enlaces e íconos */
.header-social-link a,
.header-social-link a i {
    color: #ffffff !important;
}

/* ============================================
   RESTAURACIÓN DEL HEADER Y COLORES DEL MENÚ
   ============================================ */
/* Fondo oscuro del header (para que el logo blanco se vea) */
.main-header.header-style-one {
    background-color: #6f685a !important; /* Gris topo */
}
/* Enlaces del menú: blanco fijo, hover beige */
.main-header .main-menu .navigation > li > a {
    color: #b7a68b !important;
}
.main-header .main-menu .navigation > li > a:hover {
    color: #6f685a !important; /* Beige acento */
}
.main-header .main-menu .navigation > li.current > a {
    color: #b7a68b !important; /* Página activa en beige */
}

/* ============================================
   BOTÓN DE LLAMADA A LA ACCIÓN (CTA)
   ============================================ */
.btn-one {
    background-color: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
}

.btn-one:hover {
    background-color: var(--color-secondary);
    color: #fff;
}

/* ============================================
   SLIDER PRINCIPAL
   ============================================ */
/* Fondo de la sección slider (por si las imágenes no cargan) */
.main-slider.style1 {
    background-color: var(--color-primary);
}

/* Textos dentro del slider */
.main-slider .content h5,
.main-slider .content h2 {
    color: var(--color-dark);
}

/* ============================================
SECCIONES GENERALES (por si hay fondos oscuros heredados)
============================================ */
section {
    background-color: transparent; /* respeta el body */
}

/* ============================================
AJUSTE DE ESPACIADO EN MENÚ DE ESCRITORIO
Soluciona el desbordamiento por textos largos en español
   ============================================ */

/* Reduce el espacio entre elementos de la lista */
.main-header .main-menu .navigation > li {
    margin-right: 10px;
}

/* Reduce el padding interno y el tamaño de fuente de cada enlace */
.main-header .main-menu .navigation > li > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
}

/* Reduce el padding del botón "Get Appointment" */
.main-header .header-right .btn-one {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
}

/* ============================================
PRELOADER - ANIMACIÓN CSS DOBLE ANILLO
Reemplaza el GIF original por spinner corporativo
   ============================================ */

/* Fondo oscuro y eliminamos el GIF */
.preloader {
    background-color: var(--color-dark); /* #0c1417 */
    background-image: none !important;   /* Anula cualquier GIF heredado */
}

/* Anillo exterior (gris topo, giro horario) */
.preloader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;                  /* Centrado vertical */
    margin-left: -30px;                 /* Centrado horizontal */
    border: 4px solid transparent;
    border-top-color: var(--color-secondary); /* #6f685a */
    border-right-color: var(--color-secondary);
    border-radius: 50%;
    animation: preloader-spin-outer 1s linear infinite;
}

/* Anillo interior (beige, giro antihorario, más rápido) */
.preloader::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-left: -18px;
    border: 4px solid transparent;
    border-bottom-color: var(--color-accent); /* #b7a68b */
    border-left-color: var(--color-accent);
    border-radius: 50%;
    animation: preloader-spin-inner 0.6s linear infinite reverse;
}

/* Opcional: sutil halo central con crema */
.preloader::before {
    box-shadow: 0 0 12px rgba(243, 224, 192, 0.3); /* #f3e0c0 con opacidad */
}

/* Animaciones de giro */
@keyframes preloader-spin-outer {
    to {
        transform: rotate(360deg);
    }
}

@keyframes preloader-spin-inner {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
BOTÓN DE 9 PUNTOS (SIDE-NAV TOGGLER)
Tonos caki de la paleta para que todos sean visibles
   ============================================ */

/* Todos los cuadritos: crema claro para que contrasten con el header */
.main-header .hidden-content-button .nav-toggler ul li {
    background-color: #6f685a; /* Crema */
}

/* Cuadritos destacados: beige arena, el tono más caki */
.main-header .hidden-content-button .nav-toggler ul li.red2 {
    background-color: #b7a68b; /* Beige arena */
}

/* ============================================
BARRA LATERAL OCULTA (HIDDEN BAR)
Efecto Glassmorphism: fondo negro transparente con blur
   ============================================ */

.hidden-bar {
    background-color: rgba(12, 20, 23, 0.88) !important; /* #0c1417 con opacidad */
    backdrop-filter: blur(14px) !important;              /* Efecto vidrio esmerilado */
    -webkit-backdrop-filter: blur(14px) !important;      /* Soporte Safari */
    border-left: 1px solid rgba(183, 166, 139, 0.3);    /* Borde sutil beige */
}

/* Botón de cierre (X) */
.hidden-bar .hidden-bar-closer button {
    color: #ffffff !important;
}

/* Todos los textos: blanco puro */
.hidden-bar .logo,
.hidden-bar h3,
.hidden-bar .text p,
.hidden-bar .contact-info-box ul li h5,
.hidden-bar .contact-info-box ul li p,
.hidden-bar .contact-info-box a,
.hidden-bar .newsletter-form-box h3,
.hidden-bar .copy-right-text p {
    color: #ffffff !important;
}

/* Enlaces y hover */
.hidden-bar a {
    color: #ffffff !important;
    transition: color 0.3s ease;
}
.hidden-bar a:hover {
    color: #b7a68b !important; /* Acento beige al pasar el mouse */
}

/* Campo de email del newsletter */
.hidden-bar .newsletter-form-box input[type="email"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.hidden-bar .newsletter-form-box input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Botón del newsletter */
.hidden-bar .newsletter-form-box button {
    background-color: #b7a68b !important;
    color: #0c1417 !important;
}

/* ============================================
COLORES DE ICONOS SVG EN FEATURED AREA
   ============================================ */
.featured-area .clr1 .service-icon,
.featured-area .clr2 .service-icon,
.featured-area .clr3 .service-icon {
    color: #b7a68b; /* Beige acento */
    width: 60px;
    height: 60px;
}
.featured-area .service-icon path,
.featured-area .service-icon g {
    fill: currentColor;
}

/* ============================================
TAMAÑO DE ICONOS Y ALTURA UNIFORME EN FEATURED AREA
   ============================================ */

/* Tamaño original de los íconos */
.featured-area .icon span {
    font-size: 60px; /* Ajuste este valor según el original */
}

/* Altura uniforme en las tarjetas */
.featured-area .row {
    display: flex;
    flex-wrap: wrap;
}
.featured-area .single-featured-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px; /* Altura mínima para uniformidad */
}
.featured-area .single-featured-box .text {
    flex: 1;
}

/* ============================================
COLOR DE CAJAS Y PALOMITAS EN ABOUT US
   ============================================ */
.about-style1-content-box ul li .icon span::before {
    background-color: #b7a68b !important; /* Fondo beige acento */
    color: #ffffff !important;            /* Palomita blanca */
}

/* ============================================
   COLOR DEL ICONO EN SECCIÓN SERVICIOS
   ============================================ */
.service-style1-area .sec-title .icon .fa-heartbeat {
    color: #b7a68b; /* Beige acento */
}

/* ============================================
SHAPES MÉDICOS CON ICONOS ANIMADOS
   ============================================ */
.service-style1-area .shape-icon {
    position: absolute;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
    animation: shape-float 4s ease-in-out infinite;
}

.service-style1-area .shape1.shape-icon {
    top: 30px;
    left: 40px;
    font-size: 160px; /* Más grande */
    color: #b7a68b;
}
.service-style1-area .shape2.shape-icon {
    bottom: 40px;
    right: 50px;
    font-size: 130px; /* Un poco menor para variedad */
    color: #6f685a;
}

@keyframes shape-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* ============================================
ALTURA UNIFORME EN TARJETAS DE SERVICIOS
   ============================================ */
.service-style1-area .row {
    display: flex;
    flex-wrap: wrap;
}
/* Las columnas se estiran al mismo alto */
.service-style1-area .col-xl-3,
.service-style1-area .col-lg-6,
.service-style1-area .col-md-6 {
    display: flex;
}
/* La tarjeta completa ocupa todo el alto de la columna */
.service-style1-area .single-service-style1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* El bloque de texto se expande para ocupar el espacio restante */
.service-style1-area .single-service-style1 .text-holder {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* El botón se empuja hacia abajo automáticamente */
.service-style1-area .single-service-style1 .text-holder .button {
    margin-top: auto;
}

/* ============================================
VIDEO GALLERY - FONDO GRIS TOPO Y SIN RESTOS ROSA
   ============================================ */
.video-gallery-content-box {
    background-color: #6f685a; /* Gris topo */
}
/* Anula cualquier fondo rosa en la sección y sus contenedores */
.video-gallery-area,
.video-gallery-area .container-fullwidth,
.video-gallery-area .container-fullwidth .row,
.video-gallery-area .col-xl-6 {
    background-color: transparent !important;
}

/* Botón "Agendar Cita" en Video Gallery */
.video-gallery-content-box .btn-one {
    background-color: #f3e0c0 !important; /* Crema */
    color: #6f685a !important;           /* Negro */
    position: relative;
    overflow: hidden;
}
/* Elimina cualquier pseudo-elemento heredado que cause gradientes */
.video-gallery-content-box .btn-one::before,
.video-gallery-content-box .btn-one::after {
    background: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
/* Hover limpio y controlado */
.video-gallery-content-box .btn-one:hover {
    background-color: #b7a68b !important; /* Beige acento al pasar el mouse */
    color: #ffffff !important;
}

/* ============================================
   SECCIÓN CONTACTO - COLOR BEIGE EN ICONOS
   ============================================ */
.feautres-content-box .icon span::before {
    color: #b7a68b !important; /* Beige acento */
}

/* ============================================
BORDES REDONDEADOS EN CALENDARIO (IZQUIERDA)
   ============================================ */
.feautres-area .working-hours-box {
    border-radius: 20px;
    overflow: hidden; /* Para que la imagen de fondo se recorte redonda */
}

/* ============================================
   BOTÓN "AGENDAR CITA" EN SECCIÓN CALENDARIO
   ============================================ */
#calendario .working-hours-box .btn-one {
    background-color: #b7a68b !important; /* Beige acento en estado normal */
    color: #6f685a !important;           /* Texto oscuro */
    position: relative;
    overflow: hidden;
}
/* Elimina cualquier pseudo-elemento heredado que cause gradientes o verdes */
#calendario .working-hours-box .btn-one::before,
#calendario .working-hours-box .btn-one::after {
    background: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
/* Hover en gris topo */
#calendario .working-hours-box .btn-one:hover {
    background-color: #6f685a !important; /* Gris topo */
    color: #ffffff !important;           /* Texto blanco */
}

/* ============================================
   COLOR DEL TEXTO "//CONTACTO//" EN BEIGE
   ============================================ */
.feautres-content-box .sec-title h5 span {
    color: #b7a68b !important; /* Beige acento */
}

.feautres-content-box .sec-title h5 {
    color: #b7a68b !important;
}

/* ============================================
   PUNTO ANIMADO DEL TÍTULO CONTACTO EN BEIGE
   ============================================ */
.feautres-content-box .sec-title h2 .round-box {
    background-color: #b7a68b !important; /* Beige acento */
}

/* ============================================
   CENTRADO VERTICAL EN CAJA DE AGENDA TU CONSULTA
   ============================================ */
.feautres-area .working-hours-box {
    display: flex;
    flex-direction: column;
    justify-content: center !important; /* Centrado vertical */
}

.feautres-area .working-hours-box {
    min-height: 550px; /* Ajuste según la altura de la caja derecha */
}


/* ============================================
   CONTENEDOR DE IMAGEN + VELO + GLASSMORPHISM EN CALENDARIO
   ============================================ */
/* Asegura que la caja externa tenga altura, bordes redondeados y posición relativa */
.feautres-area .image-bg-box {
    position: relative;
    min-height: 550px;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
/* Velo translúcido entre la imagen y el texto */
.feautres-area .image-bg-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(111, 104, 90, 0.45); /* Negro azulado con opacidad */
    z-index: 1;
    pointer-events: none; /* Permite clics en el contenido debajo */
}
/* Glassmorphism en la caja de contenido, por encima del velo */
.feautres-area .image-bg-box .inner-content {
    position: relative;
    z-index: 2; /* Para que esté sobre el velo */
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px;
    padding: 30px;
}

/* ============================================
SECCIÓN REVIEWS - ICONOS Y PUNTOS EN BEIGE
   ============================================ */
.testimonial-style1-area .sec-title .icon .fa-star {
    color: #b7a68b !important; /* Beige acento */
}
.testimonial-style1-area .sec-title h2 .round-box {
    background-color: #b7a68b !important; /* Punto animado en beige */
}
/* Por si alguna imagen decorativa hereda fondo rosa */
.testimonial-style1-area .image-box1,
.testimonial-style1-area .image-box2,
.testimonial-style1-area .image-box3,
.testimonial-style1-area .image-box4 {
    display: none; /* Ocultamos las imágenes de mascotas (ya no están en HTML, pero por si acaso) */
}

/* ============================================
   VELO BEIGE SOBRE EL MAPA EN SECCIÓN REVIEWS
   ============================================ */
.testimonial-style1-area .layer-outer {
    position: relative;
}
.testimonial-style1-area .layer-outer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(183, 166, 139, 0.45); /* Beige #b7a68b con opacidad */
    z-index: 1;
    pointer-events: none;
}
/* Asegura que el contenido esté sobre el velo */
.testimonial-style1-area .layer-outer .container {
    position: relative;
    z-index: 2;
}


/* ============================================
COLOR BEIGE PARA EL PADECIMIENTO EN TESTIMONIOS
   ============================================ */
.testimonial-style1-area .single-testimonial-style1 .text-holder span {
    color: #b7a68b !important; /* Beige acento */
}

/* ============================================
SECCIÓN BLOG - COLORES ROSA A BEIGE
   ============================================ */
.blog-style1-area .sec-title h5 span {
    color: #b7a68b !important; /* Beige acento para "Artículos" */
}
.blog-style1-area .sec-title h2 .round-box,
.blog-style1-area .blog-title .round-box {
    background-color: #b7a68b !important; /* Puntos animados en beige */
}
.blog-style1-area .meta-info .icon-user::before,
.blog-style1-area .meta-info .icon-tag::before {
    color: #b7a68b !important; /* Iconos de usuario y etiqueta en beige */
}
.blog-style1-area .meta-info a {
    color: #6f685a !important; /* Enlaces en gris topo */
}
.blog-style1-area .meta-info a:hover {
    color: #b7a68b !important;
}

.blog-style1-area .sec-title h5 {
    color: #b7a68b !important; /* Beige acento para las barras y el texto */
}

/* Overlay rosa en hover de las tarjetas del blog → beige */
.blog-style1-area .single-blog-style1::before,
.blog-style1-area .single-blog-style1 .img-holder::after,
.blog-style1-area .single-blog-style1 .inner::before {
    background-color: rgba(183, 166, 139, 0.85) !important; /* Beige acento con opacidad */
}

/* Títulos de blog sin hover rosa */
.blog-style1-area .blog-title a {
    color: #0c1417 !important; /* Negro azulado fijo */
    transition: none !important; /* Sin animación */
}
.blog-style1-area .blog-title a:hover {
    color: #0c1417 !important; /* Se mantiene igual al pasar el mouse */
}

/* Meta-info sin hover rosa */
.blog-style1-area .meta-info a {
    color: #6f685a !important; /* Gris topo fijo */
    transition: none !important;
}
.blog-style1-area .meta-info a:hover {
    color: #6f685a !important; /* Sin cambio */
}

/* Botones del carrusel en beige */
.blog-style1-area .owl-prev,
.blog-style1-area .owl-next {
    background-color: #b7a68b !important; /* Beige acento */
    color: #ffffff !important;
    border-color: #b7a68b !important;
}
.blog-style1-area .owl-prev::before,
.blog-style1-area .owl-next::before {
    color: #ffffff !important; /* Flecha blanca */
}
.blog-style1-area .owl-prev:hover,
.blog-style1-area .owl-next:hover {
    background-color: #6f685a !important; /* Gris topo en hover */
    color: #ffffff !important;
    border-color: #6f685a !important;
}
.blog-style1-area .owl-prev:hover::before,
.blog-style1-area .owl-next:hover::before {
    color: #ffffff !important;
}

/* ============================================
   FOOTER - VELO CORPORATIVO Y COLORES UNIFICADOS
   ============================================ */
.footer-area {
    position: relative;
    overflow: hidden;
    background-color: #ffffff !important; /* Fondo blanco detrás de la figura */
}
/* Eliminamos el velo semitransparente para que no oscurezca el fondo */
.footer-area::before {
    display: none !important;
}
/* Todo el contenido del footer por encima del fondo */
.footer-area .footer {
    position: relative;
    z-index: 2;
    background-color: transparent !important;
}

/* Textos en blanco crema (conservados de su versión original) */
.footer-area,
.footer-area .title h3,
.footer-area .title h3 a,
.footer-area .title span,
.footer-area .copy-right p,
.footer-area .copy-right h4,
.footer-area .footer-menu ul li a {
    color: #ffffff !important;
}
.footer-area .footer-menu ul li a:hover {
    color: #b7a68b !important;
}

/* Iconos de contacto en beige */
.footer-contact-info .icon .fa {
    color: #b7a68b !important;
    font-size: 24px;
}

/* Redes sociales: fondo beige, icono oscuro */
.footer-social-info a {
    background-color: #b7a68b !important;
    color: #ffffff !important;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-social-info a:hover {
    background-color: #6f685a !important;
    color: #ffffff !important;
}

/* Línea de copyright más sutil */
.footer-logo .copy-right p {
    opacity: 0.7;
}

/* Anulación de cualquier color rosa, verde o azul remanente en fondos o bordes */
.footer-area * {
    background-color: transparent !important;
}
/* Excepciones para los que sí deben tener fondo */
.footer-social-info a,
.footer-social-info a:hover {
    background-color: #b7a68b !important;
}
.footer-social-info a:hover {
    background-color: #6f685a !important;
}

/* Bordes divisorios en beige (elimina líneas azules) */
.footer-area .footer-contact-info .single-box,
.footer-area .footer-menu,
.footer-area .footer-contact-info,
.footer-area .footer-social-info,
.footer-area .single-box,
.footer-area .footer-menu ul,
.footer-area .footer-menu ul li {
    border-color: #b7a68b !important;
}

/* Elimina la línea vertical azul en logo/copyright */
.footer-logo,
.footer-logo .logo,
.footer-logo .copy-right,
.footer-logo::before,
.footer-logo::after {
    border-color: #b7a68b !important;
}

.footer-area .footer-bg {
    filter: grayscale(100%) sepia(25%) brightness(1.4) contrast(0.9) saturate(0.7);
}

/* ============================================
   BOTÓN "SUBIR" (SCROLL-TO-TOP) EN COLORES CORPORATIVOS
   ============================================ */
.scroll-to-top,
.scroll-top,
#scroll-top,
.scrollup {
    background-color: #b7a68b !important; /* Beige acento */
    color: #ffffff !important;            /* Flecha blanca */
    border-color: #b7a68b !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.scroll-to-top:hover,
.scroll-top:hover,
#scroll-top:hover,
.scrollup:hover {
    background-color: #6f685a !important; /* Gris topo en hover */
    color: #ffffff !important;
}
/* Si la flecha se genera con ::before */
.scroll-to-top::before,
.scroll-top::before,
#scroll-top::before,
.scrollup::before {
    color: #ffffff !important;
}

/* ============================================
   MENÚ HAMBURGUESA MÓVIL – FONDO BEIGE, BARRAS BLANCAS
   ============================================ */
.mobile-nav-toggler .inner {
    background-color: #b7a68b !important; /* Beige acento */
}
/* Aseguramos que las barras sigan blancas */
.mobile-nav-toggler .icon-bar {
    background-color: #ffffff !important;
}

/* ============================================
   CORRECCIONES FINALES DEL MENÚ DE ESCRITORIO
   ============================================ */

/* Enlaces del submenú: color beige fijo */
.main-menu .navigation .dropdown ul li a {
    color: #b7a68b !important;
}

/* Hover del enlace (texto) sin rosa */
.main-menu .navigation .dropdown ul li a:hover {
    color: #b7a68b !important;
}

/* Rectángulo vertical rosa → beige */
.main-menu .navigation .dropdown ul li a::before,
.main-menu .navigation .dropdown ul li a::after {
    background-color: #b7a68b !important;
    /* Si desea eliminarlo por completo, descomente la siguiente línea:
    content: none !important;
    */
}

/* ============================================
BOTÓN "GET APPOINTMENT" – TEXTO BLANCO Y HOVER BEIGE
   ============================================ */
.header-right .btn-one {
    position: relative;
    overflow: hidden;
    color: #ffffff !important; /* Texto blanco fijo */
}
/* Anula ambos pseudo-elementos */
.header-right .btn-one::before,
.header-right .btn-one::after {
    background: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}
/* Hover controlado con fondo beige */
.header-right .btn-one:hover {
    background-color: #b7a68b !important;
    color: #6f685a !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Desplazamiento suave para todas las anclas internas */
html {
    scroll-behavior: smooth;
}

/* ============================================
STICKY HEADER – ESPACIADO Y SEPARACIÓN
   ============================================ */

/* Aumenta el espacio entre el logo y el menú */
.sticky-header .logo {
    padding-right: 40px; /* Separa el logo del menú */
}
/* Alternativa: si lo anterior mueve el menú, use esto en su lugar:
.sticky-header .right-col {
    padding-left: 40px;
}
*/

/* Separa los elementos del menú entre sí */
.sticky-header .main-menu .navigation > li {
    margin-right: 25px; /* Más espacio entre palabras */
}
/* Quita el margen del último elemento para que no sobre espacio */
.sticky-header .main-menu .navigation > li:last-child {
    margin-right: 0;
}

/* ============================================
HERO VIDEO ICON – ONDAS BEIGE EN LUGAR DE AZUL
   ============================================ */
.video-holder-box:hover .icon:before,
.main-slider.style2:hover .video-holder-box-style2 .icon:before {
    -webkit-box-shadow: 0 0 0 0 rgba(183, 166, 139, 0.25) !important;
    box-shadow: 0 0 0 0 rgba(183, 166, 139, 0.25) !important;
}

/* ============================================
   FLECHAS DEL CARRUSEL HERO – COLORES CORPORATIVOS
   ============================================ */
.main-slider .owl-prev,
.main-slider .owl-next {
    background-color: #b7a68b !important; /* Beige acento */
    color: #ffffff !important;            /* Flecha blanca */
    border-color: #b7a68b !important;
}
.main-slider .owl-prev:hover,
.main-slider .owl-next:hover {
    background-color: #6f685a !important; /* Gris topo en hover */
    color: #ffffff !important;
}
/* Por si la flecha se genera con ::before */
.main-slider .owl-prev::before,
.main-slider .owl-next::before {
    color: #ffffff !important;
}

/* ============================================
   BOTONES DEL HERO (MAKE APPOINTMENT Y TELÉFONO)
   ============================================ */

/* Botón principal "Make Appointment" */
.main-slider .btn-one {
    background-color: #b7a68b !important; /* Beige acento */
    color: #0c1417 !important;           /* Texto oscuro */
    border-color: #b7a68b !important;
}
.main-slider .btn-one:hover {
    background-color: #6f685a !important; /* Gris topo en hover */
    color: #ffffff !important;
}

/* Botón secundario "Teléfono" */
.main-slider .btn-one.marleft.style2 {
    background-color: transparent !important;
    color: #ffffff !important;            /* Texto blanco */
    border: 2px solid #b7a68b !important; /* Borde beige */
}
.main-slider .btn-one.marleft.style2:hover {
    background-color: #b7a68b !important; /* Fondo beige en hover */
    color: #0c1417 !important;           /* Texto oscuro */
}

/* Anula pseudo-elementos que causan barridos verdes/azules */
.main-slider .btn-one::before,
.main-slider .btn-one::after {
    background: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================
   ESQUINAS REDONDEADAS EN FEATURED AREA
   ============================================ */
.featured-area .single-featured-box {
    border-radius: 16px;
    overflow: hidden; /* Para que el contenido interno respete el redondeo */
}

/* ============================================
   FEATURED AREA – ESQUINAS REDONDEADAS Y HOVER ANIMADO
   ============================================ */
.featured-area .single-featured-box {
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suavizado */
}
.featured-area .single-featured-box:hover {
    transform: scale(1.04); /* Crece un 4% */
    box-shadow: 0 8px 24px rgba(12, 20, 23, 0.12); /* Sombra sutil */
}

/* ============================================
   PUNTO DECORATIVO DEL TÍTULO EN EL HERO
   ============================================ */
.main-slider .content h2 .round {
    background-color: #393d72 !important; /* Beige acento */
}

/* ============================================
   ABOUT US – TÍTULOS Y PUNTO ANIMADO EN BEIGE
   ============================================ */
.about-style1-area .sec-title h5 {
    color: #b7a68b !important; /* "//Sobre mí//" en beige */
}
.about-style1-area .sec-title h2 .round-box {
    background-color: #b7a68b !important; /* Punto parpadeante en beige */
}

/* ============================================
   SERVICIOS – PUNTO ANIMADO EN BEIGE
   ============================================ */
.service-style1-area .sec-title h2 .round-box {
    background-color: #b7a68b !important; /* Beige acento */
}

/* ============================================
   BLOG-V2.HTML - SOBRESCRITURA DE COLORES - PAGINA ESPECIAL PARA BLOG V2
   ============================================ */

/* ---- HEADER STYLE TWO ---- */
/* Puntos del toggler (9 cuadritos) */
.bar-box.style2 ul li,
.bar-box.style2 ul li.red2 {
    background-color: #b7a68b !important; /* Beige */
}
/* Enlaces del menú de navegación en blanco */
.main-menu.style2 .navigation > li > a {
    color: #ffffff !important;
}
/* Hover de los enlaces del menú */
.main-menu.style2 .navigation > li > a:hover,
.main-menu.style2 .navigation > li.current > a {
    color: #b7a68b !important;
}
/* Botón Get Appointment */
.btn-one.style2 {
    background-color: #b7a68b !important;
    color: #0c1417 !important;
}
.btn-one.style2:hover {
    background-color: #6f685a !important;
    color: #ffffff !important;
}

/* ---- BREADCRUMB ---- */
/* Punto animado */
.breadcrumb-area .title h2 .dotted {
    background-color: #b7a68b !important;
}

/* ---- BLOG GRID ---- */
/* Fecha y overlay hover */
.single-blog-style1 .img-holder .date-box,
.single-blog-style1 .img-holder .inner:before {
    background-color: #b7a68b !important;
}
/* Meta-info (autor, categorías) y sus iconos */
.single-blog-style1 .text-holder .meta-info li a:hover,
.single-blog-style1 .text-holder .meta-info li span:before {
    color: #b7a68b !important;
}
/* Título y punto animado */
.single-blog-style1 .text-holder .blog-title a:hover {
    color: #b7a68b !important;
}
.single-blog-style1 .text-holder .blog-title .round-box {
    background-color: #b7a68b !important;
}

/* ---- PAGINACIÓN ---- */
.styled-pagination li.active a,
.styled-pagination li:hover a {
    background-color: #b7a68b !important;
    color: #ffffff !important;
}

/* ---- FOOTER STYLE TWO ---- */
.footer-style2-area {
    background-color: #0c1417 !important; /* Fondo oscuro corporativo */
}
/* Puntos de los títulos del footer */
.single-footer-widget .title h3 span {
    background-color: #b7a68b !important;
}
/* Enlace "Read More" del widget 'About Us' */
.widget-company-info .readmore a {
    color: #b7a68b !important;
}
.widget-company-info .readmore a:hover {
    color: #f3e0c0 !important;
}
/* Enlaces de los widgets */
.single-footer-widget ul li a:hover {
    color: #b7a68b !important;
}
/* Botón del newsletter */
.subscribe-form button.btn-one {
    background-color: #b7a68b !important;
    color: #ffffff !important;
}
.subscribe-form button.btn-one:hover {
    background-color: #6f685a !important;
    color: #ffffff !important;
}
/* Footer Bottom */
.footer-bottom-style2 {
    background-color: #000000 !important; /* Negro puro para contraste */
}

/* ============================================
   OVERLAY NEGRO 30% EN BREADCRUMB (HERO DEL BLOG)
   ============================================ */
.breadcrumb-area {
    position: relative;
    z-index: 1;
}
.breadcrumb-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Negro 30% opacidad */
    z-index: 0;
    pointer-events: none;
}
/* Asegura que el contenido quede por encima del overlay */
.breadcrumb-area .container {
    position: relative;
    z-index: 2;
}

/* ============================================
   CARRUSEL DE SERVICIOS (SWIPER) – IMAGEN GRANDE Y CONTROLES INFERIORES
   ============================================ */
.service-swiper {
    padding-bottom: 120px !important;
    position: relative;
}
.service-swiper .swiper-slide {
    background-color: transparent;
}

/* === Ajuste de columnas: imagen más ancha (7/12) y texto (5/12) === */
.service-swiper .swiper-slide .col-xl-6 {
    flex: 0 0 58.333%; /* 7/12 para la imagen */
    max-width: 58.333%;
}
.service-swiper .swiper-slide .col-xl-6:last-child {
    flex: 0 0 41.667%; /* 5/12 para el texto */
    max-width: 41.667%;
}

/* === Contenedor de imagen con altura fija y recorte limpio === */
.service-media {
    border-radius: 20px;
    overflow: hidden;
    height: 420px; /* Altura fija, no cambia con el texto */
}
.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Llena el contenedor sin deformarse */
    display: block;
    border-radius: 20px;
    transition: transform 0.4s ease;
}
.service-swiper .swiper-slide-active .service-img {
    transform: scale(1.02);
}

/* Contenido textual */
.service-content .service-title {
    font-size: 2rem;
    color: var(--color-dark);
    margin-bottom: 20px;
}
.service-content .service-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-muted);
    margin-bottom: 20px;
}
.service-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}
.service-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: var(--color-dark);
}
.service-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}
.service-content .btn-one {
    background-color: var(--color-accent);
    color: #ffffff;
    margin-bottom: 30px !important;
}
.service-content .btn-one:hover {
    background-color: var(--color-secondary);
    color: #ffffff;
}

/* Flechas de navegación (abajo, centradas) */
.service-swiper .swiper-button-next,
.service-swiper .swiper-button-prev {
    color: var(--color-accent);
    background: rgba(255, 255, 255, 0.9);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all 0.3s;
    position: absolute;
    top: auto;
    bottom: 40px;
    margin-top: 0;
}
.service-swiper .swiper-button-next {
    left: 50%;
    transform: translateX(30px);
    right: auto;
}
.service-swiper .swiper-button-prev {
    right: 50%;
    transform: translateX(-30px);
    left: auto;
}
.service-swiper .swiper-button-next:hover,
.service-swiper .swiper-button-prev:hover {
    background: var(--color-accent);
    color: #ffffff;
}
.service-swiper .swiper-button-next::after,
.service-swiper .swiper-button-prev::after {
    font-size: 18px;
}

/* Paginación (puntos) */
.service-swiper .swiper-pagination {
    bottom: 5px;
}
.service-swiper .swiper-pagination-bullet {
    background: var(--color-muted);
    opacity: 1;
}
.service-swiper .swiper-pagination-bullet-active {
    background: var(--color-accent);
}

/* Responsive */
@media (max-width: 767px) {
    .service-swiper .swiper-slide .col-xl-6,
    .service-swiper .swiper-slide .col-xl-6:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .service-media {
        height: 280px; /* Más compacta en móvil */
    }
    .service-content .service-title {
        font-size: 1.5rem;
    }
    .service-swiper .swiper-button-next,
    .service-swiper .swiper-button-prev {
        display: none;
    }
}

/* Buscador del blog */
.blog-search-box {
    max-width: 400px;
    margin: 0 auto 40px;
    position: relative;
}
.blog-search-box input {
    width: 100%;
    height: 50px;
    padding: 0 45px 0 20px;
    border-radius: 30px;
    border: 1px solid #e0e0e0;
    font-size: 16px;
}
.blog-search-box i {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #b7a68b;
}
/* Estilo para listas en artículo */
#articulo-contenido .service-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}
#articulo-contenido .service-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #333;
}
#articulo-contenido .service-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #b7a68b;
    font-weight: bold;
}

/* ============================================
   BREADCRUMB DINÁMICO - CURVA DECORATIVA SIEMPRE VISIBLE
   ============================================ */
#breadcrumb-imagen {
    position: relative;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
#breadcrumb-imagen .banner-curve-gray {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 90px;
    background-image: url(../images/shape/banner-curve-gray.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    z-index: 2; /* Por encima de la imagen */
}

/* ============================================
   SIDEBAR SOBRE EL DOCTOR - SEPARACIÓN DE TEXTOS
   ============================================ */
.sidebar-about-me-box .text-holder h3 {
    margin-top: 80px; /* Baja el nombre */
}
.sidebar-about-me-box .text-holder p {
    margin-top: 10px; /* Baja la descripción */
}

/* ============================================
   ARTÍCULOS RECIENTES - IMÁGENES CIRCULARES
   ============================================ */
.popular-feeds .img-box {
    width: 80px;      /* Ajuste al tamaño original si es distinto */
    height: 80px;     /* Mismo alto que ancho para círculo perfecto */
    border-radius: 50%;
    overflow: hidden;
}
.popular-feeds .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta sin deformar */
    border-radius: 50%;
}

/* ============================================
   SIDEBAR CATEGORÍAS - ELIMINAR ROSA (REFORZADO)
   ============================================ */
.sidebar-wrapper .single-sidebar .title:before {
    background-color: #b7a68b !important; /* Línea decorativa beige */
}
.categorie-boxs li a {
    background: #f9f9f9 !important;
    color: #0c1417 !important;
}
/* Capa decorativa que aparece en hover */
.categorie-boxs li a::before {
    background: #b7a68b !important;
    z-index: -1;
}
/* Hover y estado activo */
.categorie-boxs li:hover a,
.categorie-boxs li.active a {
    background: #b7a68b !important;
    color: #ffffff !important;
}
.categorie-boxs li:hover a::before,
.categorie-boxs li.active a::before {
    background: #b7a68b !important;
    transform: scaleY(1) !important;
}
/* Números laterales */
.categorie-boxs li a span {
    background: #b7a68b !important;
    color: #ffffff !important;
}
.categorie-boxs li:hover a span,
.categorie-boxs li.active a span {
    background: #6f685a !important;
    color: #ffffff !important;
}

/* ============================================
   ETIQUETA DE CATEGORÍA EN ARTÍCULO - AZUL
   ============================================ */
.single-blog-style2 .text-holder .categories {
    background-color: #393D72 !important; /* Azul indicado */
}
.single-blog-style2 .text-holder .categories h5 {
    color: #ffffff !important; /* Texto blanco */
}

/* ============================================
   ICONOS DE USUARIO Y CALENDARIO - AZUL
   ============================================ */
.single-blog-style2 .text-holder .meta-info li span.icon-user::before,
.single-blog-style2 .text-holder .meta-info li span.icon-calendar::before,
.single-blog-style2 .text-holder .meta-info li span.icon-calendar-1::before,
.sidebar-wrapper .single-sidebar .meta-info li span.icon-user::before,
.sidebar-wrapper .single-sidebar .meta-info li span.icon-calendar::before,
.sidebar-wrapper .single-sidebar .meta-info li span.icon-calendar-1::before {
    color: #393D72 !important; /* Azul corporativo */
}

.single-blog-style2 .text-holder .meta-info li span.icon-user,
.single-blog-style2 .text-holder .meta-info li span.icon-calendar,
.single-blog-style2 .text-holder .meta-info li span.icon-calendar-1,
.sidebar-wrapper .single-sidebar .meta-info li span.icon-user,
.sidebar-wrapper .single-sidebar .meta-info li span.icon-calendar,
.sidebar-wrapper .single-sidebar .meta-info li span.icon-calendar-1 {
    color: #393D72 !important;
}

/* ============================================
   ICONO DE CALENDARIO EN ARTÍCULOS RECIENTES
   ============================================ */
.popular-feeds li .title-box h6 span.icon-calendar-1,
.popular-feeds li .title-box h6 span.icon-calendar-1::before {
    color: #393D72 !important;
}

/* ============================================
   OVERLAY DEL BLOG - TRANSPARENCIA CONSTANTE
   ============================================ */
.blog-style1-area .single-blog-style1 .img-holder .inner:before,
.blog-grid-area .single-blog-style1 .img-holder .inner:before {
    background-color: #b7a68b !important;
}
.blog-style1-area .single-blog-style1:hover .img-holder .inner:before,
.blog-grid-area .single-blog-style1:hover .img-holder .inner:before {
    opacity: 0.45 !important;
    height: 100%;
}

/* ============================================
   HEADER EN CELULAR - LOGO BLANCO Y FONDO TRANSPARENTE
   ============================================ */
/* Por defecto (computadora y tablet): solo se ve el logo beige */
.logo-celular {
    display: none;
}

/* Solo en celular (pantalla de 767 o menos) */
@media (max-width: 767px) {
    .logo-computadora {
        display: none;
    }
    .logo-celular {
        display: inline-block;
    }
    .main-header.header-style-one .header .outer-box {
        background: transparent !important;
        padding: 0 !important;
    }
}

/* ============================================
   HERO EN CELULAR - TEXTO CENTRADO Y SIN EMPALME
   ============================================ */
@media (max-width: 767px) {
    /* Espacio arriba para esquivar el header, poco abajo para no crecer */
    .main-slider.style1 .slide {
        padding: 130px 0 40px !important;
    }

    /* Punto de enfoque de la imagen */
    .main-slider .slide .image-layer {
        background-position: center center !important;
    }

    /* Oscurecido suave para apreciar la imagen */
    .main-slider .slide .image-layer:before {
        background-color: rgba(0, 0, 0, 0.25) !important;
    }

    /* Centrar todo el contenido */
    .main-slider .content {
        text-align: center !important;
        padding: 0 15px !important;
    }

    /* Texto superior (//Enjoy Your Holiday//) más pequeño */
    .main-slider .content h5 {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    /* Título más pequeño */
    .main-slider .content h2 {
        font-size: 28px !important;
        line-height: 1.2em !important;
        margin-top: 12px !important;
        margin-bottom: 25px !important;
    }

    /* Botones: uno debajo del otro, centrados */
    .main-slider .content .btns-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Botones más compactos */
    .main-slider .content .btns-box a {
        margin: 0 !important;
        font-size: 14px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        line-height: 45px !important;
    }

    /* Quitar el margen del segundo botón para que quede centrado */
    .main-slider .content .btns-box a.marleft {
        margin-left: 0 !important;
    }
}

/* ============================================
   RECUADRO DE EXPERIENCIA EN CELULAR
   Más pequeño y en la esquina inferior derecha
   ============================================ */
@media (max-width: 767px) {
    .about-style1-area .about-experience-box {
        top: auto !important;
        bottom: 15px !important;
        right: 15px !important;
        width: 110px !important;
        height: 110px !important;
        border-radius: 18px !important;
    }

    .about-style1-area .about-experience-box .count-box {
        padding: 20px 0 !important;
    }

    .about-style1-area .about-experience-box .count-box h2 {
        font-size: 36px !important;
        line-height: 36px !important;
    }

    .about-style1-area .about-experience-box .count-box h2 .plus-icon {
        font-size: 12px !important;
        margin-left: -6px !important;
    }

    .about-style1-area .about-experience-box .count-box h5 {
        font-size: 11px !important;
        line-height: 14px !important;
        margin-top: 4px !important;
    }
}

/* ============================================
   MENÚ MÓVIL - BARRA VERDE SOLO EN ACTIVA
   ============================================ */
@media (max-width: 767px) {
    /* --- Opción activa: texto verde --- */
    .mobile-menu .navigation li.current > a,
    .mobile-menu .navigation li.current > a:hover {
        color: #8FC424 !important;
        background-color: transparent !important;
        border-color: #8FC424 !important;
        box-shadow: none !important;
    }

    /* --- Barra de la activa: verde por fondo, borde y sombra --- */
    .mobile-menu .navigation li.current > a:before {
        height: 100% !important;
        background-color: #8FC424 !important;
        background: #8FC424 !important;
        border-color: #8FC424 !important;
        box-shadow: none !important;
    }

    /* --- Hover en otras opciones: solo texto verde --- */
    .mobile-menu .navigation li > a:hover,
    .mobile-menu .navigation li > a:focus {
        color: #8FC424 !important;
    }

    /* --- Opciones NO activas: sin barra de ningún tipo --- */
    .mobile-menu .navigation li:not(.current) > a {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .mobile-menu .navigation li:not(.current) > a:before {
        height: 0 !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* --- Submenú (Blog) en hover: solo texto verde --- */
    .mobile-menu .navigation li ul li > a:hover {
        color: #8FC424 !important;
    }
}

/* ============================================
   REDES SOCIALES DEL MENÚ MÓVIL - VERDE EN HOVER
   Solo celulares
   ============================================ */
@media (max-width: 767px) {
    .mobile-menu .social-links li a {
        color: #ffffff !important;
    }
    .mobile-menu .social-links li a:hover,
    .mobile-menu .social-links li a:focus {
        color: #8FC424 !important;
    }
}

/* ============================================
   TEXTO SUPERIOR DEL HERO EN BLANCO
   Aplica en celular, tablet y computadora
   ============================================ */
.main-slider .content h5,
.main-slider .content h5 span {
    color: #ffffff !important;
}

/* ============================================
   OVERLAY DEL HERO - NEGRO 25% EN TODAS LAS PANTALLAS
   ============================================ */
.main-slider .slide .image-layer:before {
    background-color: rgba(0, 0, 0, 0.35) !important;
}


/* ============================================
   TARJETAS DE SERVICIO EN CELULAR
   Evita que invadan la imagen del Hero
   ============================================ */
@media (max-width: 767px) {
    .featured-area {
        margin-top: 0 !important;
        padding-top: 30px !important;
    }
}

/* ============================================
   BOTONES DEL HERO - TEXTO SIEMPRE EN BLANCO
   ============================================ */
.main-slider .btn-one,
.main-slider .btn-one:hover,
.main-slider .btn-one:focus,
.main-slider .btn-one:active,
.main-slider .btn-one .txt,
.main-slider .btn-one:hover .txt,
.main-slider .btn-one:focus .txt,
.main-slider .btn-one:active .txt {
    color: #ffffff !important;
}

/* ============================================
   CORREO EN BARRA LATERAL OCULTA - TIPOGRAFÍA REDUCIDA
   ============================================ */
.hidden-bar .contact-info-box ul li p a[href^="mailto"] {
    font-size: 10px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
}

/* ============================================
   CORREO COMPLETO - SECCIÓN CONTACTO Y BARRA LATERAL
   ============================================ */

/* 1. Sección de contacto del cuerpo (junto al calendario) */
/* Reduce el espacio del icono de 60px a 45px */
.feautres-content-box .inner-content ul li .inner {
    padding-left: 45px !important;
}
/* Permite que el correo se vea completo */
.feautres-content-box .inner-content ul li .title p,
.feautres-content-box .inner-content ul li .title p a {
    font-size: 13px !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

/* 2. Barra lateral oculta (los 9 puntos) */
.hidden-bar .contact-info-box ul li p a[href^="mailto"] {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
}