/* Ajustes personalizados Bee Telecom */

/* ============================================================
   Sistema de temas claro / oscuro
   - Por defecto: oscuro (comportamiento actual del sitio)
   - Si el sistema del visitante prefiere claro y no hay elección
     manual guardada: se activa el modo claro automáticamente
   - El botón de tema (solo en index.html por ahora) fuerza
     explícitamente claro u oscuro vía atributo data-theme + localStorage
   - Header y footer se mantienen siempre oscuros a propósito:
     ahí vive el logo blanco/amarillo, pensado para fondos oscuros
   ============================================================ */
:root {
    --bt-bg-page: #151515;
    --bt-bg-surface: #0d0d0d;
    --bt-bg-surface-2: #1a1a1a;
    --bt-text-primary: #ffffff;
    --bt-text-secondary: #cccccc;
    --bt-text-muted: #999999;
    --bt-border: #333333;
    --bt-accent: #FFCA00;
    --bt-accent-contrast: #000000;
    --bt-accent-text: #FFCA00;
    --bt-btn-bg: #FFCA00;
    --bt-btn-text: #151515;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bt-bg-page: #D1D5DB;
        --bt-bg-surface: #D1D5DB;
        --bt-bg-surface-2: #D1D5DB;
        --bt-text-primary: #1A1A1A;
        --bt-text-secondary: #4B5563;
        --bt-text-muted: #6B7280;
        --bt-border: #9CA3AF;
        --bt-accent: #FFCA00;
        --bt-accent-contrast: #000000;
        --bt-accent-text: #000066;
        --bt-btn-bg: #000066;
        --bt-btn-text: #FFCA00;
    }
}

:root[data-theme="light"] {
    --bt-bg-page: #D1D5DB;
    --bt-bg-surface: #D1D5DB;
    --bt-bg-surface-2: #D1D5DB;
    --bt-text-primary: #1A1A1A;
    --bt-text-secondary: #4B5563;
    --bt-text-muted: #6B7280;
    --bt-border: #9CA3AF;
    --bt-accent: #FFCA00;
    --bt-accent-contrast: #000000;
    --bt-accent-text: #000066;
    --bt-btn-bg: #000066;
    --bt-btn-text: #FFCA00;
}

/* Lienzo de página: se aplica directamente a body en vez de reutilizar
   --tg-color-dark, porque esa variable también la usa el template para
   texto oscuro-sobre-claro (botones, etc.) y para paneles que deben
   seguir oscuros (menú móvil, preloader) — reusarla los rompería. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body {
        background-color: var(--bt-bg-page);
    }
}

:root[data-theme="light"] body {
    background-color: var(--bt-bg-page);
}

/* Bandas que se mantienen siempre oscuras a propósito, como acento
   visual, incluso en modo claro: header, footer, menú móvil, preloader,
   "Contratar ahora" (industrias + stats) y "Cobertura Nacional".
   Se fija de nuevo todo el set de tokens a sus valores oscuros dentro
   de estas franjas para que su texto/íconos sigan siendo legibles. */
:root[data-theme="light"] .tgmobile__menu,
:root[data-theme="light"] #preloader,
:root[data-theme="light"] .crypto__area,
:root[data-theme="light"] .team__area {
    --tg-color-dark: #151515;
    --tg-heading-font-color: #ffffff;
    --tg-body-font-color: #888888;
    --bt-text-primary: #ffffff;
    --bt-text-secondary: #cccccc;
    --bt-text-muted: #999999;
    --bt-border: #333333;
    --bt-accent-text: #FFCA00;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .tgmobile__menu,
    :root:not([data-theme="dark"]) #preloader,
    :root:not([data-theme="dark"]) .crypto__area,
    :root:not([data-theme="dark"]) .team__area {
        --tg-color-dark: #151515;
        --tg-heading-font-color: #ffffff;
        --tg-body-font-color: #888888;
        --bt-text-primary: #ffffff;
        --bt-text-secondary: #cccccc;
        --bt-text-muted: #999999;
        --bt-border: #333333;
        --bt-accent-text: #FFCA00;
    }
}

