@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+25&display=swap');

:root {
  --text-color: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--text-color);
    scroll-behavior: smooth;
    scroll-padding: 15rem;
}

body {
    background: #000;
}

.header {
   background: url(../Imgs/verticl-lines.png) no-repeat;
}

.header.nobg {
   background: #000;
}

header {
    overflow: hidden;
    margin-bottom: 0;
    height:100px;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 50px; */
    position: fixed;
    width: 100%;
    padding: 2em 3em;
    z-index: 999;
    transition: all .5s;
}

.static {
    padding: 1em 2em;
    background: #000;
    box-shadow: 2px 2px 20px #000;
}

header nav a.logo {
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    animation-delay: 0.5s;
}

header nav a.logo .logo-text h3 {
font-family: "Jersey 25", sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 24px;
}

header nav ul.nav-links {
    display: flex;
    gap: 50px;
    animation-delay: 0.7s;
}

header nav ul.nav-links li{
    list-style: none;
}

header nav ul.nav-links li a{
    color: var(--text-color);
    font-size:12px;
    font-weight: Medium;
    text-decoration: none;
    transition: .5s;
}

header nav ul.nav-links li a::after {
 content: '';
 display: block;
 background: #fff;
 height: 3px;
 border-radius: 2px;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s;
}

header nav ul.nav-links li a:hover {
 text-shadow: 1px 1px 8px #fff; 
}
header nav ul.nav-links li a:hover::after {
 color: #fff; 
 transform-origin: right;
 transform: scaleX(1);
}


header nav a.joinus {
    background: #fff;
    width: 120px;
    height: 42px;
    text-align: center;
    /* padding: .8em 2em; */
    padding-top: .8em;
    border-radius: 30px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    color: #000;
    transition: .5s;
    animation-delay: .9s;
}

header nav a.joinus:hover {
 box-shadow: 1px 1px 8px #fff;
}
 a.logo,
 ul.nav-links,
a.joinus,
.mobile-nav
{
    opacity: 0;
    transform: translateX(2rem);
  animation: returnToOrigin 0.7s ease-out forwards;
}

@keyframes returnToOrigin {
    to {
        transform: translate(0);
        opacity: 1;
    }
}

section.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 5em;
    background: url(../Imgs/Ellipse-hero.png) no-repeat center center;
}

section.hero input{
padding-left: 32px;
background: url(../Imgs/serch.png) no-repeat 8.5px 5.5px ;
background-size: 16px;
width: 187px;
height: 30px;
border-radius: 50px;
background-color: #383a39;
color: var(--text-color);
border: 1px solid #fff;
font-size: 12px;
outline:none;
font-weight: Medium;
transform: translateY(2rem);
animation-delay: 1s;
}

section.hero input::placeholder {
    color: #fff;
}
section.hero h2 {
    color: var(--text-color);
    margin-top: .7em;
    font-size: 45px;
    width: 50%;
    transform: translateY(2rem);
    animation-delay: 1.2s;
}

section.hero p {
    color: var(--text-color);
    margin-top: 1.8rem;
    font-size: 14px;
    font-weight: 300;
    width: 50%;
    transform: translateY(2rem);
    animation-delay: 1.4s;
} 

section.hero a.apply {
 margin-top: 2em;
 transition: .5s;
 z-index: 20;
 opacity: 0;
 transform: translateY(-2rem);
 animation-delay: 1.7s;
 transition: .5s;
 font-size: 15px;
}

.btn-6 {
    font-weight: bold;
  padding: 1em 2em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
   text-align: center;
   transition: .5s;
}

.btn-6:hover {
    box-shadow: 1px 1px 8px #fff;
}

section.hero img.curves {
margin-top: -18%;
z-index: -2;
transform: scale(1.1);
opacity: 0;
animation-delay: 1.8s;
width: 70%;
}

 input,
 h2,
 p,
 a.apply,
 img.curves {
    opacity: 0;
    animation: returnToOrigin 0.7s ease-out forwards;
}

.header .sponsors {
    margin: 5em auto 0  auto;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction:column;
    animation: appear 2s 2s ease-out forwards;
    opacity: 0;
    transition: opacity 2s ease-out;
}

@keyframes appear {
    100% {
        opacity: 1;
    }
}

.header .sponsors .scroll{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    overflow: hidden;
    gap: var(--gap);
    padding-bottom: 1.5em;
    margin-top: 1.5em;
    --gap: 80px;
}

.header .sponsors .rightToLeft {
    white-space:nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 80px;
    min-width: 100%;
    animation: RightToLeft 20s infinite linear;
}

.header .sponsors p{
 color: #fff;
 text-align: center;
 margin:auto;
 font-size: 20px;
 font-weight: 400;
}

.header .sponsors .scroll .rightToLeft img{
 width: 100%;
  /* animation: RightToLeft 15s infinite linear; */
  /* --gap: 30px; */

}

.header .sponsors .scroll .rightToLeft img.stix{
 max-width: 7%;

}

@keyframes RightToLeft {
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.scroll:hover .rightToLeft{
    animation-play-state:paused;
}

section.about {
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    padding: 8em 0;
    background: url("../Imgs/Ellipse\ 13.png") no-repeat center;
    position: relative;
}

section.about h2{
 color: #fff;
 text-align: center;
 font-size: 32px;
 font-weight: 600;
 margin-bottom: 1em;
 opacity: 0;
 transition: 1s;
 transform: translateY(200px);
}

section.about p{
 color: #cdcdcd;
 text-align: center;
 font-size: 16px;
 font-weight: 300;
 width: 45%;
 transition: 1s;
}

section.about img {
    position: absolute;
    margin: 0;
    width: 50%;
}

section.about img.top-left {
    top: -50%;
    right: 60%;
}

section.about img.top-right {
    top: -50%;
    left: 60%;
}

section.about img.bottom-right {
    top: 10%;
    left: 55%;
}

section.about img.bottom-left {
    top: 10%;
    right: 55%;
}

section#services {
    color: var(--text-color);
    margin: 1em auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section#services h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: 600;
}

section#services p.title {
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    color: #cdcdcd;
    margin-bottom: 3.5em;
}

section#services .service {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    align-items: center;
    padding:0 90px;
    width: 100%;
}

section#services .service .service1
{
    grid-column: span 4 ;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: space-between;
} 

section#services .service .service1 span img
{
 /* position: relative;
 bottom: -30px; */
 width: 100%;
} 

section#services .service .service3 span img
{
 position: relative;
 bottom: -30px;
}

