.service-slider-sec { 
    display: inline-block;
    width: 100%;
    position: relative;
    padding-block: 100px 110px;
    max-width: 100%;
    overflow: hidden;
    & .bgimg {
        z-index: -1;
    }
    &::after { 
        content:"";
        position:absolute;
        height: 100%;
        width: 100%;
        inset: 0;
        background-color: #06101A;
        /* opacity: 0.7; */
        background: rgba(6, 16, 26, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px); /* Safari support */
    }
    & .container {
        position: relative; z-index: 2;
    }
    & .header_wrapper  { 
        & .heading-44, & p { 
            color: #fff;
        }
    }
}
.service-slider {
    width: calc(100% + 20px);
    margin-inline: -10px;
    & .slick-list { 
        overflow: visible;
    }
    & .slide-box {
         padding-inline: 10px;
    }
    &:not(.slick-initialized) {
        display: inline-flex;
        &>.slide-box:not(:nth-child(-n+4)) {
            display: none;
        }
        &>.slide-box {
         width:25%;
        }
    }
    &:has(.slick-arrow) {
        padding-bottom: 84px;
    }
    &.slick-slider .slick-prev {
        top: calc(100% - 22px);
        right: 60px;
        left: unset !important;
    }
    &.slick-slider .slick-next { 
        top: calc(100% - 22px);
        right: 0;
        left: unset !important;
    }
    & + .btnbar {
        display: flex;
        width: 100%;
        margin-top: -29px;
        position: relative;

        &::after { 
            width: calc(100% - 300px);
            content: '';
            height: 0;
            position: absolute;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            right: 120px; top: 50%;
        }
    }
}
.service-box {
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    
    & .service-box-body {
        padding:0 30px 22px;
        & .heading-22 {
            margin-bottom:12px;
            transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
        }
        & > p { font-size:16px; font-weight:500;}
    }
    & .img-wrap {
        position: relative;
        /* padding-top: 100%; */
        overflow: hidden;
        & > img { 
            transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
        }
    }

    &:hover { 
       & .img-wrap {
        & > img { 
            transform: scale(1.1);
            transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
        }
       }
       & .heading-22 { 
        color:var(--themecolor);
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
       }
    }
}

.icon-badge {
    height: 72px;
    width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    BORDER-RADIUS: 100%;
    MARGIN-TOP: -36PX;
    Z-INDEX: 1;
    position: relative;
}


.services-listing { 
    display: inline-flex;
    flex-wrap: wrap;
    width: calc(100% + 32px);
    margin-inline: -16px;
    row-gap: 32px;
    & .slide-box { 
        padding-inline: 16px;
        width: calc(100% / 3);
    }

    & .service-box { 
        border:1px solid #E1F0F2;
        height: 100%;
    }

}

/* -----------------------------------------------exceptional-electrical-services-sec------------------------------ */
.exceptional-electrical-services-sec { 
    position: relative;
    display: inline-block;
    width: 100%;
    padding-block: 100px 110px;
    max-width: 100%;
    overflow-x: clip;
    &::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        inset: 0;
        background-color: #06101A;
        /* opacity: 0.7; */
        background: rgba(6, 16, 26, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: -1;
    }

    & > .container {position: relative; z-index: 2;} 

    & .flex-container {
        justify-content: space-between;
        & .left-content-side { 
            width: 490px;

            & .heading-44 { 
                color:#fff;
            }
            & p { 
                color:#fff
            }
            & > .img-wrap:last-child { 
                margin-top: 75px;
            }
            & .btnlist {
                margin-top: 15px;
            }
        }
    }
}
.exceptional-services-wrapper {
    width: calc(100% - 490px);
    max-width: 930px;
    position: relative;
    &::after { 
        content: '';
        position: absolute; 
        height: 294px;
        width: 440px;
        max-width: 100%;
        right: 0;
        bottom: 0;
        background: transparent url(../images/icon/theme-dark-ark.svg) no-repeat center;
        background-size: contain;
        opacity: 0.1; filter: brightness(0) invert(1);
    }
    & > .btn_more { 
        margin-top: 15px;
    }
}
p.theme-color {
    color: var(--themecolor) !important;
    margin-bottom: 10px;
}

