body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#fafafa;
color:#333;
line-height:1.6;
}

/* HERO */

.about-hero{
background: linear-gradient(to bottom, #8c8303, #ffffff);
color: black;
text-align: center;
padding: 80px 20px;
}

.about-hero h1{
font-size:42px;
margin-bottom:10px;
}

.about-hero p{
font-size:18px;
opacity:0.9;
}

/* GENERAL SECTIONS */

section{
padding:60px 10%;
}

h2{
margin-bottom:20px;
font-size:30px;
}

/* ABOUT GRID */

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.about-image img{
width:100%;
border-radius:8px;
}

/* MISSION */

.mission-section{
background:#f2f2f2;
}

.mission-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.mission-card{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

/* SERVICES */

.services-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.services-image img{
width:100%;
border-radius:8px;
}

.services-text ul{
margin-top:20px;
padding-left:20px;
}

.services-text li{
margin-bottom:8px;
}

/* COMMITMENT */

.commitment-section{
background:#f7f7f7;
text-align:center;
}

.commitment-container{
max-width:800px;
margin:auto;
}

/* CONTACT */

.contact-section{
text-align:center;
padding-bottom:2px;
}



/* --- Contact Section Styling --- */

#contact {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: "Inter", Arial, sans-serif;
    color: #222;
}

#contact h2 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.contact-card,
.hours-card {
    background: #ffffff;
    padding: 30px 35px;
    margin-bottom: 30px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover,
.hours-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.contact-card p,
.hours-card p,
.hours-card li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.contact-card strong,
.hours-card strong {
    font-weight: 600;
    color: #111;
}

/* --- Map Link Styling --- */

#contact a#mapLink {
    color: #1180ff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#contact a#mapLink:hover {
    color: #005fcc;
    border-color: #005fcc;
}

#contact a#mapLink:active {
    color: #003f88;
}

/* Optional: subtle icon animation if you add a pin emoji */
#contact a#mapLink:hover .pin {
    transform: translateY(-2px);
}

/* --- Phone Link Styling --- */

#contact a#callLink {
    color: #0078ff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#contact a#callLink:hover {
    color: #005fcc;
    border-color: #005fcc;
}

#contact a#callLink:active {
    color: #003f88;
}

.guarantee {
    margin-top: 20px;
    padding: 12px 16px;
    background: #f5faff;
    border-left: 4px solid #0078ff;
    border-radius: 6px;
    font-style: italic;
}

/* MOBILE */

@media(max-width:750px){

.about-grid,
.services-grid{
grid-template-columns:1fr;
}

.about-hero h1{
font-size:34px;
}

#contact {
  padding: 40px 15px;
}

.contact-card,
.hours-card {
  padding: 25px 20px;
}


}