/* Section 1 */
.section-1 {
    width: 100vw;
    height: fit-content;
    margin-top: calc(var(--large) + 4rem);
    display: grid;
    justify-content: center;
}

.section-1 > div {
    width: var(--responsive-width);
    max-width: 1440px;
    height: fit-content;
    box-shadow: var(--shadow-light);
    background-color: var(--tertiary-color);
    border-radius: 3rem;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    position: relative;
}

.section-1 > div > div {
    display: flex;
    flex-direction: row;
    position: relative;
}

.blue-left-container {
    height: fit-content;
    position: relative;
    grid-row: 1;
}

/* Section 1 Content */
.blue-left-container > header {
    margin: calc(1.5rem + 1rem - 1rem) 1.5rem 1.5rem 1.5rem;
    display: grid;
    align-items: start;
    gap: var(--regular);
    align-self: center;
    justify-self: center;
}

.blue-left-container > header > div {
    height: fit-content;
}

/* Section 1 Content */
.blue-left-container-bottom {
    width: calc(100% - 1rem - 1rem);
    height: fit-content;
    justify-self: center;
    align-self: flex-start;
    grid-row: 3;
    margin-bottom: var(--regular);
}

.blue-left-top {
    width: 30%;
    height: calc(100% - var(--regular));
    align-self: start;
    background-color: var(--primary-color-lighter);
    border-radius: calc(4rem - var(--regular)) 0 0 0;
    position: absolute;
    right: 50%;
    z-index: 0;
    display: none;
}

/* Radius Inverted Left */
.blue-left-top > div:nth-child(1) {
    width: calc(4rem - var(--regular));
    height: calc(4rem - var(--regular));
    background-color: var(--primary-color-lighter);
    position: absolute;
    bottom: 0;
    left: calc(-4rem + var(--regular));
    display: none;
}

.blue-left-top > div::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--tertiary-color);
    position: absolute;
    border-bottom-right-radius: 100%;
}
/* Radius Inverted Left */
/* Radius Inverted Right */
.blue-left-top > div:nth-child(2) {
    width: calc(4rem - var(--regular));
    height: calc(4rem - var(--regular));
    background-color: var(--primary-color-lighter);
    position: absolute;
    right: 0;
    top: calc(-4rem + var(--regular));
}
/* Radius Inverted Right */

.blue-left-bottom {
    width: 100%;
    height: fit-content;
    align-self: flex-start;
    background-color: var(--primary-color-lighter);
    border-radius: 0 0 calc(3rem - var(--regular)) calc(3rem - var(--regular));
    display: grid;
    align-items: center;
    justify-self: end;
    position: relative;
}

.blue-left-bottom > .hero-testimonial-container {
    overflow: hidden;
    width: calc(100% - 2rem);
    height: fit-content;
    background-color: var(--tertiary-color);
    justify-self: center;
    border-radius: calc(3rem - 1rem - 1rem);
    margin: 2rem 0 1rem 0;
}

.blue-left-bottom > .hero-testimonial-container > div {
    /* height: calc(100% - var(--regular) - var(--regular)); */
    display: grid;
    height: 100%;
    transition: var(--cubic-bezier) 700ms;
    grid-template-rows: repeat(var(--item-count), 1fr);
}

.blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial > div {
    width: calc(100% - var(--regular) - var(--regular));
    height: fit-content;
    display: flex;
    flex-direction: column;
    padding: var(--regular);
    gap: var(--small);
    
    
    
    
    
    display: none;
}

.blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial > div > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--x-small);
}

.blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial > div > div:nth-child(1) {
    gap: var(--xxx-small);
}

.blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial > div > div:nth-child(2) {
    gap: var(--xx-small);
}

.blue-left-bottom .hero-testimonial > div > div > div {
    display: flex;
    flex-direction: column;
    gap: var(--xxx-small);
}

.blue-right-container {
    width: calc(100% - 1rem - 1rem);
    background-color: var(--primary-color-lighter);
    border-radius: calc(3rem - 1rem) calc(3rem - 1rem) 0 0;
    position: relative;
    align-self: end;
    grid-row: 2;
    height: fit-content;
    justify-self: center;
    padding-top: var(--medium);
}

