:root{
    --google-sans: "Google Sans", sans-serif;
    --martian-mono: "Martian Mono", monospace;
    --space-grotesk: "Space Grotesk", sans-serif;

    --wip-gray-blue: #99acbf;
}

.animate__delay-1 {animation-delay: 150ms;}
.animate__delay-2 {animation-delay: 250ms;}
.animate__delay-3 {animation-delay: 350ms;}
.animate__delay-4 {animation-delay: 450ms;}

.animation__timeline__view{animation-timeline: view();}

.hidden__box.animate__animated {
    opacity: 0;
}


.page_acf  h1,
.page_acf  h2,
.page_acf  h3,
.page_acf  h4,
.page_acf  h5 {
    font-family: var(--space-grotesk) !important;
    text-transform: math-auto;
    font-weight: 500;
    color: #4b5554;
}
.page_acf p,
.page_acf li,
.page_acf a {
    font-family: var(--google-sans) !important;
    color:#6e6e6e;
}

div.page_acf section{
    padding:1vh 1vw;
    box-sizing: border-box;
    overflow:hidden;
}
/** acf **/
.inline_flex{
    display:inline-flex;
}

.button_acf {
    border-radius: 8px;
    background-color: #fefefeee;
    color: #242222 !important;
    letter-spacing: .3px;
    padding: 4px 24px;
    display: flex;
    outline: 1px solid #1b2a32;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: .3s;
}
.button_acf:hover{
    gap:14px;
    color: #242222;
}
a.button_acf::after {
    content: '\e5c8';
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
}

@media (max-width:768px){
    .button_acf{
        font-size:18px;
        padding: 2px 18px;
    }
    a.button_acf::after{
        font-size:18px;
    }
    .acf_text_with_image .text_column a{
        font-size:18px;
    }
}

.two_columns{
    display: flex;
    gap: 64px;
    padding: 32px;
    box-sizing:border-box;
    align-items: stretch;
}
.two_columns > div{
    width:50%;
}
.two_columns.row_reverse{
    flex-direction:row-reverse;
}


@media (max-width:1180px){
    .two_columns{
        padding: 22px;
        gap:32px;
    }
    .two_columns > div{
        width:100%;
    }
}

