*{
box-sizing:border-box;
}

/* ===== GLOBAL ===== */

body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
background:#f4f6fb;
color:#222;
}

/* ===== HEADER ===== */

.site-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:#1e3a8a;
box-shadow:0 3px 10px rgba(0,0,0,.15);
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-weight:bold;
font-size:18px;
color:white;
white-space:nowrap;
}

/* NAV */

.main-nav{
display:flex;
gap:20px;
}

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



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

.hero{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("../images/royalfront.109110754_std.jpg");
background-size:cover;
background-position:center 25%;
height:500px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero-content{
max-width:700px;
padding:20px;
}

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

.hero p{
font-size:18px;
line-height:1.6;
margin-bottom:25px;
}

.cta-button{
background:#ff7a00;
padding:12px 25px;
border-radius:6px;
color:white;
text-decoration:none;
font-weight:bold;
}

/* ===== SERVICES GRID ===== */

.services{
padding:60px 20px;
text-align:center;
}

.service-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:700px;
margin:auto;
}

.service-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 12px rgba(0,0,0,.08);
}

/* ===== PAGE CONTENT ===== */

.about{
max-width:900px;
margin:auto;
padding:40px 20px;
text-align:center;
}

/* ===== SERVICE IMAGE ===== */

.service-image{
width:100%;
max-width:500px;
height:auto;
display:block;
margin:40px auto;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
cursor:pointer;
}

/* ===== SERVICE LIST ===== */

.service-list{
max-width:400px;
margin:30px auto;
text-align:left;
font-size:18px;
line-height:1.8;
}

/* ===== BLIND REPAIR LAYOUT ===== */

.service-layout{
max-width:1100px;
margin:60px auto;
padding:0 20px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.service-text h1{
font-size:36px;
margin-bottom:20px;
}

.service-text p{
line-height:1.6;
margin-bottom:20px;
}

.icon-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-top:20px;
}

.icon-card{
background:white;
padding:15px;
border-radius:8px;
box-shadow:0 5px 12px rgba(0,0,0,.08);
font-weight:bold;
}

/* ===== GALLERY ===== */

.gallery{
padding:60px 20px;
text-align:center;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
max-width:900px;
margin:auto;
}

.gallery-grid img{
width:100%;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

/* ===== LIGHTBOX ===== */

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
display:none;
align-items:center;
justify-content:center;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}

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

.contact{
padding:60px 20px;
text-align:center;
}

.contact-form{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:8px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border:1px solid #ccc;
border-radius:6px;
}

.contact-form button{
background:#1e3a8a;
color:white;
border:none;
padding:12px;
border-radius:6px;
}

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

.map iframe{
width:100%;
height:350px;
border:none;
}

/* ===== FOOTER ===== */

footer{
text-align:center;
padding:30px;
background:#1e3a8a;
color:white;
}


/* ===== ANIMATIONS ===== */

.fade{
opacity:0;
transform:translateY(30px);
transition:1s;
}

.show{
opacity:1;
transform:translateY(0);
}

/* ===== SPACING ===== */

section{
margin-bottom:0;
}

/* ===== MOBILE MENU ===== */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

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

@media (max-width:1440px){

.menu-toggle{
display:block;
}

.site-header{
flex-wrap:wrap;
}



.main-nav a{
padding:10px 0;
}

.main-nav.active{
display:flex;
}

}

/* tablet */

@media (max-width:900px){

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

.hero p{
font-size:16px;
}

.service-layout{
grid-template-columns:1fr;
text-align:center;
}

.icon-grid{
grid-template-columns:1fr;
}

}


/* TRUST BAR */

.trust-bar{
background:#1e3a8a;
color:white;
padding:25px 10px;
}

.trust-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
text-align:center;
font-weight:bold;
}

/* REVIEWS */

.reviews{
padding:60px 20px;
text-align:center;
background:#f9f9f9;
}

.review-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:900px;
margin:auto;
}

.review-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}





.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
z-index:9999;
justify-content:center;
align-items:center;
}

.popup-content{
background:white;
padding:35px;
border-radius:10px;
width:90%;
max-width:450px;
position:relative;
box-shadow:0 10px 30px rgba(0,0,0,.25);
text-align:center;
}

.close-popup{
position:absolute;
top:10px;
right:15px;
font-size:28px;
cursor:pointer;
}

