@font-face {
font-family: 'Aquire';
src: url('../fonts/Aquire.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

:root {
--primary-color: #d32f2f; /* Red accent */
--secondary-color: #18181b; /* Very dark gray for backgrounds */
--text-color: #f5f5f5; /* Light gray for main text */
--light-text-color: #bdbdbd; /* Lighter gray for secondary text */
--white-color: #232326; /* Near-black for cards/sections */
--green: #3BE798;
--violet: #7F6EB2;
--dark: #2B2B2B;
}

html, body {
margin: 0 !important;
padding: 0 !important;
}

body {
background-color: var(--secondary-color);
color: var(--text-color);
font-family: 'Aquire', 'Segoe UI', Arial, sans-serif;
/* Make sure the gradient is removed or commented out: */
/* background-image: linear-gradient(to top right, var(--green), var(--violet)); */
}

/* Floating navbar effect */
.floating-nav {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(45, 45, 50, 0.5);
}

.nav-hidden {
top: -100px !important;
}

/* Hero Section */
.hero-bg {
background-color: var(--white-color);
}

/* Why Choose Us Section */
#why {
background-color: var(--secondary-color);
}

.feature-card {
background-color: #232326;
border-radius: 16px;
padding: 2rem;
text-align: center;
/* Animate transform, box-shadow, and opacity for a smooth entrance */
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.7);
/* Initial state for scroll animation: invisible and slightly moved down */
opacity: 0;
transform: translateY(40px);
}

/* Staggered animation delay for each card for a nice reveal effect */
.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.2s; }
.feature-card:nth-child(3) { transition-delay: 0.3s; }
.feature-card:nth-child(4) { transition-delay: 0.4s; }

/* When the parent section gets the 'is-visible' class from JS, animate the cards in */
#why.is-visible .feature-card {
opacity: 1;
transform: translateY(0);
}

/* Keep the original hover effect, but with higher specificity to work with the scroll animation */
#why.is-visible .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(211, 47, 47, 0.15), 0 10px 10px -5px rgba(0,0,0,0.2);
}

/* Carousel Section */
#gallery {
background-color: var(--white-color);
}

.carousel-track {
animation: carousel 40s linear infinite;
}

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

.gallery-item {
background-color: #18181b;
border-radius: 16px;
box-shadow: 0 4px 12px -1px rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 180px;
}

/* Buy Now Section */
#buy {
background-color: var(--secondary-color); /* dark background only */
/* Remove any gradient or green color here */
}

#buy .bg-white {
background-color: #232326 !important;
}

/* Footer */
footer {
background-color: #111113;
color: var(--text-color);
width: 100%;
z-index: 50;
position: static; /* or just remove this line */
}

/* Button overrides for better contrast */
.bg-primary-color {
background-color: var(--primary-color) !important;
}

.text-primary-color {
color: var(--primary-color) !important;
}

.text-text-color {
color: var(--text-color) !important;
}

.text-light-text-color {
color: var(--light-text-color) !important;
}

.aquire-heading, h1, h2, h3, .font-aquire {
font-family: 'Aquire', 'Segoe UI', Arial, sans-serif;
letter-spacing: 0.02em;
}

/* Animated button hover effect: extra smooth color and shadow change */
.animated-btn {
transition:
background 0.7s cubic-bezier(0.4,0,0.2,1),
color 0.7s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.7s cubic-bezier(0.4,0,0.2,1);
}

