
/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Vazirmatn',sans-serif;direction:rtl;background:#f5f5f5;color:#333;line-height:1.7;}
.container{width:90%;max-width:1200px;margin:auto;}

/* ---------- کادر بالای صفحه ---------- */
.top-fixed{position:fixed;top:0;left:0;width:100%;background:#d32f2f;display:flex;justify-content:space-between;align-items:center;padding:8px 20px;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:9999;height:60px;}
.top-fixed .logo{height:80px;width:120px;}
.top-fixed .top-contact{background:#b71c1c;color:#fff;padding:6px 14px;border-radius:6px;text-decoration:none;font-weight:bold;font-size:16px;direction:ltr;}

/* ---------- هدر (دست نخوره) ---------- */
.header{background:#c00;color:#fff;padding:80px 20px 40px;position:relative;z-index:1;}
.header-main{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;}
.header-left{width:45%;display:flex;justify-content:center;align-items:center;}
.repairman-img{width:100%;height:240px;object-fit:contain;}
.header-right{width:55%;text-align:right;}
.header-right h1{font-size:24px;margin-bottom:12px;}
.header-right p{font-size:16px;margin-bottom:15px;}
.header-call-btn{background:#e74c3c;color:#fff;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:bold;}

/* ---------- چرا خدمات ما ---------- */
.why-us{background:#fff;border-radius:12px;padding:30px 20px;margin:20px auto;max-width:1200px;box-shadow:0 5px 15px rgba(0,0,0,.05);text-align:center;}
.why-us h2{color:#c00;font-size:26px;margin-bottom:15px;}
.why-us p{font-size:16px;line-height:1.6;color:#333;}

/* ---------- کد خطاها اسلایدی ---------- */
.error-section{background:#fff;padding:50px 20px;margin:30px auto;border-radius:12px;max-width:1200px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.05);}
.error-section h2{color:#c00;margin-bottom:15px;}
.error-desc{margin-top:10px;color:#666;}
.error-slider{display:flex;justify-content:center;align-items:center;overflow:hidden;gap:15px;flex-wrap:wrap;}
.error-box{background:#fafafa;padding:18px;border-radius:10px;width:220px;box-shadow:0 3px 10px rgba(0,0,0,.08);transition:.2s;text-align:center;display:none;}
.error-box h3{color:#c00;font-size:26px;margin-bottom:8px;}
.call-btn{display:inline-block;margin-top:30px;background:#c00;color:#fff;padding:14px 30px;border-radius:8px;text-decoration:none;font-weight:bold;font-size:18px;}

/* ---------- خدمات دقیق + تعرفه + مناطق + روند کار + مزایا ---------- */
.services-details{background:#fff;padding:40px 20px;margin:20px auto;border-radius:12px;max-width:1200px;box-shadow:0 5px 15px rgba(0,0,0,.05);}
.services-details h2{color:#c00;text-align:center;margin-bottom:25px;}
.service-list{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:20px;}
.service-item{background:#fafafa;padding:20px;border-radius:10px;width:250px;box-shadow:0 3px 10px rgba(0,0,0,.08);text-align:center;}
.service-item h3{color:#c00;margin-bottom:8px;}
.service-item .price{display:block;margin-top:10px;font-weight:bold;color:#c00;}

/* ---------- سوالات متداول ---------- */
.faq-section {
    background:#fff;
    max-width:1200px;
    margin:40px auto;
    padding:50px 20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    font-family: 'Vazirmatn', sans-serif; /* فونت اصلی سایت */
    direction: rtl; /* راست‌چین */
}
.faq-section h2 {
    color:#c00;
    text-align:center;
    margin-bottom:30px;
    font-size:28px;
}
.faq-item {
    border-bottom:1px solid #eee;
    margin-bottom:10px;
}
.faq-question {
    width:100%;
    text-align:right;
    background:#fafafa;
    border:none;
    padding:18px;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
    border-radius:8px;
    transition:.2s;
    font-family:'Vazirmatn', sans-serif; /* فونت اصلی */
    direction: rtl; /* راست‌چین */
}
.faq-question:hover {
    background:#ffecec;
}
.faq-answer {
    display:none;
    padding:15px;
    color:#555;
    line-height:1.8;
    font-family:'Vazirmatn', sans-serif; /* فونت اصلی */
    direction: rtl; /* راست‌چین */
}
.faq-item.active .faq-answer {
    display:block;
}

/* ---------- نظرات مشتریان داخل باکس ---------- */
.reviews-box {
  background: #ffffff; /* رنگ زمینه مثل خدمات ما */
  padding: 40px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin: 40px 0;
}

.reviews-box .container {
  max-width: 1000px;
  margin: 0 auto;
}

.reviews-box h2 {
    color: #e74c3c !important; 
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.review-slider {
  position: relative;
}

.review-box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background: #f9f9f9;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.review-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.review-text {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.avatar {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.slide {
  display: none;
}

.slide.active {
  display: block;
}

.slider-controls {
  text-align: center;
  margin-top: 20px;
}

.slider-controls button {
  background: #3498db;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 0 5px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.slider-controls button:hover {
  background: #2980b9;
}

/* ---------- فرم آنلاین درخواست ---------- */
.online-request{background:#fff;margin:30px auto;padding:40px 20px;border-radius:12px;max-width:800px;box-shadow:0 5px 15px rgba(0,0,0,0.05);}
.online-request h2{color:#c00;text-align:center;margin-bottom:25px;}
.online-request form div{margin-bottom:15px;}
.online-request label{display:block;margin-bottom:5px;font-weight:bold;}
.online-request input, .online-request select, .online-request textarea{width:100%;padding:10px;border-radius:6px;border:1px solid #ccc;font-size:15px;}
.online-request button{background:#c00;color:#fff;padding:12px 25px;border:none;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;transition:0.3s;}
.online-request button:hover{background:#a00;}

/* ---------- دکمه تماس پایین ---------- */
.fixed-call{position:fixed;bottom:0;width:100%;background:#28a745;color:#fff;text-align:center;padding:14px;font-size:18px;font-weight:bold;text-decoration:none;z-index:999;}

/* ---------- فوتر ---------- */
.footer {
  background-color: #222;
  color: #fff;
  padding: 20px;
  font-family: 'Vazirmatn', sans-serif;
  text-align: center; /* وسط چین */
}

.footer-container p,
.footer-container h4,
.footer-links {
  margin: 5px 0;
}

.footer-container h4 {
  color: #ff4d4d; /* قرمز مثل خدمات ما */
  font-size: 16px;
  margin-top: 15px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 5px 0;
}

.footer-links li {
  display: inline-block; /* کنار هم */
  margin: 0 10px;
}

.footer-links li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.footer-links li a:hover {
  color: #ff4d4d;
}

.footer-copy {
  margin-top: 15px;
  font-size: 12px;
  color: #ccc;
}

/* ---------- ریسپانسیو ---------- */
@media(max-width:992px){
.header-main{flex-direction:row;gap:15px;}
.header-left{width:45%;}
.header-right{width:55%;}
.repairman-img{height:200px;}
.top-fixed .logo{height:60px;}
.top-fixed .top-contact{font-size:15px;}
.service-item{width:45%;}
}
@media(max-width:768px){
.header-main{flex-direction:row;gap:10px;}
.header-left{width:48%;}
.header-right{width:52%;}
.header-right h1{font-size:20px;}
.header-right p{font-size:14px;}
.fixed-call{font-size:16px;padding:12px;}
.service-item{width:100%;}
}
@media(max-width:480px){
.services-details h2,.faq-section h2,.reviews-box h2{font-size:22px;}
.online-request h2{font-size:20px;}
}
/* ===== دکمه تماس هدر ===== */
.header-call-btn {
    display: inline-block;        /* برای وسط چین شدن */
    margin: 20px auto 0;          /* فاصله از بالا و وسط چین */
    font-size: 20px;              /* اندازه شماره بزرگ‌تر */
    padding: 15px 30px;           /* کمی بزرگ‌تر کردن دکمه */
    text-align: center;           /* متن داخل دکمه وسط چین */
    font-weight: bold;
    border-radius: 8px;
}
.header-right {
    text-align: center;           /* متن و دکمه هدر وسط چین شوند */
}
/* ===== 404 Page ===== */
.notfound-container {
  max-width:500px;
  width:100%;
  background:#fff;
  padding:40px 30px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
  margin:80px auto;
  text-align:center;
}

.notfound-container h1 {
  font-family:'Vazirmatn',sans-serif;
  direction:rtl;
  line-height:1.7;
  font-size:80px;
  color:#c00;
  margin-bottom:20px;
}

.notfound-container h2 {
  font-family:'Vazirmatn',sans-serif;
  direction:rtl;
  line-height:1.7;
  font-size:24px;
  margin-bottom:20px;
}

.notfound-container p {
  font-family:'Vazirmatn',sans-serif;
  direction:rtl;
  line-height:1.7;
  font-size:16px;
  color:#666;
  margin-bottom:30px;
}

.home-btn {
  display:inline-block;
  background:#c00;
  color:#fff;
  text-decoration:none;
  font-size:18px;
  padding:12px 25px;
  border-radius:8px;
  font-weight:bold;
  transition:0.3s;
}

.home-btn:hover {
  background:#a00;
}
/* ===== ریسپانسیو ===== */
@media(max-width:480px){
  .notfound-container h1 {font-size:60px;}
  .notfound-container h2 {font-size:20px;}
  .notfound-container p {font-size:14px;}
  .home-btn {font-size:16px; padding:10px 20px;}
}
/* ===== سکشن خدمات ما ===== */
.services-overview {
  background-color: #fff; /* باکس سفید */
  padding: 50px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 40px auto;
}

.section-title {
  text-align: center;
  color: #e74c3c; /* قرمز مثل سرتیتر */
  font-size: 32px;
  margin-bottom: 30px;
  font-weight: 700;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
}

.service-card {
  flex: 1 1 250px;
  background-color: #fdfdfd;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.service-icon {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  object-fit: contain;
}

.service-card h3 {
  font-size: 20px;
  color: #e74c3c; /* قرمز */
  margin-bottom: 5px;
  font-weight: 600;
}

.service-card p {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}