/* main block - the first block on the main page */
.main-block{
    position: relative;
    height: 100dvh;
    display: flex;
    align-items: center
}

.main-block-slider{
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}
.main-block .img-container{
    position: relative;
    height: 100dvh
}
.main-block .content{
    z-index: 1;
    position: relative;
    width: fit-content;
    padding-top: 137.2px
}
.main-block h1{
    color: var(--white);
    max-width: 870px;
    text-transform: uppercase
}
.main-block h1 + div{
    color: var(--white);
    max-width: 770px;
    margin-top: 15px
}
.main-block .btns{
    margin-top: var(--size-3)
}
.call{
    position: fixed;
    z-index: 2;
    right: 40px;
    bottom: 40px
}
.call img{
    height: var(--size-3);
    animation: trin 2s infinite linear;
    cursor: pointer
}
@keyframes trin {

    from {
        transform:rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0,0,1,10deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0,0,1,0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0,0,1,-10deg);
    }
    80% {
        transform:rotate3d(0, 0, 1, 0deg);
    }

}


/* end of main block */

/* advantages block */
.advantages{
    color: var(--white);
    background-color: var(--black);
    padding: var(--section-distance) 0;
    clip-path: polygon(0 0, 100% 0, 100% 83%, 0 100%)
}
.advantages ul.advantages-list{
    margin-top: var(--size-3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--size-2);
    row-gap: 20px;
}
.advantages ul.advantages-list li{
    margin-top: 0
}
.advantages .content .grid-2.images{
    gap: var(--size-3)
}

/* end of advantages block */

/* about and services blocks */
.about{
    padding: var(--section-distance) 0
}

.about__text, .services__text{
    display: flex;
    flex-direction: column;
    justify-content: center
}
.about__text .btn, .services__text .btn{
    margin-top: var(--size-2)
}
.services{
    padding: var(--section-distance) 0
}

/* end of about and services blocks */

/* projects block */
.projects{
    padding: var(--section-distance) 0
}
.projects__media{
    margin-top: var(--size-3)
}
.projects-slider .img-container{
    position: relative;
    width: 100%;
    height: 100%
}
.small-images .description{
    font-size: 2.6rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: var(--size-1)
}
.projects-slider .grid-2{
    gap: var(--size-2)
}
.projects__text .subtitle{
    justify-content: center;
    text-align: center
}
.projects__text h2, .projects__text .text{
    text-align: center
}
.projects__text .text{
    padding: 0 20%
}
.projects__text .text p{
    margin-top: var(--size-1)
}
/* end of projects block */

/* contacts block */
.contacts{
    position: relative
}
.contacts__content{
    position: relative;
    z-index: 1;
    padding: var(--section-distance) 0;
    text-align: center;
    color: var(--white)
}
.contacts__content form > p{
    margin: var(--size-2) auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: fit-content;
    flex-wrap: wrap
}
.wpcf7-spinner{
    display: none
}
.wpcf7-not-valid-tip{
    margin-top: 5px;
    color: tomato;
    text-align: left
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output{
    margin: 30px 0 0;
    border: none;
    text-align: center;
    width: 100%
}
/* end of contacts block */


/* testimonials block */
.testimonials{
    padding: var(--section-distance) 0
}
.testimonials-slider{
    margin-top: var(--size-2)
}
.testimonials-slider .icon{
    height: 35px;
    width: auto!important;
    position: absolute;
    top: -17.5px
}
.testimonials-slider .item{
    padding: var(--size-3) var(--size-2);
    box-shadow: var(--items-box-shadow);
    border-radius: var(--image-border-radius);
    min-height: 250px;
    margin: 0 15px
}
.testimonials-slider .owl-stage{
    margin-top: var(--size-2);
    margin-bottom: var(--size-2)
}
.testimonials-slider .author{
    font-weight: 600;
    font-size: 2rem;
    margin-top: var(--size-2)
}
.testimonials .subtitle{
    justify-content: center;
    text-align: center
}
.testimonials h2, .testimonials h2 + p{
    text-align: center
}
.testimonials h2 + p{
    padding: 0 20%
}
/* end of testimonials block */