.signaturebg {
    /* background: #e0dfd9; */
    /* background: #ede8de; */
    background: #d5b9b6;
}

.spacer {
    height: 10vh;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 250px;
    padding: 40px;

    /* padding: 60px 20px; */
    /* flex-wrap: wrap; */
}

/* Image column */
.hero-images {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* min-height: 400px;
    flex: 1 1 350px; */
}

.hero-images img {
    border-radius: 6px;
    opacity: 0;
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* position: absolute; */
}

/* Small left image */
.img-left {
    position: absolute;
    /* top: -40px;
    left: -80px; */

    top: -46px;
    left: -119px;
    width: 150px;
}

/* Big center image */
.img-center {
    width: 300px;
    z-index: 2;
}

/* Small right image */
.img-right {
    position: absolute;
    /* bottom: -40px;
    right: -80px; */

    bottom: -46px;
    right: -119px;
    width: 150px;
}

/* Content */
.hero-content {
    max-width: 450px;
    /* opacity: 0; */
}

.hero-content h2 {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 15px;
}

.hero-content p {
    color: #555;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
}

.hero-content a {
    display: inline-block;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.hero-content a:hover {
    background: #444;
}

/* Animations */
@keyframes fadeInLeft1 {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInRight1 {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeUp {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-left.in-view {
    animation: fadeInLeft1 3s ease-in-out forwards;
}

.fade-right.in-view {
    animation: fadeInRight1 3s ease-in-out forwards;
}

.fade-up.in-view {
    -webkit-animation: fadeUp 3s ease-in-out forwards;
    animation: fadeUp 3s ease-in-out forwards;
}

/* Animations (center → outward) */
/* @keyframes moveLeft {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    100% {
        transform: translate(-180px, -40px);
        opacity: 1;
    }
}

@keyframes moveRight {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    100% {
        transform: translate(180px, 40px);
        opacity: 1;
    }
}

@keyframes moveUp {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    100% {
        transform: translate(0, -40px);
        opacity: 1;
    }
}

.fade-left {
    animation: moveLeft 4s ease-in-out forwards;
}

.fade-right {
    animation: moveRight 4s ease-in-out forwards;
}

.fade-up {
    animation: moveUp 4s ease-in-out forwards;
} */

/* ============================
   MOBILE STYLES
============================ */
@media (max-width: 768px) {

    .spacer {
        height: 3vh;
    }

    .hero {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        text-align: center;
    }

    .hero-images {
        min-height: auto;
        /* remove fixed height */
        flex-direction: column;
        position: relative;
    }

    .hero-images img {
        position: static;
        /* reset absolute */
        margin: 10px auto;
        /* center images */
        max-width: 70%;
        /* scale images */
    }

    .img-left,
    .img-center,
    .img-right {
        width: auto;
        /* allow scaling */
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-content h2 {
        font-size: 22px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .hero-content a {
        font-size: 14px;
        padding: 10px 18px;
    }

    .fade-left.in-view {
        animation: fadeInLeft1 2s ease-in-out forwards;
    }

    .fade-right.in-view {
        animation: fadeInRight1 2s ease-in-out forwards;
    }

    .fade-up.in-view {
        -webkit-animation: fadeUp 2s ease-in-out forwards;
        animation: fadeUp 2s ease-in-out forwards;
    }
}