.about-column-mobile {
  display: none;
}

.frame {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  position: relative;
}

.frame-scale {
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  transform-origin: center center;
}

.frame-scale iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.about {
  /* overflow: hidden; */
  height: 100%;
  position: relative;
  min-height: 10vh;
  /* &-marque {
    overflow: hidden;
    white-space: nowrap;
    padding-top: 13px;

    &__track {
      display: inline-flex;
      white-space: nowrap;
      will-change: transform;

      span {
        display: inline-block;

      }
    }
  }
   */
}
.about-line-vertical {
  width: 1px;
  height: 100%;
  background: #e6e6e6;
  position: absolute;
  top: 0%;
  left: calc(50% - 0.5px);
}
.about-line-horizontal {
  width: 100%;
  height: 1px;
  background: #e6e6e6;
  position: static;
  top: 1014px;
  margin-top: 10px;
}
.about-content {
  display: flex;
  position: fixed;
}
.about-column {
  /*overflow: hidden;*/
  width: 50%;
}
.about-column:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-left: 24px;
}
.about-count {
  position: absolute;
  left: 0;
  top: 30%;
  line-height: 1;
  opacity: 0;
  font-size: 168px;
  line-height: 168px;
  letter-spacing: -0.012em;
  color: #999999;
  font-weight: 100;
  display: flex;
  align-items: center;
  gap: 13px;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.about-count-wrap {
  gap: 200px;
  position: relative;
  height: 550px;
}
.about-count span {
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.about-slider {
  height: 80vh;
}
.about-slider .swiper-slide {
  height: 100%;
}
.about-slider .swiper-slide img {
  height: 100%;
  width: 100%;
  max-width: 100000px;
  max-height: 100000px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.about-circle {
  position: absolute;
  left: 10%;
  transform: translateX(-20%);
  width: 1014px;
  height: 1014px;
  pointer-events: none;
}
.about-circle img {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
  /* 	    width: 100%;
     height: 100%;
     display: block;
     animation: rotateCircle 25s linear infinite;
     transform-origin: center center; */
}
.about-description {
  max-width: 315px;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: #000;
}

.about-marque {
  overflow: hidden;
  white-space: nowrap;
  padding-top: 13px;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.01em;
  font-weight: 300;
}
.about-marque__track {
  display: inline-flex;
  white-space: nowrap;
  gap: 60px;
  will-change: transform;
  animation: marqueeMove 30s linear infinite;
}
.about-marque__track span {
  display: inline-block;
  white-space: nowrap;
}

@keyframes marqueeMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.about-circle {
  position: absolute;
  left: 0%;
  transform: translateX(0%);
  width: 1014px;
  height: 90vh;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}
.circle_row{
  width: 1014px;
  height: 90vh;
  pointer-events: none;
   transform-origin: center center;
  opacity: 1;
  z-index: -3;
  visibility: visible; 
  animation: rotateCircle 25s linear infinite;
}
.about-circle svg,
.about-circle img {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
  animation: rotateCircle 25s linear infinite;
}
.about-circle img {
  display: none;
}
.about-content .about-column{
  position: relative;
  z-index: -1;
  height: 81vh;
}
.about-circle iframe {
  width: 100%;
  position: absolute;
  top: -5px;
  left: -10px;
  z-index: 1000;
  display: block;
  border: 0;
  display: block;
  /*animation: rotateCircle 25s linear infinite;*/
  /* transform-origin: center center; */
}

.about-circle canvas {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  transform-origin: center center;
  animation: rotateCircle 25s linear infinite;
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* @keyframes rotateCircle2 {
  from {
    transform: rotate(0deg);
    top: 10px;
  }
  to {
    transform: rotate(360deg);
      top: 0px;
  }
} */
.about-slider-fraction {
  display: flex;
  align-items: center;
  margin-top: 50px;
  gap: 26px;
  padding-left: 24px;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 300;
}
.about-slider-fraction span {
  cursor: pointer;
  font-size: 10px;
  color: #999999;
}
.about-slider-fraction span.active {
  color: #000;
}

.globe-sticky-wrapper {
  position: static;
  top: 0;
  height:auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 11111;
}

.globe-sticky-wrapper.is-pinned{
  position: sticky;
  height: 100vh;
}

.about-circle {
  position: absolute;
  /* Початковий стан: на весь екран з невеликим обрізанням (scale 1.5) */
  width: 70vw;
  height: 70vh;
  transform: scale(1.5); 
  transition: transform 0.1s ease-out, border-radius 0.3s;
  z-index: 2;
}


.about-circle.in-place {
  /* Ці параметри підлаштуйте під ваш макет */
  width: 500px; 
  height: 550px;
  border-radius: 50%;
  transform: scale(1);
}

.about-content {
  position: relative;
  z-index: 3;
  pointer-events: none; /* Щоб можна було скролити крізь текст */
  opacity: 1; /* Спочатку ховаємо текст, проявимо при скролі */
  transition: opacity 0.5s;
}

.about-content > * {
  pointer-events: all; /* Повертаємо клікабельність кнопкам/слайдерам */
}
/* Дозволяємо взаємодію з контейнером глобуса */
#globe-container {
      z-index: 555;
    pointer-events: all;
    left: 0;
    top: 4vh;
    transform: translate(-50%, 0);
}


/* Дозволяємо взаємодію саме з iframe */
#globe-container iframe {
    pointer-events: auto;
    position: relative;
    z-index: 5555;
}

#globe-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(1.002); /* scale щоб не було пустих країв */
  transform-origin: center;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-line-vertical, 
.about-line-horizontal {
    pointer-events: none; 
    z-index: 1; /* Лінії мають бути під глобусом або не мати клікабельності */
}
.about .about-circle:before{
      content: '';
    display: block;
    width: 20.5vw;
    height: 110%;
    background-image: url(globus-elem.svg);
    position: absolute;
    background-size: cover;
    background-position: left;
    top: -4%;
    left: 14.5vw;
    opacity: 1;
    transition: opacity 0.2s linear;
    z-index: 0;
}

@media screen and (min-width: 2000px){
  .about .about-circle:before{
    left: 10vw;
    width: 25vw;
  }
}

@media (max-width: 1880px) {
    .about-line-horizontal {
        top: 695px;
    }
}

@media screen and (min-width: 2200px){
  #globe-container iframe{
    transform: translate(-50%, -48%) scale(0.99);
  }

  .about .about-circle:before{
    left: 15vw;
    width: 20vw;
  }
}

@media screen and (max-width: 1300px){
  .about .about-circle:before{
    width: 24.5vw;
    left: 10.5vw;
  }
}

@media screen and (max-width: 1200px){
  .about .about-circle:before{
        width: 100%;
        height: 50%;
        background-position: bottom;
        top: auto;
        bottom: 0%;
        left: 1%;
  }
  #globe-container{
    top: 23vh;
  }
}
@media screen and (max-width: 1199px){
  .about-content .about-column{
    width: 100%;
    height: 50vh;
  }
  .about-slider{
    height: 50vh;
  }
  .about-content .about-column-mobile{
      display: block;
      height: auto;
    }

    .about-count-mobile{
      font-size: 65px;
      letter-spacing: -0.024em;
      font-weight: 100;
    }

    .about-count-mobile span{
      font-size: 10px;
      letter-spacing: 0.15em;
      font-weight: 300;
      text-transform: uppercase;
    }
    #globe-container {
        left: 50vw;
        top: 15vh;
    }

    .about .about-circle:before{
       bottom: -5.5vh;
      height: 40vh;
    }

    .about-slider-fraction{
      display: none;
    }

    .about-count-mobile-wrap{
      margin-top: 400px;
      margin-bottom: 18px;
    }
    .projects-text-slider{
      margin-left: 0;
    }
}



@media screen and (max-width: 900px){
    .about .about-circle:before {
        bottom: 0;
        height: 50%;
    }
    .about-count-mobile-wrap {
        margin-top: 350px;
        margin-bottom: 18px;
    }

    .about-count-mobile-wrap{
      padding: 0 20px;
    }

    .about-description{
      padding-left: 20px;
    }
}

@media screen and (max-width: 600px){
 /* .hero{
    height: 100vh;
  }
  #globe-container {
        top: 0vh;
    }

    .globe-sticky-wrapper{
      height: 60vh;
    }

    #globe-container iframe{
      transform: translate(-50%, -48%) scale(1.4);
    }

    .about .about-circle:before {
        width: 130%;
        height: 65%;
        background-position: bottom;
        top: auto;
        bottom: -20%;
        left: -13%;
    }*/

    
}

@media screen and (max-width: 560px){
  .about .about-circle:before {
        bottom: 22%;
        height: 28%;
        width: 110%;
        left: -4%;
    }

    .about-count-mobile-wrap{
      margin-top: 200px;
    }

  
}