.blue-right-container > div {
    width: calc(100%);
    height: fit-content;
    top: var(--regular);
    display: grid;
    grid-template-columns: auto auto;
    left: var(--medium);
    top: var(--medium);
}

.blue-right-container > div > img:nth-child(1) {
    width: 80%;
    height: auto;
    justify-self: center;
}

.blue-right-container > div > img:nth-child(2) {
    width: 130%;
    height: auto;
    transform: rotate(107.2deg) scaleX(-1);
    align-self: center;
    position: relative;
    right: 10%;
}
/* Section 1 */
/* Section 1 Responsive */
@media (min-width: 600px) {
    .section-1 > div {
        border-radius: 3rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .blue-left-container-bottom {
        grid-row: 2;
        grid-column: span 2;
        width: calc(100% - 1rem - 1rem);
        justify-self: center;
        margin-bottom: var(--regular);
    }

    .blue-left-container {
        grid-row: 1;
    }

    .blue-left-container > header {
        margin: calc(1.5rem + var(--regular) - var(--x-small)) 1.5rem 1.5rem 1.5rem;
        gap: var(--regular);
    }

    .blue-left-top {
        display: block;
    }
        
    .blue-left-bottom {
        border-radius: calc(3rem - 1rem) 0 calc(3rem - 1rem) calc(3rem - 1rem);
    }

    .blue-right-container {
        grid-row: 1;
        padding-top: 0;
        width: calc(100% - 1rem);
        height: calc(100% - var(--regular));
        justify-self: start;
    }

    .blue-left-bottom > .hero-testimonial-container {
        width: calc(100% - 1.5rem - 1.5rem);
        border-radius: calc(3rem - 1rem - 1.5rem);
        margin: 1.5rem 0 1.5rem 0;
    }

    .blue-right-container > div {
        display: grid;
        position: absolute;
        grid-template-columns: auto;
        left: var(--medium);
        top: var(--medium);
        height: 100%;
    }

    .blue-right-container > div > img:nth-child(1) {
        width: 75%;
        height: auto;
        justify-self: start;
        position: absolute;
    }

    .blue-right-container > div > img:nth-child(2) {
        width: 80%;
        min-width: 20rem;
        height: auto;
        bottom: 6rem;
        right: -3rem;
        position: absolute;
    }

    .blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial {
        width: 100%;
    }
}

@media (min-width: 800px) {
    .section-1 > div {
        border-radius: 4rem;
    }

    .blue-left-container {
        margin-left: var(--regular);
        border-radius: calc(4rem - var(--regular)) calc(4rem - var(--regular)) 0 0;
    }

    .blue-left-container > header {
        margin: calc(2rem + var(--regular) - var(--x-small)) 2rem 2rem 2rem;
        gap: var(--regular);
    }

    .blue-right-container {
        width: calc(100% - var(--regular));
        border-radius: calc(4rem - var(--regular)) calc(4rem - var(--regular)) 0 0;
    }

    .blue-right-container > div > img:nth-child(1) {
        width: 50%;
        min-width: 14rem;
        height: auto;
        justify-self: start;
    }

    .blue-right-container > div > img:nth-child(2) {
        width: 90%;
        min-width: 20rem;
        height: auto;
        bottom: 6rem;
        right: -3rem;
    }

    .blue-left-bottom {
        border-radius: calc(4rem - var(--regular)) 0 calc(4rem - var(--regular)) calc(4rem - var(--regular));
    }

    .blue-left-bottom > .hero-testimonial-container {
        width: calc(100% - 4rem);
        border-radius: calc(4rem - var(--regular) - 2rem);
        margin: 2rem 0 2rem 0;
    }

    .blue-left-container-bottom {
        width: calc(100% - var(--regular) - var(--regular));
    }
}
    
@media (min-width: 1024px) {
    .section-1 {
        margin-top: calc(var(--regular) + var(--large) + 4rem);
    }

    .blue-left-bottom {
        border-radius: calc(4rem - var(--regular)) 0 0 calc(4rem - var(--regular));
    }

    .blue-left-container-bottom {
        grid-row: 2;
        grid-column: 1;
    }

    .blue-left-container {
        grid-row: 1;
    }

    .blue-right-container {
        grid-row: 1 / span 2;
        height: calc(100% - var(--regular) - var(--regular));
        align-self: center;
        border-radius: calc(4rem - var(--regular)) calc(4rem - var(--regular)) calc(4rem - var(--regular)) 0;
    }

    .blue-left-container-bottom {
        width: calc(100% - var(--regular));
        justify-self: end;
    }

    .blue-left-container > header {
        align-self: center;
        position: relative;
        z-index: 1;
    }

    .blue-left-top {
        right: 0;
        height: calc((4rem - var(--regular)) * 2);
        transform: translateY(-100%);
    }

    .blue-left-top > div:nth-child(1) {
        display: block;
    }

    .blue-left-bottom > .hero-testimonial-container {
        width: calc(100% - 2rem);
        justify-self: end;
    }

    .blue-right-container > div {
        top: var(--large);
        left: var(--large);
    }
    
    .blue-right-container > div > img:nth-child(1) {
        width: auto;
        height: 45%;
        justify-self: start;
    }
    
    .blue-right-container > div > img:nth-child(2) {
        width: auto;
        height: 40%;
        bottom: 8rem;
        right: -7rem;
    }
}

@media (min-width: 1280px) {
    .blue-right-container > div > img:nth-child(1) {
        width: auto;
        height: 55%;
        justify-self: start;
    }
    
    .blue-right-container > div > img:nth-child(2) {
        width: auto;
        height: 50%;
        bottom: 8rem;
        right: -7rem;
    }

    .blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial > div > div:nth-child(1) {
        gap: var(--xxx-small);
    }
}
/* Section 1 Responsive */

/* Section 2 */
.section-2 {
    width: 100vw;
    height: fit-content;
    display: grid;
    justify-content: center;
    align-items: end;
}

.section-2 > div {
    width: var(--responsive-width);
    max-width: 1440px;
    height: fit-content;
    padding-top: calc(var(--regular) + 4rem);
    display: grid;
    justify-content: center;
    align-items: end;
}

.section-2 > div > div {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0;
}

.section-2 > div > div > header {
    height: fit-content;
}

.section-2 > div > div > header > button {
    width: fit-content;
}

.section-2 > div > div > div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-2 > div > div > div > img {
    max-width: 30rem;
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.image-dark-mode {
    display: none;
}

.image-light-mode {
    display: block;
}

[data-theme="dark"] .image-dark-mode {
    display: block;
}

[data-theme="dark"] .image-light-mode {
    display: none;
}

.section-2 > div > div > div > h1 {
    font-size: var(--large);
    text-align: right;
}

.section-2 > div > div > div > h1:nth-child(2) {
    text-align: left;
}
/* Section 2 */

/* Section 2 Responsive */
@media (min-width: 600px) {
    .section-2 > div > div > div > h1 {
        font-size: var(--x-large);
    }
}

@media (min-width: 800px) {
    .section-2 > div > div {
        display: grid;
        grid-template-columns: 5fr 4fr;
        gap: var(--large);
    }

    .section-2 > div {
        padding-top: calc(var(--regular) + var(--regular) + 4rem);
    }
}

@media (min-width: 1024px) {
    .section-2 > div > div > div {
        gap: var(--x-large);
    }


    .section-2 > div > div > div > h1:nth-child(2) {
        text-align: right;
    }
}
    
@media (min-width: 1280px) {
        .section-2 > div > div > div > h1 {
            font-size: var(--xx-large);
        }

        .blue-left-bottom > .hero-testimonial-container > div > .hero-testimonial > div > div:nth-child(1) {
            gap: var(--xxx-small);
        }

}
/* Section 2 Responsive */

/* Section 3 */
.section-3 {
    width: 100vw;
    height: fit-content;
    display: grid;
    justify-content: center;
    align-items: end;
}

.section-3 > div {
    width: var(--responsive-width);
    max-width: 1440px;
    height: fit-content;
    padding-top: calc(var(--regular) + var(--regular) + 4rem);
    display: grid;
    justify-content: center;
    align-items: end;
    gap: var(--medium);
}

.section-3 > div > h1 {
    width: 100%;
    text-align: center;
}

.section-3 .products-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--regular);
}

