html, body{
  overflow-x: hidden;
  font-family: 'Roboto', 'Inter', sans-serif;
}
.section1, .section2, .section3, .section4, .UseCaseSection, .specsSection{
  font-family: 'Roboto', 'Inter', sans-serif;
}
.section2BlueComment, .section3Text{
  font-family: 'Inter', 'Roboto', sans-serif;
}
.section1{
    background-color: #000000;
    position: relative;
}
.section1BG{
  width: 100%;
}
.section1Text{
  font-family: 'Inter', 'Roboto', sans-serif;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
}
.section1Text h1{
  font-size: 5em;
}
.videoContainer video{
    width: 100%;
    max-height: 90vh;
}
.section2{
    background-color: #fff;
}
.section2HR{
  display: none;
}
.pcPadding{
    padding-left: 8%;
    padding-right: 8%;
}
.spriteSpinWrapper{
    background-image: url(../images_ikitbot/spinImgBg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.numbering{
    max-width: 40px;
}
.rotateButtons {
  align-items: center;
  background-color: #27a0f1;
  border: 0;
  border-radius: 100px;
  box-sizing: border-box;
  color: #ffffff;
  display: inline-flex;
  font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  min-width: 0px;
  overflow: hidden;
  padding: 0px;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}

.spinBtnL, .spinBtnReset, .spinBtnR{
  color: #dcdde6;
  cursor: pointer;
}

.spinBtnR:hover{
  color: #ffffff;
  background: #27a0f1;
  background: linear-gradient(90deg,#27a0f1 20%, #62e5ff 100%);
}
.spinBtnReset:hover{
  color: #ffffff;
  background: #27a0f1;
  background: radial-gradient(circle, #62e5ff 0%, #27a0f1 75%);
}
.spinBtnL:hover{
  color: #ffffff;
  background: #27a0f1;
  background: linear-gradient(270deg,#27a0f1 10%, #62e5ff 100%);
}

.section3{
    background: #eeeeee;
}
.section3VideoContainer{
  height: max-content;
}
.section3 video{
    width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  display: block;
}
.selector{
    border: solid 1px #c0c0c0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .07);
}
.section3SelectorBtn{
    border: none !important;
    width: 100%;
    border-radius: 6px !important;
    background: #fff;
    font-size: 1.2rem !important;
    font-weight: 500;
}
.section3Text{
    font-size: 16px;
}
.accordion-button:not(.collapsed) {
    color: unset !important;
    background-color: unset !important;
    box-shadow: unset !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: unset !important;
}
.accordion-button:focus {
    box-shadow: unset !important;
}

.textH{
  font-size: 3em;
  font-weight: 600;
}
.textC{
  font-family: 'Inter';
  font-size: 1.4rem;
  color: #353535;
}
.section4{
  background-color: #fff;
  position: relative;
}

.section4Interaction{
  position: relative;
}
.interactionPoint {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #1aa6ff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 30;
  overflow: visible;
}
.interactionPoint::before,
.interactionPoint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 166, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: -1;
  animation: ripple 2s infinite;
}
.interactionPoint::after {
  animation-delay: 0.9s;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}
.firstInteract{
  position: absolute;
  bottom: 55%;
  left: 60%;
  transform: translateX(20%);
  font-family: cursive;
  font-weight: 600;
  font-size: 1rem;
}
.point1{
  bottom: 50%;
  left: 50%;
}
.point2{
  bottom: 38%;
  left: 50%;
}
.point3{
  bottom: 23%;
  left: 59%;
}
.point4{
  bottom: 14%;
  left: 39%;
}
.interactionText{
  display: none;
  opacity: 0;
  position: absolute;
  left: 5%;
  top: 30%;
  max-width: 450px;
  z-index: 8;
  transition: opacity 0.2s ease;
}
.interactionText.visible {
  display: block;
}
.mobileinteractionText{
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  transition: opacity 0.2s ease;
  width: 90%;
}
.mobileinteractionText.visible {
  display: block;
}

.interactionHeader{
  font-size: 2.3em;
  padding-left: 10px;
  font-weight: 500;
  border-bottom: solid 1px #353535;
}
.interactionComments{
  font-family: 'Inter';
  font-size: 1.3em;
}

.interactionVideo {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.interactionVideo img,
.interaction-video-player {
  display: block;
  width: 100%;
  height: auto;
}

.interaction-video-player {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  object-fit: cover;
}
.section5{
  position: relative;
}
.section5Content{
  color: #eeeeee;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  max-width: 450px;
}
.section5H{
  font-size: 2em;
  font-weight: 600;
  font-family: 'Inter';
}
.section5C{
  font-size: 1.3em;
}

.useCaseImgContainer{
  position: relative;
}
.useCaseBanner{
  background-color: #27a0f1;
  color: #fff;
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter';
  padding: 4px;
  font-size: 1.2em;
  font-weight: 500;
  width: 100%;
  max-width: 350px;
  opacity: 0.8;
}
.useCaseImg{
  max-width: 350px;
}

.specsSection{
    background-color: #000000;
    background-image: url(../images_ikitbot/bgSpecs.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: bottom;
}
.specsHeader{
    font-size: 2em;
    font-weight: 600;
    color: #eeeeee;
}
.specsText{
    color: #fff;
}
.specsH{
  text-align: end;
  font-size: 1.2em;
  font-weight: 500;
}
.specsC{
  text-align: start;
  font-weight: 300;
}
.specsWrapper .specsText hr{
    display:none;
}

@media screen and (max-width:1500px) {
  .section1 h1{
    font-size: 4em;
  }
  .section1 h2{
    font-size: 1.5em;
  }
  .textC {
    font-size: 1.1rem;
  }
  .section5C {
    font-size: 1.1em;
  }
  .interactionText{
    max-width: 350px;
  }
  .interactionHeader{
    font-size: 1.7em;
  }
  .interactionComments{
    font-size: 0.9em;
  }
  .pcPadding {
    padding-left: 4%;
    padding-right: 4%;
}
}
@media screen and (max-width:1100px) {
  .section1Text {
    left: 5%;
  }
  .interactionText{
    display: none !important;
  }
}
@media screen and (max-width:991px) {
  .section1 h1 {
    font-size: 3em;
  }
  .section1 h2 {
        font-size: 1em;
    }
  .section2HR{
    display: block;
  }
  .section5H {
    font-size: 1.5em;
  }
  .section5C {
    font-size: 16px;
  }
  .section5Content {
    max-width: 350px;
  }
}
@media screen  and (max-width:800px) {
    .section1 h2 {
    font-size: 1em;
    }
  .mobileinteractionText{
    padding-top: 0 !important;
  }
  .textH {
    font-size: 2em;
    font-weight: 600;
  }
  .textC{
    font-size: 0.8em;
  }
  .specsWrapper .specsText hr{
    display:block;
    margin: 0.3rem 0 !important;
  }
}
@media screen  and (max-width:600px) {
  .section1Text {
    position: unset;
    transform: unset;
    padding-top: 10px;
  }
  .section1Text h2{
    margin-bottom: 0 !important;
  }
  .section2Wrapper .section2 .row .col-lg .pb-5{
    padding-bottom: 1rem !important;
  }
  .section2Wrapper .section2 .row .col-lg .pb-4{
    padding-bottom: 1rem !important;
  }
  .section2Wrapper .section2 .row .col-lg .pt-3{
    padding-top: 0 !important;
  }
  .section4Wrapper .section4 .py-5{
    padding-top: 0 !important;
  }
  .interactionPoint {
    width: 10px;
    height: 10px;
  }
  .section5{
    padding: 50px 0;
    background-color: #000;
  }
  .section5C {
    font-size: 0.8em;
  }
  .specsH {
    font-size: 0.9em;
    font-weight: 400;
  }
  .specsC {
    font-size: 0.7em;
  }
  .interactionComments {
    font-size: 0.8em;
  }
}


.topScroll{
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border-radius: 100%;
  padding: 8px;
  opacity: 0.3;
  background-color: #eeeeee;
  cursor: pointer;
}
.topScroll:hover{
  background-color: #eeeeee;
  opacity: 0.8;
}
.notSelectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.footer1 {
	margin-top: 15px;
	margin-bottom: 10px;
	opacity: 0.8;
	width: 180px;
}
.footer {
	width: 200px;
	margin-top: 3px;
  opacity: 0.8;
}
.footstyle1 {
  font-weight: 700;
  font-size: 20px;
  font-family: "Arial Black", "Arial Bold", Gadget, sans-serif !important;
  color: white;
}
@media screen and (max-width: 800px) {
  .navbar .navbar-brand img{
    width: 150px !important;
  }
}
.img-4{
  width: 80%;
  max-width: 550px;
}
.img-4-1{
  width: 80%;
  max-width: 400px !important;
}
@media screen and (max-width: 990px) {
  .navbar .navbar-brand img{
    max-width: 450px;
  }
}