@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v20-latin-500.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/poppins-v20-latin-800.woff2') format('woff2')
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: #206181
}

::-webkit-scrollbar-thumb {
    background: #0ed6b2
}

body {
    font-family: 'Poppins', sans-serif
}

a {
    text-decoration: none
}

li {
    list-style: none
}

hr {
    color: #fff
}

h1,
h2,
h3,
h4 {
    text-transform: capitalize
}

.tb-effect,
.lt-effect,
.lt-effect-1,
.tb-effect-1 {
    position: relative;
    z-index: 5;
    border-radius: 2px
}

.tb-effect::after,
.lt-effect::after,
.lt-effect-1::after,
.tb-effect-1::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

.tb-effect-1::after {
    height: 0;
    background-color: #17283d;
    color: #fff;
    transition: height .5s;
    border-radius: 2px
}

.tb-effect::after {
    height: 0;
    background-color: #fe7c34;
    color: #fff;
    transition: height .5s;
    border-radius: 2px
}

.tb-effect-1:hover::after {
    height: 100%;
    border-radius: 2px
}

.tb-effect-1:hover {
    color: #fff;
    border-radius: 2px
}

.tb-effect:hover::after {
    height: 100%;
    border-radius: 2px
}

.tb-effect:hover {
    color: #03a22b;
    border-radius: 2px
}

.lt-effect {
    width: 110px
}

.lt-effect::after {
    width: 1%;
    background-color: #50b233;
    color: #0e2c72;
    transition: width .5s
}

.lt-effect:hover::after {
    width: 110%;
    color: #fff
}

.lt-effect-1::after {
    width: 1%;
    background-color: #0ed6b2;
    color: #0ed6b2;
    transition: width .5s
}

.lt-effect-1:hover::after {
    width: 100%;
    color: #fff
}

.button-hover {
    border: 3px solid #fff
}

.btn {
    position: relative;
    text-align: center;
    z-index: 1;
    font-size: 19px;
    background: #6ec3e7;
    cursor: pointer;
    color: #fff;
    font-weight: 500
}

/* ===== Top Info Bar ===== */
.top-banner {
    background-color: #0067d4;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    padding: 6px 0
}

.navbar {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05)
}

.navbar-brand {
    font-weight: 700;
    color: #0a0a0a !important
}

.navbar-nav .nav-link {
    color: #222 !important;
    margin: 0 10px;
    font-weight: 500
}

.btn-primary {
    background-color: #0067d4;
    border: none;
    border-radius: 6px;
    padding: 10px 25px;
    font-weight: 600
}

/* Hero Section */
.hero-section {
    padding: 100px 0;
    /* background-color:#f6f8fc;*/
    background-image: url('../plumbing/bg.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.hero-text small {
    color: #0067d4;
    font-weight: 600;
    font-size: 1rem
}

.hero-text h1 {
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.3;
    color: #0a0a0a
}

.highlight {
    background-color: #6dc3e7;
    padding: 0 8px;
    border-radius: 4px
}

.hero-text p {
    color: #555;
    margin-top: 20px;
    font-size: 1.05rem
}

.hero-text .btn {
    margin-top: 25px;
    font-size: 23px;
    padding: 23px 40px
}

/* Right side images */
.hero-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px
}

.hero-images img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15)
}

@media (max-width:992px) {
    .hero-text {
        text-align: center
    }

    .hero-images {
        justify-content: center;
        margin-top: 40px
    }

    .hero-text h1 {
        font-size: 2.2rem
    }
}

.section-featured {
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden
}

.section-featured::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(rgba(12, 166, 132, 0.05), transparent 70%);
    border-radius: 50%;
    z-index: 0
}

.section-featured h6 {
    color: #164a83;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.section-featured h2 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 50px
}

.section-featured h2 span {
    color: #164a83
}

.feature-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
    height: 100%
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08)
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: rgba(12, 166, 132, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 28px;
    color: #164a83
}

.feature-card h5 {
    font-weight: 600;
    color: #122d40;
    margin-bottom: 10px
}

.feature-card p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6
}

@media (max-width:992px) {
    .feature-card {
        margin-bottom: 30px
    }
}

/* Main wrapper */
.feature-bar {
    background-color: #0075e0;
    border-radius: 100px;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 80px auto;
    max-width: 1200px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1)
}

.feature-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex: 1 1 300px;
    color: #fff;
    padding: 20px 30px;
    border-right: 2px solid rgba(255, 255, 255, 0.1)
}

.feature-box:last-child {
    border-right: none
}

.icon-bg {
    background-color: #00a0e3;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    position: relative
}

.icon-bg::before {
    content: "";
    position: absolute;
    left: -15px;
    width: 25px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.15);
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px
}

.feature-box h6 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0
}

@media (max-width:992px) {
    .feature-bar {
        border-radius: 40px;
        padding: 40px 15px
    }

    .feature-box {
        flex: 1 1 100%;
        border: none;
        justify-content: center;
        text-align: center
    }

    .icon-bg::before {
        display: none
    }
}

