/* =====================================
   HERO НА РАЙОНИТЕ
===================================== */

.location-hero{

    padding:120px 20px;
    background:
        linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.55)),
        url("../images/lokaciq.png");

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

    color:#fff;
    text-align:center;

}

.location-hero .container{

    max-width:1000px;
    margin:0 auto;

}

.location-hero .hero-badge{

    display:inline-block;
    background:#b30000;
    color:#fff;
    padding:12px 25px;
    border-radius:40px;
    font-weight:bold;
    margin-bottom:25px;

}

.location-hero h1{

    font-size:52px;
    margin:20px 0;

}

.location-hero .hero-subtitle{

    max-width:850px;
    margin:0 auto;
    font-size:20px;
    line-height:1.8;

}

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
    flex-wrap:wrap;

}

.hero-call,
.hero-viber{

    display:inline-block;
    padding:18px 35px;
    border-radius:10px;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;

}

.hero-call{

    background:#b30000;
    color:#fff;

}

.hero-viber{

    background:#7360F2;
    color:#fff;

}

@media(max-width:768px){

.location-hero{

padding:80px 20px;

}

.location-hero h1{

font-size:36px;

}

.location-hero .hero-subtitle{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.hero-call,
.hero-viber{

width:100%;
box-sizing:border-box;

}

}



/* ===========================
УСЛУГИ
=========================== */

.location-services{

padding:90px 20px;

background:#fff;

}

.location-services h2{

text-align:center;

font-size:42px;

color:#b30000;

margin-bottom:50px;

}

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

.service-box{

background:#f8fbff;

padding:35px;

border-radius:18px;

text-align:center;

border:2px solid #d9eaff;

transition:.3s;

}

.service-box:hover{

transform:translateY(-8px);

box-shadow:0 15px 30px rgba(0,0,0,.10);

}

.service-icon{

font-size:48px;

margin-bottom:20px;

}

.service-box h3{

font-size:24px;

margin-bottom:15px;

color:#0d47a1;

}

.service-box p{

line-height:1.7;

color:#555;

}

/* ===========================
ЗАЩО KEY-AUTO
=========================== */

.why-keyauto{

padding:90px 20px;

background:#f7f9fc;

}

.why-keyauto h2{

text-align:center;

font-size:42px;

color:#b30000;

margin-bottom:50px;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.why-box{

background:white;

padding:35px;

border-radius:18px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.35s;

}

.why-box:hover{

transform:translateY(-8px);

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

}

.why-icon{

font-size:50px;

margin-bottom:20px;

}

.why-box h3{

color:#0d47a1;

margin-bottom:15px;

font-size:24px;

}

.why-box p{

line-height:1.7;

color:#555;

}

/* ===========================
ЗА РАЙОНА
=========================== */

.location-about{

padding:100px 20px;

background:#ffffff;

}

.about-grid{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:50px;

align-items:center;

}

.about-text h2{

font-size:42px;

color:#b30000;

margin-bottom:25px;

}

.about-text p{

font-size:18px;

line-height:1.9;

margin-bottom:20px;

color:#444;

}

.about-btn{

display:inline-block;

margin-top:20px;

padding:16px 32px;

background:#b30000;

color:white;

text-decoration:none;

border-radius:10px;

font-weight:bold;

transition:.3s;

}

.about-btn:hover{

background:#8f0000;

}

.about-image img{

width:100%;

border-radius:18px;

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

display:block;

}

@media(max-width:768px){

.about-grid{

grid-template-columns:1fr;

}

.about-text{

text-align:center;

}

}

/*=========================
СЪСЕДНИ РАЙОНИ
=========================*/

.nearby-areas{

padding:80px 20px;

background:#f8f9fb;

}

.nearby-areas h2{

text-align:center;

font-size:40px;

color:#b30000;

margin-bottom:15px;

}

.nearby-text{

text-align:center;

max-width:700px;

margin:auto auto 45px;

color:#666;

line-height:1.8;

}

.nearby-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:18px;

}

.nearby-grid a{

display:block;

padding:18px;

background:#edf5ff;

border:2px solid #d8e8ff;

border-radius:12px;

text-decoration:none;

color:#111;

font-weight:600;

transition:.3s;

}

.nearby-grid a:hover{

background:#b30000;

color:#fff;

transform:translateY(-5px);

}