/* main block */



.main-block .container{

    max-width: 100%;

    padding: 0

}

.main-block .content{

    display: flex

}

.main-block .content >div{

    width: 50%

}

.main-block .text{

    display: flex;

    align-items: center;

    padding: 0 80px

}

.main-block .text-container{

    text-align: center

}

.main-block .media{

    position: relative;

    overflow: hidden

}

/*.main-block h1{*/

/*    text-decoration: underline;*/

/*    text-decoration-thickness: from-font;*/

/*    line-height: 1;*/

/*    text-underline-offset: 5px*/

/*}*/

.main-block h1 + p{

    text-transform: uppercase;

    margin-top: 2px

}

.main-block p{

    font-size: 1.6rem

}

.main-block .description{

    margin-top: 20px

}

.main-block .btn{

    margin-top: var(--size-2)

}

.main-block .infinite-slider:last-child{

    opacity: 0;

    display: none;

}



.infinite-slider {

    display: flex;

    overflow: hidden;

    user-select: none;

    gap: 100px

}



.infinite-slider__items {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-around;

    gap: 100px;

    min-width: 100%;

    animation: scroll-x 120s linear infinite;

}

.infinite-slider__items >div{

    font-size: 6.5rem;

    color: var(--gray);

    line-height: 1;

    text-transform: lowercase

}



@media (prefers-reduced-motion: reduce) {

    .infinite-slider__items {

        animation-play-state: paused;

    }

}



.infinite-slider--reverse .infinite-slider__items {

    animation-direction: reverse;

    animation-delay: -3s

}



@keyframes  scroll-x {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(calc(-100% - calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14)));

    }

}

.infinite-sliders{

    display: flex;

    flex-direction: column;

    justify-content: space-around

}



.round-slider {

    position: absolute;

    top: 50%;

    left: 100%;

    transform: translate(-50%, -50%)

}

.round-slider__items{

    display: flex;

    justify-content: center;

    align-items: center;

    animation: rotateSlider 20s infinite linear;

    transform-origin: center center

}



.round-slider .img-container {

    position: absolute;

    width: 300px;

    height: 430px;

    border-radius: var(--img-border-radius);

    overflow: hidden

}



/* Розташовуємо зображення по колу */

.round-slider .img-container:nth-child(1) {

    transform: rotate(0deg) translateY(-550px);

}



.round-slider .img-container:nth-child(2) {

    transform: rotate(60deg) translateY(-400px);

}



.round-slider .img-container:nth-child(3) {

    transform: rotate(120deg) translateY(-550px);

}



.round-slider .img-container:nth-child(4) {

    transform: rotate(180deg) translateY(-400px);

}



.round-slider .img-container:nth-child(5) {

    transform: rotate(240deg) translateY(-550px);

}



.round-slider .img-container:nth-child(6) {

    transform: rotate(300deg) translateY(-400px);

}







/* Анімація обертання всього контейнера */

@keyframes rotateSlider {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



.round-btn{

    width: 105px;

    height: 105px;

    display: block;

    position: relative;

    /*margin-left: auto;*/

    /*margin-right: 20px;*/

    margin: -105px 20px -105px auto;

}

.round-btn img:first-child{

    width: 105px;

    height: 105px;

   /*background: url('../img/round-btn-arrow.svg') no-repeat center;*/

   /*display: block;*/

   /* position: absolute;*/

    /* z-index: 2; */

    /*bottom: 172px;*/

    /*right: 0;*/

    /*transform: translateX(30px) scale(0.5)*/

    animation: rotateSlider 10s infinite linear

}

.round-btn img:last-child{

    position: absolute;

    top: calc(50% - 17px);

    left: calc(50% - 11px);

    width: 25px;

    height: 25px

}



/*.main-block h1 + p{*/

/*  animation: glitch 1s linear infinite;*/

/*}*/



/*@keyframes glitch{*/

/*  2%,64%{*/

/*    transform: translate(2px,0) skew(0deg);*/

/*  }*/

/*  4%,60%{*/

/*    transform: translate(-2px,0) skew(0deg);*/

/*  }*/

/*  62%{*/

/*    transform: translate(0,0) skew(5deg); */

/*  }*/

/*}*/



.main-block h1 + p:before,

.main-block h1 + p:after{

  content: attr(title);

  position: absolute;

  left: 0;

}



.main-block h1 + p:before{

  animation: glitchTop 1s linear infinite;

  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);

}



@keyframes glitchTop{

  2%,64%{

    transform: translate(2px,-2px);

  }

  4%,60%{

    transform: translate(-2px,2px);

  }

  62%{

    transform: translate(13px,-1px) skew(-13deg); 

  }

}





