/* HERO */
.hero-yakhchal{
  background: linear-gradient(rgba(10,42,102,0.7),rgba(0,198,255,0.5)),
  url('../images/hero.jpg');
  background-size:cover;
  background-position:center;
  color:white;
  text-align:center;
  padding:100px 20px;
}

.hero-buttons{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  color:white;
  font-weight:bold;
}

.call{background:#0066ff;}
.whatsapp{background:#25d366;}

/* FEATURES */
.features-steel{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:60px 20px;
  background:linear-gradient(135deg,#0a2a66,#00c6ff);
}

/* باکس استیل */
.feature-box{
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,0.2);
  border-radius:16px;

  color:white;
  text-align:center;
  padding:25px;

  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  transition:0.3s;
}

/* آیکون */
.feature-box{
  font-size:30px;
}

.feature-box h3{
  margin-top:10px;
  font-size:18px;
}

.feature-box p{
  font-size:13px;
  opacity:0.9;
}

/* hover خفن */
.feature-box:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,0.2);
}










/* سایدبار انتخاب شهر */
/* HERO */

.hero-yakhchal{

position:relative;

}

/* سایدبار شهر */

.city-sidebar{

position:absolute;

top:25px;

right:25px;

width:100px;

z-index:100;

background:#fff;

border-radius:8px;

overflow:hidden;

box-shadow:
0 15px 40px
rgba(0,0,0,.18);

}

/* دکمه */

.city-btn{

width:100%;

padding:18px;

border:none;

cursor:pointer;

font-size:18px;

font-weight:bold;

background:linear-gradient(
135deg,
#0066ff,
#00c6ff
);

color:#fff;

}

/* پنل آکاردئون */

.city-panel{

max-height:0;

overflow:hidden;

transition:.4s ease;

background:#fff;

}

/* لیست شهر */

.city-panel ul{

list-style:none;

padding:12px;

margin:0;

max-height:350px;

overflow-y:auto;

}

/* آیتم */

.city-panel li{

margin:8px 0;

}

/* لینک شهر */

.city-panel a{

display:block;

padding:12px;

border-radius:12px;

background:#f4f7fc;

text-decoration:none;

color:#333;

transition:.25s;

font-size:15px;

}

.city-panel a:hover{

background:#0066ff;

color:#fff;

transform:translateX(-4px);

}

/* موبایل */

@media(max-width:768px){

.city-sidebar{

top:12px;

right:12px;


}

.city-btn{

font-size:10px;

padding:14px;

}

}

/* ریسپانسیو */
@media(max-width:768px){
  .features-steel{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .features-steel{
    grid-template-columns:1fr;
  }
}