/* Landing
******************************************************************************* */
.section-py {
    padding-block: 6.25rem;
    padding-inline: 0;
}

@media (max-width: 1199.98px) {
    .section-py {
        padding-block: 5rem;
        padding-inline: 0;
    }
}

@media (max-width: 767.98px) {
    .section-py {
        padding-block: 3rem;
        padding-inline: 0;
    }
}

@keyframes scroll {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}


/* Tribute Hero */
/* Tribute Hero */
/*.tribute-hero {*/
/*    position: relative;*/
/*    color: #f9fafb;*/
/*}*/

/*!* Background Image *!*/
/*.hero-bg {*/
/*    background-image: url('/assets/img/hero-bg1.jpeg'); !* adjust path if needed *!*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    z-index: 0;*/
/*}*/

/* Dark overlay for contrast */
/*.hero-bg::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: linear-gradient(*/
/*        to bottom,*/
/*        rgba(0, 0, 0, 0.65),*/
/*        rgba(0, 0, 0, 0.78)*/
/*    );*/
/*    z-index: 1;*/
/*}*/


/* Tribute Hero */
.tribute-hero {
    position: relative;
    color: #3f3a36;
}

/* Background Image */
.hero-bg {
    background-image: url('/assets/img/hero-bg1.jpeg'); /* update path if needed */
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Ensure content stays above background */
.tribute-hero .container {
    position: relative;
    z-index: 1;
}

/* Headline */
.tribute-hero h1 {
    color: #3b2f2f; /* warm charcoal */
}

/* Name highlight */
.tribute-hero h1 .text-primary {
    color: #c79a1e !important; /* elegant gold */
}

/* Body text */
.tribute-hero .fs-4,
.tribute-hero .fs-lg-3 {
    line-height: 1.7;
}

/* Decorative line */
.decorative-line {
    background: #c79a1e;
}

/* Image styling */
.hero-image-wrapper {
    width: 400px;
    height: 400px;
    position: relative;
}
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border: 6px solid #ffffff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
}

/* Image ring */
.hero-image-ring {
    border: 2px solid rgba(199, 154, 30, 0.45);
}

/* Buttons */
.btn-primary {
    background-color: #c79a1e;
    border-color: #c79a1e;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #b58918;
    border-color: #b58918;
}

/* Scroll Indicator */
.scroll-indicator .mouse {
    border: 2px solid #c79a1e;
}

.scroll-indicator .wheel {
    background: #c79a1e;
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-image-wrapper {
        width: 220px;
        height: 220px;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .tribute-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .display-5 {
        font-size: 2rem;
    }

    .fs-lg-3 {
        font-size: 1.1rem;
    }

    .layout-navbar {
        padding-bottom: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hero-image-wrapper {
        width: 180px;
        height: 180px;
        margin-top: 2rem;
    }
    .tribute-hero {
        padding-top: 3rem;
    }
}