/* benefit-section */
.benefit-section {
    padding: 100px 0
}

.benefit-images {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px
}

.benefit-images img {
    width: 260px;
    height: 535px;
    object-fit: cover;
    border-radius: 120px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15)
}

.benefit-content h2 {
    font-weight: 700;
    font-size: 2.3rem;
    color: #0075e0
}

.benefit-content h2 span {
    color: #5bb8df
}

.benefit-content p {
    color: #555;
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 1rem;
    max-width: 550px
}

@media (max-width:992px) {
    .benefit-images {
        flex-direction: column;
        margin-bottom: 40px
    }

    .benefit-content {
        text-align: center
    }

    .benefit-content p {
        margin-left: auto;
        margin-right: auto
    }
}

/* Hero Section */
.hero {
    position: relative;
    background: url('../plumbing/plumbing-bg.webp') no-repeat center/cover;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(21, 93, 154, 0.8)
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px
}

.hero-content2 {
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ddd
}

.hero-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin: 20px 0;
    color: #fff
}

.hero-content p {
    font-size: 1.1rem;
    color: #e6e6e6;
    margin-bottom: 35px
}

.btn-danger {
    background-color: #004589;
    border: none;
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 4px
}

.btn-outline-light {
    border: 2px solid #004589;
    color: #fff;
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 4px
}

.btn-outline-light:hover {
    background-color: #fff;
    color: #004589
}

/* Stats Section */
.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #f8f9fa;
    color: #000
}

.stats-left {
    background-color: #004589;
    color: #fff;
    padding: 60px 40px;
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.stats-left h6 {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #f0f0f0;
    margin-bottom: 10px
}

.stats-left h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4
}

.stats-right {
    flex: 3 1 700px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 40px 0
}

.stat-box {
    text-align: center;
    margin: 20px
}

.stat-box2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0b2745
}

.stat-box span {
    color: #5bb8df
}

.stat-box p {
    color: #555;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

@media (max-width:992px) {
    .hero {
        height: 90vh
    }

    .hero-content h1 {
        font-size: 2rem
    }

    .stats-left {
        flex: 1 1 100%
    }

    .stats-right {
        flex: 1 1 100%;
        padding: 30px 10px
    }
}

/* Section */
.choose-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -222px;
    padding: 80px 0
}

/* Left Image */
.choose-image img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px 0 0 10px;
    object-fit: cover
}

/* Right Content */
.choose-content {
    background-color: #fff;
    color: #164a83;
    padding: 60px 50px;
    border-radius: 0 10px 10px 0
}

.choose-content h6 {
    font-weight: 500;
    color: #5bb8df;
    text-transform: uppercase;
    font-size: 1rem
}

.choose-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px
}

.choose-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px
}

.choose-list .item {
    display: flex;
    align-items: center;
    gap: 10px
}

.choose-list .item i {
    font-size: 1.2rem;
    color: #0b2745;
    background-color: #fff;
    border-radius: 4px;
    padding: 4px
}

.choose-list .item span {
    font-size: 1rem;
    font-weight: 500
}

@media(max-width:992px) {
    .choose-section {
        flex-direction: column
    }

    .choose-image img {
        border-radius: 10px 10px 0 0
    }

    .choose-content {
        border-radius: 0 0 10px 10px;
        text-align: center
    }

    .choose-list {
        grid-template-columns: 1fr
    }
}

/* Section title */
.gallery-section {
    padding: 100px 0 240px 0;
    text-align: center
}

.gallery-section2 {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px
}

.gallery-section h2 {
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 50px
}

/* Gallery grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 15px
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    transition: all 0.3s ease
}

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

/* Custom layout pattern (1 col vs 2 col grouping) */
.gallery .item:nth-child(1) {
    grid-row: span 2
}

.gallery .item:nth-child(4) {
    grid-column: span 2
}

@media (max-width:992px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr)
    }

    .gallery .item:nth-child(1),
    .gallery .item:nth-child(4) {
        grid-column: span 2;
        grid-row: span 1
    }
}

@media (max-width:576px) {
    .gallery {
        grid-template-columns: 1fr
    }
}

.testimonial-section {
    text-align: center;
    padding: 80px 0
}

.testimonial-section h6 {
    color: #164a83;
    font-weight: 600;
    font-style: italic
}

.testimonial-section h2 {
    font-weight: 700;
    color: #0b2745;
    margin-bottom: 50px
}

/* Cards */
.testimonial-card {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    min-height: 330px
}

.testimonial-card.active {
    background-color: #164a83;
    color: #fff
}

.testimonial-card .quote {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #164a83
}

.testimonial-card.active .quote {
    color: #fff
}

.testimonial-card p {
    font-size: 0.95rem;
    color: #555
}

.testimonial-card.active p {
    color: #e7fff8
}

