/* MOBILE */
@media (max-width: 991.98px) {
    .cursor {
        display: none !important;
    }

    .curtain {
        position: relative;
    }

    .footer-inner {
        position: relative;
    }

    .gallery-section,
    .hero,
    .footer-info,
    footer,
    .footer-inner {
        height: unset;
    }

    .projects-section {
        min-height: unset;
        padding-left: 0;
        padding-right: 0;
    }

    .projects-section .button-container,
    .projects-section .project-list,
    .projects-section .emphasis-title {
        padding-left: var(--standard-padding);
        padding-right: var(--standard-padding);
    }

    .projects-section .category-list {
        overflow-x: scroll;
        padding: 0.5em 0 0.5em var(--standard-padding);
        margin-bottom: 1.5em;
        margin-top: 1em;

        /* Hide scrollbars */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    .projects-section .category-list::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .category-button {
        overflow: visible;
    }

    .category-button .collapsible-text {
        white-space: nowrap;
    }

    .gallery-section {
        grid-template-columns: repeat(3, 1fr);
        position: relative !important;
    }

    .fullscreen-video-wrapper {
        position: relative !important;
    }

    .max-height-block {
        height: auto;
    }

    .top-btn.collapsible-button .collapsible-text {
        width: 0 !important;
        opacity: 0 !important;
    }

    .top-btn.collapsible-button {
        width: 56px !important;
        /*position: absolute;*/
    }

    footer .booking-button {
        visibility: visible;
    }

    footer .collapsible-button .collapsible-text {
        width: unset !important;
        opacity: unset !important;
    }

    footer .collapsible-button {
        width: 212px !important;
    }

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

    .project-item video,
    .project-item img {
        width: 100%;
    }

    .hero {
        flex-direction: column;
        row-gap: 1em;
    }

    .module-content,
    .project-title-block,
    .project-description,
    .gallery-section {
        padding-left: var(--standard-padding);
        padding-right: var(--standard-padding);
    }

    footer .heading {
        display: none;
    }

    .footer-info {
        padding-top: 2em;
    }

    .bottom-wrapper {
        flex-direction: column;
    }

    .footer-contact {
        flex-direction: column;
    }

    .contact-item {
        display: flex;
        gap: 1.5em;
    }

    .contact-item:nth-child(2n) {
        flex-direction: row-reverse;
        margin-top: -3em;
    }

    .contact-item:nth-child(2n + 1) .contact-data .name,
    .contact-item:nth-child(2n + 1) .contact-data .profession {
        text-align: left;
    }

    .contact-item:nth-child(2n + 1) .contact-data .social {
        justify-content: flex-start;
    }

    .contact-item:nth-child(2n) .contact-data .name,
    .contact-item:nth-child(2n) .contact-data .profession {
        text-align: right;
    }

    .contact-item:nth-child(2n) .contact-data .social {
        justify-content: flex-end;
    }

    .contact-item:nth-child(2n) .contact-data {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .contact-item > img {
        width: max-content;
    }

    .small-contact-image {
        display: block;
    }

    .contact-item > img:not(.small-contact-image) {
        display: none;
    }

    .emphasis-block {
        flex-direction: column;
        gap: 2em;
    }

    .button-container {
        justify-content: flex-start;
    }

    .mobile-only.social-links {
        display: flex;
        justify-content: flex-end;
        margin: 2em 0 3em;
    }

    .fullscreen-video-wrapper video {
        height: unset;
    }

    .project-section {
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
    }

    .project-title-block {
        position: static;
    }

    .project-client {
        margin-top: 0.5em;
    }

    .project-section {
        padding-bottom: 3em;
    }

    .module-content {
        width: 85%;
    }

    .module-content.quote-content {
        width: 93%;
    }

    .project-modules {
        gap: 3em;
    }

    .module-content .quote-symbol {
        left: var(--standard-padding);
    }

    .project-description {
        flex-direction: column;
    }

    .project-client span {
        font-family: "ZKG Regular", serif;
    }

    .contact-item .contact-data {
        margin-top: 0;
    }

    .gallery-modal-body {
        padding: 5.5em 2em;
    }

    .projects-section .emphasis-title {
        margin-bottom: 0;
    }

    .modal-dismiss-button {
        display: block;
    }

    .contact-item .social {
        gap: 0.7em;
    }

    footer .social-links {
        gap: 1em;
    }

    .project-item {
        grid-column: span 4 !important;
    }

    .media-label {
        border-top-right-radius: 10px;
    }

    .project-list {
        gap: 4em 2.5em;
    }

    .mobile-back-button {
        padding: 0.6em 1em;
        font-size: 14px;
    }

    .fixed-mt {
        margin-top: 0;
    }
}


@media (max-width: 575.98px) {
    :root {
        --standard-padding: 14px;
    }

    .footer-title,
    .hero-title {
        font-size: 40px;
        line-height: 50px;
    }

    .footer-title {
        margin-bottom: 0.5em;
    }

    .hero-title {
        margin-top: 2em;
    }

    .emphasis-title {
        font-size: 32px;
        line-height: 42px;
    }

    .emphasis-list li {
        font-size: 17px;
        line-height: 20px;
    }

    .emphasis-block {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .greeting {
        font-size: 17px;
    }

    .greeting span {
        font-size: 25px;
    }

    .mobile-only.social-links svg {
        width: 32px;
        height: 32px;
    }

    .mobile-only.social-links .booking-button svg {
        width: 24px;
        height: 24px;
    }

    .category-button, .booking-button {
        font-size: 14px;
    }

    .top-btn.collapsible-button {
        width: 46px !important;
        padding: 0.8em;
    }

    .projects-section {
        padding-top: 1em;
    }

    .category-button {
        padding: 0.5rem 0.9rem;
    }

    .contact-item .profession {
        font-size: 12px;
    }

    .contact-item .name {
        font-size: 20px;
    }

    .sticky-menu .menu-button {
        font-size: 14px;
    }

    .contact-item > img {
        width: 160px;
    }

    .contact-item {
        gap: 1em;
    }

    .emphasis-block {
        gap: 1em;
    }

    .heading {
        height: 110px;
    }

    .project-section {
        gap: 1em;
    }

    .project-client {
        font-size: 14px;
    }

    .project-client span {
        font-size: 20px;
    }

    .project-title {
        font-size: 32px;
        line-height: 40px;
    }

    .project-modules {
        gap: 2.5em;
        margin-top: 3em;
    }

    .module-content .quote-symbol {
        width: 100px;
        top: -30px;
    }

    .module-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    .project-list-title {
        font-size: 16px;
    }

    .project-list-description {
        font-size: 12px;
    }

    .modal-title {
        font-size: 20px;
    }

    .modal-description {
        font-size: 14px;
    }

    .modal-close, .open-bubble {
        width: 60px;
        height: 60px;
        font-size: 14px;
    }

    .sticky-menu .menu-button,
    .sticky-menu .menu-item {
        font-size: 13px;
    }
}

/* SM */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --standard-padding: 16px;
    }

    .footer-title,
    .hero-title {
        font-size: 40px;
        line-height: 50px;
    }

    .footer-title {
        margin-bottom: 0.5em;
    }

    .hero-title {
        margin-top: 2em;
    }

    .emphasis-title {
        font-size: 45px;
        line-height: 55px;
    }

    .emphasis-list li {
        font-size: 18px;
        line-height: 22px;
    }

    .emphasis-block {
        padding-top: 3em;
        padding-bottom: 3em;
    }

    .greeting {
        font-size: 20px;
    }

    .greeting span {
        font-size: 30px;
    }

    .project-section {
        gap: 1em;
    }

    .project-modules {
        gap: 3em;
        margin-top: 3em;
    }

    .project-client {
        font-size: 17px;
    }

    .project-client span {
        font-size: 22px;
    }

    .project-title {
        font-size: 55px;
        line-height: 65px;
    }

    .project-list-title {
        font-size: 18px;
    }

    .project-list-description {
        font-size: 14px;
    }

    .modal-title {
        font-size: 22px;
    }

    .modal-description {
        font-size: 16px;
    }
}

/* MD */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --standard-padding: 20px;
    }

    .footer-title,
    .hero-title {
        font-size: 55px;
        line-height: 63px;
    }

    .footer-title {
        margin-bottom: 0.5em;
    }

    .hero-title {
        margin-top: 2em;
    }

    .emphasis-title {
        font-size: 55px;
        line-height: 65px;
    }

    .contact-item > img {
        width: 240px;
    }

    .project-list-title {
        font-size: 18px;
    }

    .project-list-description {
        font-size: 14px;
    }

    .modal-title {
        font-size: 22px;
    }

    .modal-description {
        font-size: 16px;
    }
}

