@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;500;600&display=swap');
*{
  padding: 0;
 margin: 0;
 box-sizing: border-box;
 scroll-behavior: smooth;
}
/* 
*/


:root {
  
  
  /***Colors****/
  --bg:hsla(213, 69%, 5%, 1);
  --grey:hsla(0, 0%, 65%, 0.6980392156862745);
  --purple:hsla(281, 77%, 41%, 1);
  --black:hsla(0, 0%, 0%, 1) ;
  --white:hsla(0, 0%, 100%, 1);
  --cyan:hsla(182, 88%, 44%, 1);
  
  
  
  /**Margins***/
  --mg-1: 3.5rem;
  --mg-2:3rem;
  --mg-3:2.5rem;
  --mg-4:2rem;
  --mg-5:1.5rem;
  --mg-6:1rem;
  --mg-7:.5rem;
  
  
  /***Paddings****/
  --pd-1:2rem;
  --pd-2:1.5rem;
  --pd-3:1rem;
  --pd-4:.5rem;
}


    
body {
   background: hsla(213, 69%, 5%, 1);
   font-family: 'Manrope', sans-serif;
   color: var(--cyan);
   
}
a{
  text-decoration: none;
  cursor: pointer;
}
li {
  list-style-type: none;
}
li>a{
  color: var(--white);
}

img{
  display:block;
  width: 100%;
}
header,section,footer{
  padding:  var(--pd-3);
}
p{
  color:var(--white);
}

#logo a {
  display: flex;
  align-items: center;
  color: var(--cyan);
  font-size: 16px;
}
#logo img {
  display: inline-block;
  width: 25px;
}

/**header**/
@media screen and  (max-width: 765px) {
  
  
  #hero-content,.title{
    text-align: center;
  }
  #header {
   display: flex;
   justify-content: space-between;
   align-items: center;
    position: fixed;
    width: 100%;
    background: var(--bg);
    z-index: 100;
    
    
}
.sticky {
  padding: var(--pd-4);
  background: var(--bg);
    
   box-shadow: 0px 0px 4px var(--cyan);
  
}
.nav{
  position: absolute;
  left: 50%;
  top: 90%;
  background: linear-gradient( 115deg  ,hsla(240, 59%, 11%, 1) ,
    hsla(240, 59%, 11%, .7) ),var(--cyan);
  width: 100%;
  transform: translateX(-50%);
  text-align: center;
  height: 0;
  overflow: hidden;
 
  transition: height .5s ease, top .9s ease; 
  
  
}

.openNav  {
  height: 100vh;
  top:100%;
}


menu li {
  padding: var(--pd-2) 0;
  
}
menu li a {
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
}



/***menu**/
.nav-toggle {
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.nav-toggle div {
  position: relative;
  width: 25px;
  height: 25px;
  margin: 2px auto;
}
.nav-toggle span{
  width: 25px;
  height: 2px;
  background: var(--cyan);
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 transition: transform .5s ease;
}
.nav-toggle .bar-1{
  transform: translate(-50%,-8px);
}

.nav-toggle .bar-3{
  transform: translate(-50%,6px);
}



 .open .bar-1{
   transform: translate(-50%,-50%) rotate(-45deg);
 }
  .open .bar-3{
   transform: translate(-50%,-50%) rotate(45deg);
 }

 .open .bar-2{
   width:0;
 }
    /**hero content**/
    #btns{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

  
}


/***media query's end**/


header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#hero {
  background: linear-gradient( 115deg  ,hsla(240, 59%, 11%, 1) ,
    hsla(240, 59%, 11%, .7) ),var(--cyan);
    padding-top: var(--pd-1);
}
#hero-img {
  padding-top: var(--pd-1);
  margin-bottom: var(--mg-4);
  position:relative;
}

.rocket-div{
  width: 20%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-100%);
  }
  
  .fly {
   animation-direction: alternate;
    animation: animate 3s ease infinite;
  }
  @keyframes animate {
    from {
     transform:  translate(-50%,-100%);
    }
  
    100% {
      transform: translate(-50%, -400%);
    }
  }
 


