/* ============================= */
/* Global Reset */
/* ============================= */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;

background-color:#e7edf4;
background-image:url("images/background.png");
background-repeat:repeat;
background-size:900px;

color:#222;
}


/* ============================= */
/* Page Layout */
/* ============================= */

.page{
display:flex;
justify-content:center;
padding:40px 20px;
}

.main-box{
max-width:1400px;
width:100%;

background:white;
padding:40px;
border-radius:14px;

text-align:center;

box-shadow:
0 30px 60px rgba(0,0,0,0.35),
0 6px 18px rgba(0,0,0,0.25);
}


/* ============================= */
/* Logo Section */
/* ============================= */

.logo-section{
text-align:center;
margin-bottom:10px;
}

.logo{
max-width:750px;
width:100%;
display:block;
margin:auto;

filter:drop-shadow(0 10px 16px rgba(0,0,0,0.25));
}

.logo-text{
line-height:1.3;
}

.logo-slogan{
font-size:22px;
font-weight:900;
color:#f0a500;
letter-spacing:2px;
margin-top:10px;
}

.logo-tagline{
font-size:75px;
font-weight:600;
color:#444;
margin-bottom:8px;
}

.logo-phone{
font-size:26px;
font-weight:bold;
color:#222;
}


/* ============================= */
/* Content Cards */
/* ============================= */

.card{
background:#f7f9fc;
padding:20px;
border-radius:10px;
margin-bottom:18px;

box-shadow:
0 18px 36px rgba(0,0,0,0.25),
0 4px 14px rgba(0,0,0,0.15);
}


/* ============================= */
/* Headings */
/* ============================= */

h1{
margin-top:0;
font-size:32px;
}

h2{
margin-bottom:25px;
font-size:32px;
}


/* ============================= */
/* Tagline + Slogan */
/* ============================= */

.tagline{
font-size:55px;
color:#666;
margin-top:5px;
margin-bottom:10px;
}

.slogan{
font-size:35px;
font-style:italic;
color:#777;
margin-bottom:20px;
min-height:28px;
}


/* ============================= */
/* Phone Section */
/* ============================= */

.phone{
font-size:30px;
margin-bottom:15px;
}

.phone span{
font-size:42px;
font-weight:bold;
color:#0a63c7;
}

.phone a{
color:#0a63c7;
text-decoration:none;
}

.phone a:hover{
text-decoration:underline;
}


/* ============================= */
/* Email Section */
/* ============================= */

.email{
font-size:16px;
color:#444;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex-wrap:wrap;
word-break:break-word;
}
.email a{
word-break:break-all;
}
.email-icon{
width:16px;
height:16px;
fill:#0a63c7;
}

.email a{
color:#0a63c7;
text-decoration:none;
font-weight:500;
}

.email a:hover{
text-decoration:underline;
}


/* ============================= */
/* Services Grid */
/* ============================= */

.services{
display:grid;

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

justify-content:center;

gap:18px;
margin-top:25px;
}


/* ============================= */
/* Service Buttons */
/* ============================= */

.service{
background:white;
padding:16px;

border-radius:8px;

font-weight:500;

box-shadow:
0 10px 20px rgba(0,0,0,0.15),
0 3px 10px rgba(0,0,0,0.08);

transition:all .2s ease;
cursor:pointer;
}

.service:hover{
transform:translateY(-4px);

box-shadow:
0 16px 28px rgba(0,0,0,0.25),
0 6px 14px rgba(0,0,0,0.15);
}
.service-area-bar{
width:100%;
overflow:hidden;
background:#f7f9fc;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
margin-top:40px;
}

.service-area-scroll{
white-space:nowrap;
display:inline-block;
padding:12px 0;
font-size:16px;
color:#555;

animation:scrollAreas 25s linear infinite;
}

@keyframes scrollAreas{
0%{
transform:translateX(100%);
}

100%{
transform:translateX(-100%);
}
}

/* ============================= */
/* Facebook Reviews Widget */
/* ============================= */

.elfsight-app-230cc4e0-f4a1-41d4-8e76-67c74e8cb4a0{
max-width:1200px;
margin:auto;
margin-top:10px;
}
.call-now{
position:fixed;
bottom:20px;
right:20px;

background:#0a63c7;
color:white;

padding:14px 22px;
border-radius:40px;

font-size:18px;
font-weight:600;

text-decoration:none;

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

z-index:999;
}

.call-now:hover{
background:#084ea3;
}

/* ============================= */
/* Footer */
/* ============================= */

.footer{
margin-top:50px;
color:#555;
font-size:14px;
}


/* ============================= */
/* Mobile Layout */
/* ============================= */

@media (max-width:600px){

.main-box{
padding:20px;
}

.logo{
max-width:200px;
}

.logo-slogan{
font-size:22px;
}

.tagline{
font-size:24px;
line-height:1.3;
}

.slogan{
font-size:16px;
}

.phone span{
font-size:28px;
}

.services{
grid-template-columns:1fr;
gap:12px;
}

.card{
padding:20px;
margin-bottom:18px;
}

}