<style>
/* ==========================
Global
========================== */

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

body{

background:#F7F6F2;

font-family:Arial, Helvetica, sans-serif;

padding:0px;
}

/* ==========================
Main Container
========================== */

.page-container{

width:100%;

max-width:1200px;

margin:0 auto;

border:1px solid #1C2F20;

background:#ffffff;

overflow:hidden;
}

/* ==========================
Banner
========================== */

.banner{

width:100%;
}

.banner img{

width:100%;

height:480px;

display:block;

object-fit:cover;
}

/* ==========================
Navigation
========================== */

.navbar{

width:100%;

height:65px;

background:#23492F;

display:flex;

justify-content:center;

align-items:center;

border-top:1px solid #35553A;

border-bottom:1px solid #35553A;
}

.navbar ul{

list-style:none;

display:flex;

gap:70px;
}

.navbar a{

color:white;

text-decoration:none;

font-size:20px;

font-weight:600;

padding:20px 15px;

transition:.3s;
}

.navbar a:hover{

color:#F28C28;
}

/* ==========================
Product Section
========================== */

.product-section{

padding:40px 35px 60px;
}

.section-title{

text-align:center;

color:#23492F;

font-size:36px;

margin-bottom:35px;
}

/* ==========================
Carousel
========================== */

.carousel{

display:flex;

align-items:center;

gap:15px;
}

.carousel-container{

flex:1;

overflow:hidden;
}

.carousel-track{

display:flex;

gap:20px;

transition:.4s;
}

/* ==========================
Product Card
========================== */

.product-card{

flex:0 0 330px;

background:#fff;

border:2px solid #1C2F20;

border-radius:12px;

overflow:hidden;

transition:.3s;

box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.product-card:hover{

transform:translateY(-6px);

border-color:#F28C28;

box-shadow:0 12px 24px rgba(0,0,0,.15);
}

.product-card img{

width:100%;

height:420px;

object-fit:cover;
}

.product-card h3{

margin:18px 18px 8px;

color:#23492F;

font-size:22px;
}

.product-card p{

margin:0 18px 20px;

color:#666;

line-height:1.5;
}

/* ==========================
Carousel Buttons
========================== */

.nav-btn{

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#23492F;

color:#fff;

font-size:24px;

cursor:pointer;

transition:.3s;
}

.nav-btn:hover{

background:#F28C28;
}

</style>