/* Encabezados y texto de cuerpo del contenido (fuera de header/footer,
   que se quedan oscuros siempre y no usan estas variables para su texto) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --tg-heading-font-color: #1A1A1A;
        --tg-body-font-color: #6B7280;
    }
}

:root[data-theme="light"] {
    --tg-heading-font-color: #1A1A1A;
    --tg-body-font-color: #6B7280;
}

/* Botones primarios (.tg-btn: "Contacto", "Contrata ahora", etc.):
   en modo claro pasan a navy con texto amarillo, en vez de amarillo
   sólido con texto oscuro, para que resalten sobre el fondo gris claro. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .tg-btn {
        background: var(--bt-btn-bg);
        color: var(--bt-btn-text);
    }
    :root:not([data-theme="dark"]) .tg-btn:hover,
    :root:not([data-theme="dark"]) .tg-btn:focus-visible {
        background: var(--bt-accent);
        color: var(--bt-btn-bg);
    }
    :root:not([data-theme="dark"]) .tg-btn-two,
    :root:not([data-theme="dark"]) .tg-btn-three {
        border-color: var(--bt-btn-bg);
        color: var(--bt-text-primary);
    }
    :root:not([data-theme="dark"]) .tg-btn-two span {
        color: var(--bt-btn-bg);
    }
    :root:not([data-theme="dark"]) .tg-btn-two:hover,
    :root:not([data-theme="dark"]) .tg-btn-three:hover {
        background: var(--bt-btn-bg);
        color: var(--bt-btn-text);
        border-color: var(--bt-btn-bg);
    }
    /* Cuando .tg-btn y .tg-btn-two van juntas en el mismo elemento
       (ej. "contrata ahora" en ¿Qué nos hace diferentes?), que gane
       siempre el estilo sólido navy + texto amarillo */
    :root:not([data-theme="dark"]) .tg-btn.tg-btn-two {
        background: var(--bt-btn-bg);
        color: var(--bt-btn-text);
        border-color: var(--bt-btn-bg);
    }
    :root:not([data-theme="dark"]) .tg-btn.tg-btn-two span {
        color: var(--bt-btn-text);
    }
    :root:not([data-theme="dark"]) .tg-btn.tg-btn-two:hover {
        background: var(--bt-accent);
        color: var(--bt-btn-bg);
    }
}

:root[data-theme="light"] .tg-btn {
    background: var(--bt-btn-bg);
    color: var(--bt-btn-text);
}

:root[data-theme="light"] .tg-btn:hover,
:root[data-theme="light"] .tg-btn:focus-visible {
    background: var(--bt-accent);
    color: var(--bt-btn-bg);
}

:root[data-theme="light"] .tg-btn-two,
:root[data-theme="light"] .tg-btn-three {
    border-color: var(--bt-btn-bg);
    color: var(--bt-text-primary);
}

:root[data-theme="light"] .tg-btn-two span {
    color: var(--bt-btn-bg);
}

:root[data-theme="light"] .tg-btn-two:hover,
:root[data-theme="light"] .tg-btn-three:hover {
    background: var(--bt-btn-bg);
    color: var(--bt-btn-text);
    border-color: var(--bt-btn-bg);
}

:root[data-theme="light"] .tg-btn.tg-btn-two {
    background: var(--bt-btn-bg);
    color: var(--bt-btn-text);
    border-color: var(--bt-btn-bg);
}

:root[data-theme="light"] .tg-btn.tg-btn-two span {
    color: var(--bt-btn-text);
}

:root[data-theme="light"] .tg-btn.tg-btn-two:hover {
    background: var(--bt-accent);
    color: var(--bt-btn-bg);
}