section#services .service .service2
{
    grid-column:  span 3;
    /* position: relative; */
    padding-bottom: 0;
} 

section#services .service .service2 span img {
    position: relative;
    bottom: 0;
}

section#services .service .service3
{
    grid-column: span 3;
} 

section#services .service .service4
{
    grid-column: span 4;
} 

section#services .service div {
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(185, 255, 234, 0.5);
    border-radius: 24px;
    box-shadow: inset 3px 3px 20px rgba(255, 255, 255, 0.2);
    padding: 2em;
    height: 100%;
    position: relative;
    transition: .5s;
}
section#services .service div:hover {
 /* opacity: 1; */
 box-shadow: inset 8px 8px 30px rgba(255, 255, 255, 0.5);
}

section#services .service div .img-con {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    align-items: center;
}
section#services .service div h4 {
 font-size: 20px;
 font-weight: 400;
 position: relative;
 /* left: -115px; */
}

section#services .service div p {
 font-size: 14px;
 font-weight: 300;
 color:#cdcdcd ;
 margin-top: .8em;
 /* margin-bottom: 2em; */
}


section#ecosystem {
    margin-top: 8em;
    background: url("../Imgs/eco.png") no-repeat;
    background-size: 100%;
    /* height: 110vh; */
   padding-top: 18em;
   padding-bottom:18em;
   position: relative;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

section#ecosystem div {
 /* margin-top: -300px; */
 position:absolute;
 bottom:10%;
}

section#ecosystem div h3 {
    color: #fff;
    text-align: center;
    font-size: 34px;
    font-weight: 500;
}

section#ecosystem div p {
    color: #cdcdcd;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    /* margin-top: 1em; */
    width: 50%;
    margin:1em auto;
}

section#ecosystem-mobile {
    display: none;
}

section.why  {
    width: 100%;
    margin: auto ;
    padding: 7em 7em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
    background: url("../Imgs/Ellipse\ Why.png") no-repeat;
    /* background-position:; */
    /* background-size: 800px; */
}

section.why .left h3 {
    color: var(--text-color);
    font-size: 32px;
    margin-bottom: 1em;
    width: 50%;
}

section.why .left p {
    color: #cdcdcd;
    margin-bottom: 3.8rem;
    font-size: 16px;
}

section.why .left a.get-started{
     font-weight: bold;
     width: fit-content;
  padding: 1em 3.5em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
   text-align: center;
   text-decoration: none;
   transition: .5s;
}

section.why .left a.get-started:hover {
    box-shadow: 1px 1px 8px #fff;
}

section.why .right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    gap: 10px;
}

section.why .right div {
     background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(185, 255, 234, 0.5);
    border-radius: 24px;
    box-shadow: inset 3px 3px 20px rgba(255, 255, 255, 0.2);
    padding: 2em 1.5em;
    height: 100%;
    transition: .5s;
}

section.why .right div.card1 {
 background: url("../Imgs/Ellipse\ 81.png") no-repeat bottom right;
 position: relative;
}

section.why .right div.card2 {
    background: url("../Imgs/Ellipse\ 81\ \(1\).png") no-repeat bottom left;
    position: relative;
}

section.why .right div.card3 {
    background: url("../Imgs/Ellipse\ 81\ \(2\).png") no-repeat top right;
    position: relative;
}

section.why .right div.card4 {
    background: url("../Imgs/Ellipse\ 81\ \(3\).png") no-repeat top left;
    position: relative;
}

section.why .right div:hover {
box-shadow: inset 8px 8px 30px rgba(255, 255, 255, 0.5);
}

section.why .right div img {
    margin-bottom: 1em;
}

section.why .right h4 {
    color: var(--text-color);
    font-size: 14px;
    margin-bottom: .5em;
}

section.why .right p {
    color:#cdcdcd;
    font-size: 14px;
}

section#testimonials {
    margin-top: 3.5em;
    background: url("../Imgs/Ellipse\ 66.png") center 0 no-repeat;
    padding-top: 3.8em;
}

section#testimonials h2 {
    text-align: center;
    color: var(--text-color);
    font-size: 32px;
}

section#testimonials p.title {
    text-align: center;
    color: #cdcdcd;
    font-size: 16px;
    width: 33%;
    margin:1em auto;
}

/* .swiper {
  width: 100%;
  height: 300px;
} */

.swiper {
  /* width: 600px;
  height: 300px; */
      width: 95%;
    height: 100%;
    margin-top: 5em;
    position: relative;
}

section#testimonials .swiper .swiper-wrapper {
   /* display: flex;
   justify-content: center;
   margin: 3.5em auto;
   gap: 20px;
   align-items: center;
   width: 85%; */
    width: 100%;
    /* height: 400px; */
    margin-bottom: 3em;
}

section#testimonials .swiper .swiper-wrapper div.swiper-slide {
    width: 100%;
    /* height: 100%; */
    background: url("../Imgs/Ellipse\ 61.png") no-repeat;
    background-size: cover;
    /* background-position-y: -15%; */
    border-radius: 24px;
    padding: 1.5em;
}

section#testimonials .swiper-pagination {
    position: relative;
    bottom: 0;
    width: 100%;
}

section#testimonials .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
    width: 7px; 
    height: 7px; 
}

section#testimonials .swiper-button-next{
    color: #bbb;

}

section#testimonials .swiper-button-prev{
    color: #bbb;
}


section#testimonials .swiper .swiper-wrapper p {
   color: #cdcdcd;
   font-size: 12px;
   /* width: 100%; */
}

section#testimonials .swiper .swiper-wrapper .card-footer {
   display: flex;
   justify-content: start;
   gap: 8px;
   align-items: center;
   margin-top: 1.5em;
}

section#testimonials .swiper .swiper-wrapper .card-footer h5{
   color: var(--text-color);
}

section.question {
 margin:auto;
 padding: 9.8em 0;
 width: 50%;
 background: url("../Imgs/Group\ 42.png") center no-repeat;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 position: relative;
 background-size: cover;
}

section.question h1 {
 color: var(--text-color);
 font-size: 48px;
 text-align: center;
 margin-top: 1em;
}

section.question p {
 color: #cdcdcd;
 font-size: 18px;
 margin:1em auto;
 text-align: center;
 width: 95%;
}

/* section.question a {
    margin:auto;
} */

    section.question a{
 margin-top: 1em;
     font-weight: bold;
     width: fit-content;
  padding: 1em 3.5em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
   text-align: center;
   text-decoration: none;
   z-index: 20;
   transition: .5s !important;
}

