.bg-brown-500 { background-color: #8B4513; }
.text-brown-500 { color: #8B4513; }
.bg-brown-600 { background-color: #7B3D11; }
.hover-bg-brown-700:hover { background-color: #6B3210; }
.border-brown-500 { border-color: #8B4513; }
.bg-brown-200 { background-color: #D2B48C; }
.bg-hero {
    background-image: url('../img/background.webp');
    background-size: cover;
    background-position: center;
}
.bg-opacity-100 {
    background-color: rgb(57, 42, 35); /* Adjust opacity as needed */
}
.text-cream {
    color: #d8ccbc;
}
.bg-cream {
    background-color: #d8ccbc;
}
.active {
    color: #D2B48C; /* Example color for the active link */
}
.arrow {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation: pulse 1.5s infinite;
}
.portrait {
    position: relative;
    width: 100%;
    padding-top: 150%;
    /* This sets the aspect ratio to 2:3 for portrait */
}
.portrait img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 1s ease-out;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-right {
    animation: fadeInRight 1s ease-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

.animate-bounce {
    animation: bounce 1s ease-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.3;
    }
}