.quote-button{
position:fixed;
right:20px;
bottom:20px;
background:#df2332;
color:white;
padding:14px 18px;
border-radius:30px;
font-weight:bold;
z-index:10000;
cursor:pointer;
border:none;
}

.quote-button:hover{
background:#8b1a29;
}

.service-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:.3s;
}

html{
scroll-behavior:smooth;
}

.service-card {
text-decoration: none;
color: inherit;
display: block;
}

.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}


.site-header {
position: relative;
}

/* CONTACT PAGE LAYOUT */

.contact-layout{
max-width:1100px;
margin:60px auto;
padding:0 20px;

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
}

.contact-info iframe{
width:100%;
height:350px;
border:none;
border-radius:10px;
margin-top:15px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.contact-form-wrapper{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,.12);
max-width:480px;
}

.contact-form-wrapper h2{
margin-bottom:20px;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:6px;
margin-bottom:8px;
font-size:14px;
}

.contact-form textarea{
min-height:130px;
resize:vertical;
}

.contact-form button{
background:#1e3a8a;
color:white;
border:none;
padding:14px;
border-radius:6px;
font-weight:bold;
cursor:pointer;
font-size:15px;
transition:.2s;
}

.contact-form button:hover{
background:#152c66;
}

/* MOBILE */

@media (max-width:900px){

.contact-layout{
grid-template-columns:1fr;
gap:30px;
}

.contact-form-wrapper{
max-width:100%;

}

}

/* ===== MOBILE MENU ===== */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}



@media (max-width:1440px){

.menu-toggle{
display:block;
}

.site-header{
flex-wrap:wrap;
position:relative;
}

/* dropdown menu */

.main-nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#f4f6fb;

flex-direction:column;
gap:0;

max-height:0;
overflow:hidden;

transition:max-height .35s ease;
box-shadow:0 5px 10px rgba(0,0,0,.1);
}

.main-nav a{
padding:15px 25px;
border-bottom:1px solid #e5e5e5;
}

.main-nav.active{
max-height:500px;
}

}

.site-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;


position:sticky;
top:0;
z-index:1000;

transition:box-shadow .3s ease;
}

.about{
background:#f4f6fb;
}

.reviews{
background:white;
}

.map{
background:#f4f6fb;
}

.map iframe{
width:100%;
height:350px;
border:none;
display:block;
}

.services{
background:white;
}

.gallery{
background:#f4f6fb;
}

.about{
background:white;
}

.reviews{
background:#f4f6fb;
}

.about{
max-width:900px;
margin:auto;
padding:40px 20px;
text-align:center;
background:#f4f6fb;
}

.bottom-info{
background:white;
padding:60px 20px;
text-align:center;
}

.bottom-info .content{
max-width:900px;
margin:auto;
}

.site-header{
border-bottom:4px solid #C8102E;
}



.subtitle{
font-size:18px;
color:#555;
margin-bottom:20px;
}

.hero{
height:auto;
min-height:500px;
padding:0 20px;
margin-bottom:0;
}


.hero-content{
margin-bottom:0;
}

.trust-bar{
margin-top:0;
}

.contact-form-wrapper h2{
margin-bottom:20px;
text-align:center;
}

.review-button{
display:inline-block;
margin-top:20px;
background:#C8102E;
color:white;
padding:12px 22px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
font-size:15px;
}

.review-button:hover{
background:#8b1a29;
}

.main-nav a{
text-decoration:none;
color:white;
font-weight:bold;
padding:6px 10px;
border:2px solid transparent;
border-radius:5px;
transition:.2s;
}

.main-nav a:hover{
border-color:#3152ad;
background-color: #3152ad;
}

.contact-form h2{
text-align:center;
margin-bottom:25px;
}

.contact-form h4{
margin-top:20px;
margin-bottom:10px;
}

.checkbox-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:15px;
}

.contact-form label{
display:flex;
align-items:center;
gap:8px;
font-size:15px;
}

.contact-form select{
padding:12px;
border:1px solid #ccc;
border-radius:6px;
width:100%;
margin-bottom:15px;
background:white;
}

.checkbox-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 40px;
margin-top:10px;
}

.checkbox-grid label{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
cursor:pointer;
}


.contact-form input[type="radio"]{
margin-right:8px;
}



.checkbox-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px 30px;
margin-top:8px;
margin-bottom:15px;
}

.checkbox-grid label{
display:flex;
align-items:center;
gap:8px;
font-size:15px;
line-height:1.2;
cursor:pointer;
}