.exceptional-servicesTab { 
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;

    &::after { 
        content: '';

    }

    & .resp-tabs-list { 
        width: 375px;
        & > li { 
            display: inline-flex;
            align-items: center;
            width: 100%;
            padding-left: 0;
            font-size: 16px;
            &::after { 
                display: none;
            }
            &::before { 
                content: "";
                position: relative;
                left: unset;
                top: unset;
                width: 18px;
                height: 18px; min-width: 18px;
                z-index: 1;
                display: inline-block;
                margin-right: 10px;
                background: url(../images/icon/check-icon.svg) center center / auto no-repeat rgb(255, 255, 255);
                border-radius: 100%;
                transition: all ease-out 0.3s;
                -webkit-transition: all ease-out 0.3s;
                -moz-transition: all ease-out 0.3s;
                -ms-transition: all ease-out 0.3s;
            }
            &.resp-tab-active, &:hover { 
                &::before {
                    background-image: url(../images/icon/check-icon-theme.svg);
                    transition: all ease-out 0.3s;
                    -webkit-transition: all ease-out 0.3s;
                    -moz-transition: all ease-out 0.3s;
                    -ms-transition: all ease-out 0.3s;
                }
            } 
        }
        
    }

    & .resp-tabs-container { 
        width: calc(100% - 375px);
        max-width: 470px;
    }
}

.exceptional-services-box {
   display: inline-flex;
    flex-wrap: wrap;
    padding: 50px 75px 50px 95px;
    /* margin-left: 38px; */
    position: relative;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    z-index: 2;
    &::after { 
        content: "";
        height: 100%;
        width: 100%;
        background: url(../images/icon/bg-ark.svg) center center / contain no-repeat transparent;
        position: absolute;
        inset: 0px;
        opacity: 0.1;
        filter: brightness(0) invert(1);
        background-size: cover;
        background-position-x: left;
        z-index: -1;
    }
    & > .img-wrap {
        margin-bottom: 27px;
    }
    & > p { 
        color: #fff;
        font-weight: 500;
    }
    .heading-20 { 
        color: var(--themecolor);
        margin-bottom: 15px;
        width: 100%;
    }
}
/* -----------------------------------------------exceptional-electrical-services-sec------------------------------ */




@media (max-width: 1800px) {
 
}

@media (max-width: 1599.98px) { 
    .exceptional-electrical-services-sec {
        & .flex-container {
            & .left-content-side {
                width: 490px;
                padding-right: 30px;
            }
        }
    }
}

@media (max-width: 1439.98px) {
    .service-slider-sec, .exceptional-electrical-services-sec { 
        padding-block: 80px ;
    }
    .service-box {
        & .service-box-body {
            padding: 0 20px 22px;
        }
    }
    .exceptional-electrical-services-sec {
        & .flex-container {
            & .left-content-side {
                width: 30%;
                padding-right: 20px;
                & > .img-wrap:last-child {
                    margin-top: 25px;
                }
            }
        }
        & .exceptional-services-wrapper { 
            width: 70%;
            & > .btn_more {
                padding-left: 20px;
            }
        }
    }
    .exceptional-servicesTab {
        & .resp-tabs-list {
            width: 375px;
            padding-inline: 20px;
            & > li { font-size: 14px;} 
        }
    }
    
}


/* Extra Large devices (large desktops, less than 1440px) */

@media (max-width: 1199.98px) {
    .service-slider-sec, .exceptional-electrical-services-sec {
        padding-block: 60px;
    }
    .exceptional-electrical-services-sec {
        & .flex-container {
            flex-wrap: wrap;
            gap: 25px;
            & .left-content-side {
                width: 100%;
                padding-right: 0;
                max-width: 100%;

            }
            & .exceptional-services-wrapper {
                width: 100%;    
                max-width: 100%;
            }
        }
    }
    
    .services-listing { 
        width: calc(100% + 16px);
        margin-inline: -8px;
        row-gap: 16px; 
        & .slide-box { 
            padding-inline: 8px;
        }
    }
}

/* Medium devices (tablets, less than 992px) */

@media (max-width: 991.98px) {
   .exceptional-servicesTab {
        & .resp-tabs-list {
            width: 50%;
            padding-inline: 0 20px;
        }
        & .resp-tabs-container {  width: calc(50%); }
    }
    .exceptional-services-box {padding: 35px 30px 35px 70px; }
    .exceptional-electrical-services-sec .exceptional-services-wrapper {
        &:after {opacity: 0.05;}
        & > .btn_more {
            padding-left: 0px;
        }
    }

    .services-listing {  
        & .slide-box { 
            width: calc(100% / 2);
        }
    }
}

/* Small devices (landscape phones, less than 768px) */

