@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap');

:root {
  --primary-color: #64B5F6;
  --accent-color:  #FFD700;
  --text-color:    #E0E0E0;
  --bg-light:      #1A1A2E;
  --bg-gray:       #16213E;
  --card-bg:       #0F3460;
  --border-color:  #0A1931;
  --font-family:   'IBM Plex Sans Arabic', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-family);
  line-height:1.7;
  background:var(--bg-light);
  color:var(--text-color);
  direction:rtl; text-align:right;
  overflow-x:hidden;
}

.container { width:90%; max-width:1200px; margin:0 auto; }

/* Headings */
h1,h2,h3,h4 { color:var(--primary-color); margin-bottom:20px; position:relative; padding-bottom:10px; }
h1{ font-size:3rem; }
h2{
  font-size:2.2rem;
  text-align:center; display:flex; align-items:center; justify-content:center; gap:15px;
  margin-bottom:40px;
}
h2::after{
  content:''; position:absolute; bottom:0; right:50%; transform:translateX(50%);
  width:80px; height:4px; background:var(--accent-color); border-radius:2px;
}
h3{ font-size:1.7rem; color:var(--text-color); }
h4{ font-size:1.2rem; }

/* Sections */
section { padding:80px 0; }
.alternate-bg{ background:var(--bg-gray); }

/* Header / Nav */
header{
  background:var(--card-bg); padding:15px 0; position:sticky; top:0; z-index:1000;
  box-shadow:0 5px 20px rgba(0,0,0,.6);
}
nav{ display:flex; justify-content:space-between; align-items:center; }
.logo-container{ display:flex; align-items:center; }
.gov-logo{ height:55px; filter:drop-shadow(0 0 5px rgba(255,215,0,.5)); }
.nav-links{ display:flex; list-style:none; }
.nav-links li{ margin:0 15px; }
.nav-links a{
  text-decoration:none; color:var(--text-color); font-weight:600;
  transition:color .3s ease, transform .3s ease; position:relative; padding-bottom:5px;
}
.nav-links a:hover{ color:var(--accent-color); transform:translateY(-2px); }
.nav-links a::after{
  content:''; position:absolute; bottom:0; right:0; width:0; height:3px; background:var(--accent-color);
  transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%; }
.hamburger{ display:none; cursor:pointer; font-size:1.8rem; color:var(--primary-color); }

/* Hero */
.hero-section{
  background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)), url('https://gov.krd/content/images/2023/12/1-2.jpg') no-repeat center/cover;
  height:90vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.hero-content{ z-index:1; position:relative; }
.hero-content h1{
  color:#fff; font-size:clamp(2.5rem,5vw,4rem); margin-bottom:25px;
  text-shadow:0 0 15px rgba(255,215,0,.5);
}
.hero-content p{
  font-size:clamp(1.2rem,3vw,1.5rem); margin-bottom:40px; max-width:800px; margin-inline:auto;
}
.cta-button{
  text-decoration:none; background:var(--accent-color); color:var(--bg-light);
  padding:18px 35px; border-radius:50px; font-size:1.2rem; font-weight:700;
  transition:all .4s ease; box-shadow:0 6px 20px rgba(255,215,0,.4); border:2px solid transparent;
}
.cta-button:hover{
  transform:translateY(-5px) scale(1.03); box-shadow:0 8px 25px rgba(255,215,0,.6);
  background:var(--primary-color); border-color:var(--accent-color); color:#fff;
}

.intro-paragraph{
  text-align:center; font-size:1.2rem; max-width:800px; margin:0 auto 50px; color:var(--text-color); opacity:.9;
}

/* Stats */
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:30px; text-align:center;
}
.stat-item{
  padding:30px 20px; border-radius:15px; background:var(--card-bg);
  box-shadow:0 8px 25px rgba(0,0,0,.3); border:1px solid var(--border-color);
  transition:transform .3s ease, box-shadow .3s ease;
}
.stat-item:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.stat-item h3{
  font-size:1.6rem; margin-bottom:10px; color:var(--primary-color);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.large-number-display{
  font-size:4.5rem; font-weight:800; color:var(--accent-color); display:block; margin-bottom:15px; line-height:1;
  text-shadow:0 0 10px rgba(255,215,0,.6);
}
.stat-item span:first-of-type{ font-size:2.5rem; vertical-align:middle; line-height:1; margin-inline-end:10px; }

/* Charts */
.chart-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:50px; }
.chart-box{
  background:var(--card-bg); padding:25px; border-radius:15px;
  box-shadow:0 8px 25px rgba(0,0,0,.3); border:1px solid var(--border-color);
  width:100%; max-width:450px; text-align:center;
}
.chart-box h3{ margin-bottom:20px; font-size:1.8rem; color:var(--primary-color); }
.chart-box p{ margin-top:15px; font-size:1.1rem; color:var(--text-color); }
.chart-box canvas{ width:100% !important; height:280px !important; display:block; } /* fixed height */

.accent-text{ color:var(--accent-color); font-weight:700; }
.bold{ font-weight:700; color:var(--accent-color); }

/* Pricing */
#pricing .intro-paragraph{ max-width:900px; font-size:1.2rem; }

