/* Slide in from left */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Slide out to left */
@keyframes slideOut {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Applied class for animation */
.menu-active {
    animation: slideIn 0.4s forwards;
}

.menu-hidden {
    animation: slideOut 0.4s forwards;
}

/*  */
.bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* transition: background-image 0.5s ease-in-out, opacity 0.5s ease-in-out; */
}

.bg-fade-in {
    animation: fade-in 1s;
}

@keyframes fade-in {
    from {
        opacity: 40%;
        transform: scale(1.05);
    }

    to {
        opacity: 100%;
        transform: scale(1);
    }
}

/* accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.accordion-content.open {
    max-height: 300px;
    /* Adjust this based on content height */
}

/* auto play */
.fade-out {
    animation: fadeOut 0.5s forwards ease-out;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* custom */
/* slider portofolio */
.swiper-button-next,
.swiper-button-prev {
    color: white !important;
}