.carousel-container {
    width: 100%;
    margin: auto;
    left: 0;
    right: 0;
}

.carousel-item {
    margin: 10px;
    transition: transform 0.5s ease;
}

.carousel-item img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.carousel-item h3 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 1rem 1rem 0;
}

.carousel-item p {
    font-size: 1em;
    opacity: 0.7;
    margin: 0 1rem 0.5rem;
}

.slick-slide {
    transition: transform 0.5s ease;
}

.slick-center {
    transform: scale(1);
    z-index: 2;
}

.slick-center {
    opacity: 1;
}

.slick-prev,
.slick-next {
    font-size: 2em;
    color: var(--dark-color);
}

.slick-prev::before,
.slick-next::before {
    display: none;
}

.slick-prev {
    display: flex;
    position: relative;
}
.slick-arrow i {
    display: flex;
}


.slick-dots {
    display: flex !important;
    margin: 0;
    position: static !important;

}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots li button {
    font-size: 1.5em;
    padding: 10px;
}

.slick-dots li button::before {
    font-size: 1rem;
}

.slick-active button::before {
    color: var(--orange-color) !important;
}

.slick-prev,
.slick-next {
    order: 1;
    margin-left: 10px;
    position: static !important;
}

.slick-prev {
    margin-right: 10px;
}

/* Testimonial */
.carousel-item-comments {
    padding: 2rem 3rem;
    background: var(--card-color);
    border-radius: 1rem;
    min-height: 340px;
}
.carousel-item-comments p {
    font-size: 1.4rem;
    margin: 1rem 0;
}
.carousel-item-comments .name {
    font-size: 1rem;    
}
.carousel-item-comments i {
    font-size: 1.4rem;
    margin: 1rem 0 1rem;
    color: var(--orange-color);
}


.productControls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 5rem;
}
.portfolioControls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 5rem;
}
.testimonialsControls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 5rem;
}
.skillsControls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 5rem;
}

@media only screen and (max-width: 768px) {
    .carousel-item-comments {
        padding: 1rem 1rem;
        min-height: 240px;
    }
    .productControls {        
        padding: 0 2rem;
    }
    .portfolioControls {
        padding: 0 2rem;
    }
    .testimonialsControls {
        padding: 0 2rem;
    }
    .skillsControls {
        padding: 0 2rem;
    }
}