.product {
    width: calc(100% - var(--medium) - var(--medium));
    height: calc(100% - var(--medium) - var(--medium));
    box-shadow: var(--shadow-light);
    display: flex;
    flex-direction: column;
    background-color: var(--tertiary-color);
    padding: var(--medium);
    gap: var(--small);
    justify-content: space-between;
}

.product > img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: var(--xxx-large);
    justify-self: center;
    object-fit: contain;
}

.product > div {
    display: grid;
    gap: var(--regular);
}

.product > div > div {
    display: grid;
    gap: var(--x-small);
}
/* Section 3 */
/* Section 3 Responsive */
@media (min-width: 600px) {
    .section-3 .products-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .section-3 .products-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Section 3 Responsive */

/* Section 4 */
.section-4 {
    width: 100vw;
    height: fit-content;
    display: grid;
    justify-content: center;
    align-items: end;
    overflow: hidden;
}

.section-4 > div {
    width: var(--responsive-width);
    max-width: 1440px;
    height: fit-content;
    padding-top: calc(var(--regular) + var(--regular) + 4rem);
    padding-bottom: var(--large);
    display: grid;
    justify-content: center;
    align-items: end;
    gap: var(--medium);
}

.section-4 > div > h1 {
    width: var(--responsive-width);
    max-width: 1440px;
    text-align: center;
}

.testimonial-container-wrapper {
    width: var(--responsive-width);
    max-width: 1440px;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--regular);
}

