/* =====================================
   MELANNIE SERVICES
   SERVICE AREA PAGE STYLES
===================================== */

/* =====================================
   HERO
===================================== */

.service-area-hero{

background:
linear-gradient(
rgba(255,255,255,.88),
rgba(255,255,255,.88)
),
url('../images/dfw-skyline.jpg');

background-size:cover;

background-position:center;

}

/* =====================================
   INTRO SECTION
===================================== */

.service-intro{

max-width:900px;

margin:auto;

text-align:center;

}

.service-intro p{

font-size:1.1rem;

line-height:1.9;

}

/* =====================================
   CITY GRID
===================================== */

.city-grid{

display:grid;

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

gap:25px;

}

.city-card{

background:white;

padding:25px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

font-weight:600;

transition:var(--transition);

cursor:pointer;

}

.city-card:hover{

transform:translateY(-8px);

background:var(--primary);

color:white;

}

/* =====================================
   FEATURED CITIES
===================================== */

.featured-cities{

display:grid;

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

gap:30px;

}

.featured-city{

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.3s;

}

.featured-city:hover{

transform:translateY(-8px);

}

.featured-city h3{

color:var(--primary);

margin-bottom:15px;

}

.featured-city ul{

margin-left:20px;

margin-top:15px;

}

.featured-city li{

margin-bottom:8px;

}

/* =====================================
   SERVICE COVERAGE CARDS
===================================== */

.coverage-grid{

display:grid;

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

gap:30px;

}

.coverage-card{

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

transition:.3s;

}

.coverage-card:hover{

transform:translateY(-6px);

}

.coverage-card span{

display:block;

font-size:2.5rem;

margin-bottom:15px;

}

.coverage-card h3{

margin-bottom:15px;

color:var(--primary);

}

/* =====================================
   MAP SECTION
===================================== */

.map-wrapper{

background:white;

padding:20px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.map-wrapper iframe{

width:100%;

height:500px;

border:none;

border-radius:10px;

}

/* =====================================
   SERVICE RADIUS
===================================== */

.radius-section{

background:var(--secondary);

border-radius:var(--radius);

padding:50px;

text-align:center;

}

.radius-section h2{

margin-bottom:15px;

}

.radius-section p{

max-width:800px;

margin:auto;

}

/* =====================================
   FAQ SECTION
===================================== */

.service-faq{

max-width:950px;

margin:auto;

}

.service-faq .faq-item{

background:white;

padding:25px;

margin-bottom:20px;

border-radius:var(--radius);

box-shadow:var(--shadow);

cursor:pointer;

transition:.3s;

}

.service-faq .faq-item:hover{

transform:translateY(-2px);

}

.service-faq .faq-item h3{

color:var(--primary);

margin-bottom:10px;

}

.service-faq .faq-item p{

display:none;

margin-top:10px;

}

.service-faq .faq-item.open p{

display:block;

}

/* =====================================
   LOCAL SEO SECTION
===================================== */

.local-seo-grid{

display:grid;

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

gap:25px;

}

.local-seo-card{

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.local-seo-card h3{

margin-bottom:15px;

color:var(--primary);

}

.local-seo-card a{

color:var(--primary);

font-weight:600;

}

/* =====================================
   SERVICE AREA STATS
===================================== */

.area-stats{

display:grid;

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

gap:25px;

}

.area-stat{

background:white;

padding:30px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.area-stat h2{

font-size:3rem;

color:var(--primary);

margin-bottom:10px;

}

/* =====================================
   TRAVEL NOTICE
===================================== */

.travel-notice{

background:#FFF8E1;

border-left:
5px solid var(--gold);

padding:25px;

border-radius:10px;

margin-top:40px;

}

.travel-notice h3{

margin-bottom:10px;

color:var(--gold);

}

/* =====================================
   CONTACT CTA
===================================== */

.area-cta{

background:var(--secondary);

padding:60px 30px;

text-align:center;

border-radius:var(--radius);

}

.area-cta h2{

margin-bottom:15px;

}

.area-cta p{

margin-bottom:25px;

}

/* =====================================
   BUSINESS HOURS CARD
===================================== */

.hours-card{

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

max-width:500px;

margin:auto;

}

.hours-card h3{

text-align:center;

margin-bottom:20px;

color:var(--primary);

}

.hours-card ul{

list-style:none;

padding:0;

}

.hours-card li{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:
1px solid #eee;

}

/* =====================================
   RESPONSIVE TABLET
===================================== */

@media(max-width:992px){

.map-wrapper iframe{

height:400px;

}

.radius-section{

padding:40px 25px;

}

}

/* =====================================
   RESPONSIVE MOBILE
===================================== */

@media(max-width:768px){

.city-grid,
.coverage-grid,
.featured-cities,
.local-seo-grid,
.area-stats{

grid-template-columns:1fr;

}

.map-wrapper iframe{

height:350px;

}

.area-stat h2{

font-size:2.5rem;

}

.radius-section{

padding:30px 20px;

}

}

/* =====================================
   SMALL MOBILE
===================================== */

@media(max-width:480px){

.city-card,
.coverage-card,
.featured-city{

padding:20px;

}

.map-wrapper iframe{

height:300px;

}

.area-stat{

padding:20px;

}

.area-stat h2{

font-size:2rem;

}

}