section.question a:hover {
    box-shadow: 1px 1px 8px #fff;
}
section.question img {
    position:absolute;
    margin:0;
    overflow: hidden;
    z-index: -2;
}

section.question img.top-left {
    top: -20%;
    right: 80%;
}

section.question img.top-right {
    top: -20%;
    left: 80%;
}

section.question img.bottom-right {
    bottom: 0;
    left: 70%;
}

section.question img.bottom-left {
    bottom: 0;
    right: 70%;
}

footer {
    margin-top: 8em;
    background: url("../Imgs/Ellipse\ 66.png") center 0 no-repeat;
    padding-top: 3.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2em;
}

footer ul li a {
    color: var(--text-color);
    text-decoration: none;
        font-size:12px;
    font-weight: Medium;
    transition: .5s;
}

footer ul li a::after {
 content: '';
 display: block;
 background: #fff;
 height: 3px;
 border-radius: 2px;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s;
}

footer ul li a:hover {
 text-shadow: 1px 1px 8px #fff; 
}
footer ul li a:hover::after {
 color: #fff; 
 transform-origin: right;
 transform: scaleX(1);
}

footer div.logo a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    text-transform: uppercase;
    margin-bottom: 1em;
    text-decoration: none;
}

footer div.logo a h2 {
 font-size: 20px;
}

footer p.title {
    color: #cdcdcd;
    font-size: 16px;
    width: 20% !important;
    text-align: center;
    margin:auto;
}

footer div p.title {
    width: 70% !important;
}

footer ul {
 margin-top: 3.5em;
 display: flex;
 justify-content: center;
 width: 50%;
 gap: 70px;
 align-items: center;
}

footer ul li{
 font-size: 14px;
 color: #cdcdcd;
 padding-left: 9px;
 font-weight: 300;
}

footer ul li:first-child{
 list-style-type: none;
}

footer div.footer-bottom  {
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: center;
    margin-top: 3.8em;
    border-top: 1px solid#555;
    padding-top: 2em;
}

footer div.footer-bottom div.right a{
 text-decoration: none;
    color: #cdcdcd;
    font-size: 14px;
    transition: 0.5s;
}

footer div.footer-bottom div.right a::after {
 content: '';
 display: block;
 background: #fff;
 height: 3px;
 border-radius: 2px;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s;
}

footer div.footer-bottom div.right a:hover {
 text-shadow: 1px 1px 8px #fff; 
}
footer div.footer-bottom div.right a:hover::after {
 color: #fff; 
 transform-origin: right;
 transform: scaleX(1);
}

footer div.footer-bottom div.center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

footer div.footer-bottom div.center a img{
 transition: .5s;
}

footer div.footer-bottom div.center a:hover img{
 scale:1.1 ;
}

footer div.footer-bottom div.right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

footer div.footer-bottom p {
    color: #cdcdcd;
    font-size: 14px;
}


/* ---------------------------
   ---------------------------
   --------------------------- */

   /* Mobile view */

   
   .mobile-nav {
      position: relative;
      width: 60px;
      height: 60px;
      display: none;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: 0.5s;
    animation-delay: 1s;
   }

   .header .mobile-menu {
    transform: scale(0);
   }


@media only screen and (max-width:1200px) {
    
 .header {
   background-size: contain;
}
 
    section.hero h2 {
    width: 70%;
}

section.hero p {
    width: 70%;
}

section.hero img.curves {
margin-top: -25%;
width: 100%;
}

section.about img {
width: 40%;
}

    section.about img.top-left {
        top: -35%;
        left: 0%;
    }

     section.about img.top-right {
        top: -35%;
     }
    
    section.about img.bottom-left {
        top: 10%;
        left: 2%;
    }

@media only screen and (min-height:1024px){
    
    section.about img.top-left {
        top: -30%;
        left: -5%;
    }
    
    section.about img.top-right {
        top: -30%;
        left: 60%;
    }
    
    section.about img.bottom-right {
        top: 10%;
        right: 0%;
    }
    
    section.about img.bottom-left {
        top: 10%;
        left: 0;
    }
}

@media only screen and (max-height:768px){

section#ecosystem {
   padding-top: 15em;
   padding-bottom:15em;
}
}

@media only screen and (max-height:1400px){

section#ecosystem {
   padding-top: 15em;
   padding-bottom:15em;
}
}

 section.question img {
 position:absolute;
 margin:0;
 overflow: hidden;
 width: 80%;
}

section.question img.top-left {
    top: -10%;
    right: 70%;
}

section.question img.top-right {
    top: -10%;
    left: 70%;
}

section.question img.bottom-right {
    bottom: 0;
    left: 65%;
}

section.question img.bottom-left {
    bottom: 0;
    right: 65%;    
}

section#contact {
    width: 80%;
    margin:auto;
}

section div#contact-us {
    margin-top: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 50px;
}

section div#contact-us .text{
 width: 100% !important;
}

section div#contact-us .text p{
 width: 70% !important;
}

}

   @media only screen and (max-width:992px) {
    
  header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 50px; */
    position: fixed;
    width: 100%;
    padding: 2em 2em;
    z-index: 999;
    transition: all .5s;
}


    .mobile-nav span {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotate(45deg);
        transition: 0.5s;
    }
    
    .mobile-nav.active span {
     transform: rotate(135deg);
     transition-delay: 0.5s;
    }
    
    .mobile-nav span::before {
     content: '';
     position: absolute;
     width: 40px;
     height: 3px;
     background: #fff;
     border-radius: 3px;
     transition: 0.5s;
    }
    
    .mobile-nav.active span::before {
     transform: rotate(-270deg);
     transition-delay: .5s;
    }
    
    .mobile-nav span::after {
     content: '';
     position: absolute;
     width: 25px;
     height: 3px;
     background: #fff;
     border-radius: 3px;
     transition: 0.5s;
     transform: translateY(-12px);
     box-shadow: 0 24px #fff;
    }
    
    .mobile-nav.active span::after {
     width: 40px;
     transform: translateY(0px);
     box-shadow: 0 0 #fff;
    }
    
    header .mobile-menu {
        position: fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        z-index: 900;
        transform: scale(0);
        transition: 0.5s;
    }
    
    header .mobile-menu.show {
        transform: scale(1);
    }
    
    header .mobile-menu ul {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 50px;
     justify-content: center;
     align-items: center;
     /* margin-top: 2em; */
    }
    
    header .mobile-menu ul li {
     position: relative;
     list-style-type: none;
     text-align: center;
     display: block;
     /* margin: 3em auto; */
    }
    
    header .mobile-menu ul li a {
     position: relative;
     text-decoration: none;
     font-size: 2rem;
     color: #fff;
     font-weight: 700;
     text-transform: uppercase;
     display: inline-block;
    }
    
    header .mobile-menu ul li a:before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 8px;
     background: rgba(185, 255, 234);
     /* border-radius: 8px; */
     transform: translateY(-50%) scaleX(0);
     transform-origin: right;
     transition: 0.5s transform;
    }
    
    header .mobile-menu ul li a:hover:before {
     transform: translateY(-50%) scaleX(1);
     transform-origin: left;
     transition: 0.5s transform;
    }

    header .mobile-menu ul a.joinus {
    background: #fff;
    /* width: 120px;
    height: 42px; */
    text-align: center;
    padding: 1em 4em;
    /* padding-top: .8em; */
    border-radius: 30px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    color: #000;
    transition: .5s;
    animation-delay: .9s;
}
    .mobile-nav {
        display: flex;
    }

    .header {
   background: url("../Imgs/verticl-lines.png") no-repeat;
   background-size:contain;
   height: 100%;
}