.checkbox-grid input{
width:14px;
height:14px;
}
.contact-form h4{
margin-top:0;
margin-bottom:0;
font-size:15px;
}
.checkbox-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px 18px;
margin-top:4px;
margin-bottom:8px;
}

.checkbox-grid label{
display:flex;
align-items:center;
gap:6px;
font-size:15px;
cursor:pointer;
}

.checkbox-grid input{
margin:0;
}
.radio-group{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:15px;
}

.radio-group label{
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
font-size:15px;
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
width:100%;
margin-bottom:0px;
}

.two-col input{
width:100%;
box-sizing:border-box;
}


.radio-group{
display:flex;
flex-direction:column;
gap:6px;
align-items:flex-start;
margin-bottom:10px;
}

.radio-group label{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
}

.radio-group input{
margin:0;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
box-sizing:border-box;
}

.contact-form select{
padding:10px;
border:1px solid #ccc;
border-radius:6px;
width:100%;
margin-bottom:8px;
background:white;
}

.quote-button{
position:fixed;
right:20px;
bottom:20px;
background:#df2332;
color:white;
padding:14px 18px;
border-radius:30px;
font-weight:bold;
z-index:10000;
cursor:pointer;
border:none;

text-decoration:none;
display:inline-block;
}


.about{
max-width:900px;
margin:auto;
padding:20px 20px 5px;
text-align:center;
background:#f4f6fb;
}

/* SERVICE AREA MAP */

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



.map-box{
max-width:1100px;
margin:auto;
background:#1e3a8a;
padding:15px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.map-box iframe{
width:100%;
height:420px;
border:none;
border-radius:8px;
}
.services,
.gallery,
.reviews,
.map-section{
padding:35px 20px;
}
.map-section{
padding:30px 20px;
}
section h2{
margin-bottom:20px;
}
.map-section h2{
font-size:24px;
margin-bottom:30px;
}

.bottom-info{
background:#ffffff;
padding:35px 20px;
text-align:center;
}

.bottom-info .content{
max-width:850px;
margin:auto;
}

.bottom-info h2{
font-size:28px;
margin-bottom:10px;
}

.bottom-info p{
font-size:16px;
line-height:1.6;
margin:10px 0;
color:#444;
}

.subtitle{
font-size:17px;
color:#666;
margin-bottom:15px;
}


footer{
background:#2d4593;
color:white;
text-align:center;
padding:30px 20px;
font-size:15px;
line-height:1.8;
}

footer p{
margin:4px 0;
}

footer p:first-child{
font-weight:bold;
font-size:16px;
}
body{
font-family:Arial, Helvetica, sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.about{
max-width:1200px;
margin:auto;
}

.bottom-info .content{
max-width:1100px;
margin:auto;
}
.service-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}
.review-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:1100px;
margin:auto;
}
.map-box{
max-width:1200px;
margin:auto;
}


@media (max-width:1440px){

.menu-toggle{
display:block;
}

.site-header{
flex-wrap:wrap;
position:relative;
}

.main-nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#ffffff;
display:flex;
flex-direction:column;
gap:0;

max-height:0;
overflow:hidden;

transition:max-height .35s ease;
box-shadow:0 5px 10px rgba(0,0,0,.1);
}

.main-nav a{
padding:15px 25px;
border-bottom:1px solid #e5e5e5;
color:#222;
}

.main-nav.active{
max-height:500px;
}

}

.main-nav a{
padding:8px 12px;
}
.gallery-grid img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
}

.service-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:900px;
margin:auto;
}
.services-intro{
max-width:700px;
margin:10px auto 40px auto;
text-align:center;
color:#555;
line-height:1.6;
}
.service-icon{
font-size:36px;
margin-bottom:12px;
display:block;
}
.service-card{
padding:40px 30px;
}
.service-card{
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.services{
border-top:1px solid #e6e6e6;
}

.logo{
font-weight:bold;
font-size:18px;
color:white;
white-space:nowrap;
text-decoration:none;
}
.call-button{
position:fixed;
right:20px;
bottom:80px;
background:#1e3a8a;
color:white;
padding:14px 18px;
border-radius:30px;
font-weight:bold;
z-index:10000;
text-decoration:none;
box-shadow:0 5px 12px rgba(0,0,0,.2);
}

.call-button:hover{
background:#152c66;
}
.call-button{
position:fixed;
right:20px;
bottom:85px;   /* sits above quote button */
background:#1e3a8a;
color:white;
padding:14px 18px;
border-radius:30px;
font-weight:bold;
z-index:10000;
text-decoration:none;
display:inline-block;
box-shadow:0 5px 12px rgba(0,0,0,.2);
}
.call-button,
.quote-button{
width:100px;
text-align:center;
}


#quote{
scroll-margin-top:120px;
}

