section:not(:first-child){
    padding: var(--section-padding) 0
}
section p:not(:first-child){
    margin-top: 10px
}


/* main block */

.main-block, .main-block .owl-item .img-container{
    height: 100vh;
    overflow: hidden
}
.main-block .item{
    position: relative
}
.main-block .img-container .overlay{
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.33) 46.107%, rgba(0, 0, 0, 0) 100%)
}
.main-block .img-container .overlay:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.33) 46.107%, rgba(0, 0, 0, 0.55) 100%);
}
.main-block .content{
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 1;
    color: var(--white)
}
.main-block .content >div{
    height: fit-content
}
.main-block .black-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
    display: none
}
.main-block .black-bg:before{
    content: '';
    /* width: calc(50% - 700px); */
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--black)
}
.main-block .black-bg .grid-3{
    height: 100%
}
.main-block .black-bg .black{
    background-color: var(--black)
}

/*.main-block .content .content-wrap{*/
/*    width:  calc(50% - 30px)*/
/*}*/
/*.main-block .content .content-wrap p{*/
/*    padding-right: 20%;*/
/*    margin-top: 10px*/
/*}*/
.main-block .content .content-wrap .btns{
    margin-top: 30px
}
.main-block .subtitle >div{
  background-color: var(--white)
}
.main-block .btns{
    display: flex;
    align-items: center;
    gap: 15px
}

/* end of main block */

/* about */

