/* ----- VARIABLES & RESET ----- */
:root {
    --primary-blue: #022055;
    --secondary-blue: #1461a6;
    --accent-yellow: #f4bc16;
    --text-dark: #333333;
    --text-light: #777777;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --font-main: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
}

.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* El "ul { list-style: none }" de arriba es para los menus/tarjetas del sitio, pero tambien
   apagaba las vinetas de las listas que un admin arma con el editor de texto de un articulo
   (Quill). Aqui se le devuelven las vinetas, solo dentro del contenido de un articulo/bloque. */
.article-content ul {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 15px;
}

.article-content ol {
    list-style: decimal;
    padding-left: 22px;
    margin-bottom: 15px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content p {
    margin-bottom: 15px;
}

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

/* ----- TOP BAR ----- */
.top-bar {
    background-color: var(--white);
    padding: 15px 0;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.main-logo {
    max-height: 130px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply; /* In case the logo has a white background that needs to blend */
}

.logo-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-text p {
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--primary-blue);
    letter-spacing: 0.2px;
}

.social-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.follow-us {
    font-weight: 700;
    font-size: 13px;
    color: var(--primary-blue);
    margin-right: 10px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--white);
    font-size: 14px;
    transition: transform 0.2s;
}

.social-icon:hover {
    transform: scale(1.1);
}

.fb { background-color: #3b5998; }
.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.yt { background-color: #ff0000; }
.li { background-color: #0077b5; }
.tk { background-color: #000000; }

/* ----- NAVIGATION ----- */
.navbar {
    background-color: var(--primary-blue);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 0 40px;
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-links > li > a {
    color: var(--white);
    font-weight: 600;
    font-size: 13px;
    padding: 13px 5px;
    display: block;
    transition: color 0.3s;
}

.nav-links > li > a:hover {
    color: var(--accent-yellow);
}

.nav-links > li > a i {
    font-size: 10px;
    margin-left: 3px;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 260px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-top: 3px solid var(--accent-yellow);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
    background-color: var(--bg-light);
    color: var(--secondary-blue);
}

.hurricane-btn {
    background-color: var(--accent-yellow);
    color: var(--primary-blue) !important;
    font-weight: 800;
    padding: 13px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
    margin-right: -18px;
}

.hurricane-btn:hover {
    background-color: #dfaa14;
}

.menu-toggle {
    display: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    padding: 15px;
}

/* ----- HERO CAROUSEL ----- */
.carousel-container {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.carousel-slide {
    display: none;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: fade 1.5s;
}

.carousel-slide.active {
    display: block;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

.hero-overlay {
    background: linear-gradient(to right, rgba(2, 32, 85, 0.95) 0%, rgba(2, 32, 85, 0.7) 40%, rgba(2, 32, 85, 0) 100%);
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 600px;
    color: var(--white);
    padding: 0 15px;
}

.hero-content h1,
.hero-content h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-services {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Carousel Controls */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 10;
}

.carousel-control:hover {
    background: rgba(0,0,0,0.8);
}

.carousel-control.prev { left: 0; }
.carousel-control.next { right: 0; }

/* Carousel Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
    background-color: var(--accent-yellow);
}

.btn {
    padding: 12px 25px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s;
}

.btn-blue {
    background-color: var(--secondary-blue);
    color: var(--white);
    border: 2px solid var(--secondary-blue);
}

.btn-blue:hover {
    background-color: #0f4d86;
    border-color: #0f4d86;
}

.btn-outline {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-blue);
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-outline-dark:hover {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* Variante invertida: fondo blanco normalmente, transparente al pasar el mouse
   (usada en el boton "CALL" del hero, sobre foto de fondo) */
.btn-invert-hover {
    background-color: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--white);
}

.btn-invert-hover:hover {
    background-color: transparent;
    color: var(--white);
}

/* ----- TRUST BADGES ----- */
.trust-badges {
    background-color: var(--white);
    padding: 25px 0;
    border-bottom: 1px solid #eee;
}

.badges-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--primary-blue);
}

.badge-item i {
    font-size: 24px;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----- SECTION TITLES ----- */
.section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title::before,
.section-title::after {
    content: "";
    height: 2px;
    background-color: #ccc;
    flex: 1;
    max-width: 100px;
    margin: 0 15px;
}

.text-white {
    color: var(--white);
}

.text-white::before,
.text-white::after {
    background-color: rgba(255,255,255,0.3);
}

/* ----- COMPLETE PROPERTY CARE ----- */
.property-care {
    padding: 60px 0;
}

/* Flexbox (en vez de CSS grid) para que cada tarjeta tenga SIEMPRE el mismo ancho fijo,
   sin importar cuantas haya: con "flex-grow: 0" una tarjeta nunca se estira para
   "rellenar" la fila (por ejemplo, una categoria con un solo servicio se ve angosta,
   igual que si hubiera 5). El calculo de abajo (100% menos los espacios, dividido 5)
   dimensiona para mostrar como maximo 5 tarjetas por fila en pantallas de escritorio;
   en pantallas mas angostas se acomodan solas a menos columnas gracias a flex-wrap. */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.services-grid .card {
    flex: 0 1 calc((100% - 4 * 20px) / 5);
    max-width: calc((100% - 4 * 20px) / 5);
    min-width: 210px;
}

/* Carrusel de "Complete Property Care": se usa cuando hay mas de 4 destacados,
   para mostrar solo 4 tarjetas a la vez y rotarlas automaticamente. */
.services-carousel {
    /* "overflow-x: hidden" + "overflow-y: visible" por separado hace que el navegador
       agregue una barra de scroll rara (se ve feo). En vez de eso: se recorta parejo en
       los dos sentidos, pero se le da relleno arriba/abajo para que el efecto "hover" de
       la tarjeta (que se levanta y agranda su sombra) tenga espacio y no se corte. */
    overflow: hidden;
    padding: 30px 0 50px;
}

.services-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s ease;
}

.service-slide {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    min-width: 0;
}

@media (max-width: 1024px) {
    .service-slide {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .service-slide {
        flex-basis: 100%;
    }
}

.card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background-color: var(--secondary-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border: 3px solid var(--white);
}

.card-body {
    padding: 35px 15px 25px;
    text-align: center;
}

.card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.card-body p {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 15px;
    min-height: 50px;
}

.learn-more {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-blue);
}

.learn-more i {
    font-size: 10px;
}

/* ----- OUR CLIENTS ----- */
.our-clients {
    background-color: var(--primary-blue);
    padding: 60px 0;
    color: var(--white);
}

.clients-subtitle {
    margin: -25px 0 35px;
    font-size: 14px;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: center;
    gap: 28px;
}

@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 260px));
    }
}

