body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#f4f6ff;
color:#333;
}
/* HERO */
.contact-hero{
background: linear-gradient(135deg,#2e4ad4,#7b8cff,#4fd1ff);
color:white;
text-align:center;
padding:80px 20px;
}

.contact-hero h1{
font-size:42px;
margin-bottom:15px;
}

.contact-hero p{
max-width:700px;
margin:auto;
font-size:18px;
line-height:1.6;
}

/* CONTACT FORM AREA */

.contact-container{
display:flex;
justify-content:center;
padding:60px 20px;
}

.contact-card{
background:white;
padding:40px;
width:100%;
max-width:600px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.1);
}

.contact-card h2{
text-align:center;
margin-bottom:30px;
}

/* FORM */

.form-group{
display:flex;
flex-direction:column;
margin-bottom:20px;
}

label{
margin-bottom:6px;
font-weight:bold;
}

input,
textarea{
padding:12px;
border:1px solid #ccc;
border-radius:6px;
font-size:16px;
transition:0.2s;
}

input:focus,
textarea:focus{
outline:none;
border-color:#2e4ad4;
box-shadow:0 0 5px rgba(46,74,212,0.3);
}

/* BUTTON */

button{
width:100%;
padding:14px;
font-size:16px;
border:none;
border-radius:6px;
background: linear-gradient(135deg,#2e4ad4,#4fd1ff);
color:white;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* MAP SECTION */

.map-section{
padding:10px 20px;
text-align:center;
background:#f5f7ff;
}

.map-section h2{
margin-bottom:30px;
font-size:30px;
}

.map-container{
max-width:1000px;
margin:auto;
border-radius:10px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}


/* --- 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){
.contact-hero h1{
font-size:32px;
}

.contact-card{
padding:30px 20px;
}

#contact {
  padding: 40px 15px;
}

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

}