/* HERO */

.hero-wash{
position:relative;
background:
linear-gradient(
135deg,
rgba(6,26,58,.88),
rgba(0,102,255,.55)
),

url('../images/wash.jpg');

background-size:cover;
background-position:center;

padding:140px 20px;

text-align:center;
color:#fff;



}

.hero-content h1{

font-size:48px;
margin-bottom:15px;

}

.text-box{
  background: rgba(10, 30, 80, 0.85); /* آبی تیره */
  color: #fff;
  padding: 25px;
  line-height: 2;
  max-width: 900px;
  margin: auto;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

/* لینک داخل متن */
.brand-link{
  color: #00c6ff;
  font-weight: bold;
  text-decoration: none;
}

.brand-link:hover{
  text-decoration: underline;
}

.hero-btn{

display:inline-block;

margin-top:25px;

padding:16px 30px;

background:#fff;

color:#0a2a66;

border-radius:10px;

text-decoration:none;

font-weight:bold;

box-shadow:0 12px 35px rgba(0,0,0,.25);

transition:.35s;

}

.hero-btn:hover{

transform:translateY(-5px);

background:#00c6ff;

color:#fff;

}
.hero-img{
  width:100%;
  max-width:400px;
  border-radius:20px;
  display:block;
  margin:auto;
}

/* FEATURES */

.features-wash{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

padding:70px 20px;

background:#f4f8fc;

}

.box{

background:rgba(255,255,255,.9);

backdrop-filter:blur(12px);

padding:30px;

border-radius:24px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

border:1px solid rgba(0,198,255,.15);

}

.box:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,102,255,.18);

}

.box h3{

margin:15px 0;

color:#0a2a66;

}

.box p{

color:#555;

line-height:1.8;

}


/* PROBLEMS */

.problems{

padding:80px 20px;

text-align:center;

}

.problems h2{

font-size:34px;

margin-bottom:35px;

color:#0a2a66;

}

.cards{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

max-width:1000px;

margin:auto;

}

.card{

background:#fff;

padding:28px;

border-radius:24px;

font-size:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{

transform:scale(1.03);

background:linear-gradient(
135deg,
#0a2a66,
#00c6ff
);

color:#fff;

}


/* FORM */

.contact{

padding:80px 20px;

background:#eef4fb;

}

.contact form{

max-width:650px;

margin:auto;

background:#fff;

padding:35px;

border-radius:28px;

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

}

.contact input,
.contact textarea{

width:100%;

padding:16px;

margin-bottom:18px;

border-radius:16px;

border:1px solid #ddd;

font-size:15px;

}

.contact button{

width:100%;

padding:16px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
#0a2a66,
#00c6ff
);

color:#fff;

font-size:18px;

cursor:pointer;

}


/* MOBILE */

@media(max-width:768px){

.features-wash{

grid-template-columns:1fr 1fr;

}

.cards{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:34px;

}

}



.hero-wash{


background:
linear-gradient(
135deg,
rgba(6,26,58,.45),
rgba(0,102,255,.25)
),

url('../../images/wash.jpg');

background-size:cover;
background-position:center;

padding:140px 20px;

text-align:center;

color:white;

}


/* HERO */
.hero-wash{
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;

}

}






/* =========================
   RESPONSIVE IMAGE FIX (FINAL)
========================= */

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* اگر داخل باکس هست */
.image-box{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.image-box img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* موبایل */
@media (max-width: 768px){
  img{
    width: 100%;
    height: auto;
  }
}



@media(max-width:520px){

.features-wash{

grid-template-columns:1fr;

}

}