.required{
color:#df2332;
font-weight:600;
font-size:13px;
letter-spacing:.3px;
}

.optional{
color:#777;
font-size:13px;
font-weight:normal;
}

.input-group{
position:relative;
}

.required-badge{
position:absolute;
right:12px;
top:40%;
transform:translateY(-50%);
color:#df2332;
font-size:13px;
font-weight:bold;
}

.contact-info iframe{
width:100%;
height:350px;
border:none;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}


@media (max-width:1440px){
.main-nav{
position:absolute;
top:75px;
left:0;
width:100%;
background:#ffffff;
}
}

.contact-info p{
max-width:700px;
margin:0 auto 15px auto;
text-align:center;
}
.contact-info h2{
max-width:700px;
margin:0 auto 15px auto;
text-align:center;
}
.contact-info h3{
max-width:700px;
margin:0 auto 15px auto;
text-align:center;
}



.services{
padding:35px 20px 25px;
}

.gallery{
padding:35px 20px 25px;
}
.services,
.gallery{
padding:25px 20px;
}

/* BEFORE AFTER SECTION */

.before-after-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-top:20px;
}

.before-after-card img{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.before-after-card h3{
text-align:center;
margin-bottom:10px;
}


.before-after-section{
max-width:1100px;
margin:60px auto;
padding:20px;
text-align:center;
}

.before-after-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:30px;
}

.before-after-card img{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.before-after-card h3{
margin-bottom:10px;
}


.before-after-container{
display:flex;
flex-direction:column;
gap:30px;
}

.before-after-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.before-after-card img{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.before-after-card h3{
text-align:center;
margin-bottom:8px;
}

@media (max-width:900px){

.service-layout{
grid-template-columns:1fr;
}

}


/* reduce space above the gutter cleaning section */

.service-layout{
margin-top:20px;
padding-top:20px;
}

/* tighten spacing between before/after rows */

.before-after-container{
gap:15px;
}

/* reduce spacing between the two grids */

.before-after-grid{
margin-top:0px;
}

.service-layout{
align-items:flex-start;
}
/* WORK SLIDER */

.work-slider{
text-align:center;
padding:50px 20px;
}

.slider{
position:relative;
max-width:900px;
margin:auto;
}

.slider img{
width:100%;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,.5);
color:white;
border:none;
font-size:28px;
padding:10px 16px;
cursor:pointer;
border-radius:6px;
}

.prev{
left:10px;
}

.next{
right:10px;
}

.slide-btn:hover{
background:rgba(0,0,0,.8);
}

/* WORK SLIDER */

.work-slider{
text-align:center;
padding:40px 20px;
}

.slider{
position:relative;
max-width:650px;   /* smaller and cleaner */
margin:30px auto;
}

.slider img{
width:100%;
height:420px;       /* forces consistent height */
object-fit:cover;   /* crops instead of stretching */
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,.5);
color:white;
border:none;
font-size:28px;
padding:10px 16px;
cursor:pointer;
border-radius:6px;
}

.prev{ left:10px; }
.next{ right:10px; }

/* WORK SLIDER */

.work-slider{
text-align:center;
padding:40px 20px;
}

.slider{
position:relative;
max-width:650px;
margin:25px auto;
overflow:hidden;
}

.slider img{
width:100%;
height:420px;
object-fit:cover;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:opacity .4s ease;
}

/* ARROWS */

.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,.5);
color:white;
border:none;
font-size:26px;
padding:8px 14px;
cursor:pointer;
border-radius:6px;
}

.prev{ left:10px; }
.next{ right:10px; }

.slide-btn:hover{
background:rgba(0,0,0,.8);
}

/* DOTS */

.slider-dots{
margin-top:12px;
}

.slider-dots span{
height:10px;
width:10px;
margin:0 5px;
background:#bbb;
border-radius:50%;
display:inline-block;
cursor:pointer;
}

.slider-dots .active{
background:#1e3a8a;
}


.radio-group{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
}

.radio-group label{
display:flex;
align-items:center;
gap:6px;
}