/* Logos de certificaciones: por defecto se atenúan al 50% de opacidad
   (pensado para resaltar sobre fondo oscuro). Sobre gris claro se ven
   lavados/casi invisibles, así que en modo claro se suben casi a 100%. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .brand__item img {
        opacity: 0.9;
    }
}

:root[data-theme="light"] .brand__item img {
    opacity: 0.9;
}

/* Eyebrow/sub-title del template (usa --tg-primary-color = amarillo,
   bajo contraste sobre fondos claros) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .section__title .sub-title {
        color: var(--bt-accent-text);
        border-color: var(--bt-border);
    }
}

:root[data-theme="light"] .section__title .sub-title {
    color: var(--bt-accent-text);
    border-color: var(--bt-border);
}

/* Palabra atenuada dentro de un título (ej. "Data <span>Center</span>"),
   por defecto blanco al 30% de opacidad: invisible sobre fondo claro */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .section__title .title span:not(.text-accent) {
        color: rgba(26, 26, 26, 0.35);
    }
}

:root[data-theme="light"] .section__title .title span:not(.text-accent) {
    color: rgba(26, 26, 26, 0.35);
}

/* ===== Botón de cambio de tema ===== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bt-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--bt-accent);
    cursor: pointer;
    transition: 0.3s;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: var(--bt-accent);
    color: var(--bt-accent-contrast);
}

.theme-toggle-btn .theme-icon-moon {
    display: none;
}

.theme-toggle-btn[data-active-theme="light"] .theme-icon-sun {
    display: none;
}

.theme-toggle-btn[data-active-theme="light"] .theme-icon-moon {
    display: block;
}

/* ===== Botón de cambio de idioma (ES/EN) ===== */
.lang-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bt-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--bt-accent);
    cursor: pointer;
    transition: 0.3s;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.lang-toggle-btn:hover {
    background: var(--bt-accent);
    color: var(--bt-accent-contrast);
}

/* ===== Ajuste de espacio en el menú principal =====
   Al agregar el botón de idioma junto al de tema, el menú (logo + enlaces + acciones)
   ya no cabía en una sola línea en pantallas de escritorio normales y saltaba a una
   segunda fila. Se reduce un poco el espacio entre enlaces y entre botones de acción
   para que todo quepa de nuevo en una sola línea. */
.tgmenu__navbar-wrap>ul>li>a {
    padding: 27px 18px;
}

.tgmenu__action>ul li {
    margin-left: 18px;
}

/* Mismo ajuste para el header usado en contacto/servicios/equipo/blog/páginas legales
   (.tg-header__area-two), que trae aún más padding por defecto (33px 25px). */
.tg-header__area-two .tgmenu__navbar-wrap>ul>li>a {
    padding: 33px 15px;
}

/* ===== Selector de idioma ES/EN: muestra/oculta contenido según <html data-lang="..."> =====
   Por defecto (sin atributo o data-lang="es") se ve el español; con data-lang="en" se ve el inglés. */
html:not([data-lang="en"]) [data-lang-en] {
    display: none !important;
}

html[data-lang="en"] [data-lang-es] {
    display: none !important;
}

/* ===== Bloques que reservan el alto de la versión de texto más larga (ES o EN) =====
   Superpone ambas versiones en la misma celda de grid: el bloque siempre mide
   lo que ocupa la versión más alta, así el contenido de abajo no salta al
   cambiar de idioma. Solo se usa en puntos donde el salto se nota (ej. banner). */
.i18n-stack {
    display: grid;
}

.i18n-stack> [data-lang-es],
.i18n-stack> [data-lang-en] {
    grid-area: 1 / 1 / 2 / 2;
}

html:not([data-lang="en"]) .i18n-stack> [data-lang-en] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none;
}

html[data-lang="en"] .i18n-stack> [data-lang-es] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none;
}

/* ===== Íconos lineales estilo Lucide (contenido genérico) ===== */
.lucide-icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
}

.token__content p {
    margin-bottom: 8px;
}

.token__content p strong {
    color: var(--bt-text-primary);
}

.token__content .section__title .title span {
    color: var(--bt-accent-text);
}

.token__content .highlight-text {
    color: var(--bt-accent-text);
    margin-bottom: 20px;
}

