:root {
--primary-white: rgba(255, 255, 255, 1);
--primary-light-blue: rgba(216, 229, 244, 1);
--primary-black: rgba(26, 26, 26, 1);
--neutrals-grey-4: rgba(125, 125, 125, 1);
--secondary-black-2: rgba(30, 30, 30, 1);
--smoke-white: rgba(246, 246, 246, 1);
--onyx-black: rgba(18, 18, 18, 1);
--primary-arcon-red: rgba(230, 50, 58, 1);
}

body {
font-family: 'Sora', sans-serif;
color: var(--primary-black);
line-height: 1.5;
}

.gradient-text {
    background: linear-gradient(96.97deg, #8FC3FF 7.84%, #A984FF 31.07%, #E6323A 58.17%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 72px;
background-color: var(--primary-white);
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
height: 36px;
}

.nav-link {
color: var(--secondary-black-2);
font-size: 16px;
transition: color 0.3s;
}

.nav-link:hover {
color: var(--primary-arcon-red);
}

.login-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
font-family: 'Sora', sans-serif;
font-size: 16px;
color: #252525;
}

/* Hero Section */
.hero {
position: relative;
height: 618px;
margin-top: 72px;
overflow: hidden;
text-align: center;
}

.hero-bg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0; /* Changed from default to explicitly set */
}

.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 0%; /* Adjust this value to move image down */
/* Try values between 0% (top) to 100% (bottom) */
/* 30% means showing the image starting from 30% down */
}

.hero-title {
font-size: 40px;
font-weight: 400;
padding-top: 475px;
}

.hero-subtitle {
font-size: 40px;
font-weight: 400;
}

/* Products */
.product-card {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--primary-light-blue);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(245, 250, 255, 1) 100%);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
position: relative;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Add the featured styling on hover */
.product-card:hover::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 12px;
background: linear-gradient(97deg, rgba(143, 195, 255, 1) 0%, rgba(169, 132, 255, 1) 40%, rgba(230, 50, 58, 1) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
}

.product-card:hover .product-link {
color: var(--primary-arcon-red);
}

.product-card.featured {
position: relative;
border: none;
}

.product-card.featured::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 12px;
background: linear-gradient(97deg, rgba(143, 195, 255, 1) 0%, rgba(169, 132, 255, 1) 40%, rgba(230, 50, 58, 1) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
}

.product-image {
width: 100%;
height: 255px;
object-fit: cover;
}

/* Fixed height for title (2 lines max) */
.product-title {
font-size: 18px;
font-weight: 400;
color: var(--primary-black);
margin-bottom: 10px;
min-height: 44px; /* Approx 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.2;
}

/* Flexible description with 3 lines max */
.product-description {
font-size: 14px;
font-weight: 300;
color: var(--neutrals-grey-4);
line-height: 1.5;
flex: 1;
margin-bottom: 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
min-height: 63px; /* Approx 3 lines */
}

/* View Product link fixed at bottom */
.product-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 400;
color: var(--secondary-black-2);
text-decoration: none;
transition: color 0.3s;
margin-top: auto;
align-self: flex-start;
}

.product-link.featured {
color: var(--primary-arcon-red);
}

.product-link:hover {
color: var(--primary-arcon-red);
}

/* Footer */
.footer {
background-color: #191919;
color: #bcbcbc;
padding: 80px 0 40px;
}

.footer-divider {
height: 1px;
background: linear-gradient(134deg, rgba(143, 195, 255, 1) 0%, rgba(169, 132, 255, 1) 40%, rgba(230, 50, 58, 1) 100%);
opacity: 0.4;
margin: 60px 0;
}

.footer-logo {
margin-bottom: 30px;
}

.footer-about {
max-width: 359px;
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
}

.footer-section-title {
font-family: 'Lato', sans-serif;
font-size: 16px;
opacity: 0.3;
margin-bottom: 16px;
}

.footer-section-text {
font-size: 14px;
line-height: 1.4;
margin-bottom: 16px;
}

.footer-bottom {
padding-top: 20px;
border-top: 1px solid #1e1e1e;
}

.footer-link {
font-size: 12px;
color: #ffffff;
opacity: 0.3;
text-decoration: none;
}

.cta-button {
display: flex;
align-items: center;
background-color: var(--primary-arcon-red);
color: white;
border: none;
border-radius: 0 25px 25px 0;
padding: 13px 20px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}

.cta-button:hover {
background-color: #c02930;
}

.cta-icon {
margin-right: 10px;
}

@media (max-width: 1024px) {
.hero-title,
.hero-subtitle {
    font-size: 40px;
}
}

@media (max-width: 768px) {
.hero-title,
.hero-subtitle {
    font-size: 32px;
}
}

@media (max-width: 480px) {
.hero-title,
.hero-subtitle {
    font-size: 28px;
}
}