@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}



body {
  background-color: #0E0D17;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden !important;
  overscroll-behavior: none;
  /* overflow-y: hidden; */
}

section,
footer {
  padding: 0rem 5rem 6rem 5rem;
  overflow-x: hidden;
  overflow-y: hidden;
}

footer {
  padding-bottom: 8rem;
  padding-top: 8rem;
  overflow-y: hidden;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

header {
  position: relative;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-color: #0E0D17;
  padding: 3rem 5rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  width: 15rem;
}

.nav-list {
  display: flex;
}

.nav-item {
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.nav-link {
  color: #fff;
  transition: color 5s ease, background 5s ease;
  /* background: transparent; */
}




.nav-item:not(:last-child) {
  margin-right: 3rem;
}

.hero {
  margin-top: 20.8rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0rem 5rem;
}

.hero-text {
  width: 65%;
}

.hero-text h1 {
  font-size: 7rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.hero-text p {
  color: rgba(255, 255, 255, 0.70);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 3.8rem;
  margin-bottom: 5rem;
}

.hero-text a {
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #000;
  background-color: #fff;
  display: inline-block;
  padding: 1rem 6rem;
  transition: all .5s ease;
}



.hero-img {
  width: 35%;
  animation: rotate 5s linear infinite;
}

.bg {
  position: absolute;
  top: -20rem;
  right: 0rem;
  z-index: -100;
  width: 100%;
}


/* LEAD SECTION .......*/
.lead-container {
  margin-top: 40rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.70);
  border-bottom: 1px solid rgba(255, 255, 255, 0.70);
  position: relative;
}

.ellipse {
  position: absolute;
  left: -5rem;
  bottom: 0rem;
  width: 35rem;
}

.lead-container h2 {
  padding-top: 11.6rem;
  padding-bottom: 14.8rem;
  font-size: 5.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: var(--linear-2, linear-gradient(180deg, #F6F6F7 0%, #7E808F 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 50%;
}

.lead-parag {
  padding-top: 11.6rem;
  padding-bottom: 14.8rem;
  width: 46%;
  padding-left: 3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.70);
}

.lead-box:not(:last-child) {
  margin-bottom: 3.7rem;
}

.lead-box p {
  color: rgba(255, 255, 255, 0.70);
  font-family: Space Grotesk;
  font-size: 2.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* PARTNERS SECTION ........*/
#partner {
  margin-top: 8rem;
}

.partner {
  display: flex;
  justify-content: space-between;
}

.partner-box {
  width: 32%;
  border: 1px solid #FFF;
  background-color: #F5F5F5;
  /* padding: 0rem 0rem 2.7rem 0.1rem; */
}

.partner-logo {
  background-color: #171717;
  /* padding: 1rem 8.7rem 1.0121rem 8.7rem; */
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo img {
  width: 22rem;
}

.partner-logo .kult {
  width: 15rem;
}

.partner-text {
  padding: 2rem;
}

.partner-text h2 {
  font-size: 4.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #000;
  margin-bottom: 1.6rem;
}

.partner-link {
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: #7C5CFC;
  color: #fff;
  padding: .5rem 4rem;
  display: inline-block;
}

.partner-text p {
  color: rgba(0, 0, 0, 0.90);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 6rem;
  margin-bottom: 6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.30);
}

.partner-explore {
  display: inline-block;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.04rem;
  color: #fff;
  background-color: #000;
  padding: 1rem 7rem;
  margin-bottom: 1rem;
}

/* OUR PARTNERS.............*/


.slider {
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slider .slider-track {
  animation: scroll 40s linear infinite;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: fit-content;
}

.slider .slide {
  /* height: 100px; */
  width: 900px;
}

/* .slider .slider-track:hover {
  animation-play-state: paused;
} */

.slide h2 {
  font-size: 10rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: linear-gradient(180deg, #F6F6F7 0%, #7E808F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  height: auto;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* FIND SECTION */
#find {
  margin-top: 12rem
}

.find {
  position: relative;

}

.find p {
  text-align: center;
  font-size: 5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-size: #fff;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.join {
  margin-top: 5rem;
  text-align: center;
}

.join p {
  text-align: center;
  font-size: 6.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: linear-gradient(68deg, #9945FF 20.22%, #8752F3 35.82%, #5497D5 50%, #43B4CA 57.09%, #28E0B9 65.6%, #19FB9B 83.33%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6.4rem;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.join a {

  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #202020;
  background-color: #FFF;
  display: inline-block;
  text-align: center;
  padding: 1.5rem 4em;
  transition: all .5s ease;
}


/* .join-bg {
  position: absolute;
  left: -5rem;
  top: 0rem;
  z-index: -150;
} */

#work {
  background-color: #0E0D17;
}

.work {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-text {
  width: 53%;
}

.work-text h2 {
  font-size: 5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: linear-gradient(180deg, #F6F6F7 0%, #7E808F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5.8rem;
}

.work-text a {
  color: #202020;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: #FFF;
  display: inline-block;
  text-align: center;
  padding: 1.5rem 4em;
  transition: all .5s ease-in-out;
}


.work img {
  width: 38%;
}

#grow {
  position: relative;
  padding-bottom: 20rem;
}

.grow h2 {
  text-align: center;
  font-size: 6.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: var(--linear-2, linear-gradient(180deg, #F6F6F7 0%, #7E808F 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 3.4rem;
}

.grow-parag {
  color: rgba(246, 246, 244, 0.90);
  text-align: center;
  font-family: Space Grotesk;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 12rem;
}

.grow a {
  display: inline-block;
  background: rgba(38, 38, 38, 0.60);
  box-shadow: 0px 0.63683px 3.82096px 0px rgba(255, 255, 255, 0.25) inset, 0px 8.86702px 9.45815px 0px rgba(0, 0, 0, 0.10);
  padding: 1.5rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 40%;
  margin-right: auto;
  margin-left: auto;
  transition: all .5s ease;
}



.grow a p {
  display: inline-block;
  color: #F6F6F4;
  text-align: center;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 300;
  line-height: 3.64rem;
  margin-right: 2.5rem;
}

.footer-stone {
  position: absolute;
  top: 20rem;
  left: 0rem;
  width: 30rem;
}

/* FOOTER SECTION...... */
#footer {
  background-color: #FFF;

}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-parag {
  color: rgba(0, 0, 0, 0.80);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 1.5rem;
}

.copy {
  color: rgba(0, 0, 0, 0.50);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 4.3rem;
}

.footer ul {
  margin-top: 2rem;
}

.footer ul li {

  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.footer ul li:not(:last-child) {
  margin-bottom: 3rem;
}

.middle {
  margin-left: 22rem;
}

.footer ul li a {
  color: rgba(14, 13, 23, 0.70);
}

.footer-logo {
  width: 12rem;
}

.copy2 {
  display: none;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (hover: hover) {
  .nav-link:hover {
    background: var(--Linear, linear-gradient(90deg, #15DBFF 0%, #006CD4 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: color 5s ease, background 5s ease-in-out;
  }

  .hero-text a:hover {
    color: #fff;
    background: var(--Linear, linear-gradient(90deg, #15DBFF 0%, #006CD4 100%));
  }

  .join a:hover {
    color: #fff;
    background: var(--Linear, linear-gradient(90deg, #15DBFF 0%, #006CD4 100%));
  }

  .work-text a:hover {
    color: #fff;
    background: var(--Linear, linear-gradient(90deg, #15DBFF 0%, #006CD4 100%));
  }

  .grow a:hover {
    color: #F6F6F4;
    background: var(--Dominant-Colour, #000);
    box-shadow: 0px 0.63683px 3.82096px 0px rgba(255, 255, 255, 0.25) inset, 0px 8.86702px 9.45815px 0px rgba(0, 0, 0, 0.10);
  }
}

@media(hover:none) {

  .nav-link:hover,
  .nav-link:active {
    color: #fff !important;
    transition: none;
  }

  .hero-text a:hover,
  .hero-text a:active {
    color: #000;
    background-color: #fff;
  }

  .join a:hover,
  .join a:active {
    color: #202020;
    background-color: #FFF;
  }

  .work-text a:hover,
  .work-text a:active {
    color: #202020;
    background-color: #FFF;
  }

  .grow a:hover,
  .grow a:active {
    background: rgba(38, 38, 38, 0.60);
    box-shadow: 0px 0.63683px 3.82096px 0px rgba(255, 255, 255, 0.25) inset, 0px 8.86702px 9.45815px 0px rgba(0, 0, 0, 0.10);
  }
}