header nav a.logo .logo-text h3 {
font-size: 16px;
font-weight: 500;
}

header nav a.logo img {
 width: 40px;
}

    header nav ul.nav-links {
         display: none;
    }

    header nav a.joinus {
        display: none;
    }


section.hero {
    width: 100%;
    padding: 5em 2em 0 2em;
    background: url("../Imgs/Ellipse-hero.png") no-repeat;
    background-position: center 20px;
    background-size: contain;
}

section.hero input{
padding-left: 22px;
background: url(../Imgs/serch.png) no-repeat 5px 5.5px ;
background-size: 14px;
width: 150px;
height: 30px;
font-size: 10px;
}


section.hero h2 {
    margin-top: .8em;
    font-size: 38px;
    width: 70%;
}

section.hero p {
    margin-top: 1.5rem;
    font-size: 14px;
    width: 70%;
}

section.hero a.apply {
 margin-top: 2.5em;
 font-size: 12px;
}

section.hero img.curves {
    /* position: static; */
margin-top: -25%;
width: 100%;
}

.header .sponsors {
    margin: 5em auto 0 auto;
    width: 100%;
}

.header .sponsors p{
 text-align: center;
 margin:auto;
 font-size: 18px;
 font-weight: 400;
}

.header .sponsors img{
 width: 90%;
 margin:auto;
}

section.about {
    padding: 3em 2em;
    margin-top: 3em;
    background: url("../Imgs/Ellipse\ 13.png") no-repeat center;
    position: relative;
    background-size: contain;
}


section.about h2{
 font-size: 24px;
}

section.about p{
 font-size: 14px;
 width: 90%;
}

@media only screen and (min-height:1024px){

    section.about p{
 font-size: 14px;
 width: 55%;
}

    section.about img {
    position: absolute;
    margin: 0;
    width: 45%;
}

    section.about img.top-left {
        top: -90%;
        left: 0;
    }
    
    section.about img.top-right {
        top: -90%;
        left: 55%;
    }
    
    section.about img.bottom-right {
        top: -10%;
        left: 55%;
    }
    
    section.about img.bottom-left {
        top: -10%;
        left: 0;
    }
}

@media only screen and (min-height:1200px){

    section.about p{
 width: 50%;
}

    section.about img {
    width: 45%;
}
}

section#services h2 {
    font-size: 24px;
}

section#services p.title {
    font-size: 14px;
    width: 80%;
    margin: auto auto 3.5em auto;
}

section#services .service {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 30px;
    padding: 0 7em;
}

section#services .service .service1
{
    grid-column: span 6;
    width: 100%;
    margin:auto;
} 

section#services .service .service1 span img
{
 position: relative;
 bottom: -30px;
 width: 100%;
} 

section#services .service .service3 span img
{
 position: relative;
 bottom: 0;
 margin-top: 1em;
}

section#services .service .service4 span img
{
height: 100%;
width: 100%;
}

section#services .service .service2
{
    grid-column:  span 6;
    position: relative;
    padding-bottom: 0;
} 

section#services .service .service3
{
    grid-column: span 6;
} 

section#services .service .service4
{
    grid-column: span 6;
} 

section#services .service div {
    height: 100%;
}

section#services .service div h4 {
 font-size: 20px;
}

section#services .service div p {
 font-size: 14px;
}

section#ecosystem {
    margin-top: 5em;
    padding-top: 5.5em;
    padding-bottom: 5.5em;
}

@media only screen and (min-height:1023px){
    
    section#ecosystem {
        padding-top: 8.5em;
        padding-bottom: 13.5em;
    }
    
}

@media only screen and (max-height:700px){
    
    section#ecosystem {
        padding-top: 8.5em;
        padding-bottom: 13.5em;
    }
    
}

@media only screen and (max-height:600px){
        section.about p{
 font-size: 14px;
 width: 55%;
}

    section.about img {
    position: absolute;
    margin: 0;
    width: 45%;
}

    section.about img.top-left {
        top: -90%;
        left: 0;
    }
    
    section.about img.top-right {
        top: -90%;
        left: 55%;
    }
    
    section.about img.bottom-right {
        top: -10%;
        left: 55%;
    }
    
    section.about img.bottom-left {
        top: -10%;
        left: 0;
    }
    
}


section#ecosystem div h3 {
 font-size: 24px;
 font-weight: 500;
}

section#ecosystem div p {
 font-size: 16px;
 margin:.5em auto;
 width: 50%;
 font-weight: 300;
}

section.why  {
    padding: 7em 7.5em;
    flex-direction: column;
    gap: 100px;
}

section.why .left {
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.why .left h3 {
    font-size: 24px;
    margin-bottom: 1em;
    width: 100%;
    text-align: center;
}

section.why .left p {
    margin-bottom: 3.8rem;
    font-size: 14px;
    text-align: center;
    width: 80%;
}

section.why .right {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


section#testimonials h2 {
    font-size: 30px;
}

section#testimonials p.title {
    font-size: 14px;
    width: 55%;
}

section.question {
 margin:auto;
 padding: 7em 3em;
 background-size: cover;
 position: relative;
}

section.question h1 {
 font-size: 30px;
 width: 100%;
}

section.question p {
 font-size: 12px;
 width: 100%;
}

