*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Arial;

scroll-behavior:smooth;

}

body{

background:#0f172a;

color:white;

overflow-x:hidden;

}

/* HERO */

.hero{

padding:120px 20px;

text-align:center;

background:url('khalfiya.png');

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-radius:0 0 40px 40px;

margin-bottom:50px;

}

.hero h1{

font-size:60px;

margin-bottom:20px;

}

.hero p{

font-size:28px;

max-width:850px;

margin:auto;

line-height:1.8;

}

.start-btn{

margin-top:25px;

padding:16px 40px;

font-size:22px;

border:none;

border-radius:15px;

background:#22c55e;

color:white;

cursor:pointer;

}

/* SECTION */

.section{

padding:20px;

}

.section-title{

font-size:42px;

margin-bottom:30px;

color:#facc15;

text-align:center;

}

/* CARDS */

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:25px;

}

.card{

background:#1e293b;

padding:25px;

border-radius:25px;

overflow:hidden;

}

/* IMAGE */

.story-img{

width:100%;

height:240px;

object-fit:cover;

border-radius:20px;

margin-bottom:20px;

}

/* TEXT */

.card h3{

font-size:32px;

margin-bottom:15px;

color:#38bdf8;

}

.page{

display:inline-block;

background:#22c55e;

padding:8px 18px;

border-radius:10px;

font-size:20px;

margin-bottom:20px;

}

.text{

font-size:28px;

line-height:1.6;

margin-top:10px;

}

/* AUDIO */

.green-audio{

width:100%;

margin-top:25px;

border-radius:15px;

background:#22c55e;

padding:10px;

}

/* ADMIN */

.admin-box{

max-width:700px;

margin:40px auto;

background:#1e293b;

padding:30px;

border-radius:25px;

}

.admin-box h1{

text-align:center;

margin-bottom:30px;

}

input,
textarea{

width:100%;

padding:15px;

margin-top:15px;

border:none;

border-radius:12px;

font-size:18px;

}

textarea{

height:220px;

resize:none;

}

button{

margin-top:20px;

padding:15px;

width:100%;

background:#22c55e;

border:none;

border-radius:12px;

font-size:20px;

color:white;

cursor:pointer;

}

/* MOBILE */

@media(max-width:768px){

.hero{

padding:80px 20px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:22px;

}

.cards{

grid-template-columns:1fr;

}

.text{

font-size:22px;

}

.story-img{

height:220px;

}

}