/* Home Main */
.home-main {
  display: flex;
  flex-direction: column;
  gap: 250px;
  margin-top: -64px;
}

/* Home Hero */
.home-hero {
  display: flex;
  flex-direction: column;
  padding: 0 134px;
  user-select: none;
}
.home-hero-bg {
  position: relative;
}
.home-hero-bg-txt {
  font-size: 20px;
  font-weight: 500;
  color: #63908f;
  animation: hero-anim 5s ease-in-out infinite;
  user-select: none;
}
/* Hero Animation */
@keyframes hero-anim {
  0% {
      transform: translate(0, 0) scale(1);
  }

  25% {
      transform: translate(3px, -3px) scale(1.03);
  }

  50% {
      transform: translate(6px, 0) scale(1.05);
  }

  75% {
      transform: translate(3px, 3px) scale(1.03);
  }

  100% {
      transform: translate(0, 0) scale(1);
  }
}
.home-hero-bg-txt:nth-child(1) {
  animation-delay: 0s;
}

.home-hero-bg-txt:nth-child(2) {
  animation-delay: 1s;
}

.home-hero-bg-txt:nth-child(3) {
  animation-delay: 2s;
}

.home-hero-bg-txt:nth-child(4) {
  animation-delay: 3s;
}

.home-hero-bg-txt:nth-child(5) {
  animation-delay: 4s;
}
.fllflmnt {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 15%;
  color:#66908f;
}
.dt-insghts {
  position: absolute;
  z-index: 2;
  top: 55%;
  left: 40%;
  color: #78a4a4;
}
.glbl-lnchng {
  position: absolute;
  z-index: 2;
  top: 0%;
  color: #243333;
  left: 50%;
}
.mrktng {
  position: absolute;
  z-index: 2;
  top:55%;
  left: 75%;
  color: #bce9e9;
}
.sclbl {
  position: absolute;
  z-index: 2;
  top: 85%;
  left: 25px;
  color: #a3d2d0;
}
.home-hero-img {
  position: relative;
  height: 600px;
  width: 100%;
  z-index: 1;
}
.home-hero-txts {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.home-hero-sbttl {
  font-size: 67px;
  font-weight: 100;
}
.home-hero-ttl {
  font-family: "Syncopate", sans-serif;
  font-weight: bold;
  font-size: 128px;
  background: rgb(221, 244, 242);
  background: linear-gradient(
    150deg,
    rgba(221, 244, 242, 1) 0%,
    rgba(186, 232, 231, 1) 45%,
    rgba(135, 205, 203, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Home About Us */
.home-abt-us {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 134px;
  user-select: none;
}
.home-abt-us-ttl {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.home-abt-us-ttl-frst {
  font-size: 55px;
  font-weight: 500;
  color: #a3ffff;
}
.home-abt-us-ttl-scnd {
  font-size: 75px;
  font-weight: 500;
  color: #a3ffff;
}
.home-abt-us-txt {
  display: flex;
  font-size: 20px;
  font-weight: 400;
}

/* VG Stick */
.vg-stick {
  font-size: 76px;
  color: #a3ffff;
  text-align: start;
}

/* Home What We Do */
.home-wht-w-d {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 134px;
  user-select: none;
}
.home-wht-w-d-ttls {
  display: flex;
  align-items: center;
  justify-content: end;
  color: #a3ffff;
  gap: 8px;
}
.home-wht-w-d-ttls-frst {
  font-size: 55px;
}
.home-wht-w-d-ttls-scnd {
  font-size: 70px;
}
.home-wht-w-d-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 75px; 
}
.home-wht-w-d-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #1e6a6a;
  border-radius: 55px;
  padding: 64px 32px;
  text-align: center;
  gap: 8px;
}
.home-wht-w-d-box-ttl {
  font-size: 21px;
  font-weight: 600;
  margin-top: 25px;
  color:  #a3ffff;
}
.home-wht-w-d-box-desc {
  font-size: 15px;
  font-weight: 500;
}
/* Home Our Brands */
.home-our-brnds {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 0 134px;
  user-select: none;
}
.home-or-brnds-texts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-or-brnds-ttl {
  display: flex;
  align-items: center;
  font-size: 45px;
  color: #a3ffff;
}
.home-or-brnds-sbttl {
  font-size: 20px;
  padding-left: 25px;
}
.home-or-brnds-slider {
  display: flex;
  position: relative;
  overflow: hidden;
  gap: 75px;
}

.home-or-brnds-sldr-brand {
  display: flex;
  align-items: center;
  gap: 75px;
  animation: slideshow 18s linear infinite;
}

@keyframes slideshow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.home-or-brnds-slider::before,
.home-or-brnds-slider::after {
  height: 100px;
  width: 200px;
  position: absolute;
  content: "";
  background: linear-gradient(
    to right,
    #000000 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
}

.home-or-brnds-slider::before {
  left: 0;
  top: 0;
}

.home-or-brnds-slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.home-or-brnds-sldr-brand img {
  height: 48px;
  cursor: pointer;
}
.home-or-brnds-button {
  text-align: center;
  align-self: center;
  padding: 8px 28px;
  border-radius: 34px;
  font-size: 25px;
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
  transition: all 0.5s;
}
.home-or-brnds-button:hover {
  background-color: #9ae5e5;
  color: #ffffff;
  box-shadow: 0px 0px 64px 0px rgba(163, 255, 255, 0.35);
  -webkit-box-shadow: 0px 0px 64px 0px rgba(163, 255, 255, 0.35);
  -moz-box-shadow: 0px 0px 64px 0px rgba(163, 255, 255, 0.35);
}
/* Join Our Team */
.home-jn-our-tm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid #1e6a6a;
  padding: 64px 134px 0 134px;
  user-select: none;
}
.home-jn-our-tm-txts {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 4px;
}
.home-jn-our-tm-sbttl {
  font-size: 45px;
  font-weight: 100;
  color: #a3ffff;
}
.home-jn-our-tm-ttl {
  font-family: "Syncopate", sans-serif;
  font-size: 45px;
  font-weight: 600;
  color: #a3ffff;
}
.home-jn-our-tm-btn {
  height: 86px;
  padding: 16px 64px;
  font-size: 30px;
  font-weight: lighter;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 64px;
  border: 2px solid #a3ffff;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.5s;
}
.home-jn-our-tm-btn:hover {
  border-color: #000000;
  box-shadow: 7px 7px 12px 0px rgba(25, 245, 219, 0.569) inset;
-webkit-box-shadow: 7px 7px 12px 0px rgba(25,245,219,0.57) inset;
-moz-box-shadow: 7px 7px 12px 0px rgba(25,245,219,0.57) inset;
}

/* Mobile */
@media (max-width: 768px) {
  .home-hero, .home-abt-us, .home-wht-w-d, .home-our-brnds, .home-jn-our-tm {
    padding: 0px;
  }
  .home-main {
    gap: 248px;
  }
  .home-hero-txts {
    padding: 0 12px;
  }
  .home-hero-ttl {
    font-size: 64px;
  }
  .home-abt-us {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .home-wht-w-d-ttls {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0 12px;
  }
  .home-wht-w-d-boxes {
    grid-template-columns: 1fr;
    row-gap: 75px;
    padding: 0 16px;
  }
  .home-or-brnds-ttl {
    padding: 12px;
  }
  .home-jn-our-tm {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 12px;
    padding-top: 52px;
  }
}