.about{
max-width:900px;
margin:auto;
padding:30px 20px;
text-align:center;
}

footer a{
text-decoration:none;
color:inherit;
}
footer a:hover{
opacity:0.85;
}
/* remove underline from phone/email on contact page (mobile only) */

.call-button,
.quote-button{
text-align:center;
padding:12px 16px;
white-space:nowrap;
}
.call-button,
.quote-button{
position:fixed;
right:18px;
padding:14px 22px; 
border-radius:30px;
font-weight:bold;
z-index:10000;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;

box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.call-button,
.quote-button{
font-size:15px;
}


.call-button,
.quote-button{
padding: 14px 30px;   /* more space around text */
font-size:15px;
border-radius:40px;
}
.service-text{
text-align:center;
margin:0 auto;
max-width:700px;
}
.service-text a{
text-decoration:none;
color:#1e3a8a;   /* same blue as your theme */
font-weight:600;
}

.service-text a:visited{
color:#1e3a8a;   /* prevents purple visited links */
}

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

.trust-list{
list-style:none;
padding:0;
margin:20px auto;
max-width:700px;

display:grid;
grid-template-columns:1fr 1fr;
gap:12px 30px;
text-align:left;
}

.trust-list li{
font-size:15px;
}


.trust-list{
list-style:none;
padding:0;
margin:20px auto;
max-width:900px;

display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:12px 40px;

text-align:left;

}

.trust-list li{
font-size:15px;
line-height:1.4;
}
.trust-list{
list-style:none;
padding:0;
margin:25px auto;
max-width:650px;

display:grid;
grid-template-columns:1fr 1fr;
gap:12px 40px;

text-align:center;   /* center the content */
}

.trust-list li{
font-size:15px;
line-height:1.4;
}
.trust-list{
list-style:none;
padding:0;
margin:25px auto;
max-width:650px;

display:grid;
grid-template-columns:1fr 1fr;
gap:12px 40px;
}

.trust-list li{
display:flex;
align-items:flex-start;
gap:8px;
text-align:left;
}

.star{
flex-shrink:0;
}

.gutter-carousel{
text-align:center;
padding:50px 20px;
}

.carousel-container{
position:relative;
max-width:1000px;
margin:auto;
overflow:hidden;
}

.carousel-track{
display:flex;
gap:20px;
transition:transform 0.4s ease;
}

.carousel-track img{
width:280px;
height:200px;
object-fit:cover;
border-radius:10px;
}

.carousel-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:#1e3a8a;
color:white;
border:none;
font-size:28px;
padding:8px 14px;
cursor:pointer;
border-radius:6px;
}

.prev{
left:0;
}

.next{
right:0;
}

.gutter-slider{
position:relative;
max-width:700px;
margin:40px auto;
}

.gutter-slider img{
width:100%;
border-radius:10px;
}

.gutter-slider img.active{
display:block;
}



.prev{
left:10px;
}

.next{
right:10px;
}
/* tighten gutter carousel spacing */

.gutter-carousel{
padding:20px 20px 10px;
margin-top:0;
}

.gutter-carousel h2{
margin-bottom:15px;
}

.about{
padding-bottom:10px;
}

/* GUTTER SLIDER */

.gutter-slider-section{
text-align:center;
padding:25px 20px 10px;
}

.gutter-slider{
position:relative;
max-width:650px;
margin:25px auto;
}

.gutter-slider img{
width:100%;
height:420px;
object-fit:cover;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.gutter-prev,
.gutter-next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,.5);
color:white;
border:none;
font-size:26px;
padding:8px 14px;
cursor:pointer;
border-radius:6px;
}

.gutter-prev{ left:10px; }
.gutter-next{ right:10px; }

.gutter-prev:hover,
.gutter-next:hover{
background:rgba(0,0,0,.8);
}
.gutter-slider-section{
text-align:center;
padding:10px 20px 20px;
margin-top:-20px;
}

.gutter-slider{
position:relative;
max-width:650px;
margin:10px auto 30px auto;
}
.slider,
.gutter-slider{
position:relative;
overflow:hidden;
}
.service-icon{
font-size:42px;
color:#1e3a8a;
margin-bottom:14px;
}

.gutter-slider-section{
padding:10px 20px 5px;
margin-top:-20px;
}

.gutter-slider{
margin:10px auto 10px auto;
}
.gutter-slider-section{
padding:5px 20px 0;
margin-top:-50px;
}

.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
box-sizing:border-box;
}

