* {
  scroll-behavior: smooth;
}

body {
  background: #030810;
  color: #e5edf8;
}

.gradient-text {
  background: linear-gradient(90deg, #c084fc, #438cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg {
  background: linear-gradient(110deg, #874bfa, #347df7);
}

.hero {
  background:
    linear-gradient(90deg, rgba(3,8,16,.97), rgba(3,8,16,.65), rgba(3,8,16,.2)),
    url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1800&q=85");
  background-size: cover;
  background-position: center;
}

.product-card {
  transition: .3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: #8b5cf6;
}

.category-card img {
  transition: .3s ease;
}

.category-card:hover img {
  transform: scale(1.08);
}

/* CSS only mobile menu */
#menu-toggle:checked ~ .sidebar {
  transform: translateX(0);
}

#menu-toggle:checked ~ .menu-overlay {
  display: block;
}

@media (max-width: 767px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
}
.text{
	animation:appear 1s linear;
}
@keyframes appear{
	from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
.text2{
	animation:appear2 1s linear;
}
@keyframes appear2{
	from{
		opacity:0;
		transform:translateY(-20px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}
.card{
	animation:card linear;
	animation-timeline:view();
	animation-range:0% 40%;
}
@keyframes card{
	from {
        opacity: 0;
        filter: blur(6px);
		transform:translateY(60px);
    }

    to {
        opacity: 1;
        filter: blur(0);
		transform:translateY(0);
    }
}