/* Main dark transparent layer */
.breadcrumb-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.58) 45%,
        rgba(0, 0, 0, 0.35) 100%
    );
    z-index: -1;
}

/* Soft premium depth layer */
.breadcrumb-area::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(0, 0, 0, 0.18) 55%,
        rgba(0, 0, 0, 0.42) 100%
    );
    z-index: -1;
    pointer-events: none;
}

/* Keep content above overlay */
.breadcrumb-area .container,
.breadcrumb-area .inner-content,
.breadcrumb-area .title,
.breadcrumb-area .breadcrumb-menu,
.breadcrumb-area .layer-outer {
    position: relative;
    z-index: 2;
}

/* Better text readability */
.breadcrumb-area .title h2 {
    color: #ffffff;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.breadcrumb-area .breadcrumb-menu ul li,
.breadcrumb-area .breadcrumb-menu ul li a,
.breadcrumb-area .breadcrumb-menu ul li i {
    color: #ffffff;
}

.breadcrumb-area .breadcrumb-menu ul li a:hover {
    color: #C0392B;
}

.breadcrumb-area .breadcrumb-menu ul li.active {
    color: #C0392B;
    font-weight: 600;
}

/* Sidebar service list with elegant auto ellipsis */
.adu-service-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adu-service-list li {
    margin-bottom: 10px;
}

.adu-service-list li a {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    background: #ffffff;
    color: #1E1E1E;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 8px;
    border-left: 4px solid #123C73;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}

.adu-service-list li a span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.active_service{
    background: #123C73 !important;
    color: #ffffff !important;
    border-left-color: #C0392B !important;
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(18, 60, 115, 0.22);
}

.adu-service-list li a:hover {
    background: #123C73;
    color: #ffffff;
    border-left-color: #C0392B;
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(18, 60, 115, 0.22);
}

.adu-service-list li a:hover span {
    color: #ffffff;
}

.layer-outer img{
    max-width: 225px;
    max-height: 255px;
}


/* responsive */

@media (max-width: 768px) {

    .banner-left-content h2,
    .breadcrumb-area .title h2{
        font-size: 38px;
    }

    .banner-left-content h3{
        font-size: 30px;
    }
    

    .service-style1-area .title h2,
    .choosing-left-content .title h2,
    .sec-title h2, .latest-project-style1-title h2,
    .project-style1-contact-info .left h2,
    .plumbing-service-text-box .title h2,
    .choose-style2-content h2,
    .service-page-area .title h2,
    .style1-contact-info .left h2,
    .sec-title h2, .contact-page-title h2,
    .services-details-text-box-1 h2 {
        font-size: 30px;
    }

}

@media (max-width: 426px) {
    .banner-left-content h2,
    .breadcrumb-area .title h2{
        font-size: 33px;
    }

    .banner-left-content h3{
        font-size: 27px;
    }

    .service-style1-area .title h2,
    .choosing-left-content .title h2,
    .sec-title h2, .latest-project-style1-title h2,
    .project-style1-contact-info .left h2,
    .plumbing-service-text-box .title h2,
    .choose-style2-content h2,
    .service-page-area .title h2,
    .style1-contact-info .left h2,
    .sec-title h2, .contact-page-title h2,
    .services-details-text-box-1 h2,
    .adu-project-seo-header h2,
    .adu-project-local-seo-box h3 {
        font-size: 27px !important;
    }


}

@media (max-width: 376px) {
    .banner-left-content h2,
    .breadcrumb-area .title h2{
        font-size: 28px;
    }

    .banner-left-content h3{
        font-size: 23px;
    }

    .service-style1-area .title h2,
    .choosing-left-content .title h2,
    .sec-title h2, .latest-project-style1-title h2,
    .project-style1-contact-info .left h2,
    .plumbing-service-text-box .title h2,
    .choose-style2-content h2,
    .service-page-area .title h2,
    .style1-contact-info .left h2,
    .sec-title h2, .contact-page-title h2,
    .services-details-text-box-1 h2,
    .services-details-text-box-2 .text-box h3,
    .service-details-faq-box .title h3,
    .adu-project-overview-content h2, .adu-project-detail-page
     .text-holder .blog-title,
     .adu-project-seo-header h2,
     .adu-project-aeo-content h3, .adu-project-internal-links h3,
      .adu-project-faq-mini h3, .adu-project-local-seo-box h3,
      .single-blog-style2 .img-holder .date-box h2 {
        font-size: 23px !important;
    }

    .slogan-content .left .title h2{
        font-size: 22px;
    }
}

@media (max-width: 320px) {
    .banner-left-content h2,
    .breadcrumb-area .title h2{
        font-size: 23px;
    }

    .banner-left-content h3 {
        font-size: 19px;
    }

    .service-style1-area .title h2,
    .choosing-left-content .title h2,
    .sec-title h2, .latest-project-style1-title h2,
    .project-style1-contact-info .left h2,
    .plumbing-service-text-box .title h2,
    .choose-style2-content h2,
    .service-page-area .title h2,
    .style1-contact-info .left h2,
    .sec-title h2, .contact-page-title h2,
    .services-details-text-box-1 h2,
    .adu-project-overview-content h2, .adu-project-detail-page
     .text-holder .blog-title,
     .adu-project-seo-header h2,
     .adu-project-local-seo-box h3 {
        font-size: 19px !important;
    }

    .banner-left-content ul li{
        font-size: 17px;
    }

    .home-cta{
        display: flex !important;
        flex-direction: column !important;
    }

    .slogan-content .left .title h2,
    .choosing-left-content .title p,
    .professional-servies-tab-content h3,
    .america-adu-map-content h3,
    .services-details-text-box-2 .text-box h3,
    .service-details-faq-box .title h3,
    .adu-project-aeo-content h3, .adu-project-internal-links h3,
     .adu-project-faq-mini h3{
        font-size: 18px !important;
    }

    .accordion-box .accordion .accord-btn h4,
    .adu-project-overview-content .single-text h3,
    .single-blog-style2 .img-holder .date-box h2{
        font-size: 16px !important;
    }

    .header-top-left .logo a img{
        width: 150px;
    }

    .why-choose-area{
        padding-top: 80px !important;
    }

}