@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
  margin: 0;
  /* font-family: sans-serif; */
  font-family: 'Quattrocento Sans';
  background: #04060a;
  color: white;
  position: relative;
  font-family: "Poppins", sans-serif;

}



/* Target the entire scrollbar */
::-webkit-scrollbar {
  width: 08px; /* width of the vertical scrollbar */
  height: 12px; /* height of the horizontal scrollbar */
}

/* Background of the scrollbar track */
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

/* On hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}




.home #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: auto;
  
}


nav .button button{
  background: white;
  color: black;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
} 
.active {
    color: white;
  }


  /* From Uiverse.io by JulanDeAlb */ 
.hamburger {
    cursor: pointer;
  }
  
  .hamburger input {
    display: none;
  }
  
  .hamburger svg {
    /* The size of the SVG defines the overall size */
    height: 3em;
    /* Define the transition for transforming the SVG */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line {
    fill: none;
    stroke: white;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    /* Define the transition for transforming the Stroke */
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line-top-bottom {
    stroke-dasharray: 12 63;
  }
  
  .hamburger input:checked + svg {
    transform: rotate(-45deg);
  }
  
  .hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }
  

.card {
  /* background: linear-gradient(120deg, rgba(255, 255, 255, 0.071), rgba(255, 255, 255, 0.027)); */
  background-color: #1f1f1fce;
    cursor: pointer;
  border-radius: 50px;
  transition: transform 0.3s ease;
  border: solid rgba(188, 188, 188, 0.2) 1px;
  position: relative;
  z-index: 1;
}

.card-marquiee {
  /* background: linear-gradient(120deg, rgba(255, 255, 255, 0.071), rgba(255, 255, 255, 0.027)); */
  background-color: #1f1f1fce;
  padding: 20px;
  border-radius: 50px;
  transition: transform 0.3s ease;
  border: solid rgba(188, 188, 188, 0.2) 1px;
  position: relative;
  z-index: 1;
}


.card:hover {
  transform: translateY(-5px);
  background: #2c2c2c;
}




@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  .animate-marquee {
    animation: marquee 2s linear infinite;
  }


  .icons button {
    background: transparent;
    position: relative;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid grey;
    border-radius: 100%;
    padding: 20px;
    outline: none;
    overflow: hidden;
    color: grey;
    transition: color 0.3s 0.1s ease-out;
    text-align: center;
  }
  
  
  .icons button::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '';
    border-radius: 100%;
    display: block;
    width: 20em;
    height: 20em;
    left: -5em;
    text-align: center;
    transition: box-shadow 0.5s ease-out;
    z-index: -1;
  }
  
  .icons button:hover {
    color: #fff;
    border: 1px solid grey;
  }
  
  .icons button:hover::before {
    box-shadow: inset 0 0 0 10em grey;
  }
   

footer {
  margin-top: 60px;
  text-align: center;
  color: #666;
}



/* .main .card .animation #logo{
    display: none !important;
   
    background: linear-gradient(180deg, #16181c 0%, #121316 100%);
    box-shadow: inset 0px -2px 0px -1px #060709,
				inset 0px 1px 0px rgba(255, 255, 255, 0.04);
} */