@media only screen and (max-height: 600px) {
    
    section.question {
 padding: 8em 0;

}

    section.question h1 {
 font-size: 30px;
 width: 70%;
}

section.question p {
 font-size: 12px;
 width: 70%;
}
    section.question img.top-left {
    top: -20%;
    right: 52%;
}

section.question img.top-right {
    top: -20%;
    left: 50%;
}

section.question img.bottom-right {
    bottom: -10%;
    left: 50%;
}

section.question img.bottom-left {
    bottom: -10%;
    right: 52%;    
}
}

footer p.title {
    font-size: 14px;
    width: 50% !important;
}

footer ul {
 margin-top: 3.5em;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 gap: 15px;
 width: 50%;
 align-items: center;
}

footer ul li{
 font-size: 14px;
 list-style-type: none;
 font-weight: 600;
}

footer div.footer-bottom  {
    flex-direction: column;
    gap: 20px;
    width: 90%;
}

footer div.footer-bottom div.center {
    gap: 10px;
}

.wrapper {
        display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    margin: 5em auto ;
    /* padding: 0 7em; */
    width: 80% !important;
    /* gap: 20px; */
}

.wrapper .side-bar{
     display: none !important;
}

div.con {
 width: 90% !important;
 margin-left:0 !important;

}

div.con section{
  height: 100%;
}

div.con section#the-goal{
 margin-top: 5em;
}

div.con section#the-approach{
 margin-top: 5em;
}

div.con section#why-approach{
 margin-top: 5em;
}

div.con section#team {
    margin-top: 5em;
 width: 100% !important;
}


div.con section#team .cards{
   flex-direction: column;
   margin-top: 5em;
   margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
   gap: 70px !important;
   width: 50% !important;
}

div.con section#team .cards div  {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100% !important;
}

div.con section#team .cards div img {
   width: 50%;
}

div.con section#team .cards div h4 {
 text-align: center;
 margin-top: 2em;
 font-size: 20px;
}

div.con section#team .cards div h5 {
text-align: center;
margin-top: 0.5em;
font-weight: 400;
color: #cdcdcd;
font-size: 16px;
}

div.con section#team .cards div p{
color: #cdcdcd;
font-weight: 300;
font-size: 14px;
margin-top: 2em;
text-align: center;
}

 a.join{
 margin-top: 0 !important;
}

section#team-form div#con {
    flex-direction: column;
    gap: 50px;
}

section#team-form div#con .text{
 width: 80% !important;
}

section#team-form div#con .text h2{
 font-size: 36px;
 width: 100% !important;
}

section#team-form div#con .form{
 width: 80% !important;
}

section#team-form div#con form div.form-details div.form-parent{
 display: flex !important;
 width: 100% !important;
 justify-content: space-between;
 flex-direction: column;
 gap: 20px;
}


section#startup-form div#con {
    flex-direction: column;
    gap: 50px;
}

section#startup-form div#con .text{
 width: 80% !important;
}

section#startup-form div#con .text h2{
 font-size: 36px;
 width: 100% !important;
}

section#startup-form div#con .form{
 width: 80% !important;
}

section#startup-form div#con form div.form-parent{
 display: flex !important;
 width: 100% !important;
 justify-content: space-between;
 flex-direction: column;
 gap: 20px;
}

section#faq p.title {
 width: 50% !important;
}

}


@media only screen and (max-width:700px){
  
  
section.hero {
  background-size: cover;
  background-position: center 30px;
  overflow: hidden;
}
  
    section.hero h2 {
    width: 100%;
}

section.hero p {
    width: 100%;
}

section.hero img.curves {
margin-top: -30%;
width: 130%;
}

.header .sponsors p{
 font-size: 14px;
}

    section.about {
        overflow: hidden;
    }

    section.about img {
    position: absolute;
    margin: 0;
    width: 70%;
}

    section.about img.top-left {
        top: -50%;
        left: -20%;
    }
    
    section.about img.top-right {
        top: -50%;
        left: 50%;
    }
    
    section.about img.bottom-right {
        bottom: 0;
        left: 55%;
    }
    
    section.about img.bottom-left {
        bottom: 0;
        left: -25%;
    }

    section#services .service {
    padding: 0 2em;
}

section#ecosystem {
    display: none;
}

section#ecosystem-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 8em;
    margin-bottom: 8em;
}

section#ecosystem-mobile h3 {
 font-size: 24px;
 text-align: center;
 width: 80%; 
 margin:auto;
 font-weight: 600;
}

section#ecosystem-mobile p {
    font-size: 12px;
    text-align: center;
    width: 80%;
    margin:auto;
    color: #cdcdcd;
    margin-top: 2em;
}

section#ecosystem-mobile img {
 width: 20%;
 margin-top:4rem;
}

section.question {
 padding: 3.5em 0;
 width: 100%;
 overflow: hidden;
}

section.question h1 {
 font-size: 30px;
 width: 80%;
}

section.question p {
 font-size: 12px;
 width: 80%;
}

section.question img {
 position:absolute;
 margin:0;
 overflow: hidden;
 width: 70%;
}

section.question img.top-left {
    top: -25%;
    right: 52%;
}

section.question img.top-right {
    top: -25%;
    left: 50%;
}

section.question img.bottom-right {
    bottom: -20%;
    left: 50%;
}

section.question img.bottom-left {
    bottom: -20%;
    right: 52%;    
}

@media only screen and (max-height: 600px) {
    
    section.question {
 padding: 8em 0;

}

    section.question h1 {
 font-size: 30px;
 width: 50%;
}

section.question p {
 font-size: 12px;
 width: 50%;
}
    section.question img.top-left {
    top: -30%;
    right: 52%;
}

section.question img.top-right {
    top: -30%;
    left: 50%;
}

section.question img.bottom-right {
    bottom: -20%;
    left: 50%;
}

section.question img.bottom-left {
    bottom: -20%;
    right: 52%;    
}
}

section.why  {
    padding: 7em 2em;
}

section#testimonials .swiper .swiper-wrapper {
   width: 80%;
}

div.con section#team .cards{
   gap: 70px;
   width: 80% !important;
}

section div#contact-us form {
 padding: 0 !important;
 border: none !important;
}

section div#contact-us form .form-parent{
 gap: 20px;
 flex-direction: column;
}

section#contact {
    width: 80% !important;
}

section div#contact-us .text{
 width: 100% !important;
}

section div#contact-us .text p{
 width: 100% !important;
}


section#team-form div#con .text{
 width: 100% !important;
}

section#team-form div#con .text h2{
 font-size: 36px;
 width: 100% !important;
}

section#team-form div#con .text p{
 font-weight: 200;
 color: #cdcdcd;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-size: 14px;
 width: 100% ;
}
    
    section#team-form div#con .form{
        border: none !important;
        width: 100% !important;
        padding: 0 !important;
}

