:root{
      --brand: #232ed1;
      --bg: #ffffff;
      --text: #1c1c1c;
      --muted: #6f6f6f;
      --radius: 14px;
      --shadow: 0 8px 25px rgba(0,0,0,0.08);
      --max-width: 1200px;
      font-family: "IRANSans", sans-serif;
      --header-offset: 110px;
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    body{ background: var(--bg); color: var(--text); line-height:1.6; font-size:16px; }
    a{ text-decoration: none; color: inherit; }

    /* ========= هدر ========= */
    header {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        height: 75px;
        padding: 0 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255,255,255,0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        z-index: 1000;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .logo { height: clamp(40px,5vw,65px); }
    .hlogo { position:absolute; right:25px; top:50%; transform:translateY(-50%); }

    nav ul {
        display:flex; list-style:none; gap:clamp(15px,2vw,25px); justify-content:center; align-items:center;
    }

    nav ul li a {
        text-decoration:none;
        font-size:clamp(16px,1.2vw,18px);
        font-weight:600;
        padding:clamp(6px,0.8vw,8px) clamp(8px,1vw,12px);
        border-radius:8px;
        display:inline-block;
        color: var(--brand);
        position: relative;
    }

    #menuList li a::after {
        content:''; position:absolute; bottom:0; right:0;
        width:0%; height:2px; background-color: var(--brand);
        transition: width 0.3s ease;
    }
    #menuList li a:hover::after { width:100%; }

/* دکمه همبرگری */
.menu-btn {
    display: none;
    font-size: clamp(28px, 5vw, 34px);
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1100;
}


/* ------------ موبایل ------------ */


@media (max-width: 830px) {

    header {
        justify-content: center;
    }

    .menu-btn {
        display: block;
    }

    nav ul {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(12px);
        padding-top: 8px;
        padding-right: 7px;
        gap: 2.5rem;

        transform: translateY(+100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition: transform 0.4s ease, opacity 0.3s ease;
        z-index: 1000;
            justify-content: center;
    align-items: center;
    }

      nav ul li {
    width: 80%;
    text-align: center;   /* متن دقیقاً وسط */
  }

    nav ul li a {
    display: block;
    text-align: center;
    font-size: 22px;      /* خواناتر در موبایل */
  }




    nav ul.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        text-align: center;
    }
}




    /* ========= کانتینر ========= */
    .container{ max-width: var(--max-width); margin: var(--header-offset) auto 50px auto; padding:20px; }

    /* ========= HERO ========= */
    .hero{text-align:center;margin-bottom:50px;}
    .hero h1{ font-size:clamp(28px,4vw,40px); font-weight:700; color: var(--brand); margin-bottom:10px; opacity:0; transform:translateY(30px); animation: fadeInUp 0.8s forwards 0.2s;}
    .hero p{ font-size:18px; color: var(--muted); opacity:0; transform:translateY(20px); animation: fadeInUp 0.8s forwards 0.4s;}

    /* ========= GRID SERVICES ========= */
    .services{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:25px; }

    .service-box{
      background: var(--bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:25px 20px;
      text-align:center;
  
      cursor:pointer;
      opacity:0;
      transform: translateY(20px);
      display:flex; 
      flex-direction:column;
       justify-content:center; 
       align-items:center;
    }

   .service-box:hover {
  transform: translateY(-100px); /* کمی بالا می‌رود */
  box-shadow: 0 12px 25px rgba(0,0,0,0.1); /* سایه کمی برجسته‌تر */
}

    .service-box h3{ font-size:20px; margin-bottom:10px; color:var(--brand); transition:color 0.3s; }
    .service-box p{ font-size:17px; color: var(--muted); transition:color 0.3s; }

    /* ========= انیمیشن ========= */
    @keyframes fadeInUp{ to{opacity:1; transform:translateY(0);} }

    /* ========= فوتر ========= */
    footer.footer {
      background: #ffffff;
      border-radius: 16px 16px 0 0;
      padding: 40px 20px;
      border-top: 6px solid var(--brand);
      max-width: 1500px;
      margin: 40px auto 0 auto;
    }

    .footer-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      text-align: center;
    }

    h3.footer-title { color: var(--brand); margin-bottom: 20px; font-size: 1.2rem; }

    .footer-links a.footer-link{
      display:block; margin-bottom:10px; text-decoration:none; color:#333; font-size:0.95rem; transition: all 0.3s ease; padding:3px 2px; border-radius:4px; position:relative;
    }
    .footer-links a.footer-link:hover { color: var(--brand); transform:scale(1.03); }

    .footer-contact-item{
      display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; font-size:0.95rem; color:#333;
    }
    .footer-contact-item img{ width:22px; height:22px; }