/* FONT */
@font-face {
  font-family: Parastoo;
  src: url('../font/Parastoo.woff2') format('woff2'),
       url('../font/Parastoo.woff') format('woff'),
       url('../font/Parastoo.ttf') format('truetype'),
       url('../font/Parastoo.eot'); 
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Parastoo;
  src: url('../font/Parastoo-Bold.woff2') format('woff2'),
       url('../font/Parastoo-Bold.woff') format('woff'),
       url('../font/Parastoo-Bold.ttf') format('truetype'),
       url('../font/Parastoo-Bold.eot');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

  /* --------- */
 /* NORMALIZE */
/* --------- */
*{
  direction: rtl;
  box-sizing: border-box;
  font-family:Parastoo,sans-serif !important;
}

/* body {
  font-family:Parastoo,sans-serif !important;
} */


 /* تنظیمات پالت و فونت  */
:root{
  --bg: #bccfaf;
  --cream: #efe8dd;
  --green-dark: #0f5b48;
  --green-mid: #4f8a6b;
  --accent: #c1995b; /* طلایی برای لوکس بودن */
  --muted: #6b6b6b;
  --glass: rgba(255,255,255,0.55);
  --card-shadow: 0 12px 30px rgba(10,20,18,0.08);
  --glass-blur: 8px;
  --transition: 280ms cubic-bezier(.2,.9,.3,1);
}

/* فونت: اگر Parastoo دارید، نام فایلتون رو جایگزین کنید */
@font-face{
  font-family: 'ParastooLocal';
  src: url('./font/Parastoo.woff2') format('woff2');
  font-display: swap;
}
body{ font-family: ParastooLocal, "Vazirmatn", "Shabnam", system-ui, sans-serif; margin:0; background: linear-gradient(180deg,var(--bg),#fff 19%); color:#222; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ریست ساده */
*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* TOP PROMO BAR */
/* #promoBar{
  background: linear-gradient(90deg, rgba(193,153,91,0.08), rgba(79,138,107,0.03));
  color:var(z--green-dark);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:8px 12px;
  position:relative;
  z-index:70;
}
#promoBar .close{ opacity:.7; cursor:pointer; border:0; background:transparent; padding:4px 8px; } */

/* HEADER */
header{ position:sticky; top:0; backdrop-filter: blur(var(--glass-blur)); background:rgba(255,255,255,0.6); z-index:60; box-shadow:0 4px 18px rgba(15,20,10,0.04); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:76px; }

/* NAV */
nav.mainnav{ display:flex; gap:18px; align-items:center; }
nav.mainnav a{ padding:8px 14px; border-radius:10px; color:var(--muted); transition:all 180ms; font-weight:600; }
nav.mainnav a:hover{ background:rgba(15,91,72,0.06); color:var(--green-dark); transform:translateY(-3px); }

/*  LOGO  */
#logo{display: flex; align-items: center;}

/* حساب و اعلان */
.header-actions{ display:flex; gap:8px; align-items:center; }

/* HERO (بلواپرینت متحرک) */
.hero{
  height:58vh;
  min-height:420px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(15,20,18,0.04);
}
.hero .bg-grid{
  position:absolute; inset:0; background:
   linear-gradient(transparent 60%, rgba(15,20,18,0.02)),
   repeating-linear-gradient(90deg, rgba(15,20,18,0.02) 0 1px, transparent 1px 80px),
   radial-gradient(circle at 20% 30%, rgba(79,138,107,0.03), transparent 10%);
  transform:scale(1.08);
  animation: slow-pan 18s linear infinite;
  filter:blur(0.4px);
  z-index:0;
}
@keyframes slow-pan{ from{ transform:translateX(0) scale(1.08);} to{ transform:translateX(-50px) scale(1.08);} }

.hero .floating-icons{
  position:absolute; right:8%; top:18%; display:flex; flex-direction:column; gap:18px; z-index:5;pointer-events: none !important;
}
.icon-bubble{ width:72px; height:72px; border-radius:12px; background:linear-gradient(135deg,rgba(255,255,255,0.9), rgba(255,255,255,0.7)); display:flex; align-items:center; justify-content:center; box-shadow:var(--card-shadow); transform:translateY(0); animation: float 5s ease-in-out infinite; }
.icon-bubble:nth-child(2){ animation-delay:.6s; width:56px; height:56px; }
.icon-bubble:nth-child(3){ animation-delay:1.2s; transform-origin:center; }
@keyframes float{ 0%{ transform:translateY(0);}50%{ transform:translateY(-10px);}100%{ transform:translateY(0);} }

/* HERO CONTENT */
.hero .hero-left{ z-index:4; width:58%; padding:48px 36px; }
.hero h1{ font-size:40px; margin:0 0 2em; color:#252424; text-shadow:0 8px 26px rgba(10,20,10,0.6); letter-spacing:0.6px; font-weight:800; }
.hero p{ color:rgba(37,36,36,0.9); margin:0 0 18px; opacity:.95; font-weight:600; }
.hero .ctas{ display:flex; gap:12px; }
.btn{
  background:transparent; border:1px solid rgba(76, 76, 76, 0.18); color:#252424; padding:12px 16px; border-radius:10px; cursor:pointer; font-weight:700; transition:all var(--transition);
}
.btn.primary{ background: linear-gradient(90deg,var(--accent), #c1995be6); color:#fff; border:0; box-shadow:0 10px 30px rgba(193,153,91,0.12); }
.btn:hover{ transform:translateY(-6px); }

/* hero right: big blueprint card */
.blueprint{
  position:absolute; left:6%; top:14%; width:360px; max-width:45%; height:420px; border-radius:14px; background: linear-gradient(180deg,#f6f7f5,#fff); box-shadow: 0 24px 50px rgba(10,20,10,0.08); z-index:3; overflow:hidden; transform:rotate(-2deg);
  border: 1px solid rgba(15,20,10,0.03);
}
.blueprint .sheet{
  position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; gap:10px;
}
.blueprint h3{ margin:0; color:var(--green-dark); font-size:18px; font-weight:800; }
.blueprint .blue-lines{ flex:1; background:
    linear-gradient(transparent 24px, rgba(15,91,72,0.02) 24px),
    repeating-linear-gradient(0deg, rgba(15,91,72,0.03), rgba(15,91,72,0.03) 1px, transparent 1px, transparent 24px);
  border-radius:8px; position:relative; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(15,20,10,0.01); }
.blueprint .compass{ position:absolute; right:18px; bottom:18px; width:68px; height:68px; opacity:0.95; }

/* SECTIONS */
.section-title{
  display:flex; align-items:center; gap:12px; padding:18px; background:linear-gradient(90deg,#e4ecfc14, #e4ecfcc7); border-radius:12px; margin-bottom:18px;
}
.container-section{ padding:56px 20px; }

/* معرفی آموزشگاه — طراحی ویژه: 'بلوری' + خطوط معماری */
.about {
  display:grid; grid-template-columns: 1fr 420px; gap:36px; align-items:center;
}
.about .card{
  background:linear-gradient(180deg,#ffffff, #fbfbfb);
  border-radius:14px; padding:26px; box-shadow:var(--card-shadow); position:relative; overflow:visible;
}
.about .card:before{
  content:''; position:absolute; left:12px; top:12px; width:120px; height:120px; background:linear-gradient(135deg, rgba(79,138,107,0.06), transparent); transform:rotate(-12deg); border-radius:8px; z-index:0;
}
.about p{ position:relative; z-index:2; line-height:1.9; color:#334; }

/* COURSES — کارت‌های یادداشت چسبان انیمیت‌شونده */
.courses-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; align-items:start; }
.sticky-wrap{ position:relative; width:100%; height:220px; display:flex; align-items:center; justify-content:center; }
.sticky-bg{ position:absolute; width:84%; height:84%; border-radius:14px; transform:rotate(8deg); background-color:#bccfaf; opacity:.8; left:8%; top:6%; }
.sticky-card{
  position:relative; width:84%; height:84%; background:var(--cream); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,0.08); transition:transform var(--transition), box-shadow var(--transition); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; cursor:pointer;
}
.sticky-card:hover{ transform:translateY(-14px) rotate(-2deg); box-shadow:0 28px 50px rgba(10,20,10,0.12); }
.sticky-card .pill{ position:absolute; top:-20px; left:50%; transform:translateX(50%); background:var(--green-dark); color:white; padding:6px 10px; border-radius:10px; font-size:12px; }

/* CERTIFICATES carousel */
.cert-carousel{ display:flex; gap:14px; align-items:center; overflow:hidden; padding:10px 0; }
.cert-item{ min-width:200px; background:white; border-radius:10px; padding:12px; box-shadow:var(--card-shadow); display:flex; gap:10px; align-items:center; transform:translateY(0); transition:transform .3s ease; }
.cert-item img{ width:64px; height:44px; object-fit:contain; }

/* PROJECTS masonry-ish */
.projects-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.project{ border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#fff,#fbfbfb); box-shadow:var(--card-shadow); cursor:pointer; position:relative; }
.project img{ width:100%; height:220px; object-fit:cover; display:block; transition:transform .4s ease; }
.project .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.42)); opacity:0; transition:opacity .28s ease;
  display:flex; align-items:flex-end; padding:16px; color:#fff;
}
.project:hover img{ transform:scale(1.06); }
.project:hover .overlay{ opacity:1; }

/*  enrollment  */
.btn-primary:hover{ background:rgba(15,91,72,0.06); color:var(--green-dark); transform:translateY(-3px); }

 /* lightbox */
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:120; padding:20px; }
.lightbox .card{ max-width:980px; width:100%; background:#fff; border-radius:12px; overflow:hidden; }

 /* FOOTER */
footer{ margin-top:40px; background:linear-gradient(180deg,#efe8dd,#f8f6f3); padding:36px 20px; border-top:1px solid rgba(15,20,10,0.03); }

/* ========================= */
/*      Responsive Fixes     */
/* ========================= */

/* -------- 980px -------- */
@media (max-width:980px){
  .about{ grid-template-columns: 1fr; }
  .hero{min-height:301px;}
  .hero .hero-left{ width:100%; padding:26px; }
  .blueprint{ position:relative; left:auto; top:auto; width:90%; transform: rotate(-2deg); margin:18px auto; height:16em;}
  .blueprint .sheet h3{ display:flex; flex-direction: row-reverse;}
  .courses-grid{ grid-template-columns: repeat(2,1fr); }
  .projects-grid{ grid-template-columns: repeat(2,1fr); }
  .hero h1{ font-size:30px; }
  nav.mainnav{ display:none; }
  .header-inner{justify-content:space-around;}
  #footer {grid-template-columns: 1fr !important;}
  button{margin:0.5px !important; padding:10px 6px!important;}
  .hero-left p{display: none !important;}
  .hero-left h1{translate:-50% -50%; font-size: 1.75em;}
  .floating-icons{display:none !important;}
  .hero .ctas {position:absolute; top:74%; left:60%;}
}

/* -------- 640px -------- */
@media (max-width:640px){
  .header-inner{height:64px; padding:6px 8px;}
  .courses-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .blueprint .sheet h3{font-size:0.88em !important;}
  .hero-left h1{font-size:1.35em !important;}
  #footer{display:flex !important; flex-direction:column !important; align-items:center !important;}
  .video-wrapper { margin:20px auto;border-radius:12px;}
  #registerForm .modal-content { width:90%; max-width:320px; padding:16px; }
  .accordion-button { padding:12px; font-size:14px; }
}

@media (max-width:480px){  
  footer #footer #address iframe{width:100% !important;height:auto !important ;}
  .hero{min-height:301px !important;}
  .hero .hero-left{padding:0 !important;width:50% !important;}
  .hero .hero-left h1{width:max-content !important;translate:-20% -250% !important;}
  .hero .ctas{position:absolute !important;top:48% !important;left:67% !important;gap:5px !important;display:flex !important;flex-direction:column !important;}
  .hero .blueprint{position:relative !important;left:3% !important;top:12% !important;height:13em !important;}
  button{font-size:90% !important;}

}

 /* Question box */
/****************/
.accordion {border: 1px solid #ddd;border-radius: 8px;max-width: 800px;margin: 20px auto;overflow: hidden;font-family: sans-serif;}

.accordion-item {border-top: 1px solid #ddd;}

.accordion-item:first-child {border-top: none;}

.accordion-button {width: 100%;background: #f9f9f9;border: none;outline: none;padding: 16px;text-align: right;font-size: 16px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;}

.accordion-button:hover {background: #f1f1f1;}

.accordion-icon {transition: transform 0.3s ease;}

.accordion-button.active .accordion-icon {transform: rotate(45deg); /* تغییر "+" به "x" */}

.accordion-panel {display: none;padding: 16px;background: #fff;font-size: 14px;color: #333;}

.accordion-panel.show {display: block;}


/* پوشش پس‌زمینه */
#modalOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
 }

/* پنجره مودال */
#modalBox {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 300px;
}
button {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#modalBox { position: relative; } /* تا دکمه داخلش موقعیت بگیره */

#closeBtn {
  position: absolute;
  top: -0.75em;
  right: -1em;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}
#closeBtn:hover { color: #e74c3c; }

 /* VIDEO */
/*********/

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  /* margin: 40px auto; */
  border-radius: 20px; /* گوشه‌های گرد */
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2); /* سایه زیر ویدیو */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-wrapper:hover {
  transform: translateY(-6px); /* کمی بالا آمدن هنگام هاور */
  box-shadow: 0 20px 50px rgba(0,0,0,0.25); /* سایه بیشتر روی هاور */
}

video {
  width: 100%;
  height: auto;
  border-radius: 20px; /* گوشه‌های گرد ویدیو */
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* ریسپانسیو */
@media (max-width: 980px) {
  .video-wrapper { max-width: 100%; margin: 30px auto; }
  video { border-radius: 16px; }
}

@media (max-width: 640px) {
  .video-wrapper { margin: 20px 10px; }
  video { border-radius: 12px; }
}

/* ===== عنوان خبرنامه در blueprint ===== */
.blueprint #newsletterTitle {
  text-align: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 12px;
}

/* ===== مودال ===== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
}

.modal.hidden {
  display: none;
}

/* ===== محتوای مودال بزرگ‌تر ===== */
.modal-content {
  background-color:#e4d9c7;
  padding:1.3em;
  border-radius: 10px;
  max-width: 60em;      /* حداکثر عرض */
  width: 90%;
  max-height: 95%;      /* حداکثر ارتفاع */
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  animation: zoomIn 0.3s ease;
}

.modal-content h2{
    width: 30%;
    border-radius: 2em;
    background: linear-gradient(45deg, rgb(255 255 255), transparent);
}

/* ===== کارت خبرنامه ===== */
.news-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* padding: 16px 0; */
  border-bottom: 1px solid #eee;
}

.news-card:last-child {
  border-bottom: none;
}

/* ===== عنوان کارت ===== */
.news-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-dark);
}

/* ===== عکس خبرنامه ===== */
.news-img {
  width: 100%;       /* عرض کامل کارت */
  height: auto;      /* حفظ نسبت تصویر */
  border-radius: 8px;
}

/* ===== متن خبرنامه ===== */
.news-card p {
  margin: 0;
  line-height: 1.6;
  color: #334;
}

/* ===== لینک ادامه مطلب ===== */
.news-link {
  display: inline-block;
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.news-link:hover {
  text-decoration: underline;
  color: #0a3d2b;
}

/* ===== دکمه بستن مودال ===== */
.close {
  float: left;
  font-size: 1.6rem;
  cursor: pointer;
}

/* ===== انیمیشن مودال ===== */
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}