@media (max-width: 767.98px) {
    .service-slider-sec, .exceptional-electrical-services-sec {
        padding-block: 40px 50px;
    }
    .exceptional-servicesTab {
        flex-wrap: wrap;
        & .resp-tabs-list {
            width: 100%;
            padding-inline: 0 20px;
            max-width: 100%; overflow: auto;
            white-space: nowrap;
            margin-bottom: 15px;
            & > li { 
                width: fit-content;
            }
        }
        & .resp-tabs-container {
            width: calc(100%);
            max-width: 100%;
            margin-bottom: 20px;
        }
    }
    .exceptional-services-box {
        border-radius: 10px;
        padding: 30px;
        &::after {
            background: #fff;
        } 
        & > .img-wrap {
            margin-bottom: 19px;
        }
    }
    .exceptional-electrical-services-sec .exceptional-services-wrapper {
        & > .btn_more {
            margin-top: 0px;
        }
    }
    .service-box {
        border-radius: 10px;
        & .img-wrap { 
            img { 
                min-height: 200px;
            }
        } 
    }
}

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
    .service-slider {
        width: calc(100% + 10px); margin-inline: -5px;
        & .slide-box {
            padding-inline: 5px;
        }
        &.slick-slider .slick-next {
            top: calc(100% - 22px);
            right: 15px;
            left: unset !important;
        }
    }
    .services-listing {
        justify-content: center;
        & .slide-box {
            width: calc(100%);
            max-width: 486px;
        }
    }
    
}



/* QA 31348: the design closes the services carousel with a rule across the container, the
   "View All Services" link on the left and the slider arrows on its right. The build reserved the
   84px of arrow space but drew neither. The footer sits inside that reserved space rather than
   adding height, so the section's rhythm is unchanged. */
/* QA 31371: the rule sat ABOVE the row as a border-top, so it read as a divider over the link
   rather than a line the link and arrows sit on. It is now a flex item on the same centre line as
   the text, starting after the link and stopping short of the arrows, which is the same arrangement
   the projects slider ended up with under 31359 / 31370. */
/* QA 31402: the arrows are absolutely positioned, so they are not flex items and align-items has
   no say over them. Their centre sat 12px below the link and the line, which is the misalignment
   QA measured against the design. The row's own padding moves it onto their centre line. */
.service-slider-sec .slider-footer {
    position: relative;
    margin-top: -68px;
    padding-top: 38px;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 46px;
}

.service-slider-sec .slider-footer::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.25);
    /* The arrows are absolutely positioned about 94px in from the right; clear them. */
    margin-right: 118px;
}

.service-slider-sec .slider-footer > .btn_more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

.service-slider-sec .slider-footer > .btn_more > i > img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease-in-out;
}

.service-slider-sec .slider-footer > .btn_more:hover,
.service-slider-sec .slider-footer > .btn_more:focus-visible {
    color: var(--themecolor);
}

.service-slider-sec .slider-footer > .btn_more:hover > i > img,
.service-slider-sec .slider-footer > .btn_more:focus-visible > i > img {
    filter: var(--filter-black-to-themecolor);
}

/* QA 31376: on a phone the rule reads as a stray line under the carousel rather than a divider, and
   the design puts "View All Services" there as a button rather than a text link. Desktop keeps the
   line; below 768px it goes, the spacing opens up, and the link becomes a button. */
@media (max-width: 767px) {
    /* .service-slider-sec .slider-footer {
        margin-top: 0;
        padding-top: 0;
        margin-top: 30px;
        border-top: 0;
        justify-content: center;
    } */

    /* 31376 kept the line off the FOOTER on phones, and that still holds: the footer is a centred
       button down here, and a rule running through it reads as a mistake. */
    /* .service-slider-sec .slider-footer::after {
        display: none;
    } */

    /* 31458: the design does draw a rule on a phone, but on the ARROWS' row and to their left, not
       through the button. Slick makes .slick-slider position:relative, so this hangs off the slider
       and lines up with the arrows. Measured rather than derived: calc(100% - 22px) puts the rule on
       the arrows' centre line (the arrow box's own top offset does not land where its 32px height
       suggests). Right edge stops 16px short of the first arrow, the same clearance the projects
       slider settled on in 31370 / 31380. */
    /* .service-slider-sec .service-slider.slick-slider::after {
        content: "";
        position: absolute;
        left: 5px;
        right: 108px;
        top: calc(100% - 22px);
        height: 1px;
        background-color: rgba(255, 255, 255, 0.25);
    } */

    /* .service-slider-sec .slider-footer > .btn_more {
        justify-content: center;
        padding: 14px 30px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 40px;
        
        text-decoration: none;
    } */

    .service-slider-sec .slider-footer > .btn_more:hover,
    .service-slider-sec .slider-footer > .btn_more:focus-visible {
        background-color: var(--themecolor);
        border-color: var(--themecolor);
        color: #fff;
    }
}