/***hero content**/
#hero-content  {
  color: var(--white);
}
#hero-content #span{
  color: var(--cyan);
}
#btns{
  margin: var(--mg-5) 0;
  
}
    
#btns a{
  color:var(--white);
  padding: var(--pd-3);
  background: none;
  border: 1px solid var(--cyan);
  margin: var(--mg-6) 0;
  border-radius: 25px;
  cursor: pointer;
  width: 170px;
}
#btns a:nth-child(1){
  background: var(--cyan);
  color: black;
}



/***investors**/
#investors{
  backdrop-filter: blur(10px); background: linear-gradient(115deg,hsla(182, 88%, 44%, .1),hsla(182, 88%, 44%, .1)
  ) ;
  display: flex;
  overflow: hidden;
  align-items: center;
  padding: var(--pd-1) 0;
  border-radius: 10px;
}
.inv-container{
  display: flex;
  gap: 1rem;
  margin-left: 18rem;
  animation: slider 70s infinite linear;
  animation-delay: 1s;
  align-items: center;
  justify-content: center;
}
#investors img {
  width: 70px;
}


@keyframes slider  {
  from{
    margin-left: 18rem;
  }
  to {
    margin-left: -52.5rem;
  }
}

/**product***/
.title{
  padding-top: var(--pd-4);
  margin: var(--mg-1) 0;
}
.title>p {
  font-size: 10px;
}

.product-container{
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  grid-gap: var(--mg-3);
  

}
.product-content {
  text-align: center ;
  display: flex;
  flex-direction: column;
  
}
.product-card h3{
  color: var(--white);
  
}
.product-card p{
 color: #E0DFDF;
 
}
.product-card img{
  margin: 0 auto;
  width: 100%;

}

.product-card a{
  color: var(--black);
  background: var(--cyan);
  padding: var(--pd-3);
  
  margin: var(--mg-6);
  border-radius: 15px;
 
}
/***lroduct anlytic**/
#prdct-analyt {
  padding: var(--pd-3)  ;
  
}
#analytic-container{
 padding: var(--pd-1) ;
 margin: var(--mg-1) 0;
  display: grid;
  
  backdrop-filter: blur(10px); background: linear-gradient(115deg,hsla(182, 88%, 44%, .2),hsla(281, 77%, 41%, .2)
  ) ;
  border: 1px solid var(--cyan);
  color: var(--white);
  border-radius: 15px;
  gap:var(--mg-5);
}

.analytic {
  padding: var(--pd-3);
}
.analytic h4 {
  color: var(--grey);
  padding: var(--pd-4) 0;
}
.analytic strong{
  display: block;
  font-size: 20px;
}

/**Feature***/
.container {
  text-align:center;
}
#feature h2{
  text-align: center;
  
}
.features{
  text-align: center;
}
.features p{
  font-size: 14px;
  line-height: 2;
}
.feature {
  margin-bottom: var(--mg-2);
}
.features-img {
  margin: 0 auto;
  width: 200px;
}
.feature img{
  width: 100px;
  margin: var(--mg-7) auto;
  
}

.container button{
  margin:4rem auto ;
  padding: var(--pd-3);
  background: var(--cyan);
  border-radius: 15px;
  cursor: pointer;
  border: none;
}


/***blogs***/

  .blogs-container{
   position: relative;
   width: 100%;
 }
 .blog-contents {
  
   overflow: hidden;
 }
 .blogs-container article{
   background: var(--black);
   padding: var(--pd-3);
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 15px;
width: 300px;
 }
.blogs-container article img{
   border-radius: 15px;
   transition: transform .3s ease;
 }