@media (max-width: 480px) {
    .clients-grid {
        grid-template-columns: minmax(0, 260px);
    }
}

/* Carrusel de "Our Clients": mismo mecanismo que el de "Complete Property Care"
   (se usa cuando hay mas de 4 clientes, para mostrar solo 4 en una fila y rotarlos solos). */
.clients-carousel {
    overflow: hidden;
    padding: 10px 0 30px;
}

.clients-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s ease;
}

.client-slide {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    min-width: 0;
}

@media (max-width: 1024px) {
    .client-slide {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .client-slide {
        flex-basis: 100%;
    }
}

.client-logo {
    background-color: var(--white);
    border-radius: 8px;
    padding: 24px 20px;
    width: 100%;
    /* Alto fijo (no minimo) para que todas las tarjetas midan lo mismo, tengan logo
       subido o solo el icono generico con texto. */
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--secondary-blue);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.client-logo i {
    font-size: 26px;
    color: var(--accent-yellow);
    margin-bottom: 10px;
}

/* Si el cliente subio su logo real (en vez del icono generico), se muestra aqui,
   sin recortarlo (object-fit: contain) y con un tamano similar al del icono. */
.client-logo-img {
    max-width: 100%;
    max-height: 148px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* Lineita amarilla que aparece deslizandose arriba de la tarjeta al pasar el mouse */
.client-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--accent-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.client-logo:hover::before {
    transform: scaleX(1);
}

.client-logo h3 {
    font-size: 16px;
    line-height: 1.1;
}

.client-logo span {
    font-size: 10px;
    color: var(--text-light);
}

/* ----- GOOGLE REVIEWS ----- */
.google-reviews {
    padding: 60px 0;
    background-color: var(--bg-light);
}

.google-rating {
    margin-bottom: 30px;
}

.google-logo {
    width: 40px;
    margin-bottom: 10px;
}

.stars {
    color: #ffc107;
    font-size: 18px;
    margin-bottom: 5px;
}

.google-rating p {
    font-weight: 600;
    font-size: 14px;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.review-card {
    background: var(--white);
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    text-align: left;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Foto del cliente a la izquierda; si no subieron una imagen en el admin,
   se muestra el icono generico de siempre. */
.review-photo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
}

.review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-photo i.fa-user-circle {
    font-size: 52px;
    color: var(--primary-blue);
}

/* Bloque de texto (nombre, estrellas y resena) a la derecha de la foto */
.review-body {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}

.review-body h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.review-body .stars {
    font-size: 12px;
    margin: 0 0 10px;
}

.review-card p {
    font-size: 13px;
    color: var(--text-dark);
}

.review-g-logo {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 20px;
}

.review-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Carrusel de "Google Reviews": mismo mecanismo que el de "Complete Property Care"
   (se usa cuando hay mas de 3 resenas, para mostrar solo 3 a la vez y rotarlas solas). */
.reviews-carousel {
    overflow: hidden;
    padding: 10px 0 30px;
    margin-bottom: 10px;
}

.reviews-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s ease;
}

.review-slide {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
    min-width: 0;
}

@media (max-width: 1024px) {
    .review-slide {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .review-slide {
        flex-basis: 100%;
    }
}

/* ----- FOOTER ----- */
.footer {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 50px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo i {
    font-size: 35px;
}

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

.footer-logo h2 {
    font-size: 20px;
    font-weight: 800;
}

.footer-logo p {
    font-size: 12px;
    margin-top: 4px;
}

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

.footer-social a {
    color: var(--white);
    font-size: 18px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: var(--accent-yellow);
}

.footer-col h3 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
}

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

.footer-col ul li a {
    color: var(--white);
    font-size: 15px;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: var(--accent-yellow);
}

.footer-col ul.contact-info li {
    color: var(--white);
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-col ul.contact-info li i {
    margin-top: 4px;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 12px;
    color: #ccc;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
    .navbar-inner {
        padding: 0 15px;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-blue);
        padding: 20px 0;
        gap: 0;
    }
    
    .nav-links.active {
        display: flex !important;
        z-index: 9999;
    }

    .nav-links > li {
        width: 100%;
        text-align: left;
    }

    .nav-links > li > a {
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        display: none;
        background-color: #011842;
    }

    .dropdown-menu li a {
        color: var(--white);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-left: 35px; /* Indent submenus */
    }
    
    .dropdown-menu li a:hover {
        background-color: rgba(255,255,255,0.05);
        color: var(--accent-yellow);
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown-menu.active {
        display: block !important;
    }

    .menu-toggle {
        display: block;
    }
    
    .hurricane-btn {
        padding: 15px;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .top-bar-inner {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-content h1,
    .hero-content h2 {
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .hero-services {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    /* Las flechas del carrusel quedaban encima del texto en movil;
       el carrusel ya rota solo y quedan los puntos para navegar */
    .carousel-control {
        display: none;
    }

    /* Bajar un poco los puntos para que no queden sobre el boton de llamada */
    .carousel-indicators {
        bottom: 8px;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .badges-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title {
        font-size: 20px;
    }

    /* Banner mas bajo en movil para que se recorte menos a los lados
       y se muestre la parte central de la imagen */
    .carousel-container {
        height: 380px;
    }

    .carousel-slide {
        background-position: center;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 300px;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .hero-services {
        font-size: 12px;
        margin-bottom: 14px;
    }

    .hero-buttons .btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ----- DYNAMIC HOVER EFFECTS ----- */
.card, .client-logo, .review-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover, .client-logo:hover, .review-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Resalte mas fuerte para las tarjetas de servicio (Complete Property Care): se levantan
   mas, crecen un poco, les aparece un borde amarillo y un resplandor azul mas notorio;
   el icono y el titulo tambien cambian de color para que el hover se note bien. */
.card:hover {
    transform: translateY(-16px) scale(1.045);
    box-shadow: 0 28px 45px rgba(2, 32, 85, 0.3);
    border-color: var(--accent-yellow);
    z-index: 2;
}

.card-icon {
    transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.card:hover .card-icon {
    background-color: var(--accent-yellow);
    color: var(--primary-blue);
    transform: translateX(-50%) scale(1.15);
}

.card-body h3 {
    transition: color 0.35s ease;
}

.card:hover .card-body h3 {
    color: var(--secondary-blue);
}

/* ----- PRELOADER ----- */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease;
}
.preloader.hide {
    opacity: 0;
    pointer-events: none;
}
.loader {
    border: 5px solid rgba(255,255,255,0.2);
    border-top: 5px solid var(--accent-yellow);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----- SCROLL REVEAL ANIMATION ----- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ----- LIGHTBOX ----- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.lightbox.active img {
    transform: scale(1);
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s;
}
.lightbox-close:hover {
    color: var(--accent-yellow);
}
.gallery-img {
    cursor: pointer;
    transition: filter 0.3s;
}
.gallery-img:hover {
    filter: brightness(0.8);
}