.main-block h1{

  position: relative;

    color: var(--black);

  /*overflow: hidden;*/

  /*background: linear-gradient(90deg, #000, #0c0c0c, #000);*/

  /*background-repeat: no-repeat;*/

  /*animation: writingText 2s linear;*/

  /*-webkit-background-clip: text;*/

  /*-webkit-text-fill-color: rgba(255, 255, 255, 0);*/

  width: fit-content;

  margin: 0 auto

}



@keyframes writingText {

  0% {

    background-position: -500%;

    background-size: 80%

  }

  100% {

    background-position: 0;

    background-size: 100%

  }

}



.main-block h1::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 16px;

  height: 2.5px;

  width: 100%;

  background: var(--black);

  /*animation: underlineGrow 2.7s forwards;*/

}



/*@keyframes underlineGrow {*/

/*  to {*/

/*    width: 100%;*/

/*  }*/

/*}*/



/*.btn{*/

/*    animation: btnAnimation 1s linear infinite;*/

/*}*/



/*@keyframes btnAnimation {*/

/*    0% {*/

/*    transform: scale(1);*/

/*  }*/

/*  50% {*/

/*    transform: scale(1.07);*/

/*  }*/

/*  100% {*/

/*    transform: scale(1);*/

/*  }*/

/*}*/



/* end of main block */



section:not(.main-block){

  padding: var(--section-padding) 0

}



/* about */

section.about{

    overflow: hidden

}

section.about .img-container{

    width: 100%

}

section.about .img-container img{

    object-position: top

}

section.about .grid-2{

    gap: 150px;

}

.about .text .icon{

  height: 65px

}

.about .text .description{

  margin-top: var(--size-1)

}

.about .text .btn{

  margin-top: var(--size-2)

}

.about h2{

  width: fit-content;

    margin-top: 10px

}



[data-aos="writingText-custom"] {

    opacity: 0;

    transition-property: opacity

}



[data-aos="writingText-custom"].aos-animate {

    opacity: 1;

    background: linear-gradient(90deg, #000, #0c0c0c, #000);

    background-repeat: no-repeat;

    -webkit-background-clip: text;

    -webkit-text-fill-color: rgba(255, 255, 255, 0);

    animation: writingText 1s linear

}





/* Кастомна анімація */

@keyframes customGetUp {

    0% {

        transform: translateY(20px) rotateX(-85deg); /* Початкове положення: знизу і нахилений */

        opacity: 0;

    }



    100% {

        transform: translateY(0) rotateX(0);  /* Фініш: на своєму місці, вертикально */

        opacity: 1;

    }

}







/* Кастомний стиль для AOS елементів */

[data-aos="custom-up"] {

    animation: customGetUp 0.5s ease-out forwards; /* Використовуємо кастомну анімацію */

    opacity: 0;  /* Спочатку приховані */

}



/* Визначення затримки для кожного елементу */

#txt div {

    opacity: 0; /* Спочатку елементи непомітні */

}

#txt div[data-aos-delay] {

    animation-delay: 1s; /* Кастомна затримка для кожного елементу */

}



#txt br {

    display: none;

}



#txt div:nth-child(1) {

    animation-delay: 0.25s;

}



#txt div:nth-child(2) {

    animation-delay: 0.5s;

}



#txt div:nth-child(3) {

    animation-delay: 0.75s;

}



#txt div:nth-child(4) {

    animation-delay: 1s;

    width: 12px

}



#txt div:nth-child(5) {

    animation-delay: 1.25s;

}



#txt div:nth-child(6) {

    animation-delay: 1.5s;

}



#txt div:nth-child(7) {

    animation-delay: 1.75s;

}



#txt div:nth-child(8) {

    animation-delay: 2s;

}



#txt div:nth-child(9) {

    animation-delay: 2.25s;

    width: 12px

}



#txt div:nth-child(10) {

    animation-delay: 2.5s;

}



#txt div:nth-child(11) {

    animation-delay: 2.75s;

}



#txt div:nth-child(12) {

    animation-delay: 3s;

}



#txt div:nth-child(13) {

    animation-delay: 3.25s;

}



#txt div:nth-child(14) {

    animation-delay: 3.5s;

    width: 12px

}



#txt div:nth-child(15) {

    animation-delay: 3.75s;

}



#txt div:nth-child(16) {

    animation-delay: 4s;

}



#txt div:nth-child(17) {

    animation-delay: 4.25s;

}



#txt div:nth-child(18) {

    animation-delay: 4.5s;

}



