/* ==========================================================================
   Modern theme layer — sitewide visual refinement + micro-interactions.
   Additive only: does not rename or remove any existing classes, so the
   template's existing JS (sliders, fancybox, isotope, accordions) keeps
   working untouched.
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Footer: replace the busy background photo with a clean solid colour */
.footer-section {
    background-image: none !important;
    background-color: #1d231f;
}

::selection {
    background: var(--primary-color1);
    color: var(--white-color);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color1);
    outline-offset: 2px;
}

/* Elevate the sticky header once the page scrolls */
header.style-1.sticky,
header.style-2.sticky {
    box-shadow: 0 8px 30px rgba(16, 12, 8, 0.08);
    animation: modern-slide-down 0.35s ease;
}

@keyframes modern-slide-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ---- Buttons: subtle lift + glow on top of the existing fill animation ---- */
.primary-btn1,
.primary-btn2,
.primary-btn3 {
    box-shadow: 0 8px 20px rgba(255, 116, 3, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.5s;
}

.primary-btn1:hover,
.primary-btn2:hover,
.primary-btn3:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 16, 25, 0.28);
}

/* ---- Cards: consistent lift + shadow across every card variant on the site ---- */
.activity-card,
.blog-card,
.facility-card,
.feature-card,
.banner4-card,
.home4-banner-card,
.home4-testimonial-card,
.home5-activity-card,
.package-card,
.package-card4,
.teams-card,
.testimonial-card,
.testimonial-card2,
.tesimonial-card,
.faq-modern-item {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.activity-card:hover,
.blog-card:hover,
.facility-card:hover,
.feature-card:hover,
.banner4-card:hover,
.home4-banner-card:hover,
.home4-testimonial-card:hover,
.home5-activity-card:hover,
.package-card:hover,
.package-card4:hover,
.teams-card:hover,
.testimonial-card:hover,
.testimonial-card2:hover,
.tesimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(16, 12, 8, 0.12);
}

/* ---- Scroll-reveal targets (opacity/transform set inline by modern-animate.js) ---- */
.js-reveal {
    will-change: opacity, transform;
}

/* ---- Back-to-top button, injected by modern-animate.js ---- */
.back-to-top-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--title-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 9998;
    border: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, visibility 0.3s;
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: var(--primary-color1);
}

.back-to-top-btn svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 575px) {
    .back-to-top-btn {
        width: 40px;
        height: 40px;
        left: 14px;
        bottom: 14px;
    }
}

/* ---- Respect users who've asked for reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .js-reveal,
    .primary-btn1,
    .primary-btn2,
    .primary-btn3,
    .activity-card,
    .blog-card,
    .facility-card,
    .feature-card,
    .banner4-card,
    .home4-banner-card,
    .home4-testimonial-card,
    .home5-activity-card,
    .package-card,
    .package-card4,
    .teams-card,
    .testimonial-card,
    .testimonial-card2,
    .tesimonial-card,
    .faq-modern-item,
    .back-to-top-btn {
        transition: none !important;
        animation: none !important;
    }
}