/* HERO */

.hero-cooler{

background:
linear-gradient(
135deg,
rgba(0,45,98,.45),
rgba(0,198,255,.20)
),

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

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

padding:140px 20px;

text-align:center;

color:white;

border-radius:0 0 40px 40px;

}

.hero-btn{

display:inline-block;

margin-top:25px;

padding:16px 30px;

background:white;

color:#0a2a66;

border-radius:50px;

text-decoration:none;

font-weight:bold;

}


/* FEATURES */

.features-cooler{

display:grid;

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

gap:25px;

padding:70px 20px;

background:#f4fbff;

}

.box{

background:white;

padding:30px;

border-radius:24px;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

.box:hover{

transform:translateY(-8px);

}


/* CARDS */

.problems{

padding:70px 20px;

text-align:center;

}

.cards{

display:grid;

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

gap:20px;

margin-top:30px;

}

.card{

background:white;

padding:24px;

border-radius:22px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}


/* FORM */

.contact{

padding:80px 20px;

background:#eef8ff;

}

.contact form{

max-width:650px;

margin:auto;

background:white;

padding:35px;

border-radius:26px;

}

.contact input,
.contact textarea{

width:100%;

padding:16px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:15px;

}

.contact button{

width:100%;

padding:16px;

border:none;

border-radius:18px;

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

color:white;

font-size:17px;

cursor:pointer;

}


/* MOBILE */

@media(max-width:768px){

.features-cooler{

grid-template-columns:1fr 1fr;

}

.cards{

grid-template-columns:1fr;

}

}

@media(max-width:520px){

.features-cooler{

grid-template-columns:1fr;

}

}































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

.hero-cooler{

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;
  }
}