/* Timeline */
.timeline{ position:relative; max-width:900px; margin:0 auto; padding:20px 0; }
.timeline::before{
  content:''; position:absolute; right:50%; transform:translateX(50%);
  width:4px; background:var(--primary-color); top:0; bottom:0; border-radius:2px;
}
.timeline-item{ padding:20px 0; position:relative; width:50%; margin-bottom:50px; }
.timeline-item:nth-child(odd){ margin-right:50%; text-align:left; }
.timeline-item:nth-child(even){ margin-left:50%; text-align:right; }
.timeline-item::before{
  content:''; position:absolute; top:25px; width:20px; height:20px; background:var(--accent-color);
  border:4px solid var(--primary-color); border-radius:50%; z-index:1;
}
.timeline-item:nth-child(odd)::before{ right:-10px; }
.timeline-item:nth-child(even)::before{ left:-10px; }
.timeline-date{
  background:var(--accent-color); color:var(--bg-light);
  padding:8px 15px; border-radius:5px; font-weight:700; display:inline-block; margin-bottom:10px;
  box-shadow:0 4px 10px rgba(255,215,0,.3);
}
.timeline-content{
  background:var(--card-bg); padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.2); border:1px solid var(--border-color);
}
.timeline-content h3{ color:var(--primary-color); margin-bottom:10px; }
.timeline-content p{ font-size:1.05rem; }

/* FAQ */
.accordion{ max-width:900px; margin:50px auto; }
.accordion-item{
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:10px; margin-bottom:15px; overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.2); transition:all .3s ease;
}
.accordion-item:hover{ box-shadow:0 8px 20px rgba(0,0,0,.4); transform:translateY(-3px); }
.accordion-header{
  background:var(--bg-gray); color:var(--primary-color); padding:20px; width:100%; text-align:right; border:none; outline:none;
  font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:flex-end; gap:15px;
  transition:background-color .3s ease, color .3s ease; border-bottom:1px solid var(--border-color);
}
.accordion-header:hover{ background:#2D3E5E; color:var(--accent-color); }
.accordion-header .accordion-icon{ font-size:1.5rem; color:var(--accent-color); }
.accordion-content{
  max-height:0; overflow:hidden; transition:max-height .5s ease-out, padding .5s ease-out; padding:0 20px;
}
.accordion-content.active{ max-height:500px; padding:20px; }
.accordion-content p, .accordion-content ul{ font-size:1.1rem; margin-bottom:10px; }
.accordion-content ul{ list-style:none; padding-right:20px; }
.accordion-content ul li::before{
  content:"•"; color:var(--accent-color); font-weight:bold; display:inline-block; width:1em; margin-right:5px; margin-left:-1em;
}

/* Footer */
footer{
  background:var(--card-bg); color:var(--text-color); padding:40px 0; margin-top:60px; border-top:2px solid var(--border-color);
}
.footer-content{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px; }
.footer-section{ text-align:center; flex:1; min-width:250px; }
.footer-logo-wishe{ height:45px; margin-bottom:10px; filter:grayscale(100%) brightness(200%); transition:filter .3s ease; }
.footer-logo-wishe:hover{ filter:grayscale(0%) brightness(100%); }
footer a{ color:var(--accent-color); text-decoration:none; font-weight:bold; transition:color .3s ease; }
footer a:hover{ text-decoration:underline; color:var(--primary-color); }

/* Mobile */
@media (max-width:768px){
  h1{ font-size:2.5rem; } h2{ font-size:1.8rem; flex-direction:column; gap:10px; }
  h2::after{ right:50%; transform:translateX(50%); } h3{ font-size:1.5rem; }

  .nav-links{
    position:fixed; left:-100%; top:85px; background:var(--bg-gray);
    flex-direction:column; width:100%; height:calc(100vh - 85px); text-align:center;
    transition:left .4s ease-in-out; box-shadow:0 10px 10px rgba(0,0,0,.1);
    padding-top:30px; align-items:center; justify-content:flex-start;
  }
  .nav-links.active{ left:0; }
  .nav-links li{ padding:18px 0; width:80%; border-bottom:1px solid var(--border-color); }
  .nav-links li:last-child{ border-bottom:none; }
  .nav-links a{ font-size:1.2rem; }
  .hamburger{ display:block; }
  .gov-logo{ height:45px; }

  .hero-section{ height:70vh; }
  .hero-content h1{ font-size:clamp(2rem,8vw,3rem); }
  .hero-content p{ font-size:clamp(1rem,4vw,1.2rem); }
  .cta-button{ padding:12px 25px; font-size:1rem; }

  .footer-content{ flex-direction:column; text-align:center; }
  .stats-grid{ grid-template-columns:1fr; }
  .large-number-display{ font-size:3.5rem; }
  .chart-box{ max-width:100%; }

  .timeline::before{ right:auto; left:20px; transform:none; }
  .timeline-item{ width:100%; padding-right:0; margin-left:0; text-align:right; }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even){ margin-right:0; margin-left:0; padding-left:50px; text-align:right; }
  .timeline-item::before{ left:10px; right:auto; }
  .timeline-date{ margin-left:0; margin-right:auto; }

  .accordion-header{ font-size:1.1rem; gap:10px; }
  .accordion-content p, .accordion-content ul{ font-size:1rem; }
}

@media (max-width:480px){
  h1{ font-size:2rem; } h2{ font-size:1.6rem; } .gov-logo{ height:40px; }
  .cta-button{ font-size:.9rem; padding:10px 20px; }
  .large-number-display{ font-size:2.8rem; }
  .accordion-header{ font-size:1rem; padding:15px; }
  .accordion-content.active{ padding:15px; }
}