:root {
      --color-primary: #7a0021;
      --color-primary-dark: #4f0000;
      --color-secondary: #be4848;
      --color-accent: #a21e1e;
      --color-bg-main: #212121;
      --color-bg-secondary: #1d1d1d;
      --color-bg-tertiary: #191919;
      --color-text-primary: #f1f5f9;
      --color-text-secondary: #cbd5e1;
      --color-text-muted: #e8d0d0;
      --color-border: #3a3a3a00;
      --color-shadow: rgba(0, 0, 0, 0.443);
      --color-success: #64c3a3;
      --color-error: #a84343;
      
      /* Typography */
      --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
      --font-size-base: 16px;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-md: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --line-height-tight: 1.25;
      --line-height-normal: 1.5;
      --line-height-relaxed: 1.75;
      
      /* Spacing Scale */
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      
      /* Layout */
      --max-width-content: 1200px;
      --max-width-text: 65ch;
      --border-radius-sm: 0.375rem;
      --border-radius-md: 0.5rem;
      --border-radius-lg: 0.75rem;
      --border-radius-xl: 1rem;
      
      /* Transitions */
      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
      
      /* Shadows */
      --shadow-sm: 0 1px 2px 0 var(--color-shadow);
      --shadow-md: 0 4px 6px -1px var(--color-shadow);
      --shadow-lg: 0 10px 15px -3px var(--color-shadow);
      --shadow-xl: 0 20px 25px -5px var(--color-shadow);
    }
    
    /* Dark Theme */
    [data-theme="dark"] {
/* Color Palette - Light Theme */
      --color-primary: #7a0021;
      --color-primary-dark: #4f0000;
      --color-secondary: #be4848;
      --color-accent: #a21e1e;
      --color-bg-main: #ffeaea;
      --color-bg-secondary: #ffdddd;
      --color-bg-tertiary: #edbdbd;
      --color-text-primary: #22022a;
      --color-text-secondary: #b84646;
      --color-text-muted: #f4d7d7;
      --color-border: #f1e2e2;
      --color-shadow: rgba(15, 23, 42, 0.1);
    }
   
   /* ==================== RESET & BASE ==================== */
   @font-face {
  font-family: "Castelar";
  src: url("CASTELAR.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      height: 100%;
      scroll-behavior: smooth;
    }
    
    body {
      font-family: var(--font-primary);
      font-size: var(--font-size-base);
      line-height: var(--line-height-normal);
      color: var(--color-text-primary);
      background-color: var(--color-bg-main);
      width: 100%;
      min-height: 100%;
      transition: background-color var(--transition-base), color var(--transition-base);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* ==================== TYPOGRAPHY ==================== */
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: var(--line-height-tight);
      color: var(--color-text-primary);
    }
    
    h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-6); }
    h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-5); }
    h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); }
    h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-3); }
    
    p {
      margin-bottom: var(--space-4);
      color: var(--color-text-secondary);
      line-height: var(--line-height-relaxed);
    }
    
    a {
      color: var(--color-primary);
      text-decoration: none;
      transition: color var(--transition-fast);
    }
    
    a:hover, a:focus {
      color: var(--color-primary-dark);
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
    
    /* ==================== UTILITY CLASSES ==================== */
    .app-container {
      width: 100%;
      max-width: var(--max-width-content);
      margin: 0 auto;
      padding: 0 var(--space-6);
    }
    
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    .section {
      padding: var(--space-20) 0;
    }
    
    .section__title {
      text-align: center;
      margin-bottom: var(--space-12);
      position: relative;
    }
    
    .section__title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
      margin: var(--space-4) auto 0;
      border-radius: var(--border-radius-sm);
    }
    
    /* ==================== HEADER & NAVIGATION ==================== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background-color: var(--color-bg-main);
      border-bottom: 1px solid var(--color-border);
      transition: transform var(--transition-base), box-shadow var(--transition-base);
    }
    
    .header.header--scrolled {
      box-shadow: var(--shadow-md);
    }
    
    .header.header--hidden {
      transform: translateY(-100%);
    }
    
.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  direction: rtl;
}
    
    .header__logo {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--color-text-primary);
    }
    
.nav__list {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  align-items: center;
  direction: rtl;
}

    
    .nav__link {
      color: var(--color-text-secondary);
      font-weight: 500;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--border-radius-sm);
      transition: all var(--transition-fast);
    }
    
    .nav__link:hover, .nav__link:focus {
      color: var(--color-primary);
      background-color: var(--color-bg-secondary);
    }
    
    .nav__link--active {
      color: var(--color-primary);
      background-color: var(--color-bg-secondary);
    }
    
    /* Theme Toggle Button */
    .theme-toggle {
      background: var(--color-bg-secondary);
      border: 1px solid var(--color-border);
      border-radius: var(--border-radius-md);
      padding: var(--space-2) var(--space-3);
      cursor: pointer;
      font-size: var(--font-size-lg);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      transition: all var(--transition-fast);
    }
    
    .theme-toggle:hover, .theme-toggle:focus {
      background-color: var(--color-primary);
      color: white;
      border-color: var(--color-primary);
      transform: scale(1.05);
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
    
    /* Mobile Menu Toggle */
    .mobile-nav-toggle {
      display: none;
      background: none;
      border: none;
      font-size: var(--font-size-2xl);
      cursor: pointer;
      color: var(--color-text-primary);
      padding: var(--space-2);
    }
    
    /* ==================== HERO SECTION ==================== */
    .hero {
      padding-top: calc(80px + var(--space-20));
      padding-bottom: var(--space-20);
      background-image: url(img/bg2.png);
      background-size: cover;
      text-align: center;
    }
    
    .hero__content {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .hero__greeting {
      font-size: var(--font-size-lg);
      color: var(--color-primary);
      font-weight: 600;
      margin-bottom: var(--space-3);
    }
    
    .hero__name {
      font-size: var(--font-size-5xl);
      font-weight: 800;
      margin-bottom: var(--space-4);
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .hero__title {
      font-size: var(--font-size-2xl);
      color: #f5e8e8;
      margin-bottom: var(--space-6);
      font-weight: 500;
      font-size:80px;
      font-family: "Castelar", sans-serif;
    }
    
    .hero__tagline {
      font-size: larger;
      color: var(--color-text-muted);
      max-width: 600px;
      margin: 0 auto var(--space-8);
    }
    
    .hero__actions {
      display: flex;
      gap: var(--space-4);
      justify-content: center;
      flex-wrap: wrap;
    }
    
    /* ==================== BUTTONS ==================== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-6);
      border-radius: var(--border-radius-md);
      font-weight: 600;
      font-size: var(--font-size-md);
      cursor: pointer;
      transition: all var(--transition-fast);
      border: 2px solid transparent;
      text-decoration: none;
    }
    
    .btn--primary {
      background-color: var(--color-primary);
      color: white;
      border-color: var(--color-primary);
    }
    
    .btn--primary:hover, .btn--primary:focus {
      background-color: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    
    .btn--secondary {
      background-color: transparent;
      color: var(--color-primary);
      border-color: var(--color-primary);
    }
    
    .btn--secondary:hover, .btn--secondary:focus {
      background-color: var(--color-primary);
      color: white;
    }
    
    .btn--ghost {
      background-color: var(--color-bg-secondary);
      color: var(--color-text-primary);
      border-color: var(--color-border);
    }
    
    .btn--ghost:hover, .btn--ghost:focus {
      background-color: var(--color-bg-tertiary);
      border-color: var(--color-primary);
    }
    
    /* ==================== ABOUT SECTION ==================== */
    .about__content {
      display: grid;
      gap: var(--space-12);
      align-items: start;
    }
    
    .about__image-wrapper {
      position: relative;
    }
    
    .about__image {
      width: 100%;
      max-width: 300px;
      aspect-ratio: 1;
      border-radius: var(--border-radius-xl);
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6rem;
      box-shadow: var(--shadow-xl);
    }
    
    .about__text p {
      margin-bottom: var(--space-4);
    }
    
    .about__stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-8);
    }
    
    .stat {
      text-align: center;
      padding: var(--space-4);
      background-color: var(--color-bg-secondary);
      border-radius: var(--border-radius-lg);
    }
    
    .stat__value {
      font-size: var(--font-size-3xl);
      font-weight: 700;
      color: var(--color-primary);
      display: block;
    }
    
    .stat__label {
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
      margin-top: var(--space-2);
    }
    
    /* ==================== EXPERIENCE SECTION ==================== */
    .experience__timeline {
      max-width: 900px;
      margin: 0 auto;
    }
    
    .timeline-item {
      position: relative;
      padding-left: var(--space-12);
      padding-bottom: var(--space-10);
      border-left: 2px solid var(--color-border);
    }
    
    .timeline-item:last-child {
      border-left-color: transparent;
      padding-bottom: 0;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -9px;
      top: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--color-primary);
      border: 3px solid var(--color-bg-main);
    }
    
    .timeline-item__header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: var(--space-3);
      flex-wrap: wrap;
      gap: var(--space-2);
    }
    
    .timeline-item__title {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--color-text-primary);
      margin: 0;
    }
    
    .timeline-item__company {
      font-size: var(--font-size-lg);
      color: var(--color-primary);
      font-weight: 600;
      margin-bottom: var(--space-2);
    }
    
    .timeline-item__date {
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
      padding: var(--space-1) var(--space-3);
      background-color: var(--color-bg-secondary);
      border-radius: var(--border-radius-sm);
    }
    
    .timeline-item__description {
      list-style: none;
      margin-top: var(--space-3);
    }
    
    .timeline-item__description li {
      position: relative;
      padding-left: var(--space-5);
      margin-bottom: var(--space-2);
      color: var(--color-text-secondary);
    }
    
    .timeline-item__description li::before {
      content: '▹';
      position: absolute;
      left: 0;
      color: var(--color-primary);
      font-weight: 700;
    }
   /* ==================== PROJECTS SECTION ==================== */