.lightbox img{
max-width:95%;
max-height:95%;
object-fit:contain;
border-radius:6px;
}
.zoomable{
cursor:pointer;
}
.menu-toggle{
color:white !important;
}


.site-header{
padding:18px 25px;
}

html, body {
overflow-x: hidden;
}

.about a{
text-decoration:none;
color:#1e3a8a;
font-weight:600;
}

.about a:visited{
color:#1e3a8a;
}

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


/* VIDEO ONLY — does NOT affect images */

/* pressure washing video fix */

.service-video-box{
width:100%;
max-width:500px;
aspect-ratio:3/4;
margin:40px auto;
overflow:hidden;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
position:relative;
justify-self:center;
}

.service-video{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%) scale(1.4);
height:100%;
width:auto;
}

.gutter-slider img{
width:100%;
height:auto;
border-radius:12px;
box-shadow:none;

}

.slider-dots{
text-align:center;
margin-top:12px;
width:100%;
}

/* BEFORE AFTER SECTION SIZE FIX */

.before-after-section{
max-width:1100px;
margin:0 auto;   /* pulls section higher */
padding:10px 20px;
text-align:center;
}

.before-after-container{
display:flex;
flex-direction:column;
gap:15px;
}

.before-after-card img{
width:100%;
max-height:300px;   /* makes images smaller */
object-fit:cover;
border-radius:10px;
box-shadow:none;
}

.service-text p:last-of-type{
margin-bottom:0;
}

.before-after-section{
margin-top:-60px;

}

#window-pricing{
scroll-margin-top:100px;
}

