:root {
    --orange: #f5821f;
    --light-orange: #fcbb4d;
    --purple: #9a5496;
}
body, .body {
    width: 100%;
    position: relative;
    font-family: 'Flexo', san-serif;
    overflow-x: hidden;
}

.fw-bold, strong, h1, h2, h3, h4, h5 {
    font-family: 'Flexo', san-serif;
    font-weight: 700;
}

.bg-orange {
    background-color: var(--orange);
}

#section1 .row {
    min-height: 500px;
}

#section1 img.logo {
    width: 300px
}

.balloon {
    background-color: var(--purple);
    padding: 15px 25px;
    border-radius: 20px;
    margin: 0 -86px 0 0;
}

@media (max-width: 767px) {
    #section1 .balloon {
        margin: 0;
    }
}

.balloon:after {
    content: "";
    margin-top: -50px;
    padding-top: 0px;
    position: relative;
    bottom: -47px;
    left: -25px;
    border-width: 50px 60px 0 0;
    border-style: solid;
    border-color: var(--purple) transparent;
    display: block;
    width: 0;
}

[class*='bg-image'] {
    background-image: url('../images/Dishwasher_14CBZG_Environment_Mademsa_Spanish.jpg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: 250px;
}

.text-purple {
    color: var(--purple)
}

#section2 .carousel-item .row.align-items-stretch {
    min-height: 400px;
    background-color: var(--orange)
}

#section2 .bg-image-01 {
    background-image: url('../images/shutterstock_1805595193.jpg');
}

#section2 .bg-image-02 {
    background-image: url('../images/shutterstock_1077202412.jpg');
}

#section2 .bg-image-03 {
    background-image: url('../images/Dishwasher_14CBZG_ZoomPanel_Mademsa_Spanish.jpg');
}

.carousel-indicators {
    right: 20%;
    top: 20px;
    left: auto;
    margin: 0;
    bottom: inherit;
}

@media (max-width: 991px) {
    .carousel-indicators {
        right: 0;
        top: 265px;
        left: 0;
        margin: 0 15%;
        bottom: inherit;
    }
}

.carousel-indicators button {
    height: 35px !important;
    width: 35px !important;
    border-radius: 99999rem;
    border: 0 !important;
    position: relative;
}

.carousel-indicators .active::after {
    content: '';
    width: 29px;
    height: 29px;
    background-color: var(--light-orange);
    border-radius: 9999rem;
    position: absolute;
    top: 3px;
    left: 3px;
}

#section3, .bg-light-orange {
    background-color: var(--light-orange);
}

#section3 .row {
    min-height: 500px;
}

#section3 .dishwasher {
    width: 650px;
    display: block;
    margin-bottom: -190px;
    z-index: 10;
    position: relative;
}

@media (min-width: 1200px) {
    #section3 .row .col-xl-5 {
        margin-left: -80px;
    }
}

.bg-purple-to-orange {
    background-image: linear-gradient(to right, var(--purple) 85%, var(--orange) 15%)
}
@media (max-width: 767px) {
    .bg-purple-to-orange {
        background-image: linear-gradient(to right, var(--purple) 95%, var(--orange) 5%)
    }
}

#section4 .row.pt-dishwasher {
    padding-top: 230px;
    min-height: 700px
}

#section4 .balloon {
    background-color: var(--orange);
    margin: 0;
}

#section4 .balloon:after {
    left: calc(100% - 35px);
    border-width: 50px 0 0 60px;
    border-color: var(--orange) transparent;
}

#section4 .img-absolute-01 {
    right: 120px;
    bottom: 0;
    width: 330px;
}

#section4 .img-absolute-02 {
    right: 0;
    bottom: 0;
    width: 520px;
}

#section4 .img-absolute-03 {
    right: 0;
    bottom: 0;
    width: 630px;
}

@media (max-width: 767px) {
    #section4 .img-absolute-01 {
        right: -100px;
    }

    #section4 .img-absolute-02 {
        right: -120px;
    }

    #section4 .img-absolute-03 {
        right: -80px;
        width: 525px;
    }
}

.z-up {
    position: relative;
    z-index: 10
}

#section4 .carousel-indicators {
    right: 0;
    top: -50px;
    left: 0;
    margin: 0 15%;
    bottom: inherit;
    column-gap: 0.5rem;
}

#section4 .row.pt-5.justify-content-center .col-lg-10 {
    max-height: 600px;
    margin-bottom: -15%;
}

#section4 .row.pt-5.justify-content-center .col-lg-10 img {
    object-fit: cover;
    object-position: center;
}

#section5 .row.pt-dishware {
    padding-top: calc(200px + 5rem);
}

@media (max-width: 767px) {
    #section5 .row.pt-dishware {
        padding-top: 7rem;
    }
}

.bg-purple {
    background-color: var(--purple)
}

footer .logo {
    width: 200px;
}