.blogs-container article img:hover {
   transform: scale(1.01);
 }
 h5 {
   padding: var(--pd-3) 0;
   color: white;
 }
 .blog-abt {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color:#F7F7F8;
   padding: var(--pd-4) ;
   font-size: 12px;
   margin-bottom: var(--mg-6);
  
 }
 .blog-content{
   display: flex;
   flex-direction: column;
   
 }
 .blog-content  button{
   text-align: center;
   background: none;
   border: 1px solid var(--cyan);
   background: transparent;
   color:white;
   padding: var(--pd-3);
   border-radius: 15px;
   cursor: pointer;
   margin-bottom: var(--mg-3)
 }
 
 .swiper-button-prev::after,.swiper-button-next::after {
   content: "";
 }
  .swiper-button-prev,.swiper-button-next{
    width: initial;
    height: initial;
    font-size: 4rem;
    color: var(--cyan);
    display: none;
  }
   .swiper-button-prev{
     left: 0;
   }
    .swiper-button-next{
      right: 0;
    }
     .swiper-pagination-bullet{
       
       opacity: 1;
       background: var(--grey)
     }
    .swiper-pagination-bullet-active{
      background: var(--cyan)
    } 
 /**join us**/
 .community {
   backdrop-filter: blur(10px); background: linear-gradient(115deg,hsla(182, 88%, 44%, .2),hsla(281, 77%, 41%, .2)
  ) ;
  border: 1px solid var(--cyan);
  color: var(--white);
  border-radius: 15px;
  padding: var(--pd-1);
  text-align: center;
 }
 .community p{
   font-size: 12px;
 }
 .socials {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1.5rem;
   padding: var(--pd-4);
 }
 .social {
   background: var(--black);
   padding: var(--pd-4) var(--pd-3);
   text-align: center;
   color: white;
   border-radius: 5px;
   cursor: pointer;
   
 
 }
 
 /**future trading**/
 .trading {
   border-radius: 15px;
   border: 1px solid var(--cyan);
   padding: var(--pd-3);
   position: relative;
   display: flex;
   flex-direction: column;
 }
 .trading::after{
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 15px;
 }
 .trading:hover::after{
   background: hsla(182, 88%, 44%, .3)
 }
 
 /**footer**/
 footer {
   display: grid;
   grid-template-columns: 100%;
   background: var(--black);
   margin-top: var(--mg-6);
   opacity: .8;
  
 }
 #footer {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
   color: var(--white);
   
 }
 
 #footer #logo {
   margin: var(--mg-7) auto var(--mg-3)  auto;
   font-size: 12px;
   
 }
 .footer-logo{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 form {
   display: flex;
   flex-direction: column;
 }
 form label {
   margin-bottom:var(--mg-6);
   opacity: .6;
 }
 form small {
   color: red;
   font-style: italic;
   padding: var(--pd-4);
 }
 
 
 .email-div {
   display: flex;
   margin: var(--mg-7) 0  0;
   border: 1px solid var(--cyan);
   border-radius: 25px;
   padding: var(--pd-4)
 }
 

 .email-div input{
   background: var(--black);
   color : var(--white);
   outline: none;
   
   border: none ;
   width: 70%;
   padding: var(--pd-4);
   border-radius: 25px;
   
 }
 input::placeholder {
   color: var(--white);
   letter-spacing: 1.3px;
   
 }
  .email-div button {
    width: 30%;
    border-radius: 25px;
    border: none;
    background: var(--cyan);
  }
  /***alert***/
  .alert {
    position: fixed;
    top: 55%;
    left:-100%;
    width: 80%;
    background: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--pd-2);
    border-radius: 7px;
    transition : left .4s ease;
    
  }
  .alert-content {
    display: flex;
    flex-direction: column;
    font-style: italic;
    font-family: monospace;
  }
  .alert-content aside{
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--mg-7);
  }
  .alert-content small {
    font-size: 10px;
    
  }
  .alert-cancel {
    font-size: 14px;
    color: white;
    background: red;
    padding: .2rem var(--pd-4);
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 7px;
  }
  
  .footer-link {
    display: flex;
    flex-direction: column;
    text-align: left;
    
    
  }
  .footer-link h6{
    
    margin: var(--mg-7) 0;
    font-size: 15px;
  }
  #footer .footer-link ul li a {
    font-size:13px;
    color: #D3D3D7;
  }
 /***copytright**/
 #copyrights {
   margin-top: 1.5rem;
 }
  .copyright {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }
  .copyright small {
    color: var(--white);
    display: block;
    font-size: 10px;
    text-align: center;
  }
  .copyright ul{
    column-count: 3;
  }
  .copyright ul li a{
    text-decoration: underline;
    text-decoration-color: white;
    font-size: 10px;
    text-align: center;
    padding: var(--pd-4);
  }
  
  .credits {
    text-align: center;
    font-size: 12px;
  }
  .credits small {
    color: var(--white);
  }
  .credits span a {
    color: var(--cyan);
  }
  
  @media screen and (min-width:765px) {
    header,section,footer{
  padding: var(--pd-2) var(--pd-1);
}
    #logo a {
  font-size: 22px;
}
#logo img {
  width: 35px;
}

    /***header**/
   menu {
    column-count: 5;
   }
   
   .nav-toggle {
     display: none;
   }
   /***hero***/
   #banner {
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
   }
   #hero-img{
    
   }
   #hero-content {
     padding-top: var(--pd-1);
     width: 50%;
   }
   #hero-content h1 {
     font-size: 38px;
     margin-bottom: var(--mg-4);
   }
   #hero-content p {
     font-size: 20px;
     margin-bottom: var(--mg-3);
   }
   #btns a{
  padding: var(--pd-3) var(--pd-2);
  width: 170px;
  font-size: 20px;
}
   #investors {
     border-radius: 10px;
     padding: var(--pd-1) var(--pd-3);
     }
  .inv-container  { 
    width: 100%;
    margin-left: auto;
     animation: none;
   }
   
   /****analytics***/
   #analytic-container {
     grid-template-columns: repeat(3,1fr)
   }
   .analytic {
  padding: var(--pd-3);
}
.analytic h4 {
  padding:0;
  font-size: 10px;
}
.analytic strong{
  font-size: 10px;
  padding: var(--pd-4) 0;
}
.analytic sub {
  display: block;
  font-size: 10px;
}

