/* Horizontal Parallax Effect */
.lookup-main-wrapper {
  position: relative;
  overflow: hidden;
}
.scroll-operation {
  display: flex;
  width: 300vw;
}
.scroll-operation:dir(rtl) {
  margin-left: 1.25rem !important;
}
.scroll-operation section {
  width: 100vw;
  height: 100vh;
}
.lookup-1,
.lookup-2,
.lookup-3 {
  display: flex;
  justify-content: left;
  align-items: baseline;
  width: 99vw;
  height: 100vh;
  box-sizing: border-box;
  margin-top: 10rem; /* For fixed header= 110 + 65(gap) */
  padding: 0 10vw; /* For centering parallex */
}
.lookup-1 .left-side,
.lookup-2 .left-side,
.lookup-3 .left-side {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 90%;
  max-height: 21.875rem;
  opacity: 0;
}
.lookup-1 .right-side,
.lookup-2 .right-side,
.lookup-3 .right-side {
  width: 45%;
  position: relative;
  align-self: flex-start;
  opacity: 0;
  scale: 1.2;
}
.lookup-1 .right-side-mobile,
.lookup-2 .right-side-mobile,
.lookup-3 .right-side-mobile {
  display: none;
}
.lookup-1 .right-side img,
.lookup-2 .right-side img,
.lookup-3 .right-side img {
  position: absolute;
  height: auto;
}
.outer-lower-dashes {
  position: absolute;
  top: auto;
  bottom: 7.5rem;
  z-index: 1000;
}
.outer-lower-dashes {
  display: flex;
  align-items: center;
  position: fixed;
  top: 40rem;
  height: 2.5rem;
  margin-left: 11vw;
}
.outer-lower-dashes:dir(rtl) {
  margin-left: 0;
  left: 70%;
}
.dash {
  display: inline-block;
  height: 0.35rem;
  width: 2.5rem;
  background-color: #4d4c4c;
  margin: 0 0.5rem;
  transition: 0.25s ease-in-out;
  cursor: pointer;
  border-radius: 0.5rem;
}

.circle {
  display: inline-flex;
  width: 1.875rem;
  height: 1.875rem;
  border: 3px solid #4d4c4c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: 0.25s ease-in-out;
  cursor: pointer;
}
.circle:dir(rtl) {
  direction: ltr;
}
.circle:hover {
  scale: 1.1;
}
.dash:hover {
  height: 0.375rem;
}
.arrow1,
.arrow2 {
  width: 0.625rem;
  height: 0.25rem;
  background-color: #4d4c4c;
  display: inline-block;
  margin-top: 0.125rem;
}
.arrow1 {
  transform: rotate(45deg);
  margin-right: -0.25rem;
}
.arrow2 {
  transform: rotate(-45deg);
}
/*---------*/
/*************************IDs for all images in right side ***************************/

.lookup-1 .right-side #cloud1 {
  width: 4.33rem;
  left: 22rem;
  top: 7.56rem;
  z-index: 1;
}

.lookup-1 .right-side #cloud2 {
  width: 4.26rem;
  left: 8rem;
  top: 6rem;
  z-index: 1;
}

.lookup-1 .right-side #cloud3 {
  width: 5.73rem;
  left: 23.52rem;
  top: 12.82rem;
  z-index: 1;
}
.lookup-1 .right-side #pattern {
  width: 26.76rem;
  top: -1rem;
  left: 0.35rem;
  z-index: 0;
  opacity: 30%;
}
.lookup-1 .right-side #drone {
  width: 4.3rem;
  left: 11.5rem;
  top: 2rem;
  z-index: 15;
}
.lookup-1 .right-side #robot {
  width: 5.2rem;
  left: 16.76rem;
  top: 17.5rem;
  z-index: 15;
}
.lookup-1 .right-side #robotarm {
  width: 4.36rem;
  left: 5.62rem;
  top: 12.8rem;
  z-index: 15;
}
.lookup-1 .right-side #screen1 {
  width: 10.43rem;
  left: 10.5rem;
  top: 6.04rem;
  z-index: 2;
}
.lookup-1 .right-side #screen2 {
  width: 9.26rem;
  left: 9.9rem;
  top: 6.75rem;
  z-index: 3;
}
.lookup-1 .right-side #screen3 {
  width: 4rem;
  left: 9.4rem;
  top: 8.5rem;
  z-index: 4;
}
.lookup-1 .right-side #screen4 {
  width: 3.93rem;
  left: 8.5rem;
  top: 11rem;
  z-index: 5;
}
.lookup-1 .right-side #screen5 {
  width: 4.8rem;
  left: 14.8rem;
  top: 11.84rem;
  z-index: 4;
}
.lookup-1 .right-side #screen6 {
  width: 2.96rem;
  left: 12rem;
  top: 14.12rem;
  z-index: 6;
}
.lookup-1 .right-side #small-pattern {
  width: 2.5rem;
  left: 26.5rem;
  top: -1rem;
  z-index: 0;
}
/***************/
.lookup-2 .right-side #hang1 {
  width: 2.5rem;
  left: 26rem;
  top: -5rem;
}
.lookup-2 .right-side #hang2 {
  width: 2.7rem;
  left: 8rem;
  top: -5.5rem;
}
.lookup-2 .right-side #hang3 {
  width: 3.5rem;
  left: 21.5rem;
  top: -5.5rem;
}
.lookup-2 .right-side #hang4 {
  width: 3.2rem;
  left: 4rem;
  top: -4.5rem;
}
.lookup-2 .right-side #mobile {
  width: 8.5rem;
  left: 12rem;
  top: -5.5rem;
}
.lookup-2 .right-side #card {
  width: 9rem;
  left: 8rem;
  top: 16rem;
  z-index: 2;
}
.lookup-2 .right-side #coins {
  width: 6rem;
  left: 22rem;
  top: 17.5rem;
}
.lookup-2 .right-side #dots {
  width: 26rem;
  left: 1rem;
  top: 1rem;
}
.lookup-2 .right-side #lower-pattern {
  width: 26.8rem;
  left: 1rem;
  top: 23.5rem;
}
/************************************/

.lookup-3 .right-side #dialog {
  width: 9rem;
  left: 14.5rem;
  top: 0;
  z-index: 2;
}
.lookup-3 .right-side #keyboard {
  width: 13rem;
  left: 5rem;
  top: 12.5rem;
}
.lookup-3 .right-side #kite1 {
  width: 4rem;
  left: 24rem;
  top: 5.2rem;
}
.lookup-3 .right-side #kite2 {
  width: 8rem;
  left: 2rem;
  top: 0;
}
.lookup-3 .right-side #money1 {
  width: 10rem;
  left: 19rem;
  top: 13rem;
  z-index: 1;
}
.lookup-3 .right-side #money2 {
  width: 8rem;
  left: 4rem;
  top: 7rem;
}
.lookup-3 .right-side #upper-pattern3 {
  width: 2.5rem;
  left: 28rem;
  top: 0;
}
.lookup-3 .right-side #lower-pattern3 {
  width: 19rem;
  left: 1.5rem;
  top: 23.2rem;
}
.lookup-3 .right-side #screen-look3 {
  width: 11.8rem;
  left: 10rem;
  top: 0;
}
.lookup-3 .right-side #mobile-look3 {
  width: 5rem;
  left: 2.5rem;
  top: 11rem;
}