/* LG */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --standard-padding: 25px;
    }

    .hero-title {
        font-size: 48px;
        line-height: 52px;
    }

    .footer-title {
        font-size: 41px;
        line-height: 52px;
    }

    .contact-item .name {
        font-size: 23px;
    }

    .contact-item .profession {
        font-size: 14px;
    }

    .emphasis-title {
        font-size: 48px;
        line-height: 58px;
    }

    .footer-subtitle, .hero-subtitle {
        font-size: 14px;
        line-height: 22px;
        flex-basis: 40%;
    }

    .emphasis-list li {
        font-size: 17px;
        line-height: 21px;
    }

    .project-title {
        font-size: 45px;
        line-height: 58px;
    }

    .module-content {
        width: 75%;
    }

    .project-client {
        margin-top: 1em;
        font-size: 18px;
    }

    .contact-item {
        max-width: 40%;
    }

    .contact-item {
        max-width: 38%;
    }

    .greeting span {
        font-size: 30px;
    }

    .greeting {
        font-size: 20px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .footer-title, .hero-title {
        font-size: 52px;
        line-height: 58px;
    }

    .contact-item .name {
        font-size: 29px;
    }

    .contact-item .profession {
        font-size: 14px;
    }

    :root {
        --standard-padding: 30px;
    }

    .emphasis-title {
        font-size: 55px;
        line-height: 65px;
    }

    .emphasis-list li {
        font-size: 18px;
        line-height: 22px;
    }

    .project-title {
        font-size: 55px;
        line-height: 65px;
    }

    .contact-item {
        max-width: 40%;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .footer-title, .hero-title {
        font-size: 60px;
        line-height: 70px;
    }

    .contact-item {
        max-width: 45%;
    }
}