/**Feature***/
#feature h2{
  text-align: left;
  
}
.features{
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.feature p{
  font-size: 18px;
  line-height: normal;
}
.feature {
  display: flex;
  flex-direction: column;
  margin:0 var(--mg-7) ;
}
.features-img {
  margin: 0 auto;
  width: 230px;
 
}
.feature img{
  width: 100px;
  margin: var(--mg-5) auto;
  
}
.container button{
  margin: var(--mg-1);
  padding: var(--pd-3) var(--pd-2) ;
  background: var(--cyan);
  font-size: 16px;
  border-radius: 15px;
  cursor: pointer;
  border: none;
  
}

   /***blog**/
   
   .swiper-button-next,.swiper-button-prev{
     display: block;
   }
   /**social**/
   .social{
     font-size: 26px;
     padding: var(--pd-3) var(--pd-2);
   }
   /***footer***/
    #footer #logo {
   margin: 0;
   font-size: 20px;
   
 }
 form label {
   font-size: 15px;
 }
 
 .email-div {
   padding: var(--pd-4)
 }
 
 input::placeholder {
   letter-spacing: 1.5px;
 }
  .email-div button {
    width: 30%;
    border-radius: 25px;
    border: none;
    background: var(--cyan);
  }
  
 /***alert***/
  .alert {
    top: 79%;
    width: 600px;
    height: 200px;
  }
    .alert-content aside{
    font-size: 18px;
  }
  .alert-content small {
    font-size: 16px;
  }
  .alert-cancel {
    font-size: 19px;
    padding: var(--pd-4) var(--pd-2) ;
  }
  
  .footer-link h6{
    font-size: 14px;
  }
  #footer .footer-link ul li a {
    font-size:12px;
  }
 /***copytright**/
 #copyrights {
   margin-top: 1.5rem;
 }
 
  .copyright small {
    color: var(--white);
    display: block;
    font-size: 15px;
    text-align: center;
  }
  
  .copyright ul li a{
    font-size: 15px;
    text-align: center;
    padding: var(--pd-4);
  }
  
  .credits {
    font-size: 10px;
  }
 
  }