/* main block - the first block on the main page */
.main-block{
    position: relative;
    height: 100vh;
    background-color: var(--dark-bg)
}
/* .main-block .container{
    max-width: 100%;
    padding-right: 0
} */
.main-block .content{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--size-3)
}
.main-block:before{
    content: url(../img/blur.svg);
    position: absolute;
    top: -200px;
    left: -200px;
    pointer-events: none
}
.main-block h1{
        /* position: relative; */
    /* overflow: hidden; */
    background: linear-gradient(90deg, var(--white), var(--white), var(--white));
    background-repeat: no-repeat;
    animation: writingText 2s linear;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    width: fit-content;
}
@keyframes writingText {
  0% {
    background-position: -500%;
    background-size: 80%
  }
  100% {
    background-position: 0;
    background-size: 100%
  }
}
.main-block h1, .main-block .subtitle{
    color: var(--white)
}
.main-block .subtitle{
    margin-top: 5px
}
.main-block .text, .main-block .media{
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.counter-items{
    display: flex;
    gap: 30px;
    margin-top: var(--size-2);
    width: fit-content;
    max-width: 750px
}
.main-block .container{
    max-width: 100%
}
.counter-item__number span{
    font-family: var(--font-2);
    font-size: 4.5rem;
    color: var(--white)
}
.counter-item__text{
    font-size: 1.8rem;
    color: var(--white)
}
.main-block .media .img-container{
    height: 100dvh;
    width: -webkit-fill-available;
    position: absolute;
    z-index: 3
}
.main-block .media .img-container img{
    object-position: top
}
.main-block .btns{
    margin-top: var(--size-2)
}
.animated-gradient-btn{
    background: var(--main-gradient);

  animation: gradientShift 1s ease infinite;
  transition: 0.7s ease
}
@keyframes gradientShift {
  0% { background: var(--main-gradient) }
  50% { background: var(--main-gradient-2) }
  100% { background: var(--main-gradient) }
}

/* end of main block */

/* fin-consult */
.fin-consult__item{
    text-align: center
}
.fin-consult .icon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--main-gradient);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto var(--size-1);
    box-shadow: var(--items-box-shadow)
}

.fin-consult__item .btn{
    margin-top: var(--size-2)
}
/* end of fin-consult */

/* solve */

.solve-slider .text{
    display: flex;
    flex-direction: column;
    justify-content: center
}
.solve-slider .text .description{
    margin-top: var(--size-1)
}
.solve-slider .text .btn{
    margin-top: var(--size-2)
}
.solve-slider .media .img-container{
    border-radius: var(--border-radius)
}

/* end of solve */

.services__item{
    padding: 30px;
    border-radius: var(--border-radius);
    background-color: var(--light-green)
}

.services__item .price, .services__item .adv{
    margin-top: 20px
}
.services__item .price span:first-child{
    color: var(--gray);
    font-size: 2.5rem;
    font-family: var(--font-2);
    padding-right: 6px
}
.services__item .price span:last-child{
    background: var(--main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4.5rem;
    font-family: var(--font-2);
    font-weight: 700
}
.services__item .btn{
    margin-top: 20px;
    width: 100%
}
.services__item h3{
    background: var(--main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
.services__item h3, .services__item p, .services__item .price{
    text-align: center
}
.cases-slider p{
    color: var(--black)
}
.cases-slider .item .description, .cases-slider .item .btn{
    margin-top: var(--size-2)
}
.cases-slider .item .adv{
    margin-top: 15px
}
.cases-slider .img-container{
    border-radius: var(--border-radius)
}
.how-we-work__content.grid-3 .media{
    grid-row: 1 / 3;
    grid-column: 2 / 2
}
.how-we-work__content.grid-3 >div:last-child{
    grid-row: 2 / 2;
    grid-column: 3 / 3
}
.how-we-work__content.grid-3{
    row-gap: 0
}
.how-we-work__content.grid-3 >div{
    display: flex;
    flex-direction: column;
    justify-content: center
}
.how-we-work h3{
    background: var(--main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
.service-integrators .item{
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color)
}
.service-integrators .item >img{
    height: 70px;
    width: auto;
    margin: 0 auto 15px
}
.service-integrators .item h3{
    text-align: center
}
.service-integrators .item p, .service-integrators .item .btn{
    margin-top: var(--size-2)
}
.service-integrators .item p{
    color: var(--black);
    margin-bottom: 15px
}
.service-integrators .item .btn{
    width: 100%
}
.consultation .btn{
    display: block;
    margin: var(--size-2) auto 0
}
.consultation .icon{
    font-size: 2.2rem;
    font-weight: 700
}