/* Section1 */
.section1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 4;
    background: transparent;
} 

.section1-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 2vw auto 0 auto;
  z-index: 4;
}

.section1-container:nth-child(1) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
}

.section1-heading {
  width: 100%;
  position: absolute;
  margin: 0vw 0;
  padding: 2vw 4vw 2vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section1-heading .h1 {
  font-weight: 700;
  color: #fff;
  display: flex;
  gap: 2vw;
} 

.section1-heading .h1 h1, .section1-heading .h1 span {
  font-size: 1px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: baseline;
} 

.section1-heading img {
  width: 40vw;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.section1-heading .heading-logo {
  width: 4vw;
  height: auto;
}

.phone-container {
  display: flex;
  position: relative;
  width: 100%;
  transform: translateY(3%);
  animation-name: shrink;
  animation-delay: 5.7s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes shrink-l2r {
  from {}
  to {scale: 0.0001; left: 35%;}
}

@keyframes shrink-r2l {
  from {}
  to {scale: 0.0001; right: 35%;}
}

.phone:nth-child(1) {
  position: absolute;
  left: 10%;
  top: 15%;
  scale: 0.8;
  animation-name: shrink-l2r;
  animation-delay: 5.2s;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.phone:nth-child(1) .phone-img {
  width: 23vw;
  height: auto;
}

.phone:nth-child(1) .mask {
  position: absolute;
  overflow: hidden;
  border-radius: 1.1vw;
  width: 10.1vw;
  height: 23.4vw;
  transform:  rotateX(14.4deg) rotateY(18.7deg) rotateZ(51.8deg) translateX(29.7%) translateY(-28%) rotate(-3.9deg);
  display: flex;
  justify-content: center;
}

.phone:nth-child(1) .mask video {
  position: absolute;
  width: 14vw;
}

.phone:nth-child(1) .mask img {
  position: absolute;
  margin: 0.4vw;
  width: 3.5vw;
}

/*  */

.phone:nth-child(2) {
  position: absolute;
  right: 12%;
  top: 12%;
  scale: 0.65;
  animation-name: shrink-r2l;
  animation-delay: 5s;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.phone:nth-child(2) .phone-img {
  width: 23vw;
  height: auto;
}

.phone:nth-child(2) .mask {
  position: absolute;
  overflow: hidden;
  border-radius: 1.1vw;
  width: 11.5vw;
  height: 22.1vw;
  transform:  rotateX(18deg) rotateY(0deg) rotateZ(141deg) translateX(-33%) translateY(-21%);
  display: flex;
  justify-content: center;
}

.phone:nth-child(2) .mask video {
  position: absolute;
  width: 14vw;
}

.phone:nth-child(2) .mask img {
  position: absolute;
  margin: 0.4vw;
  width: 3.5vw;
}

/*  */

.phone:nth-child(3) {
  position: absolute;
  left: 12%;
  bottom: -5%;
  scale: 0.7;
  animation-name: shrink-l2r;
  animation-delay: 4.8s;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.phone:nth-child(3) .phone-img {
  width: 23vw;
  height: auto;
}

.phone:nth-child(3) .mask {
  position: absolute;
  overflow: hidden;
  border-radius: 1.1vw;
  width: 11.3vw;
  height: 24.4vw;
  /* transform:  rotateX(57deg) rotateY(53deg) rotateZ(-60deg) translateX(70%) translateY(3%); */
  /* transform:  rotateX(25.8deg) rotateY(53.9deg) rotateZ(-38.2deg) translateX(70%) translateY(3%); */
  transform:  rotateX(16deg) rotateY(5deg) rotateZ(-32.5deg) translateX(44%) translateY(14%);
  display: flex;
  justify-content: center;
}

.phone:nth-child(3) .mask video {
  position: absolute;
  width: 14vw;
}

.phone:nth-child(3) .mask img {
  position: absolute;
  margin: 0.4vw;
  width: 3.5vw;
}

/*  */

.phone:nth-child(4) {
  position: absolute;
  right: 13%;
  bottom: -3%;
  scale: 0.65;
  rotate: 50deg;
  animation-name: shrink-r2l;
  animation-delay: 5.4s;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.phone:nth-child(4) .phone-img {
  width: 20vw;
  height: auto;
}

.phone:nth-child(4) .mask {
  position: absolute;
  overflow: hidden;
  border-radius: 1.1vw;
  width: 10.3vw;
  height: 22vw;
  transform:  rotateX(-20deg) rotateY(-13deg) rotateZ(-24deg) translateX(35%) translateY(15%);
  display: flex;
  justify-content: center;
  scale: 1.07;
}

.phone:nth-child(4) .mask video {
  position: absolute;
  width: 14vw;
}

.phone:nth-child(4) .mask img {
  position: absolute;
  margin: 0.4vw;
  width: 3.5vw;
}

/*  */

.phone:nth-child(5) {
  position: absolute;
  left: 38vw;
  bottom: 11vh;
  scale: 0.7;
  z-index: 10;
  pointer-events: none;
}

.phone:nth-child(5) .phone-img {
  width: 20vw;
  height: auto;
}

.phone:nth-child(5) .mask {
  position: absolute;
  overflow: hidden;
  border-radius: 1.2vw;
  width: 10.12vw;
  height: 21.9vw;
  transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(27.5%) translateY(24%);
  display: flex;
  justify-content: center;
  scale: 1.8;
}

.phone:nth-child(5) .mask video {
  position: absolute;
  width: 14vw;
  height: 100%  ;
}

.phone:nth-child(5) .mask img {
  position: absolute;
  margin: 0.4vw;
  width: 3.5vw;
}

.floating {  
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

.floating2 {  
  animation-name: floating2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 30px); }
  to   { transform: translate(0, -0px); }    
}

@keyframes floating2 {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 30px); }
  to   { transform: translate(0, -0px); }    
}

@keyframes reveal {
  from {scale: 0.001;}
  to {scale: 1;position: relative;}
}

@keyframes shrink {
  from {}
  to {
    scale: 0.0001;
    position: absolute;
  }
}

.whitephones {
  width: 100%;
  height: 100%;
  scale: 0.8;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  gap: 8vw;
  transform: translateY(6%);
}

.phone-swiper {
  scale: 0.001;
  width: 100%;
  position: absolute;
  animation-name: reveal;
  animation-delay: 6s;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

  .swiper-container {
    width: 100%;
    overflow-y: visible;
  }

  .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%232FF630'%2F%3E%3C%2Fsvg%3E") !important;
  }
  
  .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%232FF630'%2F%3E%3C%2Fsvg%3E") !important;
  }

  .swiper-full-mobile {
    position: relative;
    margin: 50px auto;
    padding-bottom: 50px;
  }

  .swiper-full-mobile:before {
    content: "";
    width: 18.3%;
    background: url(http://md-aqil.github.io/images/Pixel-3-XL.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    height: 100%;
    z-index: 20;
    margin: auto;
  }

  .swiper-full-mobile .swiper-slide {
    height: 100%;
  }

  .swiper-full-mobile .swiper-slide img {
    width: 98%;
    height: 83%;
    object-fit: fill;
    transform: translateX(0%);
  }

  .swiper-slide.swiper-slide-active img {
    border-radius: 40px;

  }
/*  */

.section1-container:nth-child(2) {
  align-items: center;
}

.section1-container:nth-child(2)::before {
  content: '';
  width: 100%;
  height: 2em;
  display: block;
  z-index: 4000;
  opacity: 0.9;
}


.some-more {
  width: 35vw;
}

.content {
  width: 100%;
}

.content-item-container {
  width: 75%;
  display: flex;
  justify-content: space-between;
}

.cic-thumb {
  display: block;
  width: 30%;
  overflow: hidden;
  border-radius: 25px;
  cursor: url('/assets/cursors/pointer.cur'), auto;
}

.cic-thumb img{
  width: 100%;
  scale: 1.06;
  transition: all ease-in-out 200ms;
}

.cic-thumb img:hover {
  scale: 1.10;
}

.h2 {
  width: 30vw;
  margin: 2vw auto 1vw auto;
  filter: drop-shadow(3px 8px 12px #000);
  pointer-events: none;
  text-align: center;
}

.content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 2vw auto;
}

.content-container h3 {
  width: 100%;
  font-size: 2.5vw;
  display: flex;
  color: #fff;
  align-items: center;
  font-family: minecraft, Poppins, Arial, Helvetica, sans-serif;
  gap: 1em;
}

.content-item {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 4vw 0;
}

.mockup-laptop {
  width: 50%;
  display: flex;
  justify-content: center;
  position: relative;
  transition: scale 500ms ease;
  scale: 1.1;
}

.mockup-laptop:hover {
  scale: 1.15;
}

.laptop-img {
  width: 80%;
  height: auto;
  filter: brightness(40%)
}

.laptop-screen {
  background-color: #fff;
  position: absolute;
  height: 71%;
  width: 61.5%;
  transform:  translateX(-2%) translateY(5.1%);
  overflow-y: scroll;
}

.content-item div .laptop-screen .laptop-screen-container {
  width: 100%;
}

.laptop-screen-container-header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1vw;
}

.laptop-screen .laptop-screen-container .laptop-screen-container-header {
  width: 100%;
  background: #fff;
}

.laptop-screen-container-header-logo {
  width: 25%;
  padding: 1.2em;
  border-radius: 50%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.laptop-screen-container-header-logo img{
  width: 100%;
}

.laptop-screen-container-header-content {
  font-size: 0.8vw;
  font-weight: 500;
  padding: 0 1vw;
  line-height: 1.5vw;
}

.laptop-screen-container-header-content .insta-btns span:nth-child(1) {
  padding: 0.4em 1em;
  margin: 0 0.3em 0 0;
  font-size: 0.6vw;
  color: #fff;
  background-color: #0095f6;
  border-radius: 4px;
}

.laptop-screen-container-header-content .insta-btns span:nth-child(2) {
  padding: 0.4em 1em;
  margin: 0 0.6em 0 0;
  font-size: 0.6vw;
  color: #000;
  background-color: #e4e4e4;
  border-radius: 4px;
}

.insta-desc {
  font-size: 0.5vw;
  margin-top: 0.3vw;
  display: block;
  line-height: 0.7vw;
  font-weight: 400;
}
.insta-desc span{
  display: block;
}
.insta-desc span:nth-child(2) {
  color: rgb(124, 124, 124);
}

.laptop-screen hr {
  width: 92%;
  margin: 0 auto;
  opacity: 0.2;
}

.laptop-screen-feed {
  background-color: #fff;
}

.feed-bar {
  width: 100%;
  margin: 0.4vw 0 1vw 0;
  display: flex;
  justify-content: center;
  font-size: 0.6vw;
  gap: 1.5vw;
}

.feed-bar span a {
  color: rgb(102, 102, 102);
}

.feed-bar-active {
  color: #000;
  fill: #000;
}

.feed {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 0vw;
  gap: 0.19vw;
}

.feed div {
  width: 31%;
}
.feed div img{
  width: 100%;
}

.reels {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 0vw;
  gap: 0.19vw;
  display: none;
}

.reels div {
  width: 23%;
}
.reels div img{
  width: 100%;
}

/* Clients */
.clients {
  width: 100%;
}

.clients img {
  width: 100%;
}
/* Clients */

.checkoutsocial {
  width: 11vw;
  position: absolute;
  transform: translateY(80%);
  left: 44.2%;
}

.checkoutsocial img {
  width: 100%;
}

div.socials {
  display: block;
  height: 10vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto;
  padding: 2vw;
  gap: 1vw;
  z-index: 4;
}

div.socials a {
  color: #fff;
  position: relative;
  margin: 0.7vw;
}

div.socials a svg {
  width: 1.5vw;
  height: 1.5vw;
  color: #fff;
  fill: #fff;
  position: absolute;
  transition: all 0.3s ease;
}
div.socials a svg:hover {
  /* width: 2.6vw;
  height: 2.6vw; */
  transform: scale(1.4);
  color: #fff;
  fill: #fff;
}

#cv {
  position: fixed;
  top:0;
  z-index: -1;
}
/* Section 1 end */

/* Media Queries */
@media (max-width: 767.98px) {    
    .section1 {
      padding: 15vw 0 0 0;
      overflow-x: hidden;
    }  

    .section1-container {
      width: 100%;
      margin: 0 auto;
      position: relative;
    }

    .section1-container:nth-child(1) {
      flex-direction: column;
      height: 100vh;
    }

    .section1-heading {
      width: 100%;
      margin: 8vw 0;
      flex-direction: column;
      justify-content: center;
      padding: 0 1vw;
    }

    .section1-heading .h1 {
      gap: 4vw;
      justify-content: center;
    }

    .section1-heading .team-content {
      width: 97%;
      font-size: 4vw;
      display: flex;
      margin: 1.5em auto 0 auto;
      text-align: center;
    }
  
    .section1-heading img {
      width: 100%;
      padding: 1vw;
      transform: translateX(-3%);
    }

    .section1-heading .heading-logo {
      display: none;
    }    

    .content-container {
      flex-direction: column;
      align-items: center;
      gap: 10vw;
      width: 100%;
      margin: 16vw 1vw 16vw 1vw;
    }

    .phone-container {
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .phone-container-container {
      width: 100%;
      height: 85vh;
      overflow: hidden;
    }

    /*  */
    
    .phone:nth-child(1) {
      left: -6%;
      top: 15%;
      scale: 1;
    }

    .phone:nth-child(1) .phone-img {
      width: 40vw;
      height: auto;
    }

    .phone:nth-child(1) .mask {
      border-radius: 2.5vw;
      width: 17.5vw;
      height: 40vw;
      transform:  rotateX(14.4deg) rotateY(18.7deg) rotateZ(51.8deg) translateX(30%) translateY(-28%) rotate(-3.9deg);
    }

    .phone:nth-child(1) .mask video {
      height: 100%;
      width: auto;
    }

    .phone:nth-child(1) .mask img {
      margin: 1vw;
      width: 8vw;
    }

    /*  */

    .phone:nth-child(2) {
      right: 4%;
      top: 15%;
      scale: 0.9;
    }

    .phone:nth-child(2) .phone-img {
      width: 38vw;
    }

    .phone:nth-child(2) .mask {
      border-radius: 3vw;
      width: 19vw;
      height: 36vw;
      transform:  rotateX(10deg) rotateY(0deg) rotateZ(140deg) translateX(-32%) translateY(-21%);
      display: flex;
      justify-content: center;
    }

    .phone:nth-child(2) .mask video {
      position: absolute;
      height: 100%;
      width: auto;
    }

    .phone:nth-child(2) .mask img {
      margin: 1vw;
      width: 8vw;
    }

    /*  */

    .phone:nth-child(3) {
      left: -4%;
      bottom: -2%;
      scale: 0.9;
    }

    .phone:nth-child(3) .phone-img {
      width: 40vw;
    }

    .phone:nth-child(3) .mask {
      border-radius: 3vw;
      width: 20vw;
      height: 42.8vw;
      /* transform:  rotateX(57deg) rotateY(53deg) rotateZ(-60deg) translateX(70%) translateY(3%); */
      /* transform:  rotateX(25.8deg) rotateY(53.9deg) rotateZ(-38.2deg) translateX(70%) translateY(3%); */
      transform:  rotateX(16deg) rotateY(5deg) rotateZ(-32.5deg) translateX(41%) translateY(14%);
      display: flex;
      justify-content: center;
    }

    .phone:nth-child(3) .mask video {
      width: auto;
      height: 100%;
    }

    .phone:nth-child(3) .mask img {
      margin: 1vw;
      width: 8vw;
    }

    /*  */

    .phone:nth-child(4) {
      right: 5%;
      bottom: -2%;
      scale: 0.9;
      rotate: 50deg;
    }

    .phone:nth-child(4) .phone-img {
      width: 35vw;
      height: auto;
    }

    .phone:nth-child(4) .mask {
      border-radius: 3vw;
      width: 19vw;
      height: 39.5vw;
      transform:  rotateX(-20deg) rotateY(-13deg) rotateZ(-24deg) translateX(33%) translateY(13%);
      display: flex;
      justify-content: center;
      scale: 1.07;
    }

    .phone:nth-child(4) .mask video {
      position: absolute;
      width: auto;
      height: 100%;
    }

    .phone:nth-child(4) .mask img {
      margin: 1vw;
      width: 8vw;
    }

    /*  */

    @keyframes scaleup {
      from {scale: 1;}
      to {scale: 1.6;}
    }

    .phone:nth-child(5) {
      scale: 1;
      left: 22.5%;
      top:35%;
      animation-name: scaleup;
      animation-delay: 4s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      animation-duration: 1s;
    }

    .phone:nth-child(5) .phone-img {
      width: 40vw;
      height: auto;
    }

    .phone:nth-child(5) .mask {
      border-radius: 3vw;
      width: 20vw;
      height: 43.7vw;
      transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(27.8%) translateY(24%);
    }

    .phone:nth-child(5) .mask video {
      height: 100%;
      width: auto;
    }

    .phone:nth-child(5) .mask img {
      margin: 0.8vw;
      width: 8vw;
    }

    .whitephones {
      width: 100%;
      scale: 0.7;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      z-index: 5;
      gap: 30vw;
      transform: translateY(3%);
    }

    .swiper-full-mobile:before {
      width: 100%;
    }

    .swiper-full-mobile .swiper-slide img {
      width: 94%;
      height: 100%;
      object-fit: fill;
      transform: translateX(3%);
  }
    
    /*  */

    .section1-container:nth-child(2)::before {
      height: 0;
    }

    .content-container h3 {
      font-size: 12vw;
      transform: none;
      display: flex;
      justify-content: center;
    }

    .some-more {
      width: 80%;
    }

    .content-item {
      width: 100%;
      flex-direction: column;
    }

    .content-item-container {
      flex-direction: column;
      gap: 2em;
    }

    .cic-thumb {
      width: 100%;
    }

    /*  */

    .mockup-phone {
      width: 50%;
      margin-top:5em;
    }

    .mockup-phone-container {
      width: 100%;
    }


    .mockup-phone-container img:nth-child(2) {
      width: 33%;
      top: 6%;
      left: 34%;
    }

    .mockup-phone-screen {
      width: 91%;
      height: 94.5%;
      transform: translateX(5%);
      border-radius: 25px;
    }

    .swiper-button-prev {
      display: none;
    }
    
    .swiper-button-next {
      display: none;
    }

    /*  */
    .checkoutsocial {
      width: 10em;
      left: 32%;
      transform: translateY(30%);
    }
    
    div.socials {
      height: 10vw;
      bottom: 8vw;
      margin: 1.5em auto;
      padding: 10vw 0vw;
      gap: 8vw;
    }

    div.socials a {
      position: relative;
      margin: 0.7vw;
    }

    div.socials a svg {
      width: 5vw;
      height: 5vw;
      fill: #fff;
      position: absolute;
      transition: all 0.3s ease;
    }
    /* Section 1 end */
}
/* Media Queries end */