:root {
  --primary: #7c3aed;   
  --secondary: #06b6d4; 
  --accent: #f43f5e;   
}

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

body{
    /* background-color: #0f0f1a; */
     background: linear-gradient(
    to bottom,
    #0f0f1a,
    #0a0a14
  );
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

/* =======================NAVBAR====================== */
.logo2 {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;   /* removes underline */
  color: inherit;          /* keeps same color */
}

.logo2 img {
  height: 35px; /* adjust if needed */
}

.logo2 span {
  font-size: 1.5rem;
  font-weight: 600;
}

.logo{
    /* border: 2px solid red; */
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 30px;


}

.navbar{
    /* border: 2px solid pink; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 1px solid #1f1f2e;
     padding: 15px 50px;
    backdrop-filter: blur(10px);
}
.nav-links{
    /* border: 2px solid pink; */
    display: flex;
    align-items: center;
    /* flex: 1;  */
    justify-content: center;

}
.nav-links ul{
    display: flex;
    gap: 30px;
    list-style: none;  
     flex-direction: row;
    
}
.nav-links a{
    text-decoration: none;
    color: white;
    transition: 0.3s;
    font-size: 20px;
}
.nav-links a:hover{
    color: var(--primary);
}
.nav-actions {
  display: flex;
  align-items: center;
}
.search-btn img{
     width: 28px;
  height: 28px;
   filter: brightness(0) invert(1);
}
.search-btn{
   width: 55px;
  height: 55px;
  border-radius: 50%;
  border: none;
   /* background: #1f1f2e; */
   /* background: rgba(124, 58, 237, 0.15); */
   /* background: rgba(255, 255, 255, 0.05); */
    background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  backdrop-filter: blur(6px);
 
    
}
.search-btn:hover {
   background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
.hamburger {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
}
.nav-links ul {
  display: flex;
  flex-direction: row; 
  gap: 30px;
  list-style: none;
}

/* ===================================================== */

@media (max-width: 768px) {

 /* .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 20px;
  } */

  /* .hamburger {
    display: block;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1001;
  } */

  /* .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: unset !important;
    height: 100vh !important;
    width: 70% !important;
    flex: unset !important;       
    background: linear-gradient(135deg, #0f0f1a, #1a1a2e);
    border-left: 1px solid rgba(124, 58, 237, 0.3);
    box-shadow: -10px 0 40px rgba(0,0,0,0.6);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 25px;
    transition: right 0.3s ease;
    z-index: 1000 !important;
    overflow: hidden;
  } */

  /* .nav-links.active {
    right: 0 !important;
  } */

  .nav-links ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px;
    padding: 0;
    list-style: none;
    display: none;
  }

  .nav-links ul li a {
    color: white !important;
    font-size: 1.3rem;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 8px;
    display: block;
    transition: 0.3s;
  }

  .nav-actions {
    display: none;
  }
}