@font-face {
  font-family: 'Vazir';       /* هر اسمی دوست داری */
  src: url('fonts/vazir/Vazir-Thin-FD-WOL.eot') format('eot'),
	   url('fonts/vazir/vazir/vazir/Vazir-Thin-FD-WOL.ttf') format('ttf'),
	   url('fonts/vazir/vazir/Vazir-Thin-FD-WOL.woff2') format('woff2'),
       url('fonts/vazir/Vazir-Thin-FD-WOL.woff') format('woff'); /* اگه نسخه woff هم داری */
  font-weight: normal;         /* اگه نسخه بولد جدا داری اینو تغییر بده */
  font-style: normal;
  font-display: swap;          /* برای لود بهتر */
}

@font-face {
  font-family: 'iransans';       /* هر اسمی دوست داری */
  src: url('fonts/iransans/IRANSansWeb(FaNum)_Light.eot') format('eot'),
	   url('fonts/iransans/IRANSansWeb(FaNum)_Light.ttf') format('ttf'),
	   url('fonts/iransans/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),
       url('fonts/iransans/IRANSansWeb(FaNum)_Light.woff') format('woff'); /* اگه نسخه woff هم داری */
  font-weight: normal;         /* اگه نسخه بولد جدا داری اینو تغییر بده */
  font-style: normal;
  font-display: swap;          /* برای لود بهتر */
}
/* ===== style.css — مناسب برای index.html قبلی ===== */

/* ریست و پایه */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'iransans', Tahoma, sans-serif;
  background: #ffffff;
  color: #222;
}



/* ---------- منوی عمودی ثابت ---------- */
.vertical-nav {
  position: fixed;
  top: 50%;
  right: 20px;                 /* برای راست‌چین: منو سمت راست */
  transform: translateY(-50%);
  width: 60px;                 /* عرض ثابت منو */
  padding: 10px 8px;
  background: rgba(245,245,247,0.98);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}


/* هر لینک (آیکون) */
.vertical-nav a {
  position: relative;          /* برای تولتیپ */
  width: 100%;                 /* تمام عرض منو */
  height: 48px;                /* ارتفاع ثابت برای هر آیکون */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #444;
  border-radius: 10px;
  transition: background .22s ease, color .18s ease, transform .12s ease;
  box-sizing: border-box;
  padding: 0;                  /* padding افقی نذار تا عرض ثابت بمونه */
  outline: none;
}

/* آیکون داخل لینک */
.vertical-nav a i,
.vertical-nav a .fa {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  pointer-events: none;
}

/* هاور */
.vertical-nav a:hover {
  background: rgba(241,90,34,0.08);
  color: #F15A22;
  transform: translateY(-2px);
}

/* لینک فعال */
.vertical-nav a.active {
  background: #F15A22;
  color: #fff;
}

/* هنگام فعال شدن آیکون سفید می‌شود (در صورت نیاز) */
.vertical-nav a.active i,
.vertical-nav a.active .fa { color: #fff; }

/* ---------- تولتیپ سفارشی (با استفاده از title attribute) ---------- */
.vertical-nav a::after {
  content: attr(title);                       /* متن از title گرفته میشه */
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);                   /* قرار گرفتن در سمت چپ منو */
  transform: translateY(-50%) scale(.95);
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* کوچک‌ترین فلش مربعی بین تولتیپ و منو */
.vertical-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  transform: translateY(-50%) rotate(45deg) scale(.95);
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0.82);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

/* نمایش تولتیپ هنگام هاور / فوکس */
.vertical-nav a:hover::after,
.vertical-nav a:focus::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.vertical-nav a:hover::before,
.vertical-nav a:focus::before {
  opacity: 1;
  transform: translateY(-50%) rotate(45deg) scale(1);
}




/* ---------- سکشن‌های صفحه (برای پیش‌نمایش) ---------- */
.sec {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #111;
}