#txt div:nth-child(19) {

    animation-delay: 4.75s;

}



#txt div:nth-child(20) {

    animation-delay: 5s;

}



#txt div:nth-child(21) {

    animation-delay: 5.25s;

}



#txt div:nth-child(22) {

    animation-delay: 5.5s;

}



#txt div:nth-child(23) {

    animation-delay: 5.75s;

}





@keyframes rotate {

    from { transform: rotate(0deg) }

    to { transform: rotate(360deg) }

}

[data-aos="rotate-custom"] {

  opacity: 0;

  transition-property: opacity

}



[data-aos="rotate-custom"].aos-animate {

  opacity: 1;

  animation: rotate 1s ease-in

}

/* end of about */





/* services */

/* Початковий стан */

.strong-zoom.from-top-left {

    transform: translate(-300px, -300px) scale(0.3);

    opacity: 0;

    transition: transform 1s ease-out, opacity 1s ease-out;

}



/* Коли елемент в зоні видимості */

.aos-animate.strong-zoom.from-top-left {

    transform: translate(0, 0) scale(1);

    opacity: 1;

}









.services__item, .services__items .owl-item{

    min-height: 100%

}

.services__items .owl-stage{

    display: flex

}

.services__items-wrap{

  /*overflow-y: scroll;*/

  /*height: 600px;*/

  /*  -webkit-overflow-scrolling: touch*/

}

.services__items-wrap::-webkit-scrollbar {

  width: 0px

}

.services h2{

  text-align: center

}

.services__items-wrap{

  margin-top: var(--section-padding)

}

.services__item .img-container{

    width: 100%;

    height: 250px

}

.services__item, .services__item .text{

    display: flex;

    flex-direction: column;

    justify-content: stretch

}

.services__item .text{

    flex: 1

}

.services__item h3{

    margin-top: 20px

}

.services__item .description{

  margin-top: var(--size-1);

    margin-bottom: var(--size-2)

}

.services__item .btn{

  margin-top: auto;

  display: block

}



/* end of services */





/* faq */

.faq h2{

  text-align: center

}

  .accordion {

      margin-top: var(--size-3)

    }



    .accordion-item:not(:first-child) {

      border-top: 2px solid var(--black)

    }



    .accordion-header {

      padding: 20px 0;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: space-between;

        gap: 30px

    }

    .accordion-header:hover span:first-child,

    .accordion-header.open span:first-child

    {

      color: var(--main-color)

    }

    

    .accordion-item:first-child .accordion-header{

      padding-top: 0

    }

 

    .accordion-header span:first-child{

      text-transform: none

    }

.accordion-header .icon, .accordion-header:hover .icon, .accordion-header.open .icon{

    min-width: 35px;

    min-height: 35px;

    border: 2px solid var(--black);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center

}

.accordion-header:hover .icon, .accordion-header.open .icon{

    border-color: var(--main-color)

}

.accordion-header .icon img{

    width: 22px

}

.accordion-header:hover .icon:last-of-type img,

.accordion-header.open .icon:last-of-type img

{

    width: 15px

}

    .accordion-header .icon:last-of-type, .accordion-header:hover .icon:first-of-type,

    .accordion-header.open .icon:first-of-type

    {

        display: none

    }

    .accordion-header:hover .icon:last-of-type, .accordion-header.open .icon:last-of-type{

        display: flex

    }



    .accordion-content {

      max-height: 0;

      overflow: hidden;

      background: #fff;

      transition: max-height 0.4s ease, padding 0.3s ease

    }

    

    

    .accordion-content.open {

      padding-bottom: 20px

    }



    /* end of faq */



    section.blog .title{

      display: flex;

      align-items: center;

      justify-content: space-between

    }

    section.blog .articles{

      margin-top: var(--size-3)

    }

    section.blog .articles__item{

        display: flex;

        flex-direction: column

    }

    .articles__item .text{

        margin-bottom: var(--size-2)

    }

    .articles__item .btn {

        margin-top: auto

    }

    .articles__item .img-container{

      border-radius: var(--img-border-radius);

      overflow: hidden

    }

     .articles__item h3, .articles__item .text{

      margin-top: var(--size-1)

     }

     .articles__item .article-data{

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-top: var(--size-1)

     }

     .articles__item .author{

      display: flex;

      align-items: center;

      gap: var(--size-1)

     }

     .articles__item .author .img-container{

      width: 55px;

      height: 55px;

      border-radius: 50%;

      overflow: hidden

     }

     .articles__item .author span{

      font-size: 2rem

     }

      .articles__item .date{

        font-size: 2rem;

        color: var(--dark-gray)

      }