/* Section1 */

.section1 {
    cursor: pointer;
    width: 100%;
    display: flex;
    z-index: 4;
    position: relative;
    pointer-events: none;
} 

.section1-container {
  display: flex;
  width: 100%;
  margin: 3vw 0 0 0;
  z-index: 4;
}

.section1-container h1 {
  font-size: 7vw;
  color: #fff;
  display: flex;
  align-items: baseline;
  letter-spacing:  0.3vw;
}

.projects-heading {
  width: 94%;
  height: 18vw;
  padding: 2vw;
  margin:  0 auto 1vw auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.pacman-container{
  display:flex;
  align-items:center;
  left: 40%;
  top: 22.5%;
}

.pacman{
  width:2.5vw;
  height:2.5vw;
  background: #b5d555;
  border-radius:50%;
  clip-path: polygon(100% 0, 100% 0, 50% 50%, 100% 100%, 100% 100%, 0 100%, 0 0);
  animation:eating ease 0.5s infinite;
  z-index:1;
}

@keyframes eating{
  0%{
    clip-path: polygon(100% 0, 100% 0, 50% 50%, 100% 100%, 100% 100%, 0 100%, 0 0);
  }
  50%{
    clip-path: polygon(100% 0, 100% 50%, 50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0);
  }
}

.dot{
  width: 0.6vw;
  height: 0.6vw;
  background:#fff;
  border-radius:50%;
  animation:move ease-in-out 1s infinite;
}

@keyframes move{
  0%{
    transform:translateX(100%);
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    transform:translateX(-200%);
    opacity:0;
  }
}

.projects-heading .projects-content {
  color: #fff;
  width: 42%;
  font-size: 1vw;
  display: flex;
  justify-content: right;
  text-align: right;
  text-justify: auto;
}

.projects-content .projects-content-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.projects {
  width: 100%;
  z-index: 5;
}

.projects-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8vw;
}

.projects-container .projects-item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: url('/assets/cursors/pointer.cur'), auto;
  overflow: hidden;
}

.projects-item h3 {
  position: absolute;
  z-index: 1;
  font-size: 5vw;
  transition: filter 0.5s ease;
}

.projects-item img {
  width: 100%;
  height: auto;
  filter: brightness(80%);
  scale: 1.05;
  transition: scale 0.6s ease;
}

.projects-item:hover h3 {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.685))
}
.projects-item:hover img {
  scale: 1.01;
}

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

.checkout-arrow {
  display: flex;
  align-items: center;
  position: absolute;
  left: 20%;
}

.checkout-arrow img {
  width: 15vw;
}

.checkout-arrow img:nth-child(2) {
  width: 11vw;
  height: auto;
}

div.socials {
  width: 100%;
  display: block;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 1vw;
  gap: 1vw;
  z-index: 4;
  pointer-events: none;
}

div.socials>*{
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7vw;
}

div.socials div:nth-child(1){
  justify-content: left;
}

div.socials div a {
  color: #fff;
  position: relative;
  margin: 1vw;
  pointer-events: all;
  transform: translateY(1vw);
}

div.socials div a svg {
  width: 1.2vw;
  height: 1.2vw;
  color: #fff;
  fill: #fff;
  position: absolute;
  transition: all 0.3s ease;
}
div.socials div 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: 18vw 0 0 0;
    }  

    .section1-container {
      width: 98%;
      margin: 0 auto;
    }

    .projects-heading {
      height: 50vw;
      width: 97%;
      margin: 8vw auto 25vw auto;
      display: flex;
      flex-direction: column;
      align-items:center;
    }

    .section1-container h1 {
      margin: 2vw 0 0 0;
      font-size: 20vw;
      color: #fff;
      display: flex;
      align-items: baseline;
    }

    .pacman-container {
      display: flex;
      margin: 0 auto;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 48%;
    }

    .pacman {
      width: 6vw;
      height: 6vw;
      margin: 1vw;
    }

    .dot{
      width: 1.2vw;
      height: 1.2vw;
    }

    .projects-heading .projects-content {
      width: 90%;
      font-size: 3.5vw;
      display: flex;
      text-align: center;
    }

    .projects-container {
      gap: 10vw;
    }

    .projects-container .projects-item {
      width: 100%;
      height: 60vw;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      cursor: pointer;
      overflow: hidden;
    }

    .projects-item h3 {
      font-size: 12vw;
      filter: drop-shadow(0 4px 10px #000);
    }
    
    .projects-item img {
      width: auto;
      height: 101%;
    }

    .projects-item:nth-child(3) {
      flex-direction: column;
    }
    .projects-item:nth-child(3) img{
      align-self: flex-start;
    }

    div.socials {
      height: 10vw;
      bottom: 8vw;
      margin: 0 auto;
      padding: 20vw;
      gap: 8vw;
    }

    div.socials img {
      position: absolute;
      width: 40vw;
      height: auto;
      left: 5%;
      transform: translateY(-7vw);
    }

    div.socials {
      bottom: 8vw;
      margin: 1em auto 2em auto;
      padding: 2vw;
      gap: 8vw;
    }
    
    div.socials div:nth-child(1), div.socials div:nth-child(3) {
      position: absolute;
      display: none;
    }
    
    div.socials div a {
      position: relative;
      display: inline-block;
      margin: 0 5vw;
    }
    
    div.socials div a svg {
      width: 5vw;
      height: 5vw;
      fill: #fff;
      position: absolute;
      transition: all 0.3s ease;
    }
    div.socials div a svg:hover {
      /* width: 2.6vw;
      height: 2.6vw; */
      transform: scale(1.4);
      fill: #fff;
    }
    /* Section 1 end */
}
/* Media Queries end */