/** acf_mainbaner **/
.acf_mainbaner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 75vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding:unset !important;

}
.acf_mainbaner > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    height: 100%;
    justify-content: center;
    width: 100%;
    background-color: hsl(210deg 20% 8% / 66%);
}
.acf_mainbaner h1 {
    font-size: 120px;
    color: #fafafa;
    filter: drop-shadow(1px 1px 0px #111);
    text-align: center;
    line-height: 1.1;
}
.acf_mainbaner p {
    font-size: 24px;
    color: #fefefe;
    background: #00000033;
    padding: 2px 12px;
    text-align: center;
    border-radius: 2px;
}
.acf_mainbaner a{
    margin-top: 24px;
}

@media (max-width:1180px){

    .acf_mainbaner h1{
        font-size:86px;
    }
    .acf_mainbaner p {
        font-size: 18px;
    }
}

@media (max-width:768px){

    .acf_mainbaner {
        width: 100%;
        height: 50vh;
    }

    .acf_mainbaner h1{
        font-size:3rem !important;
    }
    .acf_mainbaner p {
        font-size: 18px;
    }
}

/** acf_image_carousel **/

.acf_image_carousel {
    position: relative;
}
.acf_image_carousel img {
    width: 100%;
    height: 66vh;
    object-fit: cover;
    border-radius: 16px;
    object-position: top;
}

.acf_image_carousel button {
    position: absolute;
    top: 50%;
    margin: 4px;
    border: 1px solid #333;
    background:#fafafa;
    aspect-ratio: 1 / 1;
    display: grid;
    place-content: center;
    border-radius: 50px;
    height: 48px;
    cursor: pointer;
    z-index: 2;
    opacity: 0.5;
    transition:200ms;
    filter: drop-shadow(2px 6px 3px #888);
}
.acf_image_carousel button:is(:focus,:hover){
    opacity: 1;
}
.acf_image_carousel button.prev{
    left:2px;
}
.acf_image_carousel button.next{
    right:2px;
}


@media(max-width:1180px){
    .acf_image_carousel{
        img{
            height: 60vh;
        }

    }
}

@media(max-width:768px){
    .acf_image_carousel a{
        pointer-events: none;
    }
}


/** acf_text_with_image **/

.acf_text_with_image .two_columns > div{
    width: 50%;
}
@media (max-width:768px){.acf_text_with_image .two_columns > div{
    width:100%;
}}

.acf_text_with_image .text_column .column_content{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 18px;
}
.acf_text_with_image .text_column {
    padding:18px;
    background: #f2f6f8;
    border-radius: 16px;
    box-sizing: border-box;
}
.acf_text_with_image .text_column ol,
.acf_text_with_image .text_column ul{
    padding:18px;
}
.acf_text_with_image .text_column p{
    font-size:22px;
    font-weight: 400;
}
.acf_text_with_image .text_column a{
    font-size:22px;
}
.acf_text_with_image .text_column h2{
    font-size:42px;
    line-height: 1.1;
}
.acf_text_with_image .button_acf{
    align-self: flex-end;
    margin-top: 5%;
}
.acf_text_with_image .text_column > div{
    display: flex;
    flex-direction: column;
    gap:16px;
}
.image_content{
    height: 100%;
}
.acf_text_with_image .image_column .image_content img{
    height: 100%;
    width:100%;
    object-fit: cover;
    aspect-ratio: 14/9;
    border-radius: 16px;
    object-position: center;

}

@media (max-width:1180px){
.acf_text_with_image {

        .text_column p, .text_column p{
            font-size:18px;
        }
        .text_column h2{
            font-size:36px;
        }

    }
}

@media (max-width:768px){
.acf_text_with_image {
        .two_columns {
            box-sizing: content-box;
            flex-direction: column;   
        }
        .two_columns.row_reverse{
            flex-direction: column;
        }
        .text_column p, .text_column p{
            font-size:18px;
        }
        .text_column h2{
            font-size:36px;
        }

    }
}

/** acf_image_with_slogan **/


.acf_image_with_slogan .slogan_column h3 {
    line-height: 1.2;
    font-size: 3.5vw;
}
.acf_image_with_slogan .image_content img{
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.acf_image_with_slogan .slogan_column {
    display: grid;
    place-content: center;
}

@media(max-width:1180px){
    .acf_image_with_slogan{
        .two_columns{
            flex-direction: column-reverse;
            gap:36px;
        }
        .slogan_column h3{
            font-size:64px;
            line-height: 1.1;
        }
    }
}

.acf_image_with_slogan .slogan_column h3 {
    /*font-size: 86px;*/
    line-height: 1.3;
    font-size: 3.5vw;
}
.acf_image_with_slogan .image_content img{
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.acf_image_with_slogan .slogan_column {
    display: grid;
    place-content: center;
}

/** acf_testimonials **/

.acf_testimonials .two_columns{
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.acf_testimonials .slogan_column{
    text-align: center;
}
.acf_testimonials .slogan_column h3{
    line-height: 1.1;
    font-size: 3vw;
}
.acf_testimonials {
    .testimonial_block{
        span.review{
            width:100%;
            display:inline-block;
        }
    }
    
    .testimonial_block > div{
        gap:4px;
    }
}

.acf_testimonials .testimonial_column {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    max-width: 50vw;
    padding-top: 5vh;
    padding-bottom: 3vh;
}

.acf_testimonials button{
    position: absolute;
    top: 50%;
    margin: 4px;
    border: unset;
    background: unset;
    aspect-ratio: 1 / 1;
    display: grid;
    place-content: center;
    border-radius: 50px;
    height: 48px;
    cursor: pointer;
    z-index: 2;
}
.acf_testimonials button:is(:focus,:hover) span{
    color:var(--wip-gray-blue);
}
.acf_testimonials button.prev{
    left:0;
}
.acf_testimonials button.next{
    right:0;
}

.acf_testimonials .testimonial_column span.name {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 4px;
    font-weight: 500;
    font-size:22px;
}
.acf_testimonials .testimonial_column span.review{
    font-size:16px;
    color:#5c6970;
}
.acf_testimonials .testimonial_column span.rate {
    display: inline-flex;
    gap: 2px;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    margin-top: 6px;
}
.acf_testimonials .testimonial_column span.rate svg {
    fill:var(--wip-gray-blue);
}
.acf_testimonials .testimonial_block {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
    gap: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgb(254, 254, 254);
    margin: 8px;
    outline: rgb(242, 242, 242) solid 1px;
    border-radius: 8px;
    box-shadow: rgb(238, 238, 238) 0px 0px 5px 1px;
    padding: 32px 64px;
    height: 250px;
}

@media(max-width:1180px){
    .acf_testimonials .testimonial_column {
        box-sizing: border-box;
        width: 100%;
        position: relative;
        max-width: 90vw;
        padding-top: 6vh;
        padding-bottom: 5vh;
    }
    .acf_testimonials .testimonial_block {
        height: 300px;
    }
}
@media (max-width:768px){
    .acf_testimonials .testimonial_block {
        height: 280px;
    }
    .acf_testimonials .slogan_column h3{
        font-size:32px;
        line-height: 1.2;
    }
}

@media(max-width:1180px){

    .acf_image_with_slogan{
        .two_columns{
            gap:24px;
        }
        .slogan_column h3{
            font-size:48px;
        }

    }
    span.rate svg {
        width: 12px;
        height: 12px;
    }
}



/** acf_tiles_with_text **/

.acf_tiles_with_text h1, .acf_tiles_with_text h2, .acf_tiles_with_text h3, .acf_tiles_with_text h4{
    color: #f3f3f3 !important;
}
.acf_tiles_with_text p{
    color: #f5f5f5 !important;
}
.acf_tiles_with_text{

    padding:10vh 18px !important;
    background:#1c1c1c;

    background-image: url(https://wip-studio.pl/wp-content/uploads/2026/07/qdewd.webp);
    background-blend-mode: soft-light;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    h2,h3,h4{
        color:#fafafa;
        line-height: 1.1;
    }

    h2{
        font-size:48px;
    }
    h3{
        padding-bottom: 12px;
    }

    .full_column{
        display: flex;
        flex-direction: column;
        gap:48px;
    }
    .column_content > div{
        width:100%;
        max-width:960px;
        color: #f5f5f5;
    }
    .tiles_grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap:24px;
        width:100%;
    }
    .tile_block {
        width: 100%;
        box-sizing: border-box;
        padding: 24px;
        border-radius: 16px;
        box-shadow: 0px 0px 3px 0px hsl(210 23% 10% / 1);
        background: #484c4c;
        transition:background 300ms;
    }
    .tile_block:hover{
        background:#616a6a;
    }
}

@media (max-width:1180px){
    .acf_tiles_with_text {
        .tiles_grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

    }
}

@media (max-width:768px){
    .acf_tiles_with_text {
        padding:48px 18px !important;

        .tiles_grid {
            grid-template-columns: repeat(1, 1fr);
            gap: 18px;
        }
        .full_column{
            gap:24px;
        }
    }
}

.acf_offer_pages_form{
	margin-top:2vh;
	box-shadow:0px 0px 24px 0px #dedede;
	background:#f2f6f8;
}
.acf_offer_pages_form input, .acf_offer_pages_form textarea {
    border-radius: 8px;
}
.acf_offer_pages_form form p{
	display:flex;
	flex-direction:column;
	gap:18px;
	padding:24px;
}
.acf_offer_pages_form form br{
	display:none;
}
.acf_offer_pages_form form{
	outline:1px solid #ddd;
	border-radius:12px;
	background:#fff;
}
.acf_offer_pages_form .wpcf7-list-item {
    margin: 0;
}
.acf_offer_pages_form .wpcf7-acceptance *{
	font-size:12px;
	font-weight:400;
	text-transform:math-auto;
}
.acf_offer_pages_form .text_column{
    display: grid;
    place-content: center;

    h2{
        font-size:48px;
    }
    p{
        font-size:24px;
    }

}
.acf_offer_pages_form .text_column > div{
    display: flex;
    flex-direction: column;
    gap:12px;
}

@media (max-width:1180px){
    .acf_offer_pages_form .text_column {
        h2 {
            font-size: 36px;
        }
    }
}
@media (max-width:768px){
    .acf_offer_pages_form .text_column {
        p {
            font-size: 16px;
        }
    }
    .acf_offer_pages_form .two_columns{
        flex-direction: column;
        gap:24px;
    }
}

    .acf_logo_marquee{
        width: 100%;
        align-items: center;
        margin-top: 13px;
        display: flex;
        position: relative;
        overflow: hidden;
    }
    .acf_logo_marquee .logo_marquee_container{
        display: flex;
        white-space: nowrap;
        will-change: transform;
        animation: acf_logo_marquee 120s linear infinite;
    }
    .acf_logo_marquee .logo_marquee_container img {
        width: 100%;
        height: auto;
        min-height: 4rem;
        max-height: 5rem;
        min-width: 14rem;
        object-fit: contain;
        filter: grayscale(.9);
        padding: 0 12px;
    }

    @keyframes acf_logo_marquee {
        from { transform: translateX(0%); }
        to { transform: translateX(-100%); }
    }

@media (max-width:768px){
    .acf_logo_marquee .logo_marquee_container img {
        min-height: 3rem;
        min-width: 8rem;
        max-height: 3rem;
        padding: 0 12px;
    }
}



.dm_logo{
    display: flex;
    padding: 8px;
    justify-content: center;
}
.dm_logo img {
    width: 100%;
    height: auto;
    max-height: 42px;
    object-fit: contain;
    display: block;
}

@media(min-width:961px){
    .top_bar .logo_wrapper,
    .top_bar #logo_wrapper{
    display: none;
    }
}
@media(max-width:961px){
    .dm_logo{
        display: none;
    }
}


@media (max-width: 700px) {
    .acf_image_with_slogan {
        .slogan_column h3 {
            font-size: 30px;
        }
    }
    .acf_tiles_with_text {
        h2 {
            font-size: 30px;
            margin-bottom: 6px;
        }
        h3{
            font-size:22px;
        }
    }
    .acf_text_with_image {
        .text_column h2 {
            font-size: 30px;
        }
    }
        .acf_text_with_image {
        .text_column p, .text_column p {
            font-size: 16px;
        }
    }
    .acf_text_with_image .text_column a {
        font-size: 16px;
    }
    .acf_offer_pages_form .text_column {
        h2 {
            font-size: 30px;
        }
    }
    .page_acf form input[type="submit"] {
        font-size: 14px;
    }
}




@media (max-width: 960px) {
    .acf_image_carousel {
        img {
            width: 100%;
            height: auto;
            height: 60vh;
            object-fit: contain;
            background: #f3f3f3;
            object-position: center;
        }
    }
}