:root{
    --primary:#3b82f6;
    --dark:#0f172a;
    --card:#1e293b;
    --text:#ffffff;
}

body{
    background:var(--dark);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
}

.navbar{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hero{
    padding:120px 0;
    text-align:center;
}

.hero h1{
    font-size:4rem;
    font-weight:800;
}

.hero p{
    color:#cbd5e1;
    font-size:1.2rem;
}

.btn-primary{
    background:var(--primary);
    border:none;
    padding:12px 30px;
    border-radius:12px;
}

.card{
    background:var(--card);
    border:none;
    border-radius:18px;
    transition:.25s;
}

.card:hover{
    transform:translateY(-6px);
}

.product-image{
    height:250px;
    object-fit:cover;
    border-radius:18px 18px 0 0;
}

.footer{
    border-top:1px solid rgba(255,255,255,.08);
}

.badge-price{
    background:#2563eb;
    padding:8px 15px;
    border-radius:20px;
}

hr{

border-color:rgba(255,255,255,.08);

}

.accordion-item{

background:#1e293b;

border:none;

margin-bottom:10px;

}

.accordion-button{

background:#1e293b;

color:white;

}

.accordion-button:not(.collapsed){

background:#2563eb;

color:white;

}

.accordion-body{

background:#0f172a;

color:white;

}

.btn{

border-radius:12px;

}

h1,h2,h3,h4{

font-weight:700;

}
.hero{

min-height:80vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.hero h1{

font-size:5rem;

}

@media(max-width:768px){

.hero h1{

font-size:3rem;

}

}

.card{

overflow:hidden;

}

.card img{

transition:.3s;

}

.card:hover img{

transform:scale(1.05);

}

.card-body{

display:flex;

flex-direction:column;

}

.card-body a{

margin-top:auto;

}