.projects__grid {
  display: grid;
  /* پهن‌تر شدن کارت‌ها با ستون کمتر و min-width بزرگ‌تر */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-8);
}

.project-card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--color-border);
  /* کمی ارتفاع کلی کمتر با padding کمتر */
  padding-bottom: var(--space-4);
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
}

/* تصاویر پروژه‌ها (ارتفاع کمتر از قبل) */
.project-card__image {
  width: 100%;
  height: 150px; /* کاهش ارتفاع از 180px به 150px */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}


    /* =========================================================
   بخش پروژه‌های گرافیکی (تمام‌تصویر، ۴ ستونه)
   ========================================================= */

/* چیدمان شبکه ۴ ستونه */
#projects .projects__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* چهار ستون */
    gap: 20px; /* فاصله بین کارت‌ها */
}

/* واکنش‌گرایی برای نمایش در دستگاه‌های کوچکتر */
@media (max-width: 1024px) {
    #projects .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #projects .projects__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* --- استایل کلی کارت گرافیکی --- */
.project-card--graphic {
    padding: 0 !important; /* حذف فاصله داخلی برای چسبیدن عکس به لبه‌ها */
    overflow: hidden;      /* جلوگیری از خروج زوم عکس از کادر */
    height: 450px;         /* ارتفاع بلندتر طبق خواسته شما */
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1); /* خط ظریف دور کارت */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* تنظیم تصویر تا کل کادر را پر کند */
.project-card--graphic .project-card__image {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-lg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

/* افکت‌ها هنگام hover */
.project-card--graphic:hover .project-card__image {
    transform: scale(1.08); /* زوم ملایم روی عکس */
}

.project-card--graphic:hover {
    transform: translateY(-10px); /* بالا آمدن کارت */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* سایه عمیق‌تر */
}

/* --- مسیر عکس‌های پروژه‌های گرافیکی --- */
.project-card__image--graphic {
    background-image: url("img/graphic1.jpg");
}

.project-card__image--graphic2 {
    background-image: url("img/graphic2.jpg");
}

.project-card__image--graphic3 {
    background-image: url("img/graphic3.jpg");
}

.project-card__image--graphic4 {
    background-image: url("img/graphic4.jpg");
}


/* عکس مخصوص هر پروژه */
.project-card__image--rose {
  background-image: url("img/rose.jpeg");
}

.project-card__image--mirath {
  background-image: url("img/miraseman.jpeg");
}

.project-card__image--graphic {
  background-image: url("img/mojasame.png");
  background-size: cover;
}

.project-card__image--graphic2 {
  background-image: url("img/p.png");
}

.project-card__image--graphic3 {
  background-image: url("img/b.png");
}

.project-card__image--graphic4 {
  background-image: url("img/toot.png");
}




    
/* کاهش فاصله کلی بخش محتوا */
.project-card__content {
  padding: var(--space-4); /* از space-6 به space-4 کاهش یافت */
}

/* کاهش فاصله زیر عنوان */
.project-card__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-1); /* فاصله زیر عنوان کمتر شد */
}