.token__wrap img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.btn-group-custom {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.text-accent {
    color: var(--bt-accent-text) !important;
}

.text-strong-light {
    color: var(--bt-text-primary) !important;
    font-weight: 700;
}
/* ===== Sección Nuestros Servicios ===== */

/* Tarjetas con borde amarillo, iguales para las 6 */
.features__item,
.features__item-two {
    border: 1px solid var(--bt-accent);
    border-radius: 8px;
    padding: 30px;
    background: transparent;
}

/* Título de cada tarjeta en amarillo */
.features__item .features__content h2.title,
.features__item-two .features__content h2.title {
    color: var(--bt-accent-text);
    text-transform: none;
}

/* Texto principal del section title en mayúsculas */
.features__area .section__title .title {
    text-transform: uppercase;
}

/* ===== Continuidad Operativa / Ciberseguridad ===== */
.exchange__inner-wrap {
    border: 1px solid var(--bt-accent);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.exchange__icon-side img {
    width: 150px;
    height: auto;
}

.exchange__text-side {
    flex: 1;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 50px;
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.checklist-grid li {
    color: var(--bt-text-primary);
}

.checklist-grid li i,
.checklist-grid li svg {
    margin-right: 8px;
}


/* ===== Carrusel de industrias ===== */
.industry__slider-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 60px;
}

.industry__nav {
    background: transparent;
    border: 1px solid var(--bt-accent);
    color: var(--bt-accent-text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.3s;
}

.industry__nav:hover {
    background: var(--bt-accent);
    color: var(--bt-accent-contrast);
}

.industry-slider {
    flex: 1;
    overflow: hidden;
}

.industry__card {
    position: relative;
    height: 180px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--bt-accent);
    overflow: hidden;
}

.industry__label {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}

/* .industry__label siempre queda oscuro con texto blanco: va encima de
   fotografías, no del fondo de página, así que no se tematiza. */

/* ===== Fila de estadísticas ===== */
.stats__row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.stats__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
}

.stats__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--bt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bt-accent-text);
    font-size: 20px;
    flex-shrink: 0;
}

.stats__text h3 {
    color: var(--bt-accent-text);
    margin: 0;
    font-size: 20px;
}

.stats__text p {
    color: var(--bt-text-primary);
    margin: 0;
    font-size: 14px;
}

/* ===== Internet y Telefonía Móvil ===== */
.icon-row-5 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.icon-row-5__item {
    flex: 1;
    min-width: 180px;
    text-align: center;
}

.icon-row-5__item img {
    width: 70px;
    height: auto;
    margin-bottom: 20px;
}

.icon-row-5__item p {
    color: var(--bt-text-primary);
    font-size: 14px;
    line-height: 1.6;
}

/* ===== ¿Qué nos hace diferentes? ===== */
.diff__box {
    border: 1px solid var(--bt-accent);
    border-radius: 8px;
    padding: 40px 30px;
}

.diff__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.diff__grid img {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
}

.diff__grid span {
    display: block;
    color: var(--bt-text-primary);
    font-weight: 700;
    font-size: 16px;
}

/* ===== Sobre Nosotros ===== */
.faq__wrap .accordion-item {
    background: transparent;
    border: 1px solid var(--bt-accent);
    border-radius: 8px !important;
    margin-bottom: 15px;
    overflow: hidden;
}

.faq__wrap .accordion-button {
    background: transparent;
    color: var(--bt-text-primary);
    font-weight: 700;
    font-size: 18px;
    box-shadow: none;
    padding: 18px 20px;
}

.faq__wrap .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--bt-text-primary);
}

.faq__wrap .accordion-button::after {
    display: none;
}

.faq__wrap .accordion-button::before {
    content: "+";
    color: var(--bt-accent-text);
    font-size: 22px;
    font-weight: 700;
    margin-left: auto;
}

.faq__wrap .accordion-button:not(.collapsed)::before {
    content: "−";
}

.faq__wrap .accordion-body {
    color: var(--bt-text-secondary);
    padding: 0 20px 20px 20px;
}


/* ===== Cobertura Nacional ===== */
.coverage__stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px auto;
    flex-wrap: wrap;
}

.coverage__stats .stat-block h3 {
    color: var(--bt-accent-text);
    font-size: 28px;
    margin: 0;
}