section#team-form div#con form div.form-details2 div.form-parent{
  flex-direction: column !important;
}

section#team-form div#con .form .indicator{
 width: 100% !important;
}

section#team-form div#con .form .indicator div span{
 display: none;
}

section#startup-form div#con .text{
 width: 100% !important;
}

section#startup-form div#con .text h2{
 font-size: 36px;
 width: 100% !important;
}

section#startup-form div#con .text p{
 font-weight: 200;
 color: #cdcdcd;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-size: 14px;
 width: 100% ;
}
    
    section#startup-form div#con .form{
        border: none !important;
        width: 100% !important;
        padding: 0 !important;
}

section#startup-form div#con form div.form-details2 div.form-parent{
  flex-direction: column !important;
}

section#startup-form div#con .form .indicator{
 width: 100% !important;
}

section#startup-form div#con .form .indicator div span{
 display: none;
}

@media only screen and (max-height: 600px){
            section.about p{
 font-size: 14px;
 width: 55%;
}

    section.about img {
    position: absolute;
    margin: 0;
    width: 45%;
}

    section.about img.top-left {
        top: -70%;
        left: 0;
    }
    
    section.about img.top-right {
        top: -70%;
        left: 55%;
    }
    
    section.about img.bottom-right {
        top: 0;
        left: 55%;
    }
    
    section.about img.bottom-left {
        top: 0;
        left: 0;
    }
}

@media only screen and (min-width: 500px){
    
@media only screen and (max-height: 768px){
    
    
       section.question {
 padding: 8em 0;

}

    section.question h1 {
 font-size: 30px;
 width: 50%;
}

section.question p {
 font-size: 12px;
 width: 50%;
}
    section.question img.top-left {
    top: -20%;
    right: 42%;
}

section.question img.top-right {
    top: -20%;
    left: 40%;
}

section.question img.bottom-right {
    bottom: -20%;
    left: 40%;
}

section.question img.bottom-left {
    bottom: -20%;
    right: 42%;    
}
}
}

section#faq h2 {
 font-size: 24px !important;
}

section#faq p.title {
 width: 80% !important;
 font-size: 14px !important;
}

section#whitepaper .content{
 width: 80% !important;
}

section#privacy-policy .content{
 width: 80% !important;
}

section#terms-of-service .content{
 width: 80% !important;
}

}

@media only screen and (max-width: 600px) {

@media only screen and (max-height: 600px){
 

    section.about img.top-left {
        top: -50%;
        left: 0;
    }
    
    section.about img.top-right {
        top: -50%;
        left: 55%;
    }
    
    section.about img.bottom-right {
        top: 15%;
        left: 55%;
    }
    
    section.about img.bottom-left {
        top: 15%;
        left: 0;
    }
}
}


@media only screen and (max-width: 500px) {

@media only screen and (max-height: 600px){
 

    section.about img.top-left {
        top: -30%;
        left: 0;
    }
    
    section.about img.top-right {
        top: -30%;
        left: 55%;
    }
    
    section.about img.bottom-right {
        top: 35%;
        left: 55%;
    }
    
    section.about img.bottom-left {
        top: 35%;
        left: 0;
    }
}
}



/* -------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
---------------------------------------------------------- 
about page
*/

.wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 5em auto;
    /* padding: 0 7em; */
    width: 80%;
    /* gap: 20px; */
}

.wrapper section{
 /* height: 70vh; */
 margin-top: 5em;
}

.wrapper .side-bar{
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     /* align-items: flex-start; */
     gap: 5px;
     width: 20%;
     height: 100%;
     position: fixed;
     border-right: 1px solid #555;
     /* padding-right: 5em; */
}

.wrapper .side-bar a{
text-decoration: none;
transition: .5s;
width: 100%;
padding: .8em;
font-weight: 200;
font-size: 16px;
}

.scrollspy {

    background-color: rgba(200, 200, 200, 0.1);
    border-right: 2px solid #fff;
}

div.con {
 width: 70%;
 margin-left:20em;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

div.con section#about h3{
font-size: 24px;
}

div.con section#about p{
color: #cdcdcd;
font-weight: 300;
font-size: 14px;
margin-top: 2em;
line-height: 2;
}


div.con section#the-goal{
 /* margin-top: 5em; */
}

div.con section#the-goal h3{
font-size: 24px;
}

div.con section#the-goal p{
color: #cdcdcd;
font-weight: 300;
font-size: 14px;
margin-top: 2em;
line-height: 2;
}

div.con section#the-approach{
 /* margin-top: 5em; */
}

div.con section#the-approach h3{
font-size: 24px;
}

div.con section#the-approach p{
color: #cdcdcd;
font-weight: 300;
font-size: 14px;
margin-top: 2em;
line-height: 2;
}

div.con section#why-approach{
 /* margin-top: 5em; */
}

div.con section#why-approach h3{
font-size: 24px;
}

div.con section#why-approach p{
color: #cdcdcd;
font-weight: 300;
font-size: 14px;
margin-top: 2em;
line-height: 2;
}

div.con section#team{
 height: 100%;
 /* margin-top: 5em; */
}

div.con section#team h3{
font-size: 24px;
}

div.con section#team p.title{
color: #cdcdcd;
font-weight: 300;
font-size: 14px;
margin-top: 2em;
line-height: 2;
}

div.con section#team .cards{
   display: flex;
   justify-content:space-between;
   align-items: center;
   margin-top: 5em;
   margin-bottom: 5em;
   gap: 9px;
}

div.con section#team .cards div  {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 50%;

}

div.con section#team .cards div img {
   width: 50%;
}

div.con section#team .cards div h4 {
 text-align: center;
 margin-top: 2em;
 font-size: 20px;
}

div.con section#team .cards div h5 {
text-align: center;
margin-top: 0.5em;
font-weight: 400;
color: #cdcdcd;
font-size: 16px;
}

div.con section#team .cards div p{
color: #cdcdcd;
font-weight: 300;
font-size: 12px;
margin-top: 2em;
text-align: center;
}

 a.join{
   text-align: center;
 padding: 1em 2em;
 border-radius: 30px;
 font-weight: bold;
 font-size: 14px;
 background: #fff;
 color: #000;
 text-decoration: none;
 margin:auto;
 transition: .5s;
 margin-top: 1em;
 transition: .5s;
}


 a.join:hover{
    box-shadow: 1px 1px 8px #fff;
}


section#contact {
    width: 85%;
    margin:auto;
}

section div#contact-us {
    margin-top: 3em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    /* gap: 80px; */
}

