:root{
      --anari:#f95a5a;
      --anari-deep:#d94a4a;
      --glass-bg: rgba(255,255,255,0.06);
      --glass-border: rgba(255,255,255,0.12);
      --text:#fff;
      --card-radius:14px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;font-family:'Vazir',sans-serif;background:#fff}

    /* Navbar */
    .bgnav{
      background-color: rgb(179, 40, 40);
      color: white;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      padding: 14px 0;
      text-align: center;
      font-weight: 600;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    .navbar a{
      color:white;
      font-weight:600;
    }
    .navbar a:hover{
      background-color: rgba(255,255,255,0.2);
      border-radius:5px;
    }
    .navbar-brand{
      font-family:'Poppins', sans-serif;
      font-weight:700;
    }
    .nav-link.active{
      background-color: rgba(255,255,255,0.6);
      color:black !important;
      border-radius:5px;
    }

    body {
      padding-top: 0; /* فاصله حذف شد */
    }

    /* پس‌زمینه عکس انار با گرادینت */
    .hero-bg{
      margin-top:0; /* فاصله صفر شد */
      position:relative;
      min-height:92vh;
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
      overflow:hidden;
      background-image: url('./photo1/istockphoto-2192524721-612x612.jpg');
      background-size:cover;background-position:center center;
    }
    
    .hero-bg::before{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(17,6,6,0.35), rgba(249,90,90,0.55));
      mix-blend-mode:multiply;pointer-events:none;
    }
    .hero-bg[data-parallax="true"]{background-attachment:fixed}

    .container{width:95%;max-width:1200px;margin:0 auto}

    .glass{
      position:relative;background:var(--glass-bg);backdrop-filter: blur(8px) saturate(120%);
      border:1px solid var(--glass-border);border-radius:var(--card-radius);
      padding:20px;
      box-shadow:0 8px 30px rgba(0,0,0,0.25);
    }

    .hero-content{position:relative;z-index:2;text-align:center;padding:40px 20px}
    .hero-title{font-size:2.6rem;margin:0 0 12px;font-weight:600;letter-spacing:0.5px}
    .hero-sub{font-size:1.05rem;margin:0 auto;max-width:900px}

    .typewriter{
      display:inline-block;overflow:hidden;white-space:nowrap;border-right:.12em solid rgba(255,255,255,0.9);
      animation:typing 4s steps(60,end) 0.4s 1 normal both, blink .8s step-end infinite;
      font-weight:500;font-size:1.05rem;padding-right:6px
    }
    @keyframes typing{from{width:0}to{width:100%}}
    @keyframes blink{50%{border-color:transparent}}

    main{padding:30px 0 80px}
    .section{margin:28px 0}
    .section h2{margin:0 0 12px;font-size:1.6rem;color:var(--anari);transition:all .25s ease}
    .section .subtitle{color:rgba(0,0,0,0.65);font-size:0.98rem}

    .section:hover h2{font-weight:800;transform:translateY(-4px);text-shadow:0 6px 18px rgba(249,90,90,0.18)}

    .form-map{display:flex;gap:24px;align-items:stretch;flex-wrap:wrap}
    .form-map > .contact-form{flex:1;min-width:320px}
    .form-map > .map-box{flex:1;min-width:320px}

    .contact-form .form-control{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);margin-bottom:12px;background:rgba(255,255,255,0.95)}
    .contact-form textarea.form-control{min-height:150px;resize:vertical}
    .btn-anari{background:var(--anari);color:#fff;padding:12px 18px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
    .btn-anari:hover{background:var(--anari-deep);transform:scale(1.02);box-shadow:0 8px 30px rgba(217,74,74,0.18)}

    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-top: 16px;
    }

    .info-card {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 18px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(189, 37, 37, 0.35), rgba(224, 15, 15, 0.2));
      border: 1px solid rgba(255,255,255,0.06);
      transition: all 0.3s ease;
    }

    .info-card i {
      font-size: 1.6rem;
      color: var(--anari);
      transition: all 0.3s ease;
    }

    .info-card .meta {
      font-size: 0.95rem;
      color: #fff;
      line-height: 1.4;
      transition: all 0.3s ease;
    }

    .info-card .meta small {
      display: block;
      color: rgba(255,255,255,0.85);
      font-size: 0.85rem;
      transition: all 0.3s ease;
    }

    .info-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(249,90,90,0.07);
    }
    .info-card:hover i {font-weight:700;font-size:1.75rem;}
    .info-card:hover .meta {font-weight:700;}
    .info-card:hover .meta small {font-weight:600;}

    .fade-up{opacity:0;transform:translateY(28px);transition:all 0.7s cubic-bezier(.2,.9,.3,1)}
    .fade-up.inview{opacity:1;transform:none}

    footer{padding:26px 0;text-align:center;color:#fff;background-color: rgb(159, 34, 34);}

    @media(max-width:900px){
      .info-grid{grid-template-columns:1fr}
      .form-map{flex-direction:column}
      .hero-title{font-size:2rem}
      .hero-sub{font-size:0.98rem}
    }