.fade{
  opacity:0;
  transform:translateY(15px); /* smaller movement */
  transition:opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

section{
  position: relative;
  z-index: 1;
}

footer{
  position: relative;
  z-index: 2;
}
.fade{
  opacity:0;
}

.fade.show{
  opacity:1;
  transform:translateY(0);
}

/* MOBILE */

@media (max-width:600px){


.call-button,
.quote-button{
padding:12px 45px !important;
font-size:13px;
min-width: 100px;
min-height: 40px;

}

.about{
padding:30px 15px;
}

section{
margin-bottom:20px;
}

.hero{
height:420px;
}

.hero h1{
font-size:28px;
}

.call-button,
.quote-button{
padding:10px 14px;
font-size:13px;
border-radius:22px;
width:80px;
}

.call-button{
bottom:70px;
}

.quote-button{
bottom:20px;
}

.service-grid{
grid-template-columns:1fr;
gap:20px;
}

.service-card{
padding:25px 20px;
}

.service-card p{
font-size:15px;
line-height:1.5;
}

.service-icon{
font-size:28px;
margin-bottom:8px;
}

.about{
padding:15px 20px 5px;
margin-bottom:0;
}

.contact-layout{
margin-top:10px;
}

.site-header{
position:sticky;
top:0;
z-index:9999;
}

.site-header{
padding:10px 16px;
}

.logo{
font-size:16px;
}

.menu-toggle{
font-size:22px;
}

.about{
padding:10px 15px;
}

.about h1{
font-size:26px;
margin-bottom:8px;
}

.about p{
font-size:15px;
}

.contact-info iframe{
height:250px;
}

.contact-info{
text-align:center;
}

.contact-info p{
text-align:center;
}

.contact-info h2{
text-align:center;
}

.about{
text-align:center;
padding:10px 18px;
}

.about h1{
font-size:26px;
margin-bottom:10px;
line-height:1.3;
}

.about p{
font-size:15px;
line-height:1.5;
max-width:420px;
margin:0 auto 15px auto;
}

.contact-info{
text-align:center;
}

.contact-info h2{
font-size:22px;
margin-top:10px;
margin-bottom:10px;
}

.contact-info p{
font-size:15px;
line-height:1.5;
margin-bottom:8px;
}

.about p{
margin-bottom:0px;
}

.contact-info h2{
margin-top:6px;
}

.main-nav{
position:absolute;
top:50px;
left:0;
width:100%;
background:#ffffff;
}

section{
padding:25px 15px;
}

.about{
padding:15px 15px 5px;
}

.services,
.gallery,
.reviews,
.map-section{
padding:25px 15px;
}

.contact-layout{
margin:25px auto;
gap:25px;
}

.service-card{
padding:18px 16px;
}

h1{
font-size:26px;
margin-bottom:10px;
}

h2{
font-size:22px;
margin-bottom:12px;
}

p{
margin-bottom:10px;
line-height:1.5;
}

section{
margin-bottom:15px;
}

.services{
margin-top:0;
padding-top:10px;
}

.services h2{
margin-top:0;
}

.trust-bar{
margin-bottom:0;
padding-bottom:15px;
}

.services{
padding-bottom:15px;
}

.gallery{
padding-top:15px;
margin-top:0;
}

.gallery h2{
margin-top:0;
}

section{
margin-bottom:10px;
}

.reviews{
padding-bottom:15px;
}

.map-section{
padding-top:15px;
margin-top:0;
}

.map-section h2{
margin-top:0;
}

section{
padding-top:20px;
padding-bottom:20px;
}

footer{
margin-top:0;
}

section{
margin-bottom:10px;
}

footer{
margin-bottom:0;
padding-bottom:40px;
}

body{
margin-bottom:0;
}

.bottom-info{
margin-bottom:0;
padding-bottom:10px;
}

.bottom-info{
padding-top:10px;
}

.bottom-info h2{
margin-top:10px;
}

.gallery{
padding-bottom:5px;
}

.gallery-grid{
margin-bottom:0;
}

.about{
margin-top:-10px;
}

.gallery{
padding-bottom:20px;
}

.about{
margin-top:-20px;
}

.before-after-grid{
grid-template-columns:1fr;
}

.slider img{
height:260px;
}

.hero{
height:320px !important;
min-height:320px !important;
padding:20px 15px !important;
background-position:center 30%;
}

.hero-content{
max-width:90%;
}

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

.hero p{
font-size:14px;
margin-bottom:15px;
}

.radio-group{
width:100%;
align-items:flex-start;
}

.radio-group label{
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
width:auto;
}

.radio-group input{
margin-right:6px;
}

.radio-group{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
}

.radio-group label{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
width:auto !important;
}

.radio-group input{
margin:0 6px 0 0 !important;
}

.radio-group{
display:flex;
flex-direction:column;
align-items:flex-start;
}

.radio-group label{
display:inline-flex;
align-items:center;
gap:6px;
width:auto;
}

.radio-group input[type="radio"]{
margin:0 6px 0 0;
flex-shrink:0;
}

.two-col{
grid-template-columns:1fr !important;
}

.radio-group{
display:block !important;
}

.radio-group label{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:6px !important;
width:auto !important;
}

.radio-group input{
margin-right:6px !important;
}

.radio-group{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.radio-group label{
display:flex;
align-items:center;
gap:8px;
width:100%;
}

.radio-group input[type="radio"]{
width:16px;
height:16px;
flex-shrink:0;
margin:0;
}

.about{
max-width:100%;
padding:20px 18px;
}

.about p{
font-size:15px;
line-height:1.6;
}

.contact-info a{
text-decoration:none;
color:inherit;
}

.call-button,
.quote-button{
padding:12px 26px;;
font-size:13px;
right:14px;
}

.call-button{
bottom:70px;
}

.quote-button{
bottom:18px;
}

.call-button,
.quote-button{
padding:12px 28px;
font-size:13px;
border-radius:40px;
}

.call-button,
.quote-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 26px;
font-size:13px;
line-height:1;          /* forces same text height */
height:42px;            /* makes both buttons same height */
}

.trust-list{
grid-template-columns:1fr;
text-align:center;
}

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

.before-after-card img{
width:100%;
height:160px;
object-fit:cover;
}

.before-after-card h3{
font-size:14px;
margin-bottom:6px;
}

.before-after-container{
margin-top:0;
padding-top:0;
gap:10px;
}

.before-after-grid{
margin-top:0;
}

.before-after-card h3{
margin-top:0;
}

.service-text p:last-of-type{
margin-bottom:5px;
}

/* tighten text above the images */
.service-text p{
margin-bottom:6px;
}

/* remove gap before the images */
.before-after-container{
margin-top:-18px;
gap:8px;
}

/* tighten the before/after labels */
.before-after-card h3{
margin-top:2px;
margin-bottom:4px;
font-size:14px;
}

.star{
  flex-shrink:0;
  width:20px;
}

.trust-list{
list-style:none;
padding:0;
margin:25px auto;
max-width:650px;

display:grid;
grid-template-columns:1fr 1fr;
gap:12px 40px;
}

.trust-list li{
display:flex;
align-items:flex-start;
gap:8px;
text-align:left;
}


}