section div#contact-us .text{
 width: 25%;
}

section div#contact-us .text p{
 font-weight: 300;
 color: #cdcdcd;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-size: 14px;
}

section div#contact-us .text a{
 color: lightskyblue;
 font-size: 16px;
}

section div#contact-us form{
    border: 1px solid #333;
    border-radius: 20px;
    padding: 2em;
}

section div#contact-us form .form-parent{
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 /* margin-top: 1.5em; */
}

section div#contact-us form .form-parent.snd{
 margin-top: 1.5em;
}

section div#contact-us form label{
 color: #cdcdcd;
 font-weight: 400;
}

section div#contact-us form input{
 padding: .8em 2em .8em .8em;
 border-radius: 10px;
 border: none;
 outline: none;
 background-color:#0F0F0F;
 margin-top: 0.5em;
 width: 300px;
 height: 40px;
}

section div#contact-us form select{
    padding: .8em 3em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 300px;
    height: 40px;
}

section div#contact-us form textarea{
    padding: .8em 3em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 90px;
}

section div#contact-us form .buttons {
 margin-top: 3em;
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100% !important;
 padding: 0;
}

section div#contact-us form button.cancel{
 background: none;
 border: none;
 outline: none;
 cursor: pointer;
}
section div#contact-us form button.continue{
      font-weight: bold;
     width: fit-content;
  padding: .8em 2em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
   text-align: center;
   text-decoration: none;
   z-index: 20;
   margin-top: 1em;
   font-size: 12px;
   transition: .5s;
}

section div#contact-us form button.continue:hover {
    box-shadow: 1px 1px 8px #fff;
}

section#team-form {
    width: 80%;
    margin:auto;
}

section#team-form div#con {
    margin-top: 3em;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    /* gap: 99px; */
}

section#team-form div#con .text{
 width: 30%;
}

section#team-form div#con .text h2{
 font-size: 36px;
 width: 50%;
}

section#team-form div#con .text p{
 font-weight: 200;
 color: #cdcdcd;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-size: 14px;
}

section#team-form div#con .form{
 width: 60%;
 border: 1px solid #333;
 border-radius: 20px;
 padding: 2em;
}

section#team-form div#con div.form-step{
 display: none;
}

  .hide-form{
 display: none !important;
}

section#team-form div#con div.form-step.active{
 display: block;
}

section#team-form div#con form div.form-details div.form-parent{
 display: flex;
  width: 100% !important;
 justify-content: space-between;
 gap: 20px;
}

section#team-form div#con form div.form-details div.form-parent div{
 width: 100% !important;
}


section#team-form div#con form div.form-details2 div.form-parent{
 display: flex !important;
 width: 100% !important;
 justify-content: space-between;
 gap: 20px;
}

section#team-form div#con form div.form-details2 div.form-parent div{
 width: 100% !important;
}

section#team-form div#con .form .indicator{
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 2px solid #777;
 padding-bottom: 1em;
 margin-bottom: 3em;
 width: 90%;
}

section#team-form div#con .form .indicator .no1,
section#team-form div#con .form .indicator .no2,
section#team-form div#con .form .indicator .no3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

section#team-form div#con .form .indicator .no1 p,
section#team-form div#con .form .indicator .no2 p,
section#team-form div#con .form .indicator .no3 p{
    font-size: 12px;
    color: #cdcdcd;
}

section#team-form div#con .form .indicator .no{
 border-radius: 50%;
 color: #fff;
 /* width: 20px;
 height: 20px; */
 padding: .3em .6em;
}

section#team-form div#con .form .indicator .no.active{
background-color:#fff;
color: #000;
}

section#team-form div#con form label{
 color: #cdcdcd;
 font-weight: 400;
 font-size: 14px;
}

section#team-form div#con form input{
    padding: .8em 2em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 40px;
    margin-bottom:1.5em;
}

section#team-form div#con form select{
    padding: .8em 3em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 40px;
    margin-bottom:1.5em;
}

section#team-form div#con form textarea{
    padding: .8em 3em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 90px;
    margin-bottom:1.5em;
}

section#team-form div#con form .buttons {
 margin-top: 3em;
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100% !important;
 padding: 0;
}

section#team-form div#con form button.back{
 background: none;
 border: none;
 outline: none;
 display: none;
 cursor: pointer;
 text-transform: uppercase;
}
section#team-form div#con form button.continue{
      font-weight: bold;
     width: fit-content;
  padding: .8em 2em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
   text-align: center;
   text-decoration: none;
   z-index: 20;
   margin-top: 1em;
   transition: .5s;
}

section#team-form div#con button.continue:hover {
    box-shadow: 1px 1px 8px #fff;
}


section#startup-form {
    width: 80%;
    margin:auto;
}

section#startup-form div#con {
    margin-top: 3em;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    /* gap: 99px; */
}

section#startup-form div#con .text{
 width: 30%;
}

section#startup-form div#con .text h2{
 font-size: 36px;
 width: 50%;
}

section#startup-form div#con .text p{
 font-weight: 200;
 color: #cdcdcd;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-size: 14px;
}

section#startup-form div#con .form{
 width: 60%;
 border: 1px solid #333;
 border-radius: 20px;
 padding: 2em;
}

section#startup-form div#con div.form-step{
 display: none;
}

section#startup-form div#con div.form-step.active{
 display: block;
}

section#startup-form div#con form div.form-details div.form-parent{
 display: flex;
  width: 100% !important;
 justify-content: space-between;
 gap: 20px;
}

section#startup-form div#con form div.form-details div.form-parent div{
 width: 100% !important;
}


section#startup-form div#con form div.form-details2 div.form-parent{
 display: flex !important;
 width: 100% !important;
 justify-content: space-between;
 gap: 20px;
}

section#startup-form div#con form div.form-details2 div.form-parent div{
 width: 100% !important;
}

section#startup-form div#con .form .indicator{
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 2px solid #777;
 padding-bottom: 1em;
 margin-bottom: 3em;
 width: 90%;
}

section#startup-form div#con .form .indicator .no1,
section#startup-form div#con .form .indicator .no2,
section#startup-form div#con .form .indicator .no3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

section#startup-form div#con .form .indicator .no1 p,
section#startup-form div#con .form .indicator .no2 p,
section#startup-form div#con .form .indicator .no3 p{
    font-size: 12px;
    color: #cdcdcd;
}

section#startup-form div#con .form .indicator .no{
 border-radius: 50%;
 color: #fff;
 /* width: 20px;
 height: 20px; */
 padding: .3em .6em;
}

