/* lg <= Extra large (xl) */
@media (max-width: 1199.98px) {
    * {
        scrollbar-width: 0;
    }

    *::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* xs <= Small (sm) */
@media (max-width: 575.98px) {
    :root {
        --section-padding: 40rem;
    }

    html {
        font-size: calc(1vw / 5);
    }

    .scroll-down {
        position: static;
        transform: none;
    }

    .header__contact-block {
        top: 44rem;
    }

    .header.hidden,
    .header.fixed {
        transform: translateY(-55rem);
    }

    .hero__grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .hero__grid>* {
        width: 100%;
    }

    .hero__content {
        padding-bottom: var(--section-padding);
    }

    .hero__left {
        margin: calc(var(--section-padding) * 2) 0 var(--section-padding);
    }

    .hero__quote {
        text-align: left;
        margin-bottom: var(--section-padding);
    }

    .heading-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .heading-wrap:has(p) h2 {
        width: 100%;
        order: -1;
    }

    .heading-wrap>*:not(:first-child):last-child {
        text-align: left;
        margin-left: 0;
    }

    .process__item-wrap {
        padding-left: 10%;
    }

    .process-work__wrap {
        flex-direction: column;
        gap: 0;
    }

    .process-work__left {
        width: 100%;
    }

    .process-work__icon {
        display: none;
    }

    .process-work__right {
        padding: var(--section-padding) calc(var(--section-padding)/2);
    }

    .process-work__right::before {
        width: 100%;
        height: 100%;
        top: 0;
    }

    .projects__footer {
        padding-right: 0;
    }

    .projects__gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects__item:nth-child(1),
    .projects__item:nth-child(2) {
        grid-column: span 1;
        grid-row: span 1;
        height: 262rem;
    }

    .projects__item:nth-child(3) {
        grid-column: span 1;
    }

    .project__img {
        display: none;
    }

    .project__content .project-item,
    .project__wrapper:has(.project__img) .project-item {
        width: 100%;
    }

    .project-process__grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .projects__grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .gallery__grid {
        gap: var(--gap);
        grid-template-columns: repeat(1, 1fr);
    }

    .gallery__item:nth-child(4n+1) {
        grid-column: span 1;
        height: 510rem;
    }

    .steps__grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: repeat(1, 1fr);
    }

    .steps__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .preview__content {
        min-height: 500rem;
    }

    .contact__left {
        flex-direction: column;
    }

    .contact__wrapper {
        flex-direction: column;
    }

    .contact__right {
        width: 100%;
        flex-direction: column;
    }

    .contact__info {
        margin-top: var(--section-padding);
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .contact__block:first-child {
        display: none;
    }

    .contact__form {
        width: 80%;
    }

    .contact__form-wrap {
        width: 100%;
    }

    .contact__form-tags {
        flex-direction: column;
    }

    .form-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer__top-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__list {
        margin-top: calc(var(--section-padding)/2);
        margin-left: 0;
    }

    .footer__bottom-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .interactive-room__content .heading-wrap h2,
    .interactive-room__content .all__link {
        font-size: 16rem;
    }

}

/* hover */
@media not (hover: none) {

    a:hover,
    a:hover .icon {
        color: var(--accent);
        fill: var(--accent);
    }

    .process__item-wrap:hover::before {
        transform: translateY(-50%) rotate(45deg);
    }

    .btn:hover {
        background-color: var(--accent);
        color: #fff;
    }

    .steps__item:hover {
        background-color: var(--accent);
        color: #fff;
    }

    .steps__item:hover::after {
        color: #fff;
    }

    .steps__item:hover .steps__desc {
        color: #fff;
    }
}