.mobile-slider {
    display: none;
}

.online-control__form-checkbox-label_mobile {
    display: none;
}

@media screen and (max-width: 375px) {
    /* || Global classes */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

    .title_h1 {
        --font-size: 23px;
    }

    .title_h2 {
        --font-size: 22px;
    }

    .title_h3 {
        --font-size: 14px;
    }

    .hidden_mobile {
        display: none;
    }

    .button {
        font-size: 13px;
    }

    .site-bar .container {
        display: flex;
        justify-content: space-between;
    }

    .site-bar__logo {
        margin: 0;
    }

    .site-bar__nav,
    .site-bar__phone-button {
        display: none;
    }

    .site-bar__phone-link {
        color: var(--color-white);
        border: none;
    }

    .mobile-slider {
        display: block;
        position: relative;
    }

    .mobile-slider__arrow {
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        width: 36px;
        height: 36px;
        background: var(--color-primary) center no-repeat;
        border-radius: 100px;
        /* Is there a digital pointer in mobile devices? There isn't one usually, but there might be! */
        cursor: pointer;
    }

    .mobile-slider__arrow-left {
        left: 14px;
        background-image: url(../icons/slider-arrow-left.svg);
    }

    .mobile-slider__arrow-right {
        right: 14px;
        background-image: url(../icons/slider-arrow-right.svg);
    }

    .mobile-slider__image {
        display: block;
        width: 100%;
    }
    /* || /Global classes */

    /* || Hero */
    .hero {
        height: 476px;
    }

    .hero__paragraph {
        font-size: 14px;
        line-height: 135.8%;
    }

    .hero__buttons {
        flex-direction: column;
        gap: 26px;
        margin-top: 54px;
    }

    .hero__button {
        min-width: 100%;
        width: 100%;
    }

    .hero__button_primary {
        box-shadow: none;
    }
    /* || /Hero */

    /* || Projects */
    .projects {
        height: 785px;
    }

    .projects .container {
        flex-direction: column;
        align-items: center;
    }

    .projects__flexbox {
        width: 100%;
    }
    
    .projects__title {
        margin: 0;
    }
    
    .projects__title,
    .projects__paragraph {
        text-align: center;
    }
    
    .projects__paragraph {
        font-size: 11px;
        max-width: 100%;
        line-height: 158.5%;
        margin-top: 37px;
    }

    .projects__slider-pagination,
    .projects__slider-tabs {
        display: none;
    }

    .projects__project-info {
        width: 291px;
        column-gap: 61px;
        row-gap: 27px;
        margin-top: 36px;
    }

    .projects__project-info-value {
        font-size: 11px;
        margin-top: 11px;
    }

    .projects__slider-image {
        display: none;
    }

    .projects__mobile-slider {
        margin-top: 75px;
    }
    /* || /Projects */

    /* || Online control */
    .online-control {
        margin: 0;
        background: var(--color-black);
        color: var(--color-white);
        position: relative;
        height: 826px;
    }

    .online-control__title {
        font-size: 22px;
    }

    .online-control__video-image {
        width: 100%;
    }

    .online-control__video-play-button {
        width: 37px;
        height: 37px;
    }

    .online-control__video-play-icon {
        width: 12px;
        height: 12px;
        /* For some reason, without translate the icon looks a bit off? Very weird. */
        translate: 0 0;
    }

    .online-control__hr {
        margin-top: 28px;
    }

    .online-control__paragraph {
        margin-top: 21px;
        font-size: 11px;
        line-height: 169.8%;
        color: var(--color-white);
    }

    .online-control__paragraph-br {
        display: none;
    }

    .online-control__form {
        width: 100%;
    }

    .online-control__form-row,
    .online-control__form-inputs {
        flex-direction: column;
        width: 100%;
    }

    .online-control__form-row {
        gap: 0;
    }

    .online-control__form-inputs {
        gap: 63px;
    }

    .online-control__form-input-label {
        color: var(--color-white-50);
    }

    .online-control__form-input,
    .online-control__form-input::placeholder {
        color: var(--color-white);
    }

    .online-control__form-input {
        width: 100%;
        background: inherit;
        border-bottom-color: var(--color-lightergray);
    }

    .online-control__form-checkbox-label_mobile {
        display: block;
        margin-top: 26px;
        color: var(--color-white);
    }

    .online-control__form-submit {
        border-radius: 0;
        /* For some reason, width: 100% made it the width of the viewport, not the width of the parent element. */
        width: 90%;
        box-shadow: none;
        position: absolute;
        bottom: calc(-49px / 2);
        padding: 0;
    }
    /* || /Online control */

    /* || Types of repair */
    .types-of-repair {
        margin-top: 83px;
        height: unset;
    }

    .types-of-repair__title {
        font-size: 22px;
    }

    .types-of-repair__icon {
        margin-top: 17px;
    }

    .types-of-repair__list {
        margin-top: 40px;
        flex-direction: column;
        gap: 59px;
    }

    .types-of-repair__item {
        width: 100%;
    }

    .types-of-repair__item-image {
        width: 100%;
    }

    .types-of-repair__item-description {
        margin: -145px 0 0 0;
        box-shadow: 5px 10px 20px var(--color-black-05);
        width: 270px;
        padding-bottom: 40px;
    }

    .types-of-repair__item-price {
        margin-left: 0;
        margin-top: -20px;
        width: 190px;
        height: 40px;
        font-size: 15px;
    }
    /* || /Types of repair */

    /* || We realize */
    .we-realize {
        background: var(--color-transparent);
        margin-top: 55px;
        height: unset;
    }

    .we-realize .container {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }

    .we-realize__background {
        display: none;
    }

    .we-realize__images,
    .we-realize__tabs {
        display: none;
    }

    .we-realize__title {
        text-align: center;
        margin: 0;
    }

    .we-realize__mobile-slider {
        margin-top: 39px;
        position: relative;
        z-index: 2;
    }
    /* || /We realize */

    /* || Any questions */
    .any-questions {
        background: var(--color-black);
        height: unset;
        margin-top: 0;
        margin-top: -121px;
    }

    .any-questions .container {
        padding-top: 121px;
        padding-bottom: 49px;
    }

    .any-questions__form-background,
    .any-questions__background {
        display: none;
    }

    .any-questions__form {
        background-color: var(--color-black);
        width: 100%;
        margin-top: 0;
        padding-top: 52px;
        height: fit-content; /* ! */
        align-items: flex-start;
        gap: 0;
    }

    .any-questions__form-title {
        align-self: center; /* Surprised this actually works! */
    }

    .any-questions__form-inputs-grid {
        display: flex; /* ! */
        flex-direction: column;
        width: 100%;
        gap: 63px;
        justify-content: start;
        margin-top: 55px;
    }

    .any-questions__form-input {
        background-color: var(--color-black);
        border-bottom-color: var(--color-lightergray);
        width: 100%;
    }

    .any-questions__form-checkbox-label {
        margin-top: 21px;
    }

    .any-questions__form-submit {
        margin-top: 67px;
        width: 100%;
        /* 
        To get the below box-shadow from Figma, I had to:
        Copy the element's code as CSS (already annoying)
        Get a whole dumpload of this:
        (comment) Rectangle 6.2 
        position: absolute;
        left: 4.8%;
        right: 4.53%;
        top: 89.15%;
        bottom: 9.89%;

        background: #E3B873;
        box-shadow: 0px 10px 20px rgba(227, 184, 115, 0.1);

        Delete everything else except box-shadow
        Change the box-shadow color to a variable (not a hardcoded value)
        */
        box-shadow: 0px 10px 20px var(--color-primary-10);
    }

    .any-questions__contacts,
    .any-questions__text-contacts {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .any-questions__social {
        width: 39px;
        height: 39px;
    }

    .any-questions__social-image {
        scale: 1.3;
    }

    .any-questions__location-map {
        height: 255px;
        width: 100%;
        object-fit: cover;
        order: -1;
    }
    /* || /Any questions */

    /* Hiding some sections that do not exist in the mobile layout */
    .request,
    .our-clients,
    .footer {
        display: none;
    }
}