/* ---------- واکنش‌پذیری (اختیاری) ---------- */
/* در صفحه‌های خیلی کوچک، تولتیپ مخفی و منو کمی جمع‌تر می‌شود */
@media (max-width: 520px) {
  .vertical-nav {
    right: 12px;
    width: 52px;
    padding: 8px 6px;
    gap: 8px;
  }
  .vertical-nav a { height: 38px; }
  .vertical-nav a::after,
  .vertical-nav a::before { display: none; } /* تولتیپ مخفی در موبایل */
  
  .vertical-nav a .fa {
  font-size: 17px;}
}

/* ---------- Scrollbar Custom ---------- */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 5px;                /* ضخامت نوار عمودی */
  height: 5px;               /* ضخامت نوار افقی (در صورت نیاز) */
}

::-webkit-scrollbar-track {
  background: transparent;   /* پس‌زمینه مسیر اسکرول */
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#F15A22 0%,#F15A22 100%);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#F15A22 0%,#F15A22 100%);
}

/* Firefox */
html {
  scrollbar-width: thin;     /* نازک */
  scrollbar-color: #F15A22 transparent; /* thumb و track */
}

/* سکشن اول */
.hero-section {
  position: relative;
  height: 100vh;
  background: #fff;
  overflow: hidden;
  text-align: center;
}

.logo-box {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.logo-box img {
  width: 160px;
  height: auto;
}

.wave-image {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 85%;
  overflow: hidden;

  /* فاصله از چپ و راست */
  padding: 0 65px;    /* هر طرف ۴۰px فاصله */
  box-sizing: border-box;
}

.wave-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px; /* لبه‌ی نرم اگر خواستی */
  display: block;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 40px;          /* هماهنگ با padding چپ */
  width: calc(100% - 80px); /* کل عرض منهای فاصله‌های دو طرف */
  height: 120px;
  display: block;
}

.hero-top {
  display: flex;
  justify-content: space-between; /* سه بخش با فاصله برابر */
  align-items: center;
  padding: 50px 180px;
  margin-bottom: 20px;            /* فاصله از عکس پایین */
}

.contact-left a.phone {
  color: #333;
  text-decoration: none;
  font-size: 1.3rem;
  transition: color 0.2s;
}
.contact-left a.phone i {
  margin-left: 6px;
}

