#projects {
    font-size: var(--font-medium);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
}

#background-images {
    position: absolute;
    inset: 0;
    /*z-index: -1;*/
    z-index: 0;
    overflow: hidden;

    /*box-shadow: 
        inset 0px 40px 40px -20px var(--bg-color), 
        inset 0px -40px 40px -20px var(--bg-color);*/
}

.projects-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;

    filter: blur(8px);
    --webkit-filter: blur(8px);

    opacity: 0;
    transform: scale(1);

    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.projects-bg.active {
    
    opacity: 0.2;
    transform: scale(1.1);

    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.carousel {
    width: 100%;
    height: 100%;
        
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    padding-inline: calc(50% - 400px);

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-card {
    background-color: var(--card-color);
    box-shadow: 0px 0px 12px 6px rgba(21, 21, 21, 0.308);
    opacity: 0.7;

    margin: auto 32px;

    flex: 0 0 360px;
    /*height: 720px;*/
    height: 620px;
    
    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;
    
    transition: all 0.3s ease-in-out;
}

@media (orientation: portrait) {
    .carousel-card {
        /*margin: 16px 32px 32px 16px;*/
        /*height: clamp(620px, 85dvh, 720px);*/
        height: 620px;
    }
}

.carousel-card.active {
    transform: scale(1.02);
    box-shadow: 0px 0px 20px 10px rgba(21, 21, 21, 0.5);
    opacity: 1;
}

.carousel-card.always-active {
    transform: scale(1);
    box-shadow: 0px 0px 20px 10px rgba(21, 21, 21, 0.5);
    opacity: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.carousel-card.always-active.active {
    box-shadow: none;
}

.carousel-arrows {
    position: absolute;
    /*top: 50%;*/
    bottom: 0;
    transform: translateY(-50%);
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.carousel-arrow {
    background: var(--bg-color);
    border: none;
    color: var(--text-title);
    box-shadow: 0px 0px 12px 6px rgba(21, 21, 21, 0.308);

    height: 48px;
    width: 96px;
    margin: 0 32px;

    opacity: 0.8;

    cursor: pointer;
    pointer-events: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity, 0.3s ease;
}

.carousel-arrow img {
    height: 80%;
    width: auto;
    fill: var(--text-title);
}

#carousel-btn-left:disabled {
    opacity: 0.1;
    cursor: not-allowed;
    transition: opacity, 0.3s ease;
}

#carousel-btn-right:disabled {
    opacity: 0.1;
    cursor: not-allowed;
    transition: opacity, 0.3s ease;
}

.carousel-title {
    font-size: 48px;
}

.carousel-info {
    text-align: left;
    font-size: var(--font-medium);
    color: var(--text-main);
}


.carousel-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.carousel-content {
    color: var(--text-title);

    padding: 36px;
    font-size: 20px;
    /*font-weight: 400;*/
    /*text-align: justify;*/
    /*font-size: var(--font-medium);*/
    /*margin-bottom: 20px;*/
}

@media (orientation: landscape) {
    #carousel-instruction {
        display: none;
    }
}

@media (orientation: portrait) {
    #carousel-instruction {
        position: absolute;
        top: 80%;
        right: 0px;
    }

    #carousel-instruction span {
        color: var(--text-title);
        margin-right: 112px;
        /*margin-right: 16px;*/
        animation: bounce-text 3s infinite;
    }

    .carousel-instruction-arrow-one {
        position: absolute;
        right: 0;
        top: -6px;
        animation: bounce 3s infinite;
    }

    .carousel-instruction-arrow-two {
        position: absolute;
        right: 0;
        top: -6px;
        animation: bounce-fast 3s infinite;
    }

    .carousel-instruction-arrow {
        width: 28px;
        height: 28px;
        border-right: 8px solid var(--text-title);
        border-bottom: 8px solid var(--text-title);
        border-radius: 4px;
        transform: rotate(135deg);
    }

    @keyframes bounce {
        0% {
            transform: translateX(0);
            opacity: 0;
        }
        10% {
            transform: translateX(-30px);
            opacity: 0.6;
        }
        50% {
            transform: translateX(-30px);
            opacity: 0.3;
        }
        80% {
            transform: translateX(-60px);
            opacity: 0;
        }
        100% {
            transform: translateX(-60px);
            opacity: 0;
        }
    }

    @keyframes bounce-fast {
        0% {
            opacity: 0;
        }
        5% {
            transform: translateX(0);
            opacity: 0;
        }
        30% {
            transform: translateX(-30px);
            opacity: 0.6;
        }
        50% {
            transform: translateX(-30px);
            opacity: 0.6;
        }
        80% {
            transform: translateX(-60px);
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes bounce-text {
        0% {
            opacity: 0;
        }
        10% {
            opacity: 0.6;
        }
        50% {
            opacity: 0.6;
        }
        80% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
}

.card-title {
    margin: 0px 0px 0px 0px;
    font-size: 28px;
    /*font-size: var(--font-large);*/
}

.card-text {
    color: var(--text-main);
    font-size: 16px;
    /*font-size: var(--font-small);*/
}

.card-links {
    position: absolute;
    bottom: 40px;
    font-size: 16px;
    font-weight: 600;
}

.card-link {
    display: inline-flex;
    align-items: left;
    color: var(--text-main);
    /*font-size: var(--font-small);*/

    gap: 16px;
    margin-bottom: 4px;

    transition: color 0.5s ease;
}

.card-link a {
    color: var(--text-main);
    transition: color 0.5s ease;
}

.carousel-card.active .card-link,
.carousel-card.active .card-link a {
    color: #b9b9b9;
}