/* === LAGOOM LIVING STYLES === */

/* Variables de colores */
:root {
    --black: #000000;
    --white: #FFFFFF;
    --turquoise: #17a2b8;
    --gray-text: #666666;
    --gray-light: #f8f9fa;
    --border-color: #e0e0e0;
}

/* Container Personalizado */
.container-custom {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .container-custom {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 1200px) {
    .container-custom {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Tipografía para títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
}

/* === TOP BAR === */
.top-bar {
    background-color: var(--black);
    color: var(--white);
    padding: 10px 0;
    font-size: 14px;
}

.top-bar-link {
    color: var(--white);
    text-decoration: none;
    margin: 0 15px;
    transition: opacity 0.3s;
}

.top-bar-link:hover {
    opacity: 0.7;
    color: var(--white);
}

.color-square {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
    margin-right: 8px;
    vertical-align: middle;
}

/* === NAVEGACIÓN PRINCIPAL === */
.main-navbar {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.main-navbar .container-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    margin-right: 0;
}

.logo-image {
    height: 40px;
    width: auto;
    display: block;
}

.logo-text {
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -1px;
    font-family: 'Outfit', sans-serif;
}

.main-navbar .nav-link {
    color: var(--black);
    font-weight: 500;
    margin: 0 15px;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    border-bottom: 2px solid var(--black);
}

/* Offcanvas Styling */
.offcanvas {
    width: 300px !important;
}

.offcanvas-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.offcanvas-body .navbar-nav .nav-link {
    margin: 10px 0;
    font-size: 1.1rem;
    border-bottom: none !important;
}

.offcanvas-body .navbar-nav .nav-link.active {
    font-weight: 700;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* === HERO SECTION === */
.hero-section {
    /* height: 500px; Eliminado para altura automática */
    overflow: hidden;
}

.hero-content {
    display: flex;
    height: 100%;
    align-items: center;
}

.hero-left {
    flex: 1;
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 80px;
}

.hero-left h1 {
    color: var(--white);
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.1;
    max-width: 700px;
    font-family: 'Outfit', sans-serif;
    margin-bottom: 25px;
}

.hero-description-text {
    color: var(--white);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 600px;
    font-family: 'Jost', sans-serif;
    opacity: 0.9;
}

.hero-right {
    flex: 1;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === SECCIÓN DE PROPIEDADES === */
.properties-section {
    padding: 80px 0;
    background-color: var(--white);
}

.property-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.property-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.property-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.property-card:hover .property-image img {
    transform: scale(1.05);
}

.property-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
}

.badge-disponible {
    background-color: #000000;
}

.badge-relaciones {
    background-color: #6c757d;
}

.badge-proximamente {
    background-color: #6c757d;
}

.property-content {
    padding: 25px;
}

.property-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
}

.property-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
}

.property-price span {
    font-size: 16px;
    font-weight: 400;
    color: var(--gray-text);
    font-family: 'Jost', sans-serif;
}

.property-location {
    font-size: 14px;
    color: var(--gray-text);
    margin-bottom: 20px;
    line-height: 1.4;
}

.property-features {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.property-features span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--gray-text);
}

.property-features i {
    font-size: 16px;
}

/* === SECCIÓN DE FINANCIACIÓN === */
.funding-section {
    padding: 60px 0;
    background-color: var(--gray-light);
}

.funding-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 40px;
    font-family: 'Outfit', sans-serif;
}

.funding-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.funding-logos img {
    max-height: 80px;
    transition: all 0.3s;
}

/* === CTA HIGHLIGHT BANNER === */
.cta-notice-banner {
    background: linear-gradient(135deg, #f8f5f0 0%, #e8e1d5 100%);
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.cta-text {
    font-size: 28px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
    font-family: 'Outfit', sans-serif;
}

.btn-cta-info {
    background-color: var(--black);
    color: var(--white);
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid var(--black);
}

.btn-cta-info:hover {
    background-color: transparent;
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .cta-text {
        font-size: 22px;
        padding: 0 20px;
    }

    .cta-notice-banner {
        padding: 40px 0;
    }
}

/* Aumentar tamaño específico para logo-ico.png (ICO) */
.funding-logos img[src*="logo-ico.png"] {
    max-height: 110px;
    height: 100px;
}

/* Aumentar tamaño específico para imagen5.png (ICO) */
.funding-logos img[src*="imagen5.png"] {
    max-height: 110px;
    height: 80px;
}

/* Aumentar tamaño específico para logo-smv.png (ICO) */
.funding-logos img[src*="logo-smv.png"] {
    max-height: 110px;
    height: 80px;
}

/* === FOOTER === */
.footer {
    background-color: var(--white);
    padding: 80px 0 40px;
    border-top: 1px solid var(--border-color);
    font-family: 'Jost', sans-serif;
}

.footer-logo-container {
    margin-bottom: 30px;
}

.footer-logo-img {
    height: 50px;
    width: auto;
}

.footer-info p {
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.footer-info a {
    color: #333;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-info a:hover {
    opacity: 0.7;
}

/* Indices circulares (1), (2) */
.footer-col-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
}

.footer-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    border-radius: 50%;
    font-size: 14px;
    margin-bottom: 20px;
}

.footer-col-title h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #333;
}