.animated-btn:hover,
.bg-primary-color:hover,
.hover\:bg-red-600:hover {
background: linear-gradient(90deg, #a31515 60%, #6b0d0d 100%);
color: #fff;
box-shadow: 0 16px 48px 0 rgba(211,47,47,0.45), 0 4px 16px 0 rgba(0,0,0,0.45);
}

@keyframes carousel-text {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.animate-carousel-text {
animation: carousel-text 30s linear infinite;
}

.card {
/* Remove margin if present */
border-radius: 30px;
width: 300px;
background-color: #18181b; /* darker background */
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.35);
color: #f5f5f5;
}

.basicInfo {
background-color: #232326; /* slightly lighter than card for contrast */
border-radius: 30px;
padding: 25px;
position: relative;
}

.title .category,
.title .info{
font-weight: 600;
font-size: x-small;
}
.title .name{
font-weight: bold;
font-size: large;
padding-bottom:3px;
}
.card .img{
position: relative;
z-index: 1;
text-align: center;
}
.card .img img{
width:100%;
transform: scale(1) rotate(20deg);
transition: 0.5s;
display: none;
}
.img input:checked ~ img{
display: block;
}
.card .img::before {
position: absolute;
width:200px;
height:200px;
border-radius: 50%;
content:'';
transform: translate(-50%,-50%);
 /* match card background */
z-index: -2;
top:50%;
left:50%;
}
.card .img::after{
position: absolute;
bottom:0;
width: 70%;
height:40px;
background-color: #000;
content:'';
right:30px;
z-index: -1;
border-radius: 50%;
opacity: 0.2;
filter:blur(10px);
transition: 0.5s;
}
.img input{
position: absolute;
opacity: 0;
}
.colors{
display: flex;
font-size: xx-small;
text-align: center;
}
.colors label{
margin-right:10px;
}
.colors .name{
margin-bottom:5px;
}
.colors .ellipse{
width:40px;
height:40px;
border-radius: 50%;
cursor: pointer;
}
.mores{
padding: 25px;
background: #18181b;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.mores .stars,
.mores .price{
display: inline-block;
}
.mores .price{
float: right;
color:#eee;
font-weight: 600;
letter-spacing: 1px;
}
.mores .stars{
color:#9b9a9a;
}
.text-yellow{
color:rgb(209, 209, 6);
}
.addCard{
position: absolute;
width:100%;
bottom:0;
}
.addCard i{
position: absolute;
width:50px;
height:50px;
background-color: var(--green);
color:#222;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right:90px;
bottom:-25px;
border:5px solid var(--dark);
transition: 0.5s;
opacity: 0;
transform: translate(0,10px);
}
.addCard::after,
.addCard::before{
display: none !important;
position: absolute;
bottom:0;
background-color: transparent;
width:47px;
height:38px;
content:'';
right:46px;
border-bottom-left-radius: 55%;
opacity: 0;
transform: translate(0,20px);
box-shadow: 0 20px 0 0 var(--dark);
transition: 0.5s;
}
.addCard::after{
right:unset;
left:107px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 55%;
}
/* animation */
.card:hover .img img{
transform: scale(1.2) rotate(30deg) translate(10px, -20px);
}
.card:hover .img::after{
width:90%;

}
.card:hover .addCard i,
.card:hover .addCard::before,
.card:hover .addCard::after{
opacity: 1;
transform: translate(0,0);
}

/* --- Card Title & Info Styling --- */
.basicInfo .title {
margin-bottom: 18px;
text-align: left;
}

.basicInfo .title .category {
font-weight: 700;
font-size: 0.9rem;
color: var(--primary-color);
letter-spacing: 1px;
margin-bottom: 2px;
text-transform: uppercase;
}

.basicInfo .title .name {
font-weight: 900;
font-size: 1.35rem;
color: #f5f5f5;
margin-bottom: 4px;
letter-spacing: 0.5px;
}

.basicInfo .title .info {
font-size: 1rem;
color: var(--light-text-color);
font-weight: 500;
margin-bottom: 10px;
letter-spacing: 0.2px;
}

/* --- Color Selector Text --- */
.colors .name {
color: #f5f5f5;
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 5px;
letter-spacing: 0.5px;
}

/* --- Price & Stars --- */
.mores .price {
font-size: 1.2rem;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}

.mores .stars i {
font-size: 1.1rem;
color: #ffd600;
margin-right: 2px;
}

.aurora-outer {
  width: 100vw;
  height: 180px;
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  margin-top: -20px; /* Optional: overlap with footer */
}

.aurora-layer {
  border-radius: 50%;
  height: 28px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  filter: blur(7px);
  opacity: 0.85;
  pointer-events: none;
}

.aurora1 {
  animation: aurora1 5s ease-in-out infinite alternate;
}
@keyframes aurora1 {
  from { box-shadow: 0 0 250px 20px #473C78; }
  to   { box-shadow: 0 0 100px 15px #F72A3B; }
}

.aurora2 {
  width: 90%;
  left: 5%;
  animation: aurora2 4s ease-in-out infinite alternate;
}
@keyframes aurora2 {
  from { box-shadow: 0 0 250px 20px #18C499; }
  to   { box-shadow: 0 0 100px 15px #D8F05E; }
}

.aurora3 {
  width: 80%;
  left: 10%;
  animation: aurora3 3s ease-in-out infinite alternate;
}
@keyframes aurora3 {
  from { box-shadow: 0 0 250px 20px #FFDD00; }
  to   { box-shadow: 0 0 100px 15px #3E33FF; }
}

.aurora4 {
  width: 70%;
  left: 15%;
  animation: aurora4 2s ease-in-out infinite alternate;
}
@keyframes aurora4 {
  from { box-shadow: 0 0 250px 20px #781848; }
  to   { box-shadow: 0 0 100px 15px #F2BBE9; }
}

.aurora5 {
  width: 60%;
  left: 20%;
  animation: aurora5 1s ease-in-out infinite alternate;
}
@keyframes aurora5 {
  from { box-shadow: 0 0 250px 20px #42F2A1; }
  to   { box-shadow: 0 0 100px 15px #F4F6AD; }
}

/* Responsive for small screens */
@media (max-width: 728px) {
  .aurora-outer { height: 100px; }
  .aurora-layer { height: 18px; }
}

@media (max-width: 767px) {
  #nav-links {
    /* ... */
    display: block;
  }
}