@import url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css');



:root{
  --primary:#00bfff; /* فیروزه‌ای روشن */
  --primary-dark:#004e92; /* آبی تیره */
  --accent:#00bfff; /* طلایی */
  --bg:#f6f8fb;
  --card-bg: rgba(255,255,255,0.7);
  --glass: rgba(255,255,255,0.08);
  --radius:14px;
  --maxWidth:1200px;
  font-family: 'Vazir', sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#f7fbff 0%, #f6f8fb 100%);color:#222}
.container{max-width:var(--maxWidth);margin:0 auto;padding:24px}




/* هدر / ناوبار */
.site-header{
  background: linear-gradient(90deg,var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 18px 0;
  box-shadow: 0 6px 30px rgba(3,10,36,0.12);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:46px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,0.14)}
.brand h1{font-size:20px;margin:0}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px;transition:all .18s}
.nav a:hover{background:rgba(255,255,255,0.08)}

/* هرو (hero) */
.hero{
  padding: 56px 0;
  text-align:right;
  direction:rtl;
}
.hero-grid{display:grid;grid-template-columns:1fr 460px;gap:30px;align-items:center;max-width:var(--maxWidth);margin:0 auto;padding:0 24px}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
  border-radius: var(--radius);
  padding:26px;
  box-shadow: 0 10px 30px rgba(3,10,36,0.06);
}
.hero h2{margin:0 0 10px;font-size:28px;color:var(--primary-dark)}
.hero p{color:#334155;margin:0 0 18px;line-height:1.7}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:700;
  transition:all .18s;border:2px solid transparent;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{background:transparent;color:var(--primary-dark);border-color:var(--primary-dark)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,78,146,0.12)}
.hero-visual{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:16px;padding:28px;color:#fff;text-align:center}
.hero-visual img{max-width:100%;height:165px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.2)}

/* سرویس‌ها (کارت‌ها) */
.section-title{font-size:20px;color:var(--primary-dark);margin:0px 0 25px;text-align: center;}
.services-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border-radius:12px;padding:18px;box-shadow:0 8px 26px rgba(3,10,36,0.06);text-align:center;
  transition:transform .18s, box-shadow .18s;
}
.service-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(3,10,36,0.09)}
.service-card img{width:64px;height:64px;object-fit:contain;margin-bottom:12px}
.service-card h4{margin:6px 0 8px;color:var(--primary-dark)}
.service-card p{font-size:14px;color:#556;line-height:1.6}

/* بنر ویژه */
.promo-banner {
  margin: 28px auto;
  /* بالا و پایین 28px — راست و چپ auto → وسط‌چین */
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(90deg, #fff, #f3f7fb);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 85%;
}


.promo-banner img {width: 240px;  height: 140px;  object-fit: cover;
  border-radius: 10px;}

.promo-banner .promo-content h3 {  margin: 0;
  color: var(--primary-dark);}

.promo-banner .promo-content p {
  color: #556;}


/* اسلایدر نمونه‌کار/مقالات */
.services-slider{padding:12px 0}
.swiper {padding:18px 0}
.swiper-slide{display:flex;justify-content:center}
.service-slide{
  width:280px;background:linear-gradient(180deg,#fff,#fcfeff);border-radius:14px;padding:18px;box-shadow:0 12px 30px rgba(3,10,36,0.06);display:flex;flex-direction:column;height:100%;
}
.service-slide h4{margin:0 0 8px;color:var(--primary-dark);font-size:16px}
.service-slide p{flex:1;color:#5b6b7a;font-size:14px;line-height:1.5;margin-bottom:12px}
.service-slide a{align-self:flex-start;padding:8px 12px;border-radius:10px;text-decoration:none;background:var(--primary);color:#fff}

/* پیشنهاد ویژه */
.offer-card{display:flex;gap:18px;align-items:center;padding:20px;border-radius:14px;background:linear-gradient(90deg,var(--primary-dark),#001124);color:#fff}
.offer-card img{width:220px;height:140px;object-fit:cover;border-radius:10px}


.contact-box {  margin: 36px auto;  padding: 20px;
  background: #fff;  border-radius: 12px;  box-shadow: 0 8px 30px rgba(3, 10, 36, 0.04);
  max-width: 85%;}
.contact-inner {  display: flex;  align-items: center;
  gap: 18px;  flex-wrap: wrap;  justify-content: space-between;}
.contact-text {  flex: 1;  min-width: 260px;}
.contact-text h3 {  margin: 0 0 8px;  color: var(--primary-dark);}
.contact-text p {  color: #556;  margin: 0 0 12px;}
.contact-info {  min-width: 220px;  text-align: left;  color: #444;}
.contact-info .contact-title {  font-weight: 700;  color: var(--primary-dark);  margin-bottom: 8px;}


/* فوتر */
.site-footer{background:#0b1220;color:#dfe9f3;padding:30px 0;margin-top:40px}
.site-footer .container{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}

/* واکنشگرا */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; padding:0 16px}
  .services-cards{grid-template-columns:repeat(2,1fr)}
  .service-slide{width:220px}
  .promo-banner { max-width: 95%;}
  .contact-box { max-width: 95%;}
}
@media (max-width: 560px){
  .services-cards{grid-template-columns:repeat(1,1fr)}
  .nav{display:none}
  .brand h1{font-size:18px}
  .promo-banner img{width:100%;height:auto}
  .promo-banner { max-width: 95%;}
  .contact-box {max-width: 95%; }
}




body {
    font-family: 'Vazir', sans-serif;
    background: #f1f5f9;
    color: var(--text_color, #333);
    margin: 0;
    padding: 0;
    direction: rtl;
}

.containers {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.containers h1 {
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 30px;
}

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

.package-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.package-card h3 {
    margin-top: 0;
    color: var(--primary-dark);
}

.package-card p {
    line-height: 1.5;
    margin-bottom: 12px;
}

.package-card strong {
    color: var(--primary-dark);
}

.package-card .price {
    font-size: 1.2em;
    color: var(--primary-dark);
    margin-top: 10px;
}

.package-card a {
    display: inline-block;
    margin-top: 15px;
    text-decoration: none;
    background: var(--primary);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    transition: background 0.2s;
}

.package-card a:hover {
    background: var(--primary-dark);
}

@media (max-width: 600px) {
    .packages {
        grid-template-columns: 1fr;
    }
}













.packages-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 30px;
}

.package-card {
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transition: transform .3s ease;
}

.package-card:hover {
    transform: translateY(-5px);
}

.package-card h2 {
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.package-card .desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.package-card .features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    text-align: right;
}

.package-card .features li {
    padding: 5px 0;
    font-size: 14px;
}

.package-card .price {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-dark);
    margin: 15px 0;
}

.btn-link,
.btn-buy {
    display: inline-block;
    padding: 10px 18px;
    margin-top: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.btn-link {
    background: var(--primary-dark);
    color: #fff;
}

.btn-link:hover {
    background: var(--primary);
}

.btn-buy {
    background: var(--primary);
    color: #fff;
}

.btn-buy:hover {
    background: var(--primary-dark);
}