:root {
    --header-font: "Afacad Flux", sans-serif;
    --text-font: "Jost", sans-serif;
    --signature-font: "Sacramento", cursive;
    --mini-title-color: #00000082;
}


@media (max-width: 768px) {
    #services .services-cols {
        grid-template-columns: 1fr;
    }

    #front-swiper .container {
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
        min-height: auto;
    }

    #front-swiper .right-col {
        flex-direction: column;
        flex: none;
    }

    #front-swiper .right-col .image-swiper,
    #front-swiper .right-col .text-swiper {
        flex: 1;

        width: 100%;
    }

    #front-about .container {
        flex-direction: column;
        gap: 50px;
    }

    #project .project-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #front-blog .container .blog-cards {
        flex-direction: column;

    }

    #front-numbers .container .number-row {
        flex-direction: column;
    }

    #about-us .container .cols-wrapper {
        flex-direction: column;
        gap: 50px;
    }

    #reviews .container {
        flex-direction: column;
    }

    #about-us .numbers-wrapper .numbers-title {
        padding-bottom: 30px;
    }

    #services .container {
        padding-bottom: 0;
    }

    #reviews .container .left-col {
        max-width: 100%;
        gap: 30px;
    }

    #reviews .container .right-col {
        width: 100%;
    }

    #projects .container .archive-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    #concept .container,
    #foundaments .container {
        flex-direction: column;
    }

    #concept .container .text-col,
    #foundaments .container .text-col {
        width: 100%;
    }

    #related-posts .related-wrapper {
        flex-direction: column;
    }

    #contact-form .container {
        flex-direction: column;
    }

    .cursor {
        display: none !important;
    }

    .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    #menu-menu-desktop {
        display: none;
    }

    header .custom-logo-link img {
        max-height: 35px;
    }

    #hero-text .container {
        flex-direction: column;
        position: relative;
    }

    .person .person-title {
        line-height: normal;
        font-size: 25px;
    }

    #front-about .middle-col h2 {
        font-size: 30px;
    }

    .person {
        max-width: 45%;
    }

    footer .container {
        flex-direction: column;
        gap: 20px;
    }

    footer .container .footer-text {
        flex-direction: column;
    }

    footer .container .footer-text .footer-divider {
        display: none;
    }

    header.site-header .container {
        justify-content: flex-start;
        gap: 20px;
        padding: 8px;
    }

    #contact-form .container .text-col .section-title,
    #front-contact .section-title {
        font-size: 56px;
    }

    #front-contact .container .section-cols {
        flex-direction: column;
    }

    #front-contact .container .section-cols .contact-col,
    #front-contact .container .section-cols .contact-col.phone {
        align-items: center;
    }

    .menu-toggle {
        display: flex;
    }

    #hero-text .round-text--inview {
        position: absolute;
        right: 12px;
        top: 0px;
    }

    #hero-text .right-col {
        flex-direction: row-reverse;
        justify-content: flex-end;
        padding: 20px 0;
    }

    .main-button {
        padding: 8px 22px;
    }

    #hero-text .round-text {
        height: 120px;
        width: 120px;
        display: none;
    }

    .scrolled-down header.site-header.has-header-bg-when-scrolled.is-header-bg-fractal-glass-fx::after {
        background: #fff;
        backdrop-filter: unset
    }

    .back-to-top.show {
        display: none;
    }

    .custom-logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ul,
    ol {
        margin-left: 1em;
    }

    #hero-text .right-col .main-button {
        height: fit-content;
    }

    #hero-video .hero-video.js-hero-video {

        height: 100vh;
        max-height: none;
    }

    #hero-video {
        max-height: none;
    }

    #services .container .section-header h2,
    #project .container .section-header h2,
    #front-blog .container .section-header h2 {
        font-size: 25px;
        line-height: 1;
    }

    .service-col .col-header h3 {
        font-size: 21px;
    }

    #services .services-cols {
        gap: 24px;
    }

    #front-swiper .left-col {
        align-items: flex-start;
        gap: 0;
        padding: 40px 24px;
    }

    #front-swiper .left-col h2 {
        font-size: 32px;
    }

    #front-swiper .left-col .button-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-top: 24px;
    }

    #front-swiper .right-col .text-swiper .swiper-slide .slide-text h2 {
        font-size: 23px;
    }

    #front-swiper .right-col .text-swiper .swiper-slide .slide-text p {
        font-size: 13px;
    }

    #front-about .tab-titles {
        justify-content: space-between;
    }

    #front-about h1.number {
        font-size: 74px;
    }

    .person {
        align-items: center;
        text-align: center;
    }

    #project .project-cards .card .card-title h4 {
        font-size: 18px;
    }

    #project .project-cards .card {
        border-right: none;
        border-bottom: 1px solid #0000001F;
    }

    #front-blog .container .blog-cards .post-card .post-title h3 {
        font-size: 20px;
    }

    #front-blog .container .blog-cards .post-card .post-title {
        margin-bottom: 4px;
    }

    header.site-header .container {
        width: 100%;
    }

    #front-blog .container {
        padding-bottom: 30px;
        gap: 50px;
    }

    #services .container {
        gap: 30px;
    }

    #about-us .container .cols-wrapper p:last-of-type {
        margin-bottom: 0;
    }

    .col-tabs .tab-contents .tab-content p:last-of-type {
        margin-bottom: 0;
    }

    .number-row .number-icon {
        height: 40px;
        width: 40px;
    }

    #front-numbers .container .number-row,
    #front-numbers .numbers-title {
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .number-row .number-icon svg {
        height: 20px;
        width: 20px;
    }

    .number-row .number-title {
        font-size: 21px;
    }

    .number-row .number-number {
        width: 75px;
        font-size: 32px;
    }

    .number-row .number-desc {
        font-size: 14px;
    }

    #front-contact .container .section-cols .contact-col {
        gap: 0;
    }

    #front-contact .container .section-cols .contact-col.phone .col-content .contact-phones,
    #front-contact .container .section-cols .contact-col.phone .col-content .contact-mails {
        text-align: center;
    }

    #about-hero .container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

    #about-hero {
        background-position-x: center;
        background-position-y: center;
    }

    #about-hero .hero-title {
        font-size: 34px;
    }

    #about-us .container {
        padding-top: 10%;
        padding-bottom: 10%;
        gap: 50px;
    }

    #services .container .section-header {
        /* display: none; */
    }

    #about-stuff .person-wrapper {
        flex-direction: column;
    }

    #about-stuff .person-wrapper .person {
        width: 100%;
        max-width: none;
    }

    #about-stuff .person-wrapper .person .img-person img {
        max-width: 80%;
    }

    #reviews .container {
        padding-left: 0;
        padding-right: 0;
    }

    #about-us .numbers-wrapper .number-row {
        flex-direction: column;
    }

    #about-hero {
        height: 230px;
    }

    .numbers-wrapper .number-row .number-title,
    .numbers-wrapper .number-row .number-headeer {
        width: 100%;
    }

    .numbers-wrapper .number-row .number-footer {
        width: 100%;
        align-items: flex-end;
    }

    .numbers-wrapper .number-row .number-title {
        font-size: 21px;
    }

    .numbers-wrapper .number-row .number-desc {
        font-size: 14px;
    }

    .numbers-wrapper .number-row .number-number {
        font-size: 32px;
    }

    #hero-slider .hero-swiper {
        height: 280px;
    }

    #feedback .feedback-text {
        font-size: 20px;
    }


    #feedback .container .mini-title {
        padding-bottom: 20px;
    }

    #feedback.oferta .container {
        padding-top: 10%;
        padding-bottom: 20%;
    }

    #feedback .feedback-author .author {
        font-size: 24px;
    }

    .single-project .project-title .project-number {
        font-size: 55px;
    }

    .single-project .project-title .title {
        font-size: 24px;
    }

    #project-hero .project-title {
        font-size: 32px;
        padding-top: 10px;
    }

    #project-hero .container {
        flex-direction: column;
        gap: 30px;
    }

    #project-hero .hero-desc {
        padding-left: 0;
    }

    #project-hero .title-desc {
        font-size: 15px;
    }

    #project-hero .hero-desc .col .mini-title {
        font-size: 14px;
    }

    #project-hero .hero-desc .col span {
        font-size: 14px;
    }

    #idea .section-title,
    #concept .section-title,
    #foundaments .container .section-title {
        font-size: 28px;
    }

    #idea .section-text p,
    #concept .section-text p,
    #foundaments .container .section-text p {
        font-size: 15px;
    }

    #idea .container,
    #concept .container .text-col,
    #foundaments .container .text-col {
        gap: 8px;
    }

    #movie-wide {
        height: 30vh;
    }

    #foundaments .container {
        flex-direction: column-reverse;
    }

    #concept .container .image-col img,
    #foundaments .container .image-col img {
        min-height: 550px;
    }

    #project-swiper .container {
        padding-left: 0;
        padding-right: 0;
    }

    #project-swiper .container {
        height: 35vh;
    }

    #feedback .quote-icon {
        height: 50px;
        width: 50px;
    }

    #feedback .quote-icon svg {
        height: 18px;
        width: 18px;
    }

    #project-contact .section-title {
        font-size: 32px;
    }

    #project-contact .container {
        padding-top: 15%;
        padding-bottom: 15%;
    }

    #project-contact .section-text p {
        font-size: 16px;
    }

    #blog-header .container h1 {
        font-size: 57px;
    }

    #blog-content .blog-post .post-header .post-title a {
        font-size: 35px;
    }

    .blog-post .post-text {
        font-size: 14px;
    }

    .blog-post .post-image img {
        height: 240px;
    }

    .blog-post .post-footer {
        padding-top: 20px;
    }

    #blog-content .container {
        padding-bottom: 10%;
        gap: 50px;
    }

    #contact-form .container .col {
        padding-top: 0;
    }

    #contact-form .container,
    #contact-form .container .text-col {
        padding-bottom: 0;
    }

    #entry-content .post-title {
        font-size: 42px;
    }

    #post-content .container ul,
    #post-content .container ol {
        margin-left: 0;
        font-size: 14px;
    }

    #post-content .container p,
    #post-content .container {
        font-size: 14px;
    }

    #post-content .container {
        padding-bottom: 15%;
    }

    #post-content .container .wp-block-heading {
        font-size: 36px;
    }

    .related-wrapper .related-post .related-image img {
        max-height: 100px;
    }

    .related-wrapper .related-post .related-title {
        padding: 0;
    }

    .related-wrapper .related-post .related-title h3 {
        font-size: 18px;
    }

    #related-posts .container {
        padding-bottom: 15%;
    }

    #contact-hero {
        height: 280px;
    }

    #contact-swiper .container {
        padding-left: 0;
        padding-right: 0;
    }

    #contact-form .container {
        gap: 40px;
        padding-top: 10%;
        padding-bottom: 10%;
    }

    #contact-form .container .text-col .section-title {
        font-size: 34px;
        margin-top: 20px;
    }

    #contact-form .container .text-col .section-text p {
        font-size: 17px;
    }

    #contact-form .contact-socials .socials-wrapper {
        margin-top: 40px;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    #contact-form .phone-number {
        font-size: 36px;
    }

    #contact-hero {
        background-attachment: unset;
    }

    #contact-form .wpcf7-list-item-label {
        font-size: 14px;
    }

    #menu-mobile-menu li a {
        display: block;
        border-bottom: 1px solid rgb(0 0 0 / 10%);
        padding-bottom: 6px;
        font-size: 37px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: var(--header-font);
    }

    #projects .container .archive-grid .archive-header h1 {
        font-size: 46px;
    }

    #projects .container .archive-grid .archive-header p {
        font-size: 14px;
    }

    body.post-type-archive-projekt .menu-toggle path,
    body.post-type-archive-projekt .footer-socials a svg path {
        stroke: #fff
    }

    body.post-type-archive-projekt .back-to-top,
    body.post-type-archive-projekt footer .container,
    body.post-type-archive-projekt .mobile-menu li a {

        color: #fff;
    }

    body.post-type-archive-projekt .mobile-menu {
        background-color: #000;
    }

    #policy-hero .container h1 {
        font-size: 32px;
        text-align: center;
    }

    #policy-hero .container {
        min-height: 150px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .cursor {
        display: none;
    }

    #hero-text .right-col {
        gap: 24px;
        align-items: flex-end;
    }

    #hero-text .round-text {
        width: 220px;
        height: 220px;
    }

    #services .container .section-header h2,
    #project .container .section-header h2,
    #front-blog .container .section-header h2 {
        font-size: 36px;
    }

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

    #front-swiper .container {
        flex-direction: column;
    }

    #front-swiper .right-col .text-swiper .swiper-slide .slide-text h2 {
        font-size: 40px;
    }

    p {
        font-size: 13px;
    }

    .service-col .col-header p {
        font-size: 13px;
    }

    ul.service-list li a {
        font-size: 14px;
    }

    .service-col .col-header h3 {
        font-size: 19px;
    }

    #front-swiper .left-col h2 {
        font-size: 44px;
    }

    #front-about .middle-col h2 {
        font-size: 30px;
    }

    .col-tabs .tab-contents .tab-content {
        font-size: 14px;
    }

    #front-about .container {
        gap: 40px;
    }

    #front-about h1.number {
        font-size: 55px;
    }

    #about-hero {
        background-position-y: center;
    }

    #front-blog .container,
    #front-numbers .container,
    #about-hero .container,
    #about-us .container,
    #about-stuff .container,
    #feedback.oferta .container,
    #projects .container .archive-grid,
    #project-hero .container,
    #concept .container,
    #foundaments .container,
    #feedback .container,
    #blog-header .container,
    #entry-content .container,
    #related-posts .container,
    #contact-form .container,
    #blog-content .container {
        padding-left: 5%;
        padding-right: 5%;
    }

    .number-row .number-title {
        font-size: 22px;
    }

    .number-row .number-icon {
        height: 40px;
        width: 40px;
    }

    .number-row .number-icon svg {
        width: 22px;
        height: 22px;
    }

    #front-blog .container .blog-cards .post-card .post-title h3 {
        font-size: 22px;
    }

    #front-contact .section-title,
    #projects .container .archive-grid .archive-header h1 {
        font-size: 96px;
    }

    #about-hero .hero-title {
        font-size: 68px;
    }

    .numbers-wrapper .number-row .number-title {
        font-size: 24px;
    }

    .numbers-wrapper .number-row .number-desc {
        font-size: 16px;
    }

    #reviews .container .left-col .review .review-text {
        font-size: 16px;
    }

    #front-contact .container .section-cols .contact-col {
        gap: 14px;
    }

    #feedback .feedback-text {
        font-size: 28px;
    }

    header .custom-logo-link img {
        max-height: 40px;
    }

    .single-project .project-title .title {
        font-size: 40px;
    }


    body.post-type-archive-projekt .menu-toggle path,
    body.post-type-archive-projekt .footer-socials a svg path {
        stroke: #fff
    }

    body.post-type-archive-projekt .back-to-top,
    body.post-type-archive-projekt footer .container,
    body.post-type-archive-projekt .mobile-menu li a {

        color: #fff;
    }

    body.post-type-archive-projekt .mobile-menu {
        background-color: #000;
    }

    .single-project .project-title .project-number {
        font-size: 60px;
    }

    #project-hero .project-title {
        font-size: 50px;
    }

    #project-hero .title-desc {
        font-size: 15px;
    }

    #project-hero .hero-desc {
        justify-content: flex-start;
    }

    #hero-image {
        min-height: 45vh;
    }

    #idea .section-title,
    #concept .section-title,
    #foundaments .container .section-title {
        font-size: 50px;
    }

    #concept .container .image-col img,
    #foundaments .container .image-col img {
        min-height: 500px;
    }

    #movie-wide,
    #project-swiper .container {
        height: 50vh;
    }

    #project-contact .section-title {
        font-size: 50px;
    }

    #blog-content .blog-post .post-header .post-title a {
        font-size: 50px;
        width: 100%;
    }

    #blog-header .container h1 {
        font-size: 115px;
    }

    #entry-content .post-title {

        font-size: 50px;
        margin-bottom: 20px;
    }

    #contact-form .container .text-col .section-title {
        font-size: 40px;
        margin-top: 20px;
    }

    #contact-hero {
        background-attachment: unset;
    }

    #policy-hero .container h1 {
        font-size: 64px;
        text-align: center;
    }

}



@media (min-width: 1025px) and (max-width: 1400px) {


    body.post-type-archive-projekt .menu-toggle path,
    body.post-type-archive-projekt .footer-socials a svg path {
        stroke: #fff
    }

    body.post-type-archive-projekt .back-to-top,
    body.post-type-archive-projekt footer .container,
    body.post-type-archive-projekt .mobile-menu li a {

        color: #fff;
    }

    body.post-type-archive-projekt .mobile-menu {
        background-color: #000;
    }

    #front-blog .container,
    #front-numbers .container,
    #about-hero .container,
    #about-us .container,
    #about-stuff .container,
    #feedback.oferta .container,
    #projects .container .archive-grid,
    #project-hero .container,
    #concept .container,
    #foundaments .container,
    #feedback .container,
    #blog-header .container,
    #entry-content .container,
    #related-posts .container,
    #contact-form .container,
    #blog-content .container {
        padding-left: 5%;
        padding-right: 5%;
    }

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

    #contact-form .container .text-col .section-title {
        font-size: 80px;
    }
}


@media (min-width: 1401px) and (max-width: 1800px) {
    #projects .container {
        padding-left: 5%;
        padding-right: 5%;
    }

    #entry-content .post-title {
        font-size: 100px;
    }
}