section {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

section img {
    border-radius: var(--radius-medium);
    box-shadow: 0 6px 12px rgba(var(--shadow-color), 0.5);
    user-select: none;
    -webkit-user-drag: none;
    z-index: 0;
}

.section-header {
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--margin-xl);
}

.section-content {
    margin-top: var(--margin-xxl);
}

.carousel {
    position: relative;
    width: 100vw;
    height: 400px;
    padding: var(--padding-xxl) 0;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    overflow: hidden;
    gap: var(--margin-xxl);
    z-index: -1;
}

.carousel .group {
    will-change: transform;
    animation: scrolling 40s linear infinite;
    display: flex;
    gap: var(--margin-xxl);
}

.carousel .item {
    position: relative;
    min-width: 400px;
    min-height: 400px;
    border-radius: var(--radius-medium);
    background-color: rgb(var(--primary-color));
    box-shadow: 0 6px 12px rgba(var(--shadow-color), 0.5);
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.carousel:nth-child(odd) .group .item:nth-child(odd) {
    animation-name: wave-up-down;
}

.carousel:nth-child(odd) .group .item:nth-child(even) {
    animation-name: wave-down-up;
}

.carousel:nth-child(even) .group .item:nth-child(odd) {
    animation-name: wave-down-up;
}

.carousel:nth-child(even) .group .item:nth-child(even) {
    animation-name: wave-up-down;
}

@keyframes scrolling {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes wave-up-down {
    0%   { transform: translateY(-15px); }
    50%  { transform: translateY(15px); }
    100% { transform: translateY(-15px); }
}

@keyframes wave-down-up {
    0%   { transform: translateY(15px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(15px); }
}

.accordion {
    width: 100%;
    max-width: 900px;
    border-radius: var(--radius-medium);
    background-color: rgb(var(--surface-color));
    box-shadow: 0 6px 12px rgb(var(--shadow-color));
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid rgb(var(--border-color));
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    padding: var(--padding-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color .5s ease;
    cursor: pointer;

}

.accordion-item.open .accordion-header {
    background-color: rgb(var(--primary-color));

    & .accordion-title, i {
        color: white;
    }
}

.accordion-item .accordion-header:hover {
    background-color: rgb(var(--border-color));
    transition: background-color .5s ease;
    
    & .accordion-title, i {
        color: rgb(var(--text-color));
    }
}

.accordion-item.open .accordion-header:hover {
    background-color: rgb(var(--secondary-color));
    transition: background-color .5s ease;
    
    & .accordion-title, i {
        color: white;
    }
}

.accordion-header .accordion-title {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-p);
    font-family: var(--font-family);
    font-weight: normal;
    user-select: none;
}

.accordion-header i {
    right: 0;
    margin-left: var(--margin-small);
    transition: transform .5s ease;
}

.accordion-item .accordion-content {
    max-height: 0;
    padding: 0 var(--padding-medium);
    font-size: 1rem;
    font-family: var(--font-family);
    color: rgb(var(--text-color));
    border-left: 1px solid rgb(var(--primary-color));
    transition: max-height 1s linear, padding .3s ease-in-out;
    overflow: hidden;
}

.accordion-item.open .accordion-header i {
    transform: rotate(180deg);
}

.accordion-item.open .accordion-content {
    max-height: 500px;
    padding: var(--padding-medium);
    transition: max-height 1s linear, padding .3s ease-in-out;
}