*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif;
}

body{
background:#fff;
}

/* ================= HEADER ================= */

header{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 50px;
z-index:1000;
background:#FF9B51;
color:white;
}

header nav a{
color:white;
margin-left:20px;
text-decoration:none;
font-weight:500;
}

.logo{
font-size:22px;
font-weight:bold;
}

/* ================= HERO ================= */

.hero{
min-height:100vh;
padding:140px 40px 80px 40px;
display:flex;
flex-direction:column;
gap:80px;

background:
linear-gradient(10deg, rgba(234,239,239,0.6),rgba(234,239,239,0.4)),
url("img.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

.hero-content{
max-width:900px;
margin:0 auto;
text-align:center;
}

.hero h1{
font-size:42px;
font-weight:700;
margin-bottom:30px;
}

/* ================= SLIDER ================= */

.slider{
width:1200px;
max-width:90%;
margin:0 auto;
position:relative;
overflow:hidden;
border-radius:8px;
box-shadow:0 12px 30px rgba(0,0,0,0.22);
background:#fff;
}

.slides{
position:relative;
width:100%;
aspect-ratio:3 / 2;
display:flex;
align-items:center;
justify-content:center;
background:#f2f2f2;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity 0.8s ease-in-out;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
}

.slide.active{
opacity:1;
}

/* ================= TEXT ================= */

.hero p{
font-size:20px;
margin-top:10px;
opacity:0.9;
text-align:center;
}

.hero a{
font-size:22px;
font-weight:700;
color:#FF9B51;
margin-left:8px;
text-decoration:none;
}

.hero-content-list{
list-style:none;
padding:0;
margin:30px auto 0;
}

.hero-content-list li{
font-size:22px;
font-weight:600;
}

/* ================= DOTS ================= */

.dots{
display:flex;
justify-content:center;
margin:20px 0;
}

.dot{
height:12px;
width:12px;
margin:0 6px;
background:#ccc;
border-radius:50%;
cursor:pointer;
transition:all 0.3s ease;
}

.dot.active{
background:#FF9B51;
transform:scale(1.2);
}

/* ================= MOBILE OPTIMIZATION ================= */

@media (max-width:768px){

header{
padding:15px 20px;
}

header nav a{
margin-left:12px;
font-size:14px;
}

.logo{
font-size:18px;
}

/* Mobile hero becomes neutral */
.hero{
padding:110px 16px 60px 16px;
gap:60px;

background:#f5f5f5;
}

/* SECTION CARDS (key improvement) */
.hero-content{
background:#fff;
padding:22px 16px 28px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

/* Full width slider */
.slider{
width:100%;
max-width:100%;
border-radius:8px;
box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

/* Better portrait handling */
.slides{
aspect-ratio:4 / 5;
}

/* Typography scale */
.hero h2{
font-size:22px;
margin-bottom:14px;
}

.hero-content-list{
margin-top:18px;
}

.hero-content-list li{
font-size:18px;
}

.hero a{
font-size:18px;
}

/* Smaller dots */
.dot{
height:10px;
width:10px;
margin:0 4px;
}

}