/* Menú de navegación */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 8px;
}

.footer-nav a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    opacity: 0.7;
}

/* Colaboradores */
.footer-partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 40px;
    /* Increased gaps for better breathing room */
    align-items: center;
}

.partner-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px !important;
    padding: 0 5px !important;
    width: 100% !important;
}

.partner-logo-item img {
    max-height: 42px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Ajustes para los logos que se ven pequeños */
.partner-logo-item img[src*="Imagen10.jpg"],
/* FAEC */
.partner-logo-item img[src*="images.jpg"],
/* CEA */
.partner-logo-item img[src*="Imagen11.jpg"],
/* ACP Málaga */
.partner-logo-item img[src*="Imagen12.png"]

/* ASVAL */
    {
    max-height: 55px !important;
    transform: scale(1.15) !important;
}

/* Reducir ligeramente los que son muy pesados visualmente */
.partner-logo-item img[src*="Logotipo-Color"],
/* REBS */
.partner-logo-item img[src*="Imagen9.png"]

/* CEM */
    {
    max-height: 35px !important;
}

/* === FOOTER BOTTOM === */
.footer-bottom {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    background-color: #fff;
}

.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal-links {
    display: flex;
    gap: 15px;
}

.footer-legal-links a {
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #333;
    line-height: 1;
}

.footer-copyright {
    font-size: 13px;
    color: #333;
    margin: 0;
}

/* === RESPONSIVE === */
@media (max-width: 1600px) {
    .funding-logos {
        flex-wrap: nowrap;
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 15px;
        /* Para la barra de desplazamiento si aparece */
        justify-content: flex-start;
        /* Para que si hay scroll empiece desde la izquierda, o center si caben */
    }

    /* Ajuste para que se centren si caben, pero scroll si no */
    .container-custom .funding-logos {
        justify-content: center;
    }

    .funding-logos img {
        max-height: 50px;
        width: auto;
        flex-shrink: 0;
    }

    /* Aumentar tamaño específico para logo-ico.png (ICO) en responsive */
    .funding-logos img[src*="logo-ico.png"] {
        max-height: 70px;
        height: auto;
    }

    /* Aumentar tamaño específico para imagen5.png (Málaga) en responsive */
    .funding-logos img[src*="imagen5.png"] {
        max-height: 60px;
        height: auto;
    }

    /* Aumentar tamaño específico para logo-smv.png en responsive */
    .funding-logos img[src*="logo-smv.png"] {
        max-height: 60px;
        height: auto;
    }
}

@media (max-width: 992px) {
    .navbar-brand {
        margin-right: auto;
    }

    .hero-content {
        flex-direction: column;
    }

    .hero-left,
    .hero-right {
        flex: none;
        /* height: 50%; Eliminado */
    }

    .hero-left h1 {
        font-size: 1.8rem;
    }

    .footer-collaboration {
        text-align: left;
        margin-top: 30px;
    }

    .collaboration-logos {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .top-bar {
        text-align: center;
    }

    .top-bar .col-md-6 {
        text-align: center !important;
        margin-bottom: 10px;
    }

    .hero-section {
        height: auto;
    }

    .hero-left {
        padding: 40px 20px;
    }

    .hero-left h1 {
        font-size: 1.5rem;
    }

    .hero-right {
        display: block;
        width: 100%;
        position: relative;
        z-index: 5;
    }

    .hero-right iframe {
        pointer-events: auto !important;
    }

    .properties-section {
        padding: 40px 0;
    }

    .footer-legal {
        flex-direction: column;
        gap: 10px;
    }

    .footer-partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .footer-logo-img {
        height: 40px;
    }
}

/* === ANIMACIONES === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.property-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Mejoras de accesibilidad */
a:focus,
button:focus {
    outline: 2px solid var(--turquoise);
    outline-offset: 2px;
}

/* Loading state para imágenes */
img {
    background-color: var(--gray-light);
}

.btn-inscribirse {
    background-color: #d4c5b0;
    color: #000;
    border: 2px solid #000;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-inscribirse:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-inscribirse-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.btn-inscribirse-pulse:hover {
    animation: none;
    transform: scale(1.05);
}

/* Botón de descarga destacado */
.btn-download-emphasized {
    background-color: var(--black);
    color: var(--white);
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
}

.btn-download-emphasized:hover {
    background-color: #d4c5b0;
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-download-emphasized i {
    font-size: 1.1rem;
}

/* Botón de descarga secundario */
.btn-download-secondary {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
}

.btn-download-secondary:hover {
    background-color: var(--gray-light);
    color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-download-secondary i {
    font-size: 1rem;
}

/* Scroll interno para tablas */
.table-scroll-container {
    max-height: 500px;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--black) var(--gray-light);
}

.table-scroll-container table {
    margin-bottom: 0;
}

.table-scroll-container thead th {
    position: sticky;
    top: 0;
    background-color: var(--gray-light);
    /* Coincide con table-secondary */
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Personalización del scrollbar para Webkit (Chrome, Safari, Edge) */
.table-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: var(--gray-light);
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--black);
    border-radius: 4px;
    border: 2px solid var(--gray-light);
}

/* Clickable Table Rows */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clickable-row:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* === TYPOLOGY TABLE RESPONSIVE === */
@media (max-width: 768px) {
    .typology-table thead {
        display: none;
    }

    .typology-table,
    .typology-table tbody,
    .typology-table tr,
    .typology-table td {
        display: block;
        width: 100%;
    }

    .typology-table tr {
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 15px;
        position: relative;
        background-color: #fff;
    }

    .typology-table td {
        border: none;
        padding: 8px 0;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .typology-table td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        color: var(--gray-text);
        margin-right: 10px;
    }

    .typology-table td:last-child {
        border-top: 1px solid var(--border-color);
        margin-top: 10px;
        padding-top: 15px;
        justify-content: center;
    }

    .typology-table .btn {
        width: 100%;
    }
}

/* === IKEA BANNER SECTION === */
.ikea-banner-section {
    padding: 0;
    /* Remove padding to let image touch edges */
    background-color: var(--white);
    overflow: hidden;
}

/* Remove padding from container to allow full bleed if desired,
   but user said "right column", so we keep container but maybe remove padding from section if needed.
   actually, let's keep section padding but make image fill column.
*/

.ikea-banner-section .row {
    --bs-gutter-x: 0;
    /* Remove gutters for full bleed effect within the row context if needed, or just normal column fill */
}

.ikea-text-content {
    padding: 60px 80px;
    /* More padding for the text side */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ikea-text-content h2 {
    font-size: 2.5rem;
    /* Much larger */
    font-weight: 700;
    color: var(--black);
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
}

.ikea-highlight {
    color: #0058a3;
    /* IKEA Blue or just emphasized black? User said "more striking". IKEA blue is recognizable. Or just larger. Let's start with scale and maybe color. */
    font-size: 1.1em;
    /* Slightly larger than the rest of the title */
    display: inline-block;
    position: relative;
    /* Optional: text-decoration: underline or something if requested, but requested "more striking" */
}

.ikea-description {
    font-size: 1rem;
    color: var(--gray-text);
    margin-bottom: 0;
    line-height: 1.5;
}

.ikea-image-content {
    height: 100%;
    width: 100%;
}

.ikea-logo {
    width: 100%;
    height: auto;
    /* Allow height to adjust to show full image */
    display: block;
    object-fit: cover;
    /* Shouldn't matter if height is auto, but good habit if constrained */
}

@media (max-width: 992px) {
    .ikea-text-content h2 {
        font-size: 2.5rem;
    }

    .ikea-text-content {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .ikea-text-content {
        padding: 40px 20px;
        text-align: center;
        align-items: center;
    }

    .ikea-text-content h2 {
        font-size: 2rem;
        text-align: center;
    }

    .ikea-image-content {
        /* On mobile, maybe we want it on top? I added order classes in HTML */
        margin-top: 20px;
        /* Added content to fix empty ruleset lint */
    }
}

/* === PROMO MODAL === */
.promo-modal-content {
    border: none;
    border-radius: 0;
    overflow: hidden;
    min-height: 500px;
    position: relative;
    background-image: url('../img/1dorm_4.jpg');
    /* Updated to 1dorm_4.jpg */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

.promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 218, 26, 0.75);
    /* Updated opacity to 75% */
    z-index: 1;
}

.promo-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    font-size: 1.5rem;
    opacity: 0.7;
}

.promo-content-wrapper {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

.promo-logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.promo-logo-lagoom {
    height: 0px;
    /* Updated height */
    width: auto;
    mix-blend-mode: multiply;
    /* Removes white background */
}

.promo-logo-ikea {
    height: 250px;
    /* Updated height */
    width: auto;
    mix-blend-mode: multiply;
    /* Removes white background */
}

.promo-separator {
    font-size: 24px;
    color: var(--black);
    font-weight: 300;
}

.promo-title-large {
    font-size: 2.5rem;
    /* Updated font size */
    font-weight: 400;
    color: var(--black);
    line-height: 1.1;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -1px;
}

.ikea-highlight-blue {
    color: #0051ba;
}

@media (max-width: 768px) {
    .promo-title-large {
        font-size: 2.2rem;
    }

    .promo-content-wrapper {
        min-height: 400px;
        padding: 30px 20px;
    }

    .promo-modal-content {
        min-height: 400px;
    }
}

/* === GLOBAL PROMO MODAL === */
#globalPromoModal .modal-content {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    background-color: transparent;
}

#globalPromoModal .modal-body {
    padding: 0;
    position: relative;
}

#globalPromoModal .promo-link {
    display: block;
    line-height: 0;
}

#globalPromoModal .promo-banner-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

#globalPromoModal .promo-link:hover .promo-banner-img {
    transform: scale(1.02);
}

#globalPromoModal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background-color: white;
    opacity: 0.8;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#globalPromoModal .btn-close:hover {
    opacity: 1;
}

@media (max-width: 576px) {
    #globalPromoModal .modal-dialog {
        margin: 10px;
    }
}