.testimonial-container {
    width: calc(300% + (3 * 2rem));
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* position: absolute; */
    gap: 0;
    transition: 600ms var(--cubic-bezier-fast);
}

.testimonial {
    display: none;
    
    
    
    flex-direction: column;
    gap: var(--small);
    background-color: var(--tertiary-color);
    box-shadow: var(--shadow-light);
    padding: var(--medium);
    border-radius: 2rem;
    margin-right: 2rem;
}

.testimonial-highlight {
    grid-column: 1;
    grid-row: span 2;
}

.testimonial > header {
    display: flex;
    align-items: center;
}

.testimonial > header > div {
    display: grid;
    gap: var(--xxx-small);
}

.testimonial > header > div:nth-child(2) {
    display: grid;
    gap: var(--x-small);
}

.testimonial-slider-buttons {
    display: flex;
    gap: var(--small);
    justify-content: right;
}

.testimonial-slider-buttons > button {
    height: fit-content;
    aspect-ratio: 1 / 1;
    border: 0;
    background-color: var(--yellow);
    border-radius: 50%;
    display: grid;
    align-items: center;
    cursor: pointer;
}

.testimonial-slider-buttons > button:hover {
    background-color: var(--yellow-dark);
}

.testimonial-slider-button-next {
    padding: var(--small) calc(var(--small) - 0.1rem) var(--small) calc(var(--small) + 0.1rem) !important;
}

.testimonial-slider-button-prev {
    padding: var(--small) calc(var(--small) + 0.1rem) var(--small) calc(var(--small) - 0.1rem) !important;
}

.testimonial-slider-button-next svg {
    width: var(--medium);
    transform: rotate(-90deg);
}

.testimonial-slider-button-prev svg {
    width: var(--medium);
    transform: rotate(90deg);
}

/* Section 4 */
/* Section 4 Responsive */
@media (min-width: 800px) {
    .testimonial-container {
        width: 100%;
        display: grid;
        gap: var(--regular);
        grid-template-columns: 2fr 3fr;
        position: unset;
    }

    .testimonial {
        margin-right: 0;
    }

    .testimonial-slider-buttons {
        display: none;
    }
}

@media (min-width: 1024px) {
    .testimonial-container {
        grid-template-columns: 2fr 5fr;
    }
}
    
@media (min-width: 1280px) {
    .testimonial {
        border-radius: 2rem;
    }
}
/* Section 4 Responsive */