/* ===================================
   A Decent Plumber
   Professional Plumbing with a Personal Touch
=================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

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

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */

header{
position:sticky;
top:0;
background:#0d5ea8;
padding:15px 0;
box-shadow:0 3px 12px rgba(0,0,0,.15);
z-index:999;
}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:90px;
width:auto;
}

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

nav a:hover{
color:#ffd166;
}

/* HERO */

.hero{
background:linear-gradient(135deg,#0d5ea8,#167bd8);
color:white;
padding:90px 0;
}

.hero-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.hero h1{
font-size:3rem;
margin-bottom:25px;
}

.hero p{
font-size:1.15rem;
margin-bottom:30px;
}

.hero-image{
text-align:center;
}

.hero-image img{
width:100%;
max-width:430px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}

/* BUTTONS */

.button{
display:inline-block;
background:#ffd166;
color:#0d5ea8;
padding:15px 28px;
border-radius:8px;
font-weight:bold;
text-decoration:none;
margin-right:15px;
margin-bottom:15px;
transition:.3s;
}

.button:hover{
transform:translateY(-3px);
}

.button.secondary{
background:white;
}

/* SECTIONS */

section{
padding:80px 0;
}

section:nth-child(even){
background:white;
}

h2{
font-size:2.4rem;
color:#0d5ea8;
margin-bottom:35px;
text-align:center;
}

.section-intro{
text-align:center;
max-width:700px;
margin:0 auto 40px;
}

/* ABOUT */

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

.about-grid img{
width:100%;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* SERVICES */

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

.service-card{
background:white;
padding:35px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
text-align:center;
}

.service-card:hover{
transform:translateY(-8px);
}

.service-card h3{
color:#0d5ea8;
margin-bottom:15px;
}

/* GALLERY */

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

.gallery img{
width:100%;
height:260px;
object-fit:cover;
border-radius:14px;
box-shadow:0 8px 18px rgba(0,0,0,.2);
transition:.3s;
}

.gallery img:hover{
transform:scale(1.05);
}

/* REVIEWS */

.review-box{
background:white;
padding:45px;
max-width:800px;
margin:auto;
text-align:center;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
font-size:1.2rem;
}

/* CONTACT */

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}

.contact-grid a{
color:#0d5ea8;
text-decoration:none;
font-weight:bold;
}

input,
textarea{
width:100%;
padding:15px;
margin-bottom:20px;
border:1px solid #ccc;
border-radius:8px;
font-size:16px;
}

button{
background:#0d5ea8;
color:white;
padding:16px 30px;
border:none;
border-radius:8px;
font-size:17px;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#09457d;
}

/* FOOTER */

footer{
background:#08335d;
color:white;
text-align:center;
padding:50px 20px;
}

.footer-logo{
height:80px;
margin-bottom:20px;
}

footer a{
color:#ffd166;
text-decoration:none;
}

.copyright{
margin-top:25px;
font-size:.9rem;
opacity:.8;
}

/* MOBILE */

@media(max-width:900px){

header .container{
flex-direction:column;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
margin-top:20px;
gap:18px;
}

.hero-content,
.about-grid,
.contact-grid{
grid-template-columns:1fr;
text-align:center;
}

.hero h1{
font-size:2.3rem;
}

.hero-image{
margin-top:35px;
}

.button{
display:block;
margin:15px auto;
width:260px;
}

}
/* ===========================
   NEW HOMEPAGE IMPROVEMENTS
===========================*/

/* Top Information Bar */

.top-bar{
background:#08335d;
color:#fff;
padding:10px 0;
font-size:.95rem;
}

.top-bar .container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.top-bar a{
color:#ffd166;
text-decoration:none;
font-weight:bold;
}

/* Navigation Call Button */

.call-button{
background:#f4b400;
color:#08335d;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:700;
font-size:18px;
transition:.3s;
box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.call-button:hover{
background:#ffcb33;
transform:translateY(-3px);
}

/* Hero */

.hero{
background:linear-gradient(rgba(8,51,93,.88),rgba(13,94,168,.88)),
url("../images/project5.jpg") center center/cover;
padding:110px 0;
}

.hero h1{
font-size:3.4rem;
line-height:1.15;
margin-bottom:25px;
}

.hero p{
font-size:1.2rem;
margin-bottom:35px;
max-width:650px;
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-bottom:35px;
}

.primary-button,
.secondary-button{

display:inline-block;
padding:18px 34px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
transition:.3s;

}

.primary-button{

background:#f4b400;
color:#08335d;

}

.primary-button:hover{

background:#ffd54d;
transform:translateY(-4px);

}

.secondary-button{

background:white;
color:#08335d;

}

.secondary-button:hover{

background:#f3f3f3;

}

/* Credentials */

.hero-badges{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;

margin-top:20px;

}

.hero-badges div{

background:white;
color:#08335d;

padding:15px;

border-radius:10px;

font-weight:bold;

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

}

/* Service Area */

.service-area{

background:#0d5ea8;
color:white;
text-align:center;

}

.service-area h2{

color:white;
margin-bottom:20px;

}

.service-area p{

font-size:1.15rem;
max-width:1000px;
margin:auto;
line-height:2;

}

/* Service Icons */

.service-icon{

font-size:42px;

margin-bottom:18px;

}

/* Better Cards */

.service-card{

border-top:5px solid #0d5ea8;

}

/* Contact */

.contact-card{

background:white;

padding:40px;

border-radius:15px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

/* Large Call Button */

.large-call-button{

display:block;

text-align:center;

margin-top:30px;

padding:24px;

font-size:26px;

line-height:1.5;

}

/* CTA Banner */

.cta-banner{

background:#08335d;

color:white;

text-align:center;

padding:80px 20px;

}

.cta-banner h2{

color:white;

font-size:2.7rem;

margin-bottom:20px;

}

.cta-banner p{

font-size:1.2rem;

margin-bottom:35px;

}

/* Gallery */

.gallery img{

height:320px;

border-radius:14px;

transition:.35s;

}

.gallery img:hover{

transform:scale(1.05);

box-shadow:0 20px 40px rgba(0,0,0,.25);

}

/* Footer */

footer{

margin-top:0;

}

footer p{

margin:12px 0;

}

/* Mobile */

@media(max-width:900px){

.top-bar .container{

flex-direction:column;

text-align:center;

}

.call-button{

width:100%;

text-align:center;

margin-top:15px;

}

.hero{

padding:70px 0;

}

.hero h1{

font-size:2.4rem;

}

.hero-buttons{

flex-direction:column;

}

.large-call-button{

font-size:22px;

}

}