@font-face {
  font-family: "UniSalar";
  src: url("fonts/UniSalar_F_E0.otf") format("opentype");
}

.kurdish-page {
  font-family: "UniSalar", sans-serif;
  color: rgb(0, 0, 0); /* رنگ اصلی متن */
    }

body {
  margin: 0;
  font-family: 'Monkey Banana', Arial, sans-serif;
  background: linear-gradient(to right, #00c6ff, #00e0c6);
  color: white;
  overflow-x: hidden; /* جلوگیری از اسکرول افقی */
}

/* فقط برای دسکتاپ */
@media (min-width: 1024px) {
  body {
    max-width: 1850px;   /* حداکثر عرض سایت */
    margin: 0 auto;      /* وسط چین شدن */
    padding: 0 20px;     /* فاصله از راست و چپ */
  }
}


/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
}

.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: white;
}

.logo {
  height: 60px;
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.close {
  display: none;
}

/* HERO */
.hero {
  position: relative;
  text-align: center;
}

.hero-img {
  width: 100%;
  height: 550px;
  object-fit: cover;
}

.overlay-group {
  
  position: absolute;
  top: 70%;              /* جایگاه روی بنر */
  left: 50%;
  transform: translateX(-50%);
  display: flex;         /* کنار هم قرار گرفتن */
  gap: 0;                /* فاصله صفر */
}

.overlay {
  width: 120px;          /* کمی کوچکتر تا نزدیک‌تر بشن */
  cursor: pointer;
  transition: transform 0.3s;
}

.overlay:hover {
  transform: scale(1.1);
}

.hero-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.hero button {
  padding: 15px 25px;
  border-radius: 30px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  background: #ffcc00;
  color: black;
  transition: 0.3s;
}

.hero button:hover {
  transform: scale(1.05);
  background: #ffd633;
}

/* VIDEOS */
.videos {
  padding: 40px;
}

.row {
  display: flex;
  flex-direction: column;   /* کارت‌ها زیر هم */
  align-items: center;      /* وسط چین افقی */
  gap: 30px;                /* فاصله بین کارت‌ها */
}


.card {
  min-width: 854px;
  height: 480px;
  border: 2px solid #61a9da;
  background: linear-gradient(to top, #ff7eb3, #ff758c);
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.card:hover {
  transform: scale(1.1);
}



/* LIVE */
.live {
  text-align: center;
  padding: 40px;
}

.live iframe {
  width: 854px;
  height: 480px;
  border-radius: 20px;
}

/* ABOUT */
.about {
  padding: 40px;
  text-align: center;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  background: #222;
}





/*=============================*/
/*=============================*/
/*=============================*/

/* حالت موبایل */
@media (max-width: 893px) {
  header {
    width: 100%;              /* کل عرض صفحه */
    position: fixed;           /* همیشه بالای صفحه */
    top: 0;
    left: 0;
    background: #00c6ff;       /* رنگ پس‌زمینه (می‌تونی تغییر بدی) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    z-index: 1000;             /* بالاتر از همه عناصر */
  }

  body {
    width: 100%;          /* کل عرض صفحه */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;   /* هیچ اسکرول افقی نیاد */
  }

  .logo {
    height: 40px;              /* کوچیک‌تر شدن لوگو روی موبایل */
    width: auto;
    padding-left: 10px;
    padding-top: 10px;
  }

  nav {
    display: none;
    flex-direction: column;
    justify-content: center;   /* لینک‌ها وسط عمودی */
    align-items: center;       /* لینک‌ها وسط افقی */
    background: rgba(0,0,0,0.95); /* بک‌گراند تیره */
    position: fixed;           /* کل صفحه رو بگیره */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;              /* تمام ارتفاع صفحه */
    z-index: 999;
  }

  nav.show {
    display: flex;
  }

  nav .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 45px;
    color: white;
    cursor: pointer;
  }

  nav a {
    margin: 20px 0;
    font-size: 22px;
    color: white;
    text-decoration: none;
  }

  .close {
  display:block;
}

  .hamburger {
    display: block;
    font-size: 28px;
    cursor: pointer;
    color: white;
    padding: 0 30px;

  }

  .hero {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی */
  }

  .hero-img {
    width: 100%;
    height: 344px;        /* ارتفاع متناسب */
    object-fit: cover;
    border-radius: 0;
  }

.overlay-group {
    position: absolute;
    top: 62%;             /* بالاتر از حالت دسکتاپ */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;  /* کنار هم بمونن */
    gap: 8px;
    justify-content: center;
  }

  .overlay {
    width: 100%;          /* کوچیک‌تر برای موبایل */
  }

  .hero-text {
    position: absolute;
    bottom: 2%;          /* متن نزدیک‌تر به پایین */
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;     /* متن کوچیک‌تر */
  }

  .hero button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 20px;
    margin-top: 8px;
  }
  
  .card {
    width: 100%;        /* کل عرض صفحه */
    max-width: 100%;    /* محدودیت حذف بشه */
    min-width: auto;    /* دیگه عرض ثابت نداشته باشه */
    height: auto;       /* ارتفاع متناسب با محتوا */
    margin: 0 0;     /* فاصله عمودی بین کارت‌ها */
    border-radius: 10px;/* گوشه‌ها کمی نرم‌تر */
  }

  .videos h2 {
    text-align:center ;
  }

  .card img,
  .card iframe {
    width: 100%;        /* تصویر و ویدیو داخل کارت هم تمام‌عرض */
    height: auto;
  }

  .live {
    width: 100%;          /* کل عرض صفحه */
    padding: 20px;        /* فاصله کمتر برای موبایل */
    box-sizing: border-box;
  }

  .live iframe {
    width: 100%;          /* تمام عرض صفحه */
    max-width: 100%;      /* هیچ محدودیتی نداشته باشه */
    height: auto;         /* ارتفاع متناسب */
    aspect-ratio: 16 / 9; /* نسبت استاندارد ویدیو */
    border-radius: 10px;  /* گوشه‌ها کمی نرم‌تر */
  }

  .about {
    width: 100%;          /* کل عرض صفحه */
    padding: 20px 15px;   /* فاصله داخلی کمتر برای موبایل */
    text-align: center;   /* متن وسط‌چین باقی بمونه */
    box-sizing: border-box;
  }

  .about h2 {
    font-size: 20px;      /* تیتر کوچیک‌تر */
    margin-bottom: 15px;
  }

  .about p {
    font-size: 14px;      /* متن کوچیک‌تر و خواناتر */
    line-height: 1.6;
    margin: 0 auto;
    max-width: 90%;       /* متن محدود بشه تا راحت‌تر خونده بشه */
  }

  footer {
    width: 100%;          /* کل عرض صفحه */
    margin: 0;
    padding: 30px 15px;   /* فاصله داخلی بیشتر برای خوانایی */
    font-size: 14px;      /* متن کوچیک‌تر */
    background: #222;     /* رنگ کمی تیره‌تر برای تمایز */
    box-sizing: border-box;
  }

  footer p {
    margin: 10px 0;
    line-height: 1.6;
  }

}