.about .grid-3 >div:first-child{
    display: flex;
    align-items: center
}
.about .grid-3 .img-container{
    height: 500px
}
.about .grid-3 >div:last-child .img-container{
    margin-top: 120px
}
.about .grid-3 >div:nth-child(2) .img-container .sc{
    position: absolute;
    top: -90px;
    right: -90px;
    width: 180px;
    height: 180px
}
.sc.rotate{
    animation: rotate 1.8s linear
}
@keyframes rotate {
    0%{
        transform: rotate(-120deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.about .about__content >.grid-3:first-child{
    padding-top: 90px
}
.counter-item__number{
    font-size: 6rem;
    font-family: var(--decorative-font);
    line-height: 1
}
.counter-item{
   display: flex;
   align-items: center;
   gap: 15px
}
.counter-item__text{
    text-transform: uppercase;
    padding-top: 15px
}
.counter-items{
    margin-top: 60px
}

/* end of about */

/* advantages */

.advantages .text, .testimonials__content >.text{
    padding: 0 30%;
    text-align: center;
    margin-bottom: 60px
}

  .tab-content {
    display: none
  }

  .tabs{
    display: flex;
    flex-direction: column
  }
  .tab{
    padding: 15px;
    height: fit-content;
    cursor: pointer
  }
 .tab-items{
    position: relative
 }
  .tab.active {
    display: block;
    padding: 30px;
    height: fit-content;
    background-color: var(--white);
    color: var(--black);
    transition: 0.3s
  }
  
  .tab-content {
    display: none;
    opacity: 0
  }
  .tab-content.activeContent {
    display: block;
    opacity: 1
  }
  .tab-content .img-container, .tab-content.activeContent .img-container, .tab-content, .tab-content.activeContent{
    height: 100%
  }

  /* end of advantages */

  .services .text, .projects .text{
    display: flex;
    flex-direction: column;
    justify-content: center
  }
  .text .social{
    margin-top: 30px
  }
  .services__content .img-container{
    height: 400px
  }
.services .img-container .overlay, .projects .img-container .overlay{
    background: linear-gradient(180.00deg, rgba(17, 17, 17, 0) 52.778%,rgba(17, 17, 17, 0.8) 100%)
}
 .img-container .description{
    position: absolute;
    bottom: 35px;
    left: 30px;
    color: var(--white);
    padding-right: 20px
  }
  .img-container .description h3 + p:not(:first-child){
    margin-top: 2px
  }

  .projects__content .grid-2-flex >div:first-child{
    width: 65%
  }
  .projects__content .grid-2-flex >div:last-child{
    width: 35%
  }
  .projects-slider .img-container{
    height: 220px
  }
  .projects-slider .img-container:nth-child(even){
    transform: translateY(90px)
  }
  .owl-carousel.projects-slider .owl-stage-outer{
    padding-bottom: 90px
  }
  .projects .description{
    bottom: 20px
  }
  .projects .description .title{
    text-transform: uppercase;
    font-weight: 600
  }
  .projects .img-container .project-name{
    position: absolute;
    top: 230px;
    left: 0
  }
  .testimonials-slider .icon{
    width: 37.5px!important;
    height: 30px;
    margin-bottom: 10px;
    position: absolute;
    top: 0
  }
  .testimonials-slider .author{
    font-weight: 500;
    font-size: 2.4rem;
    margin-top: 15px
  }
  .testimonials-slider .item{
    padding: 60px 30px;
    margin: 15px;
      min-height: 270px
  }
.testimonials-slider .item .content{
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
  .testimonials-slider{
    margin-top: 60px
  }
.owl-carousel.testimonials-slider .owl-stage-outer{
    padding: 20px 0 0
}
  .about .img-container img:not(.sc), .tab-items, .services-slider, .projects-slider .img-container img,
  .testimonials-slider .item, .img-container video
  {
      box-shadow: var(--items-box-shadow);
      border-radius: 10px;
      overflow: hidden
  }

  @media all and (min-width: 769px){
    .img-container .description{
        max-width: 70%
      }
      .services .text{
        padding-right: 10%
      }
  }
  @media all and (min-width: 992px){
    .main-block{
      display: flex;
      justify-content: flex-end
    }
    .main-block .owl-carousel{
      /*width: 50%*/
    }
  }
  @media all and (max-width: 991px){
    .counter-item__number, h1{
      font-size: 3.5rem
    }
    h2{
      font-size: 3rem
    }
    h3{
      font-size: 2.4rem
    }
    h4{
      font-size: 2rem
    }
    .subtitle{
      font-size: 1.6rem
    }
    .main-block .black-bg:before{
      width: 100%;
      background-color: #00000070
    }
    .main-block .black-bg .black{
      background-color: transparent
    }
    .subtitle div{
      width: 52px
    }
    .main-block .content .content-wrap, .grid-2-flex >div,
    .projects__content .grid-2-flex >div:first-child,
    .projects__content .grid-2-flex >div:last-child
    {
      width: 100%
    }
      .main-block .content .content-wrap.grid-2-1{
          grid-template-columns: 1fr;
          gap: 10px
      }
    .grid-3:not(.counter-items) {
      grid-template-columns: 1fr 1fr
    }
    .grid-2:not(.projects .item){
      grid-template-columns: 1fr
    }
    .grid-2-flex{
      flex-direction: column
    }
    .about .about__content >.grid-3:first-child >div:first-child{
      grid-column: 1/3
    }
    .about .about__content >.grid-3:first-child >div:nth-child(2) .img-container .sc {
      position: absolute;
      top: -80px;
      right: -80px;
      width: 160px;
      height: 160px
    }
    .about .about__content >.grid-3:first-child >div:nth-child(2), .about .about__content >.grid-3:first-child >div:nth-child(3){
      padding-top: 80px
    }
    .advantages .text, .testimonials__content >.text{
        padding: 0;
      margin-bottom: 30px
    }

    .testimonials__content >.text{
      margin-bottom: 0
    }
    .about .about__content >.grid-3:first-child{
      padding-top: 0
    }
    .main-block .content .content-wrap p{
      padding-right: 0
    }
    .testimonials-slider {
      margin-top: 30px
  }
  }

  @media all and (max-width: 768px){
    .grid-2:not(.projects .grid-2), .grid-3{
      grid-template-columns: 1fr
    }
    .subtitle {
      font-size: 1.4rem
  }
  .subtitle div{
    width: 42px
}
.about .img-container .sc{
display: none
}
.about .about__content >.grid-3:first-child{
  display: flex;
  flex-direction: column;
  gap: 30px
}
.about .about__content >.grid-3:first-child >div:nth-child(2), .about .about__content >.grid-3:first-child >div:nth-child(3){
  padding-top: 0
}
.about .grid-3 >div:last-child .img-container{
  margin-top: 0
}
.about .grid-3 .img-container, .tab-content .img-container,
.tab-content.activeContent .img-container, .tab-content, .tab-content.activeContent, .tab-items
{
  height: 400px!important
}
.projects-slider .img-container{
  height: 160px
}
.projects-slider .img-container:nth-child(even) {
  transform: translateY(60px)
}
.owl-carousel.projects-slider .owl-stage-outer{
  padding-bottom: 60px
}
.projects .grid-2{
  gap: 20px
}
.projects .img-container .project-name{
  top: 170px
}
.counter-items{
  margin-top: 30px
}
.img-container .description {
  bottom: 25px;
  left: 20px
}
.projects .img-container .description{
    font-size: 1.4rem;
    bottom: 15px;
    left: 20px
}
.text .social {
  margin-top: 15px
}
      .testimonials-slider .item {
          padding: 50px 30px;
          height: auto
      }
      .testimonials-slider .author {
          font-size: 2rem
      }
  }
  
  @media all and (max-width: 350px){
    .main-block .btns{
      flex-direction: column;
      align-items: flex-start
    }
    .main-block .btns .btn{
      width: 100%
    }
      .tab.active{
          padding: 30px 20px
      }
  }

@media all and (max-width: 350px) {
    .services__content .img-container,
    .about .grid-3 .img-container,
    .tab-content .img-container,
    .tab-content.activeContent .img-container,
    .tab-content,
    .tab-content.activeContent, .tab-items {
        height: 300px !important
    }

    .projects-slider .img-container {
        height: 140px
    }
}