/* کاهش فاصله و فشردگی متن توضیحات */
.project-card__description {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2); /* فاصله زیر توضیحات کمتر شد */
  line-height: 1.4; /* خطوط متن به هم نزدیک‌تر شدند */
  font-size: 0.95rem; /* کمی کوچک‌تر برای فضای کمتر */
}

/* کاهش فاصله بخش تگ‌ها */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* فاصله بین تگ‌ها فشرده‌تر شد */
  margin-bottom: var(--space-3); /* فاصله تا دکمه کمتر شد */
}

/* کوچک‌تر کردن خودِ تگ‌ها برای اشغال فضای کمتر */
.tag {
  font-size: 10px; 
  padding: 2px 8px;
  background-color: var(--color-bg-tertiary);
  color: var(--color-primary);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-transform: uppercase;
}

    
    .project-card__actions {
      display: flex;
      gap: var(--space-3);
    }
    
    /* ==================== SKILLS SECTION ==================== */
    .skills__categories {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-8);
    }
    
    .skill-category {
      background-color: var(--color-bg-secondary);
      padding: var(--space-6);
      border-radius: var(--border-radius-lg);
      border: 1px solid var(--color-border);
    }
    
    .skill-category__title {
      font-size: var(--font-size-xl);
      margin-bottom: var(--space-4);
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    
    .skill-category__icon {
      font-size: var(--font-size-2xl);
    }
    
    .skill-category__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      list-style: none;
    }
    
    .skill-badge {
      font-size: var(--font-size-sm);
      padding: var(--space-2) var(--space-4);
      background-color: var(--color-bg-main);
      color: var(--color-text-primary);
      border-radius: var(--border-radius-md);
      border: 1px solid var(--color-border);
      font-weight: 500;
      transition: all var(--transition-fast);
    }
    
    .skill-badge:hover {
      background-color: var(--color-primary);
      color: white;
      border-color: var(--color-primary);
      transform: scale(1.05);
    }
    
    /* ==================== TESTIMONIALS SECTION ==================== */
    .testimonials__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-8);
    }
    
    .testimonial-card {
      background-color: var(--color-bg-secondary);
      padding: var(--space-6);
      border-radius: var(--border-radius-lg);
      border: 1px solid var(--color-border);
      position: relative;
    }
    
    .testimonial-card__quote {
      font-size: var(--font-size-3xl);
      color: var(--color-primary);
      opacity: 0.3;
      position: absolute;
      top: var(--space-4);
      left: var(--space-4);
    }
    
    .testimonial-card__text {
      font-style: italic;
      color: var(--color-text-secondary);
      margin-bottom: var(--space-5);
      position: relative;
      z-index: 1;
    }
    
    .testimonial-card__author {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    
    .testimonial-card__avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: var(--font-size-lg);
    }
    
    .testimonial-card__info {
      display: flex;
      flex-direction: column;
    }
    
    .testimonial-card__name {
      font-weight: 600;
      color: var(--color-text-primary);
    }
    
    .testimonial-card__role {
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
    }
    
    /* ==================== CONTACT SECTION ==================== */
    .contact__content {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .contact__intro {
      text-align: center;
      margin-bottom: var(--space-8);
    }
    
    .contact__info {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      margin-bottom: var(--space-8);
    }
    
    .contact__item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4);
      background-color: var(--color-bg-secondary);
      border-radius: var(--border-radius-md);
    }
    
    .contact__icon {
      font-size: var(--font-size-2xl);
      color: var(--color-primary);
    }
    
    .contact__link {
      color: var(--color-text-primary);
      font-weight: 500;
    }
    
    .contact-form {
      background-color: var(--color-bg-secondary);
      padding: var(--space-8);
      border-radius: var(--border-radius-lg);
      border: 1px solid var(--color-border);
    }
    
    .form-group {
      margin-bottom: var(--space-6);
    }
    
    .form-label {
      display: block;
      font-weight: 600;
      margin-bottom: var(--space-2);
      color: var(--color-text-primary);
    }
    
    .form-input, .form-textarea {
      width: 100%;
      padding: var(--space-3) var(--space-4);
      border: 2px solid var(--color-border);
      border-radius: var(--border-radius-md);
      background-color: var(--color-bg-main);
      color: var(--color-text-primary);
      font-family: var(--font-primary);
      font-size: var(--font-size-md);
      transition: all var(--transition-fast);
    }
    
    .form-input:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    
    .form-input.form-input--error, .form-textarea.form-textarea--error {
      border-color: var(--color-error);
    }
    
    .form-input.form-input--success, .form-textarea.form-textarea--success {
      border-color: var(--color-success);
    }
    
    .form-textarea {
      resize: vertical;
      min-height: 120px;
    }
    
    .form-error {
      color: var(--color-error);
      font-size: var(--font-size-sm);
      margin-top: var(--space-2);
      display: none;
    }
    
    .form-error--visible {
      display: block;
    }
    
    .form-success {
      padding: var(--space-4);
      background-color: rgba(16, 185, 129, 0.1);
      border: 1px solid var(--color-success);
      border-radius: var(--border-radius-md);
      color: var(--color-success);
      margin-bottom: var(--space-4);
      display: none;
    }
    
    .form-success--visible {
      display: block;
    }
    
    /* ==================== FOOTER ==================== */
    .footer {
      background-color: var(--color-bg-secondary);
      border-top: 1px solid var(--color-border);
      padding: var(--space-12) 0 var(--space-6);
      margin-top: var(--space-20);
    }
    
    .footer__content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-8);
      margin-bottom: var(--space-8);
    }
    
    .footer__section h4 {
      margin-bottom: var(--space-4);
      font-size: var(--font-size-lg);
    }
    
    .footer__links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    
    .footer__link {
      color: var(--color-text-muted);
      transition: color var(--transition-fast);
    }
    
    .footer__link:hover, .footer__link:focus {
      color: var(--color-primary);
    }
    
    .footer__social {
      display: flex;
      gap: var(--space-4);
    }
    
    .social-link {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-bg-tertiary);
      border-radius: var(--border-radius-md);
      font-size: var(--font-size-xl);
      transition: all var(--transition-fast);
    }
    
    .social-link:hover, .social-link:focus {
      background-color: var(--color-primary);
      color: white;
      transform: translateY(-2px);
    }
    
    .footer__bottom {
      text-align: center;
      padding-top: var(--space-6);
      border-top: 1px solid var(--color-border);
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
    
    /* ==================== MODAL ==================== */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }
    
    .modal--active {
      display: flex;
    }
    
    .modal__backdrop {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
    }
    
    .modal__content {
      position: relative;
      background-color: var(--color-bg-main);
      border-radius: var(--border-radius-xl);
      max-width: 800px;
      width: 100%;
      max-height: 90%;
      overflow-y: auto;
      padding: var(--space-8);
      box-shadow: var(--shadow-xl);
    }
    
    .modal__close {
      position: absolute;
      top: var(--space-4);
      right: var(--space-4);
      background: var(--color-bg-secondary);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: var(--border-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: var(--font-size-xl);
      transition: all var(--transition-fast);
    }
    
    .modal__close:hover, .modal__close:focus {
      background-color: var(--color-error);
      color: white;
      outline: 2px solid var(--color-error);
      outline-offset: 2px;
    }
    
    .modal__header {
      margin-bottom: var(--space-6);
    }
    
    .modal__title {
      font-size: var(--font-size-3xl);
      margin-bottom: var(--space-3);
    }
    
.modal__image {
  width: 100%;
  aspect-ratio: 16 / 9;        /* نسبت استاندارد و کاملاً responsive */
  background-size: contain;    /* عکس کامل دیده شود */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-6);
}


        .modal__image2 {
      width: 100%;
      height: 300px;
      background-image: url(img/miras.png);
      background-size: cover;
      border-radius: var(--border-radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6rem;
      margin-bottom: var(--space-6);
    }
    
    .modal__body {
      margin-bottom: var(--space-6);
    }
    
    .modal__description {
      margin-bottom: var(--space-6);
    }
    

    
/* ==================== RESPONSIVE DESIGN (FINAL) ==================== */

/* Tablet and below */
@media (max-width: 768px) {

  :root {
    --font-size-5xl: 2.25rem;
    --font-size-4xl: 1.875rem;
    --font-size-3xl: 1.5rem;
  }

  /* ===== MOBILE NAV ===== */
  .mobile-nav-toggle {
    display: block;
  }

  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--color-bg-main);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
    flex-direction: column;
    gap: var(--space-2);
    direction: rtl;
    text-align: right;
    z-index: 1000;
  }

  .nav__list--active {
    display: flex;
  }

  /* ===== ABOUT ===== */
  .about__content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about__image {
    margin: 0 auto;
  }

  .about__stats {
    grid-template-columns: 1fr;
  }

  /* ===== HERO ===== */
  .hero {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

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

  .hero__content {
    padding: 0;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  /* ===== TIMELINE ===== */
  .timeline-item__header {
    flex-direction: column;
  }

  /* ===== PROJECTS (MAIN) ===== */
  #projects .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* ===== PROJECT IMAGES ===== */
  .project-card__image,
  .project-card__imageone,
  .project-card__imagetwo,
  .project-card__imagethree,
  .project-card__imagefour,
  .project-card__imagefive,
  .project-card__imagesix {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
  }
}

/* ==================== SMALL PHONES ==================== */
@media (max-width: 480px) {

  /* ===== HERO ===== */
  .hero {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

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

  .hero__title {
    font-size: var(--font-size-3xl);
  }

  .hero__subtitle {
    font-size: var(--font-size-base);
  }

  /* ===== جلوگیری از رفتن متن زیر منو ===== */
  main {
    padding-top: 80px;
  }

  /* ===== MAIN PROJECTS (2 COLUMNS) ===== */
  #projects .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  /* ===== GRAPHIC / GALLERY PROJECTS (4 COLUMNS) ===== */
  .graphics-grid,
  .project-images-grid,
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .project-card__image,
  .project-card__imageone,
  .project-card__imagetwo,
  .project-card__imagethree,
  .project-card__imagefour,
  .project-card__imagefive,
  .project-card__imagesix {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
  }
}

/* ==================== SKILLS MOBILE OVERRIDE ==================== */
@media (max-width: 480px) {

  section#skills .skills__categories {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  section#skills .skill-category {
    padding: 15px 10px !important;
  }

  section#skills .skill-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  section#skills .skill-category:nth-child(3) {
    grid-column: 1 / -1 !important;
    margin-top: 5px;
  }
}

/* =================================================
   ✅ FINAL MODAL RESPONSIVE FIX (COMPLETE & TESTED)
   ================================================= */
.modal__image {
  width: 100%;
  aspect-ratio: 16 / 9;       /* کاملاً responsive */
  background-size: contain;   /* بدون کراپ شدن */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-6);
}

/* Mobile modal */
@media (max-width: 480px) {
  .modal__image {
    aspect-ratio: 4 / 3;      /* بهتر برای موبایل */
    max-height: 60vh;         /* جلوگیری از بیرون‌زدن */
  }

  .modal__content {
    padding: var(--space-4);
  }

}