.testimonial-card img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    margin: 20px auto 10px;
    border: 3px solid #fff
}

.testimonial-card h5 {
    font-weight: 600;
    margin-bottom: 5px
}

.testimonial-card small {
    color: #888
}

.testimonial-card.active small {
    color: #dff5ef
}

/* Arrows */
.testimonial-nav {
    margin-top: 30px
}

.testimonial-nav button {
    background-color: #164a83;
    border: none;
    color: #fff;
    padding: 8px 12px;
    margin: 0 5px;
    border-radius: 4px;
    transition: all 0.3s ease
}

.testimonial-nav button:hover {
    background-color: #0b2745
}

@media (max-width:992px) {
    .testimonial-card {
        margin-bottom: 25px
    }
}

.contact-section {
    padding: 80px 20px
}

.contact-title h2 {
    font-size: 28px;
    font-weight: bold;
    color: #fff
}

.h5 {
    font-family: 'Brush Script MT', cursive;
    font-size: 32px;
    color: #5bb8df
}

.contact-info-box {
    background-color: #0b3562;
    padding: 30px;
    border-radius: 10px
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.info-item i {
    font-size: 20px;
    color: #062739;
    background-color: #31b4df;
    padding: 10px;
    border-radius: 5px;
    margin-right: 15px
}


a {
    font-size: 15px
}

@media (max-width:767px) {
    .contact-title h2 {
        font-size: 32px
    }
}

.service-btn {
    width: 152px;
    margin: 7px;
    font-size: 15px;
    padding: 10px;
    cursor: text;
    margin-top: 0
}

.btn1 {
    color: #fff;
    font-size: 12px;
    border-radius: 0;
    float: left;
    border: 3px solid #0b1c28;
    border-radius: 7px;
    text-align: center;
    background-color: #0ca684
}

.btn1 a {
    color: #fff
}

.btn1:hover {
    background-color: #122d40;
    color: #fff
}

.accordion .accordion-item {
    background-color: #062739;
    border: none;
    margin-bottom: 15px;
    border-radius: 6px;
    overflow: hidden
}

.accordion-button {
    background-color: #062739;
    color: #fff;
    font-weight: 600;
    padding: 18px 20px;
    font-size: 16px
}

.accordion-button:not(.collapsed) {
    background-color: #164a83;
    color: #fff
}

.accordion-body {
    background-color: #f8f9fa;
    color: #333;
    font-size: 15px
}

@media (max-width:767px) {
    .faq-heading h1 {
        font-size: 32px
    }

    .faq-rating {
        font-size: 36px
    }
}

.bg {
    background: url('../plumbing/bg.webp') center/cover no-repeat;
    color: #164a83;
    position: relative
}

.bg1 {
    background: url('../plumbing/bg1.webp') center/cover no-repeat;
    color: #164a83;
    position: relative
}

.footer {
    background-color: #042140;
    color: #fff;
    padding: 60px 0 20px;
    font-size: 15px
}

.footer h5 {
    color: #164a83;
    margin-bottom: 20px
}

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

.footer a:hover {
    color: #164a83
}

.footer .social-icons i {
    font-size: 18px;
    margin-right: 10px;
    color: #fff;
    transition: color 0.3s
}

.footer .social-icons i:hover {
    color: #164a83
}

.footer input[type="email"] {
    border-radius: 0;
    border: none;
    padding: 12px
}

.footer .btn-gold {
    background-color: #164a83;
    color: #fff;
    border: none
}

.footer .btn-gold:hover {
    background-color: #164a83
}

.footer-bottom {
    border-top: 1px solid #2ea0d3;
    padding-top: 15px;
    margin-top: 30px;
    font-size: 14px;
    text-align: center
}

.service-btn {
    width: 202px;
    margin: 7px;
    font-size: 15px;
    padding: 10px;
    cursor: text;
    margin-top: 0
}

.btn1 {
    color: #fff;
    font-size: 12px;
    border-radius: 0;
    float: left;
    border: 3px solid #0b1c28;
    border-radius: 7px;
    text-align: center;
    background-color: #164a83
}

.btn1 a {
    color: #fff
}

.btn1:hover {
    background-color: #5bb8df;
    color: #fff
}

.navbar-toggler {
    background-color: #0067d4
}

.title-text {
    color: #0ed6b2;
    font-size: 85px
}

/* Responsive Google Map */
.map-responsive-container {
    overflow: hidden;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    position: relative;
    height: 0
}

.map-responsive-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0
}

@media (max-width:950px) {
    .hero-section {
        padding: 80px 0 100px 0
    }
}


#service_year {
    float: left;
    width: 90%;
}

form.CUS input.subject {
    display: none;
}

input {
    width: 47%;
    padding: 1%;
    margin: 1%;
    height: 40px;
    float: left;
    border: #062739 1px solid;
    color: #062739;
    font-size: 14px;
    box-shadow: 3px 1px 8px #0000005e;
    background-color: #fff0;
    font-weight: bold
}