.contact-left a.phone:hover { color: #F15A22; }

.social-right a {
  margin-left: 15px;
  font-size: 1.6rem;
  transition: transform 0.2s;
}
.social-right a:hover {
  transform: scale(1.2);
}

/* 🎨 رنگ اختصاصی هر شبکه */
.social-right a.instagram i { color: #E1306C; }   /* صورتی اینستاگرام */
.social-right a.telegram  i { color: #0088CC; }   /* آبی تلگرام */
.social-right a.whatsapp  i { color: #25D366; }   /* سبز واتساپ */



/* ---------- موبایل ---------- */
@media (max-width:768px) {
  /* همه‌ی بچه‌ها زیر هم قرار بگیرن */
  .hero-top {
    flex-wrap: wrap;          /* اجازه بده سطر جدید ساخته بشه */
    justify-content: center;  /* وسط‌چین همه‌ی آیتم‌ها */
    padding: 20px;            /* فاصله کمتر برای موبایل */
	gap: 0.4rem;           /* فاصله بین آیکون‌ها و تلفن کم بشه */
  }

  /* لوگو بیاد در یک سطر جدا زیر بقیه */
  .hero-top .logo-box {
    order: 2;                 /* بیاد بعد از آیکون‌ها و تلفن */
    width: 100%;
    margin-top: 1rem;
    position: static;         /* چون absolute بود */
    transform: none;          /* چون translateX بود */
    text-align: center;
  }

  /* آیکون ها و تلفن در یک ردیف مشترک */
  .social-right,
  .contact-left {
    order: 1;                 /* قبل از لوگو */
    display: flex;
    align-items: center;
    gap: 1rem;                /* فاصله بین خودشون */
  }

  /* دو بخش آیکون ها و تلفن رو کنار هم بچین */
  .hero-top .social-right {
    margin-right: 1rem;       /* فاصله کمی از تلفن */
  }
  
    /* آیکون‌ها کمی کوچکتر و فاصله کمتر */
  .hero-top .social-right a i {
    font-size: 1.2rem;    /* قبلاً 1.6rem بود */
    margin: 0 0.2rem;     /* فاصله‌ی افقی کمتر */
  }
  
  /* شماره تلفن کوچکتر */
  .hero-top .contact-left a.phone {
    font-size: 1rem;      /* قبلاً 1.3rem بود */
  }
}


/* --- ریسپانسیو سکشن اول (موبایل) --- */
@media (max-width: 768px) {

  /* جعبه تصویر سکشن اول */
  .wave-image {
    width: 100%;          /* پر کردن کل عرض موبایل */
    height: auto;         /* ارتفاع به صورت خودکار با توجه به عرض */
    padding: 0 20px;      /* فاصله کم از کناره‌ها (دلخواه) */
	position: relative;
  }

  /* خود تصویر داخل wave-image */
  .wave-image img {
    width: 100%;
    height: auto;         /* ارتفاع متناسب با عرض */
    object-fit: cover;  /* ✅ تمام تصویر بدون برش */
    border-radius: 12px;  /* اگر گوشه گرد میخوای، دلخواه */
	display: block;
  }
  
  .wave-image .wave {
    position: absolute;
    bottom: 0px;
    left: 0;                /* ❗ از چپ صفر تا کاملاً هم‌عرض بشه */
    width: 100%;            /* هم‌عرض عکس */
    height: auto;           /* ارتفاع خودش رو از viewBox می‌گیره */
  }
}

@media (max-width:768px) {
  .hero-section {
    height: auto;   /* ارتفاع بر اساس محتوا */
  }
}

@media (max-width:768px) {
  #hero-sec,
  #services-sec {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0; /* اگر ابتدای سکشن دوم فاصله داره */
  }
}



/* ---------- سکشن خدمات ---------- */
.services-section {
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.services-header {
  text-align: center;
  margin-bottom: 40px;
}
.services-header h2 {
  font-size: 2.2rem;
  margin: 0 0 8px 0;
}
.services-header p {
  margin: 0;
  color: #666;
  font-size: 1.05rem;
}

/* هر اسلاید: دو کارت کنار هم */
/* هر اسلاید باید خودش گرید دو ستونه باشه */



/* کارت سرویس */
.service-box {
  text-align: center;
}
.service-box img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  margin: 0 0 15px 0;
  border-radius: 8px;
}
.service-box h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}
.service-box p {
  margin: 0;
  color: #444;
  line-height: 1.7;
}

/* نقاط (pagination) */
.swiper-pagination-bullet {
  background: #aaa;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #F15A22;
}

/* موبایل: هر اسلاید یک ستون */
@media (max-width: 768px) {
  .swiper-slide {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .service-box img { height: 180px; }
}

.section-2 {
    position: relative;   /* برای اینکه موج نسبت به این سکشن پوزیشن بگیره */
    background: #f0f0f0;  /* رنگ پس‌زمینه دلخواه */
    overflow: hidden;
    padding-bottom: 0;    /* اگه padding-bottom زیاد داری کمش کن */
}

.divider-wave {
  position: relative;
  margin-top: -1px;      /* مرزها کاملاً بچسبه */
  line-height: 0;        /* فاصله اضافی حذف */
}

.divider-wave svg {
  display: block;
  width: 100%;
  height: 180px;         /* ارتفاع موج */
}

@media (max-width: 768px) {
  .divider-wave svg {
    height: 100px;  /* ارتفاع دلخواه توی موبایل */
  }
}




/* ---------- سکشن نمونه‌کارها ---------- */
.portfolio {
  background:#F15A22;
  overflow:hidden;
}
.portfolio-content {
  padding:10px 20px;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.portfolio-content h2 {
  font-size:2.5rem;
  margin-bottom:10px;
}
.portfolio-content p {
  font-size:1.2rem;
  margin-bottom:40px;
}

/* گرید دسکتاپ */
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.portfolio-grid img {
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}

/* اسلایدر موبایل، پیش‌فرض مخفی */
.mobile-gallery { display:none; }

/* نمایش / مخفی‌سازی */
@media (max-width:768px){
  .desktop-gallery { display:none; }
  .mobile-gallery  { display:block; }
}
/* --- فیکس اندازه اسلایدر موبایل --- */
.portfolio-slider {
  width: 100%;          /* عرض کل اسلایدر مساوی عرض صفحه */
  max-width: 100%;      /* جلوگیری از بیرون زدن */
  overflow: hidden;     /* اگر چیزی بیرون زد مخفی بشه */
  box-sizing: border-box;
  padding: 0 20px;      /* کمی فاصله داخلی دلخواه */
}

.portfolio-slider .swiper-wrapper {
  align-items: center;  /* عکس‌ها وسط عمودی قرار بگیرن */
}

.portfolio-slider .swiper-slide {
  display: flex;        /* تا بتونیم عکس رو وسط کنیم */
  justify-content: center;
}

.portfolio-slider .swiper-slide img {
  width: 100%;          /* تصویر دقیقا به اندازه اسلاید */
  height: auto;         /* نسبت تصویر حفظ بشه */
  max-width: 320px;     /* اگر میخوای از این بزرگتر نشه */
  border-radius: 10px;  /* همان استایل قبلی */
}



/* ---------- سکشن درباره ما ---------- */
.section-4 {
  padding: 20px 20px;
  background: #ffffff;
  text-align: center;
}

.top-image {
  margin-top: 00px;  /* مقدار منفی عکس رو میکشه بالا */
  /* یا اگر margin-top داشته حذفش کن */
}

.top-image img {
  max-width: 75%;
  height: auto;
  margin-bottom: 15px;
}

/* دو ستون کنار هم */
.about-row{
  display: flex;          /* فعال کردن فلکس برای دو ستونه شدن */
  flex-wrap: wrap;        /* اگه صفحه کوچیک شد، ستون‌ها زیر هم برن */
  align-items: center;    /* وسط‌چین شدن عمودی */
  justify-content: center;/* برای وسط‌چین افقی */
  gap: 2rem;              /* فاصله بین دو ستون */
  margin: 2rem auto;
  max-width: 1200px;      /* برای محدود کردن عرض کل */
  padding: 0 1rem;
}

.about-left, .about-right{
  flex: 1 1 45%;          /* هرکدوم حدود نصف عرض بگیرن و توی موبایل جمع بشن */
}

.about-left img{
  width: 100%;
  height: auto;
  border-radius: 10px;     /* اختیاری: گوشه‌های گرد */
}

.about-right h2{
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-right p{
  line-height: 1.8;
  font-size: 1rem;
  text-align: justify;
  margin-right: 1rem;
}
@media (max-width:768px){
  .about-row{
    flex-direction: column; /* توی موبایل عکس و متن زیر هم */
    text-align: center;     /* متن وسط‌چین */
  }
}

/* ---------- سکشن تماس با ما ---------- */
.contact-section {
  padding: 10px 20px;
  background: #d9b3ff;
  text-align: center;
}

.contact-header h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.contact-header p {
  color: #555;
  margin-bottom: 40px;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;      /* توی موبایل زیر هم میره */
  justify-content: center;
  gap: 40px;
  text-align: right;
}

/* ✅ ستون‌ها ساده، بدون بکگراند */
.contact-form,
.contact-info {
  flex: 1 1 400px;
  max-width: 500px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
}

.contact-form button {
  background: #F54927;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-family: iransans;
}
.contact-form button:hover {
  background: #d63c1e;
}

.map iframe {
  width: 100%;
  border: none;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* ✅ آیکون و متن آدرس/تلفن */
.company-details p {
  font-size: 1.1rem;
  margin: 10px 0;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}
.company-details i {
  color: #F54927;
  font-size: 1.2rem;
}

/* ---------- فوتر ---------- */
.site-footer {
  background: #ffffff;        /* رنگ پس‌زمینه دلخواه */
  color: #fff;             /* رنگ متن */
  text-align: right;      /* متن وسط */
  margin-top: -45px;        /* فاصله از سکشن بالا */
  margin-right: 30px;
}

.site-footer .footer-copy {
  font-size: 0.85rem;
  color: #222222;            /* متن کپی‌رایت کمی روشن‌تر */
}