:root {
  --main-color: #ff2d2d;
  --main-color-dark: #b70000;
  --main-color-light: #ff5858;
  --header-bg: linear-gradient(120deg, #160210 50%, #ff330033 100%);
  --accent: #ff5858;
  --white: #fff;
  --shadow: 0 4px 16px #0006;
  --radius: 18px;
  --transition: 0.3s;
  --font: 'Tajawal', Arial, sans-serif;
  --fire-glow: 0 0 18px 6px #ff2d2d55, 0 0 8px 2px #fff1;
}

body {
  margin: 0;
  font-family: var(--font);
  background: #1a0d10;
  color: var(--white);
  line-height: 1.8;
}

/* الهيدر */
.main-header {
  background: var(--header-bg), url('header-bg.jpg') center/cover;
  position: relative;
  min-height: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 80px;
  box-shadow: 0 10px 40px #ff2d2d11;
}
.main-header .overlay {
  position: absolute;
  inset: 0;
  background: #000b;
  z-index: 1;
}
.header-content {
  position: relative;
  z-index: 2;
  color: var(--white);
}
.logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-bottom: 16px;
  border: 4px solid var(--main-color);
  box-shadow: var(--fire-glow);
  background: #222;
  object-fit: cover;
  animation: firePulse 2.5s infinite alternate;
}
@keyframes firePulse {
  0% { box-shadow: var(--fire-glow);}
  100% { box-shadow: 0 0 42px 12px #ff2d2d99;}
}
.main-header h1 {
  font-size: 2.4rem;
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--main-color);
  text-shadow: 0 2px 18px #ff2d2d88, 0 1px 2px #000;
}
.main-header p {
  font-size: 1.1rem;
  opacity: 0.94;
  color: #ffdada;
}
.scroll-down {
  font-size: 2.5rem;
  color: var(--main-color);
  display: inline-block;
  margin-top: 24px;
  animation: bounce 1.2s infinite alternate;
  text-decoration: none;
  filter: drop-shadow(0 0 10px #ff2d2d);
}
@keyframes bounce {
  to { transform: translateY(12px);}
}
/* Navbar */
.navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 30;
  background: #1b0505cc;
  box-shadow: 0 2px 12px #45000055;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  list-style: none;
}
.navbar li {
  margin: 0 16px;
}
.navbar a {
  color: var(--main-color);
  text-decoration: none;
  font-size: 1.1rem;
  padding: 20px 0;
  display: block;
  font-weight: 700;
  transition: color var(--transition);
  letter-spacing: 1px;
}
.navbar a:hover {
  color: var(--white);
  text-shadow: 0 0 8px #ff2d2d, 0 0 1px #fff;
}

/* أقسام */
section {
  padding: 60px 0;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* about */
.about-section .about-content {
  display: flex;
  gap: 38px;
  align-items: center;
  background: #240b0f;
  border-radius: var(--radius);
  box-shadow: 0 2px 32px #ff2d2d22;
  padding: 32px;
}
.about-section .banner-img {
  width: 250px;
  border-radius: var(--radius);
  box-shadow: 0 0 16px #ff2d2d55;
  object-fit: cover;
}
.about-section h2 {
  color: var(--main-color);
  margin-bottom: 10px;
  text-shadow: 0 2px 12px #ff2d2d99;
}
.about-section .btn-main {
  margin-top: 24px;
}

/* الفيديوهات */
.videos-section h2 {
  color: var(--main-color);
  margin-bottom: 28px;
  text-align: center;
  text-shadow: 0 2px 10px #ff2d2d55;
}
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
.video-card {
  background: #2c1013;
  border-radius: var(--radius);
  box-shadow: 0 2px 18px #ff2d2d33;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1.5px solid #ff2d2d33;
}
.video-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 32px #ff2d2d77;
  border-color: var(--main-color);
}
.video-card iframe {
  width: 100%;
  min-height: 182px;
  border: none;
  background: #1a0d10;
}
.video-card h3 {
  margin: 0;
  padding: 12px;
  font-size: 1.05rem;
  color: var(--main-color);
  font-weight: 700;
  letter-spacing: 1px;
}

/* تحميلات */
.downloads-section h2 {
  color: var(--main-color);
  margin-bottom: 24px;
  text-align: center;
  text-shadow: 0 2px 10px #ff2d2d55;
}
.download-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
}
.download-card {
  background: #2f1014;
  padding: 22px 34px;
  border-radius: var(--radius);
  color: var(--white);
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 2px 18px #ff2d2d22;
  transition: background var(--transition), transform var(--transition), color var(--transition);
  text-decoration: none;
  min-width: 220px;
  text-align: center;
  border: 2px solid var(--main-color);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}
.download-card:hover {
  background: var(--main-color);
  color: #2c1013;
  transform: scale(1.06) rotate(-1deg);
  box-shadow: 0 0 24px #ff2d2d88;
}

/* تواصل معي */
.contact-section h2 {
  color: var(--main-color);
  text-align: center;
  margin-bottom: 32px;
  text-shadow: 0 2px 10px #ff2d2d55;
}
.contact-content {
  display: flex;
  gap: 38px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.social-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 200px;
}
.social-btn {
  display: block;
  text-align: center;
  background: #2c1014;
  color: var(--main-color);
  font-weight: 700;
  font-size: 1.06rem;
  border-radius: 12px;
  padding: 14px 0;
  text-decoration: none;
  box-shadow: 0 1px 8px #ff2d2d33;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  border: 2px solid var(--main-color);
  margin-bottom: 2px;
}
.social-btn.whatsapp { color: #25D366; border-color: #25D366;}
.social-btn.instagram { color: #e4405f; border-color: #e4405f;}
.social-btn.email { color: #fa3434; border-color: #fa3434;}
.social-btn.telegram { color: #229ed9; border-color: #229ed9;}
.social-btn:hover {
  background: var(--main-color);
  color: #fff;
  border-color: #fff;
  transform: scale(1.07);
  box-shadow: 0 0 14px #ff2d2d88;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 260px;
  background: #2c1014;
  border-radius: var(--radius);
  box-shadow: 0 2px 18px #ff2d2d22;
  padding: 28px 20px;
}
.contact-form input, .contact-form textarea {
  padding: 12px;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #1a0d10;
  color: var(--white);
  transition: box-shadow var(--transition);
  box-shadow: 0 1px 4px #ff2d2d33 inset;
}
.contact-form input:focus, .contact-form textarea:focus {
  box-shadow: 0 2px 8px var(--main-color)77;
}
.contact-form button {
  background: var(--main-color);
  color: #2c1014;
  font-weight: 800;
  border: none;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.contact-form button:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.05);
}

/* الفوتر */
footer {
  background: #1a0d10;
  text-align: center;
  padding: 28px 0 12px 0;
  border-top: 2px solid var(--main-color);
  margin-top: 42px;
  box-shadow: 0 -2px 10px #ff2d2d22;
}
footer p {
  margin: 6px 0;
  color: #ffcece;
}
footer a {
  color: var(--main-color);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
  .about-section .about-content,
  .contact-content {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .about-section .banner-img {
    width: 90vw;
    max-width: 350px;
  }
}
@media (max-width: 650px) {
  .main-header h1 { font-size: 1.4rem;}
  .navbar ul { flex-direction: column;}
  .navbar li { margin: 0;}
  .about-section .about-content { padding: 18px;}
  .contact-form { padding: 14px 6px;}
}