.hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    text-align: center;
    background: linear-gradient(#0000008c,#0000008c),url('/assets/media/photos/PhotoCover_Head.webp') center/cover no-repeat
}

    .hero .brand {
        width: 140px;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,.4))
    }

.pulse {
    position: absolute;
    inset: auto 0 2rem 0;
    display: flex;
    gap: .75rem;
    justify-content: center
}

    .pulse .dot {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background: #66d9ef;
        opacity: .8;
        animation: pulse 1.8s infinite ease-in-out
    }

        .pulse .dot:nth-child(2) {
            animation-delay: .3s
        }

        .pulse .dot:nth-child(3) {
            animation-delay: .6s
        }

@keyframes pulse {
    0%, 80%, 100% {
        transform: scale(.9);
        opacity: .3
    }

    40% {
        transform: scale(1.4);
        opacity: .9
    }
}


.gallery img {
    object-fit: cover;
    height: 220px;
    border-radius: 1rem
}

.map-embed {
    min-height: 380px;
    border: 0;
    border-radius: 1rem;
    filter: grayscale(.1) contrast(1.1)
}


/* Social pill buttons */
.btn-social {
    border-radius: 9999px;
    padding: .55rem 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    color: #fff;
    border: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transition: transform .06s ease, box-shadow .2s ease, filter .2s ease, background-position .25s ease;
}

    .btn-social:active {
        transform: translateY(1px);
    }

    .btn-social:hover {
        color: #fff !important;
    }

    .btn-social i {
        font-size: 1.1rem;
        line-height: 1;
    }

/* =========================
   FACEBOOK — gradient + ping ring + glow
   ========================= */
.btn-facebook {
    /* brand gradient */
    background-image: linear-gradient(45deg, #1877F2 0%, #3B8CFF 50%, #0E5ADF 100%);
    background-size: 200% 200%;
}

    .btn-facebook:hover {
        background-position: 100% 0; /* animate gradient */
        box-shadow: 0 10px 26px rgba(24,119,242,.35);
        transform: translateY(-1px);
    }
    /* ping ring (keep your existing effect) */
    .btn-facebook::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(24,119,242,.45);
        opacity: 0;
        pointer-events: none;
    }

    .btn-facebook:hover::after {
        animation: fb-ping .7s ease-out;
    }
    /* focus ring */
    .btn-facebook:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .22rem rgba(24,119,242,.28), 0 8px 22px rgba(24,119,242,.25);
    }

@keyframes fb-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(24,119,242,.45);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 0 16px rgba(24,119,242,0);
        opacity: 0;
    }
}

/* =========================
   WHATSAPP — gradient + ping ring + glow
   ========================= */
.btn-whatsapp {
    /* brand gradient */
    background-image: linear-gradient(45deg, #25D366 0%, #1EBE5B 50%, #5FE28E 100%);
    background-size: 200% 200%;
}

    .btn-whatsapp:hover {
        background-position: 100% 0; /* animate gradient */
        box-shadow: 0 10px 26px rgba(37,211,102,.35);
        transform: translateY(-1px);
    }
    /* ping ring (keep your existing effect) */
    .btn-whatsapp::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(37,211,102,.45);
        opacity: 0;
        pointer-events: none;
    }

    .btn-whatsapp:hover::after {
        animation: wa-ping .7s ease-out;
    }
    /* focus ring */
    .btn-whatsapp:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .22rem rgba(37,211,102,.28), 0 8px 22px rgba(37,211,102,.25);
    }

@keyframes wa-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,.45);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 0 16px rgba(37,211,102,0);
        opacity: 0;
    }
}

.btn-instagram {
    background-image: linear-gradient(45deg,#F58529,#FEDA77,#DD2A7B,#8134AF,#515BD4);
    background-size: 200% 200%;
}

    .btn-instagram:hover {
        transform: translateY(-1px);
        background-position: 100% 0; /* keep the nice sweep */
        box-shadow: 0 10px 26px rgba(221,42,123,.35); /* IG pink glow */
    }
    /* ping ring */
    .btn-instagram::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(221,42,123,.45);
        opacity: 0;
        pointer-events: none;
    }

    .btn-instagram:hover::after {
        animation: ig-ping .7s ease-out;
    }
    /* focus ring */
    .btn-instagram:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .22rem rgba(221,42,123,.28), 0 8px 22px rgba(221,42,123,.25);
    }

@keyframes ig-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(221,42,123,.45);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 0 16px rgba(221,42,123,0);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-social, .btn-social::after {
        transition: none;
        animation: none;
    }
}
 
.feature-card {
    border: 2px solid rgba(30,144,255,.15);
    background: linear-gradient(180deg, rgba(30,144,255,.06), rgba(255,215,0,.06));
    transition: transform .2s ease, box-shadow .2s ease;
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }

.feature-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-blue);
    color: #fff;
}

.feature-title {
    color: var(--brand-blue);
}
 

.dark .feature-card {
    border-color: rgba(255,215,0,.18);
}

:root {
    --brand-blue: #1e90ff;
    --brand-yellow: #ffd700;
} 

/* base icon badge */
#about .feature i {
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-bottom: .5rem;
    color : #fff;
}

/* subtle yellow accent under the title (keeps things cohesive) */
#about .section-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    margin-top: .5rem;
    background: var(--brand-yellow);
    border-radius: 2px;
}


 
/* reduced-motion users still see content */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}