.coverage__stats .stat-block p {
    color: var(--bt-text-primary);
    font-size: 14px;
    margin: 0;
}

.coverage__states {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 700px;
    margin: 20px auto 0;
}

.coverage__states span {
    border: 1px solid var(--bt-accent);
    color: var(--bt-text-primary);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.coverage__map {
    display: flex;
    justify-content: center;
}

.coverage__map img {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
}

#cobertura .team__content-wrap {
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .coverage__states {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Footer =====
   El footer se mantiene siempre oscuro a propósito (logo blanco/amarillo,
   texto blanco/gris ya fijos): no se tematiza con el modo claro. */
.footer__area {
    background: #0d0d0d;
    padding-top: 60px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
}

.footer__col h4 {
    color: #FFCA00;
    font-size: 16px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__col ul li {
    margin-bottom: 10px;
}

.footer__col ul li a {
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.footer__col ul li a:hover {
    color: #FFCA00;
}

.footer__logo-col img {
    width: 160px;
    margin-bottom: 15px;
}

.footer__logo-col p {
    color: #999999;
    font-size: 14px;
    margin-bottom: 20px;
}

.footer__social-row {
    display: flex;
    gap: 15px;
}

.footer__social-row a {
    width: 38px;
    height: 38px;
    border: 1px solid #FFCA00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFCA00;
    text-decoration: none;
    transition: 0.3s;
}

.footer__social-row a:hover {
    background: #FFCA00;
    color: #000000;
}

.footer__contact-btn {
    display: inline-block;
    border: 1px solid #FFCA00;
    color: #FFCA00;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

.footer__contact-btn:hover {
    background: #FFCA00;
    color: #000000;
}

.footer__bottom-legal {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
}

.footer__bottom-legal a {
    color: #999999;
    font-size: 13px;
    text-decoration: none;
}

.footer__bottom-legal a:hover {
    color: #FFCA00;
}

@media (max-width: 991px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}




/* ------ Página de Contacto ------ */
.breadcrumb__area-two {
    position: relative;
}

.contact__info-item .icon svg path {
    fill: var(--bt-accent-text) !important;
}

.contact__form-wrap .tg-btn {
    background: #FFCA00;
    border-color: #FFCA00;
}

.contact-map-area iframe {
    filter: grayscale(1) invert(90%) contrast(85%);
}


/* ===== Páginas legales ===== */
.legal-content p {
    color: var(--bt-text-secondary);
    margin-bottom: 18px;
    line-height: 1.8;
}

.legal-content h2.title {
    color: var(--bt-accent-text);
    margin-top: 35px;
    margin-bottom: 15px;
    font-size: 24px;
}

.legal-content .blog__details-list li {
    color: var(--bt-text-secondary);
    margin-bottom: 10px;
}

/* ===== Subtítulos dentro de Código de Ética ===== */
.legal-content .subtitle {
    color: var(--bt-text-primary);
    font-size: 18px;
    margin-top: 20px;
}

/* ===== Ícono X (como máscara, hereda el color de texto del enlace que lo contiene,
   funciona igual en el footer, el menú móvil o cualquier otro contexto) ===== */
.icon-x-mask {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url('../img/icon/icon-X.svg');
    mask-image: url('../img/icon/icon-X.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -0.15em;
    transition: 0.3s;
}

/* ===== Modal de respuesta de formularios =====
   Se mantiene siempre oscuro (overlay puntual, no forma parte del
   lienzo de página que cambia con el tema). */
.form-response-modal {
    background: #1a1a1a;
    border: 1px solid #FFCA00;
    border-radius: 12px;
}

.form-response-modal .modal-body {
    padding: 40px 30px;
}

.form-response-modal .modal-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.form-response-modal .modal-icon.success {
    color: #2ecc71;
}

.form-response-modal .modal-icon.error {
    color: #e74c3c;
}

.form-response-modal h3 {
    color: #ffffff;
    margin-bottom: 10px;
}

.form-response-modal p {
    color: #cccccc;
    margin-bottom: 25px;
}