/* SECTION MOCK */

.heroCustomerSupport {
    height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    z-index: 2;
}

.heroCustomerSupport-container {
    width: 100%;
    position: relative;
    height: 100%;
    padding-block: min(25rem, 25vh) min(5rem, 5vh);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-desk {
    display: block;
}

.image-mb {
    display: none;
}

.heroCustomerSupport-imageBg {
    position: absolute;
    top: min(-7rem, -7vh);
    object-fit: contain;
    width: 100%;
}

.heroCustomerSupport-imageBg-image {
    z-index: 1;
    position: relative;
    mask-image: linear-gradient(transparent, black 150%);
}

.heroCustomerSupport-imageBg-background {
    width: 100vw;
    z-index: 2;
    background: linear-gradient(black 55%, transparent);
    top: min(7rem, 7vh);
    height: 20.2rem;
    position: absolute;
}

.heroCustomerSupport-tagPage {
    display: flex;
    width: 14.4rem;
    height: 4.1rem;
    border-radius: 100px;
    border: 0.05rem solid rgba(255, 255, 255, 0.57);
    backdrop-filter: blur(14.199999809265137px);
    justify-content: center;
    align-items: center;
    gap: 1.3rem;
    margin-bottom: min(2.5rem, 2.5vh);
    text-align: center;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 3rem;
    /* 166.667% */
    text-transform: capitalize;
}

.heroCustomerSupport-tagPage-icon {
    width: 0.4rem;
    display: block;
    height: 0.4rem;
}

.heroCustomerSupport-title {
    text-align: center;
    font-size: min(10rem, 10vh);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    /* 100% */
    text-transform: capitalize;
    margin-bottom: min(6rem, 5vh);
    width: min(85.5rem, 85.5vh);
}

.heroCustomerSupport-button {
    border-radius: 10rem;
}

.heroCustomerSupport-bg {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14.199999809265137px);
}

.heroCustomerSupport-containerInput {
    width: min(46.6rem, 46.6vh);
    height: 5.1rem;
    flex-shrink: 0;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroCustomerSupport-containerTextarea {
    width: min(95.2rem, 95.2vh);
    height: 16.9rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    border-radius: 3rem;
    align-items: center;
}

.heroCustomerSupport-containerTextarea-textarea {
    width: 98%;
    height: 98%;
    border-radius: 3rem;
    background: transparent;
    padding-left: 0.75rem;
    padding-top: 1rem;
    border: none;
    font-size: 2rem;
    font-style: normal;
    resize: none;
    font-weight: 500;
    outline: none;
    line-height: 3rem;
    /* 150% */
}

.heroCustomerSupport-containerTextarea-textarea::placeholder {
    color: #fff;
    opacity: 0.5;
}

.heroCustomerSupport-containerInput-input::placeholder {
    color: #fff;
    opacity: 0.5;
}

.heroCustomerSupport-containerForm {
    display: flex;
    gap: 2rem;
    justify-content: start;
    align-items: start;
}

.heroCustomerSupport-containerInput-input {
    width: 92%;
    height: 92%;
    outline: none;
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 3rem;
    /* 150% */
}

.heroCustomerSupport-form {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: min(2rem, 2vh);
    width: min(95.2rem, 95.2vh);
    flex-wrap: wrap;
    height: 38.2rem;
    flex-shrink: 0;
    margin-bottom: 2rem;
}

@media screen and (orientation: portrait) {
    .heroCustomerSupport {
        height: fit-content;
    }
    .heroCustomerSupport-containerForm {
        flex-wrap: wrap;
        width: 100%;
        gap: 1.5rem;
    }
    .heroCustomerSupport-container {
        padding: min(10.4rem, 10.4vh) min(3.8rem, 3.8vh) min(10.4rem, 10.4vh) min(5rem, 5vh);
    }
    .heroCustomerSupport-containerInput {
        width: min(34.2rem, 34.2vh);
        height: min(4.1rem, 4.1vh);
    }
    .heroCustomerSupport-containerInput-input {
        font-size: min(1.4rem, 1.4vh);
    }
    .heroCustomerSupport-title {
        font-size: min(4rem, 4vh);
        width: min(32.6rem, 32.6vh);
    }
    .heroCustomerSupport-tagPage {
        width: min(10.4rem, 10.4vh);
        height: min(3.1rem, 3.1vh);
        font-size: min(1.2rem, 1.2vh);
        gap: 0.8rem;
        flex-shrink: 0;
    }
    .heroCustomerSupport-containerTextarea {
        width: min(34.2rem, 34.2vh);
        height: min(18.6rem, 18.6vh);
        border-radius: 2rem;
        flex-shrink: 0;
    }
    .heroCustomerSupport-containerTextarea-textarea {
        font-size: min(1.4rem, 1.4vh);
    }
    .heroCustomerSupport-form {
        width: 100%;
        height: fit-content;
        align-items: center;
        flex-direction: column;
    }
    .heroCustomerSupport-imageBg-background {
        height: 10rem;
        background: linear-gradient(black 0%, transparent);
        top: min(0rem, 0vh);
    }
    .heroCustomerSupport-imageBg {
        top: min(-7rem, -7vh);
        height: 20rem;
    }
    .heroCustomerSupport-imageBg-image {
        object-fit: fill;
    }
    .heroCustomerSupport-button {
        width: min(19.7rem, 19.7vh);
        flex-shrink: 0;
    }
    .image-desk {
        display: none;
    }
    .image-mb {
        display: block;
    }
    .heroCustomerSupport__button--container {
        flex-grow: 0.8;
    }
    .heroCustomerSupport__button--blur {
        margin-left: -0.7rem;
    }
}

[data-fade-element] {
    opacity: 0;
}