section#startup-form div#con .form .indicator .no.active{
background-color:#fff;
color: #000;
}

section#startup-form div#con form label{
 color: #cdcdcd;
 font-weight: 400;
 font-size: 14px;
}

section#startup-form div#con form input{
    padding: .8em 2em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 40px;
    margin-bottom:1.5em;
}

section#startup-form div#con form select{
    padding: .8em 3em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 40px;
    margin-bottom:1.5em;
}

section#startup-form div#con form textarea{
    padding: .8em 3em .8em .8em;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color:#0F0F0F;
    margin-top: 0.5em;
    width: 100%;
    height: 90px;
    margin-bottom:1.5em;
}

section#startup-form div#con .form .buttons {
 margin-top: 3em;
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100% !important;
 padding: 0;
}

section#startup-form div#con .form button.back{
 background: none;
 border: none;
 outline: none;
 display: none;
 cursor: pointer;
 text-transform: uppercase;
}

section#startup-form div#con .form button.continue{
      font-weight: bold;
     width: fit-content;
  padding: .8em 2em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
   text-align: center;
   text-decoration: none;
   z-index: 20;
   margin-top: 1em;
   transition: .5s;
}

section#startup-form div#con button.continue:hover {
    box-shadow: 1px 1px 8px #fff;
}

section#faq {
    background: url("../Imgs/Ellipse\ f.png") no-repeat;
    background-position-y: -70px;
    background-position-x: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    /* margin-top: 3em; */
    padding-top: 5em;
}

section#faq h2{
 text-align: center;
 font-size: 32px;
 font-weight: 600;
}

section#faq p.title {
 text-align: center;
 margin: 1em auto 2em auto;
 color: #cdcdcd;
 width: 35%;
 font-size: 16px;
}

section#faq .accordion{
 max-width: 700px;
 margin:0 auto;
 padding: 2em;
}

section#faq .accordion .contentBx{
    position: relative;
    /* margin:10px 20px ; */
    /* transition:all 0.5s; */
    width: 100%;
    padding: 1.2rem 0 1.2rem 2rem;
    border: 1px solid #fff;
    box-shadow: inset 1px 1px 20px rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    background-color: #0a0a0a;
    cursor: pointer;
    /* overflow: hidden; */
}

section#faq .accordion .contentBx:not(:last-child){
 margin-bottom:.5rem;
}

section#faq .accordion .contentBx .label{
position: relative;
width: 100%;
/* height: 100%; */
display: flex;
justify-content: space-between;
align-items: center;
}

section#faq .accordion .contentBx .label img{
 padding: 1rem;
 position: absolute;
 right: 0;
}

section#faq .accordion .contentBx .label img.arrow-down{
 opacity: 0;
}

section#faq .accordion .contentBx .label p{
 position: relative;
 font-size: 1rem; 
 font-weight: 500;
 cursor: pointer;
 text-align: left;
 max-width: 70%;
}


section#faq .accordion .contentBx .content {
 max-height: 0;
 overflow: hidden;
}


section#faq .accordion .contentBx .content p{
 width: 95%;
 text-align: left;
 font-size: .9rem;
 font-weight: 200;
}

section#faq .accordion .contentBx.active .content{
 margin-top: 2em;
max-height: 100%;
 transition: 0.5s ease;
}

section#faq .accordion .contentBx.active .arrow-right{
 opacity: 0;
}

section#faq .accordion .contentBx.active .arrow-down{
 opacity: 1  !important;
}

section#whitepaper {
    margin-top: 5em;
}

section#whitepaper .hero {
    padding-bottom: 5em;
    border-bottom: 1px solid #c3c3c350;
}

section#whitepaper .hero h2{
 text-align: center;
 font-size: 2rem;
 font-weight: 500;
}

section#whitepaper .content{
 width: 50%;
 margin: 2rem auto 2rem auto; 
}

section#whitepaper .content div{
    margin-top: 5.5em;

}

section#whitepaper .content div h3{
 margin-bottom: 1em;
 font-weight: 600;
 font-size: 24px;
 text-transform: capitalize;
}

section#whitepaper .content div p{
 color: #cdcdcd;
 /* font-weight: 500; */
 font-size: 14px;
 line-height: 1.5;
}

section#whitepaper .content div ul li{
 color: #cdcdcd;
 font-size: 14px;
 line-height: 1.5;
}



section#whitepaper a button {
    font-weight: bold;
  padding: 1em 2em;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
   text-align: center;
   transition: .5s;
   margin-top: 5em;
}

section#whitepaper a button:hover {
    box-shadow: 1px 1px 8px #fff;
}


section#privacy-policy {
    margin-top: 5em;
}

section#privacy-policy .hero {
    padding-bottom: 5em;
    border-bottom: 1px solid #c3c3c350;
}

section#privacy-policy .hero h2{
 text-align: center;
 font-size: 2rem;
 font-weight: 500;
}

section#privacy-policy .content{
 width: 50%;
 margin: 2rem auto 2rem auto; 
}

section#privacy-policy .content div{
    margin-top: 5.5em;

}

section#privacy-policy .content div h3{
 margin-bottom: 1em;
 font-weight: 600;
 font-size: 24px;
 text-transform: capitalize;
}

section#privacy-policy .content div p{
 color: #cdcdcd;
 /* font-weight: 500; */
 font-size: 14px;
 line-height: 1.5;
}

section#privacy-policy .content div ul li{
 color: #cdcdcd;
 font-size: 14px;
 line-height: 1.5;
}



section#terms-of-service {
    margin-top: 5em;
}

section#terms-of-service .hero {
    padding-bottom: 5em;
    border-bottom: 1px solid #c3c3c350;
}

section#terms-of-service .hero h2{
 text-align: center;
 font-size: 2rem;
 font-weight: 500;
}

section#terms-of-service .content{
 width: 50%;
 margin: 2rem auto 2rem auto; 
}

section#terms-of-service .content div{
    margin-top: 5.5em;

}

section#terms-of-service .content div h3{
 margin-bottom: 1em;
 font-weight: 600;
 font-size: 24px;
 text-transform: capitalize;
}

section#terms-of-service .content div p{
 color: #cdcdcd;
 /* font-weight: 500; */
 font-size: 14px;
 line-height: 1.5;
}

section#terms-of-service .content div ul li{
 color: #cdcdcd;
 font-size: 14px;
 line-height: 1.5;
}

.responseMessage {
    font-size: .9rem;
    margin-top: 2em;
    color: lightgreen;
}

.responseMessage.error {
    color: coral;
}