assets/css/styles.css

:root{
  --primary:#F5C542;
  --deep-teal:#0E4F4E;
  --ocean:#0B6C6A;
  --sand:#F4E9D8;
  --ink:#1B1B1B;
  --card-bg: rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background: linear-gradient(180deg, var(--ocean), var(--deep-teal)); color: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;}
a{color:var(--primary);text-decoration:none}
.container{width: min(1100px, 92%); margin: 0 auto;}
header.nav{position:sticky;top:0;z-index:50; backdrop-filter: blur(10px); background: rgba(14,79,78,0.85); border-bottom:1px solid rgba(245,197,66,0.25);}
header.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img.logo{height:42px; width:auto; border-radius:10px; box-shadow: 0 6px 20px rgba(0,0,0,.25);}
.brand .title{font-size:1.3rem; letter-spacing:.5px; font-weight:700; color:var(--primary);}
nav a{margin:0 10px; font-weight:600; opacity:.95}
.lang-switch button{margin-left:8px;border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
.lang-switch button.active{border-color:var(--primary); color:var(--primary);}

.hero{position:relative; padding:60px 0 40px; background: radial-gradient(1200px 600px at 60% -10%, rgba(255,255,255,.12), transparent 60%);}
.hero .content{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;}
.hero h1{font-weight:900; font-size: clamp(2rem, 4vw, 3.2rem); margin:0; color:var(--primary); text-shadow:0 2px 0 rgba(0,0,0,.2);}
.tagline{font-size:1.05rem; opacity:.95; line-height:1.5}
.cta{display:inline-block; margin-top:18px; background:var(--primary); color:#2a2307; padding:12px 18px; border-radius:12px; font-weight:800; box-shadow:0 8px 25px rgba(245,197,66,.35);}
.hero .art img{width:100%; border-radius:18px; box-shadow: 0 12px 50px rgba(0,0,0,.35);}

.section{padding:36px 0;}
.section h2{color:var(--primary); margin:0 0 12px 0; font-size:1.8rem}
.grid{display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));}
.card{background:var(--card-bg); border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.card img{display:block;width:100%; height:180px; object-fit:cover}
.card .pad{padding:14px}
.card .title{font-weight:800; letter-spacing:.3px; font-size:1.05rem}
.card .row{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.badge{background:rgba(245,197,66,.1); color:var(--primary); padding:4px 8px; border-radius:999px; font-size:.85rem; border:1px solid rgba(245,197,66,.35);}

footer{padding:30px 0; border-top:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15);}
footer .small{opacity:.8; font-size:.92rem}

.note{opacity:.85; font-size:.92rem}
.gallery img{height:210px}

@media (max-width: 850px){
  .hero .content{grid-template-columns: 1fr; }
}

/* --- Typography upgrade to match Sabaidi poster --- */
body{font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;}
h1,h2,h3,h4,.title{font-family:"Montserrat", "Inter", Arial, sans-serif;}
.brand .title{font-family:"Pacifico","Montserrat",cursive; font-weight:400; font-size:1.7rem; letter-spacing:.5px;}

/* Gold text effect for brand and key headings */
.brand .title, .gold {
  background: linear-gradient(180deg,#FFD76A 0%, #F5C542 40%, #D79C12 100%);
  -webkit-background-clip: text; background-clip:text; color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.hero{ padding:70px 0 40px; }
.hero .content h1{ font-family:"Montserrat", "Inter", sans-serif; font-weight:900; }
.hero .content .tagline{ font-family:"Inter", sans-serif; }
nav a{font-family:"Montserrat","Inter",sans-serif; letter-spacing:.2px}
.lang-switch button{font-family:"Montserrat","Inter",sans-serif}


/* --- Carousel & Animations --- */
.hero-carousel{position:relative; overflow:hidden; border-radius:18px; box-shadow: 0 12px 50px rgba(0,0,0,.35);}
.hero-carousel img{width:100%; height:420px; object-fit:cover; display:block; opacity:0; transition: opacity 900ms ease-in-out;}
.hero-carousel img.active{opacity:1}
.hero .content{grid-template-columns: 1fr 1.15fr}

/* --- Forms --- */
.form{background: var(--card-bg); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.input-row{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-bottom:10px}
label{font-size:.92rem; opacity:.9; display:block; margin-bottom:4px}
input,select,textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff}
textarea{min-height:90px}
.btn{display:inline-block; padding:10px 14px; border-radius:12px; background:var(--primary); color:#2a2307; font-weight:800; border:0; cursor:pointer; box-shadow:0 8px 25px rgba(245,197,66,.35)}
.btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.alert{margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(12,115,85,.25); border:1px solid rgba(255,255,255,.2)}
.alert.error{background:rgba(150,12,12,.25)}


/* Mobile fine-tuning */
@media (max-width: 540px){
  header.nav .wrap{padding:8px 0}
  nav a{margin:0 6px; font-size:.95rem}
  .hero .content{gap:16px}
  .hero-carousel img{height:260px}
  .card img{height:160px}
}


/* --- Centered hero carousel with overlay text --- */
.hero { padding: 30px 0 20px; }
.hero .content { display:block; }
.hero-carousel { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 22px; overflow: hidden; }
.hero-carousel img { height: 520px; }
.carousel-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.25) 100%);
}
.carousel-overlay h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin:0 0 6px 0; line-height:1.05; }
.carousel-overlay p { max-width: 820px; margin: 8px auto 12px; font-size: clamp(1rem, 2.2vw, 1.25rem); }
.carousel-overlay .cta { margin-top: 10px; }

@media (max-width: 900px){
  .hero-carousel img { height: 380px; }
}
@media (max-width: 560px){
  .hero-carousel img { height: 260px; }
}


/* --- v7: absolute slides + theme toggle --- */
.hero-carousel{position:relative}
.hero-carousel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.theme-switch button{margin-left:8px;border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
.theme-light .theme-switch button{color:#0b3d3d; border-color: rgba(0,0,0,.2)}

/* Light theme overrides */
.theme-light body{background: linear-gradient(180deg, #E9FAFF, #FFF7E4); color:#0b3d3d}
.theme-light .card{background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,.12)}
.theme-light header.nav{background: rgba(255,255,255,.7); border-bottom-color: rgba(0,0,0,.1)}
.theme-light nav a{color:#0b3d3d}
.theme-light .note{opacity:.9}
.theme-light .badge{background: rgba(215,156,18,.08); color:#a06b00; border-color: rgba(215,156,18,.35)}
.theme-light footer{background: rgba(0,0,0,.05); border-top-color: rgba(0,0,0,.1)}