*{scrollbar-width:thin;scrollbar-color:#3c6db0 #dbe8ef}
*::-webkit-scrollbar{width:16px}
*::-webkit-scrollbar-track{background:#ceeae4}
*::-webkit-scrollbar-thumb{background-color:#1ebba0;border-radius:0;border:0 solid #3f9481}
form.CUS input.subject{display:none}
.section-title::after{position:absolute;content:"";width:180px;height:2px;left:50%;bottom:4px;margin-left:-90px;background:var(--primary)}
.section-title::before{position:absolute;content:"";width:60px;height:10px;left:50%;bottom:0;margin-left:-30px;background:var(--primary)}
.c1{display:none}
.coupon-bar{background-color:#133c6b;margin:7% 0}
.coupon-bar img{margin:-10% 0}
header{width:100%;height:90vh;position:relative;background-image:url(../water-heater-repair/water-heater-bg.webp);background-position:center right;background-size:auto 100%;background-repeat:no-repeat}
.overlay{position:absolute;top:0;right:0;width:22%;height:100%;background-color:#89cff33d}
.tools{background-image:url(../water-heater-repair/tools-bg.webp);position:absolute;left:0;top:0;background-size:auto 100%;width:50%;height:90vh;background-repeat:no-repeat}
.center{display:flex;justify-content:center;flex-direction:column}
.center2{display:flex;align-items:center;justify-content:center}
.social-tit{color:#08325a;font-weight:bold}
h1{color:#222f39;font-size:2.3rem}
.card2{height:100%;box-shadow:0 24px 36px -11px rgba(0,0,0,0.09);border:0;background-color:#dae7ec;text-align:center}
.card2 i{font-size:3vw;color:#3c6db0;margin-bottom:5%}
.review-tit{font-weight:bold;margin:4% 0}
.imgs{margin-left:-15px}
.services{background-color:#dae7ec!important;position:relative}
.sub{color:#3c6db0;font-size:20px;font-weight:800}
.b-icon{float:left;font-size:3vw;margin-right:5%;color:#3c6db0;width:100%;text-align:center}
.why{border:0 solid #ccc}
.why:first-child{border-width:0 1px 1px 0;background-color:#dae7ec}
.why:nth-child(2){border-width:0 0 1px 1px;background-color:#ecf2f4}
.why:nth-child(3){border-width:1px 1px 0 0;background-color:#ecf2f4}
.why:last-child{border-width:1px 0 0 1px;background-color:#dae7ec}
.padding{padding:7% 0}
.estimate{background-color:#3c6db0;color:#fff;box-shadow:0 24px 36px -11px rgba(0,0,0,0.09)}
.phone{background-color:#fff;margin-right:3%;color:#3c6db0;box-shadow:0 24px 36px -11px rgba(0,0,0,0.09);width:fit-content;float:left}
button,.phone{padding:2% 3%;border:0;border-radius:5px;font-size:20px;position:relative;overflow:hidden;font-weight:500}
.default-btn{display:flex;transition:all .3s ease}
button:hover,.phone:hover{box-shadow:none}
html{scroll-behavior:smooth}
body{font-family:'Manrope',calibri,sans-serif!important;font-size:20px;font-weight:400;color:#201d1d;overflow-x:hidden}
h2{font-size:2.2rem;margin-bottom:.6em}
img{max-width:100%;height:auto}
.navbar-expand-lg>.container{padding-right:15px;padding-left:15px}
li.nav-item{white-space:nowrap;padding:1% 3%;font-size:1.1vw;list-style:none}
.navbar{padding:0;-webkit-transition:all .4s ease;-moz-transition:all .4s ease-in-out;transition:all .4s ease;background-color:#cadfe6;position:relative;z-index:999;box-shadow:0 4px 26px -11px rgba(0,0,0,0.09);position:absolute;top:11%;padding-right:3%;left:22%}
.navbar2{padding:0;-webkit-transition:all .4s ease;-moz-transition:all .4s ease-in-out;transition:all .4s ease;background-color:#cadfe6;position:relative;z-index:999;box-shadow:0 4px 26px -11px rgba(0,0,0,0.09);position:absolute;top:11%;padding-right:2%;left:57%}
.navbar-brand{padding:1%;position:relative;z-index:9}
.navbar-light .navbar-nav .nav-link{padding:.4rem;color:#fff;text-align:center}
.navbar-collapse{flex-grow:0}
.nav-item:hover,header .active{background-color:#89cff3;color:#fff!important}
.nav-item:hover>.nav-link{color:#284154!important}
#contact{background-color:#3c6db0;color:#fff;padding:3% 10%}
.social{background-color:#eee}
.social i{font-size:1.5vw;margin-right:.5%;color:#3c6db0}
.data i{color:#3c6db0;margin:2% 1% 0 0;line-height: 26px;}
.locations li{float:left;list-style:none;background-color:#4A77B5;margin:.5%;padding:.5% .7%;border-radius:10px;border:1px solid #fff}
.contact{background-image:url(../water-heater-repair/bg.webp);padding:5%;color:#fff}
.marquee{width:100%;margin:1% auto;overflow:hidden;white-space:nowrap;box-sizing:border-box;animation:marquee 50s linear infinite;color:#fff}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{0%{text-indent:27.5em}
100%{text-indent:-105em}
}
.image-gallary-section{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;padding:20px;transition:all .5s ease-in-out}
.image-gallary-section:hover>:not(:hover){opacity:.4}
.card{transition:transform .5s ease;height:300px;width:200px;border-radius:10px;overflow:hidden}
.card:hover{cursor:zoom-in;transform:scale(1.1)}
.card img{height:100%;width:100%;object-fit:cover}
.zoom-modal{display:none;position:fixed;z-index:999;padding-top:60px;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);justify-content:center;align-items:center}
.zoomed-image{max-width:80%;max-height:80%;border-radius:10px;box-shadow:0 0 25px rgba(255,255,255,0.3)}
.close{position:absolute;top:20px;right:40px;color:white;font-size:40px;cursor:pointer;font-weight:bold;transition:.3s}
.close:hover{color:#ff5e5e}
.form-control{font-size:1em;margin-bottom:20px;border-radius:0;border:0;border:#ffffff96 1px solid;background:0;color: #959595;}
.form-control:focus{border:#323548 2px solid;box-shadow:none;background-color:transparent}
#submit{padding:1% 5%;border-radius:50px;background-color:#3c6db0;color:#fff;border:0;font-weight:500}
footer{background-color:#e9e9e9;padding:1% 0;text-align:center}
a{color:inherit}
a:hover{color:inherit;text-decoration:none}
a:active{color:inherit;text-decoration:none}
@media(max-width:1420px){li.nav-item{font-size:1.5vw}
.overlay{width:30%}
.navbar{padding-right:4%;left:12%}
.navbar2{left:59%}
}
@media(max-width:1200px){.hero{padding:5% 3%}
h2{font-size:1.8rem}
.overlay{width:40%}
.tools{opacity:.7}
.card2 i{font-size:5vw}
.small{display:none}
.social i{font-size:2.5vw}
.hero .phone{background-color:#fff}
}
@media(max-width:991.98px){.navbar-collapse{position:absolute;background-color:#ffffffe5;text-align:center;z-index:101;top:100%}
.hero{background-color:#dce8eebf;border-radius:10px}
.c1{display:inline}
.navbar2{display:none}
.navbar{padding:0;background-color:#ffffff40}
.nav-link{padding:.5rem 1rem}
li.nav-item{font-size:2vw;border-bottom:1px dashed #aaa;padding:1%}
.navbar-light .navbar-toggler{color:#fff;border-color:rgba(255,255,255,0.21)}
.navbar-light .navbar-nav .nav-link{padding:.7rem 2rem}
.locations li{margin:1%;padding:1%}
.locations{margin:0;padding:0}
.social{text-align:center}
#contact{padding:3% 0}
.imgs{margin:0}
.b-icon{font-size:7vw}
.first{padding:15% 0 7% 0}
}
@media(max-width:890px){.tools{opacity:0}
}
@media(max-width:767.98px){header{height:80vh}
.card2 i{font-size:8vw}
footer{font-size:16px}
.social i{font-size:4vw}
}
@media(max-width:630px){h2{font-size:1.8rem}
}
@media(max-width:575.98px){li.nav-item{font-size:3vw}
.hero{margin:0 3%}
.social i{font-size:4.5vw}
.data{font-size:18px}
.estimate{display:none}
body{font-size:18px}
}
@media(max-width:475.98px){body{font-weight:400}
header{background-attachment:scroll}
h1{font-size:2rem}
.social i{font-size:5vw}
}