.maintenance-service-type::before {
    top: 8px;
    content: "exterior" !important;
    position: absolute;
    left: 8px;
    background: var(--grey-main, rgb(49, 93, 239)) !important;
    font-family: Manrope;
    font-size: 8px;
    font-weight: 600;
    line-height: 8px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 4px;
    color: var(--grey-white, #FFF);
}

.maint::before {
    background: var(--secondary-main, rgb(49, 93, 239)) !important;
    content: "Exterior" !important;
}

.gallery_section .gl-filter {
    /* flex: 0 0 25%; */
    flex: 0 0 26%;
    border-right: 1px solid var(--grey-100, #E9EBF7);
}

.gallery_section div#ml-gl-images {
    display: unset;
    width: 100%;
    position: relative;
}

.gallery_section .gl-item img:first-child {
    border-right: 2px solid #fff;
}

.gallery_section .gl-item:before,
.gallery_section .gl-item:after {
    position: absolute;
    top: 8px;
    font-family: Manrope;
    font-size: 8px;
    font-weight: 600;
    line-height: 8px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 4px;
    color: var(--grey-white, #FFF);
}

.gallery_section .gl-item:before {
    content: "before";
    position: absolute;
    left: 8px;
    background: var(--grey-main, #292B34);
}

#galleryonpage .exteriormaindiv.itemimg.gl-item:before{
    left:118px;
}
.gallery_section .exteriormaindiv.itemimg.gl-item:before{
    /* left:85px; */
    left:118px;
}
.gallery_section .gl-item:after {
    content: "after";
    position: absolute;
    right: 8px;
    background: var(--secondary-main, #F81);
}

.gallery_section .gl-item {
    position: relative;
}

.gallery_section .gl-filter .filters h4,
.gallery_section .filterblock {
    font-family: Manrope;
    font-size: 14px;
    line-height: 20px;
}

.gallery_section div#ml-gl-images h2 {
    color: var(--text-main, #111527);
    font-family: Manrope;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.gallery_section .gl-filter h3 {
    color: var(--text-main, #111527);
    font-family: Manrope;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.gallery_section .gl-filter .filters h4 {
    margin: 16px 0 8px 0px;
    color: var(--text-500, #363D5A);
    font-weight: 700;
}

.gallery_section .filterblock {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-main, #111527);
    font-weight: 400;
    flex-wrap: wrap;
}

.gallery_section .filterblock .child-filter {
    width: 100%;
    padding-left: 20px;
}

.gallery_section .gl-item {
    display: flex;
    max-width: calc((100%/3) - 22px);
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
}

.gallery_section .gl-item img {
    width: calc(100%/2);
    object-fit: cover;
    height: 100% !important;
}

.gallery_section div#ml-gl-images h3 {
    width: 100%;
    margin: 0;
}

section.gallery_section {
    display: flex;
    margin-top: 24px;
    gap: 32px;
}

.page-id-482 header.page-header {
    display: none;
}

.gallery_section .btn.loadMoreBtn {
    border-radius: 8px;
    border: 1px solid var(--grey-200, #A9ABB7);
    background: var(--grey-white, #FFF);
    width: 240px;
    margin: 0 auto;
    text-align: center;
    padding: 16px;
}

.gallery_section .btn.loadMoreBtn span.loadMoreBtn-label {
    color: var(--text-main, #111527);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.gallery_section .btn.loadMoreBtn:hover {
    color: #fff;
    background: #4361ED;
    border-color: #4361ED;
}

.gallery_section .btn.loadMoreBtn:hover span.loadMoreBtn-label {
    color: #fff;
}

.gallery_section .filterblock label {
    line-height: 20px;
}

.gallery_loader_wrap {
    position: fixed;
    top: 15%;
    /* left: 13%; */
    left: 0;
    /* position: absolute; */
    width: 100%;
    height: 500px;
    background: #00000000;
    z-index: 9;
    border-radius: 10px;
    padding-top: 0;
    text-align: center;
    display: none;
}

.gallery_loader_wrap img.img_loader_gallery {
    animation: loaderBlog 2s infinite linear;
    max-width: 80px;
    height: 80px;
    width: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.gallery_load_more_btn {
    width: 100%;
    margin: 30px 0;
    text-align: center;
}

span.active_gallery_cat {
    border-radius: 2px;
    background: #E9EBF7;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Manrope', sans-serif;
    color: #111527;
    max-width: max-content;
    display: flex;
    gap: 4px;
    align-items: center;
    line-height: normal;
    margin-top: 10px;
    text-transform: uppercase;
}

span.active_gallery_cat span {
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 10px;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    position: relative;
    top: -1px;
}

.selected_gallery_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 5px;
}

button#load-more-button {
    border-radius: 8px;
    border: 1px solid #A9ABB7;
    background: #FFF;
    padding: 16px 70px;
    color: #111527;
    font-weight: 600;
    line-height: 24px;
    font-family: 'Manrope', sans-serif;
}

section.cnsult .consult_wrapper .img.car_img {
    /* margin: 0 0 -348px; */
    margin: 0 0 -55px;
    padding: 0;
}

section.gallery_section h3:last-child {
    width: 100%;
    text-align: center;
    font-size: 19px;
    font-family: 'Manrope', sans-serif;
}

div#inner_gallery_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.gallery_filters_head button#clear-filters-button {
    padding: 5px 9px;
    font-size: 14px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    background: transparent;
    border: 1px solid #292b34;
    color: #292b34;
    display: none;
}

.gallery_filters_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15px;
}

.before_after_grid_pop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
}

.gallery_popup {
    padding: 0;
    display: flex;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    align-items: center;
}

.before_after_grid_pop .gallery_popup__grid {
    width: calc(100%/2);
    display: flex;
    position: relative;
}

.before_after_grid_pop .gallery_popup__grid img {
    width: 100%;
    object-fit: cover;
    max-height: 80vh;
    min-height: 80vh;
}

/* .gallery_popup img.exterior_high_image {
    display: none;
} */
.gallery_popup_overlay {
    display: none;
    position: fixed;
    z-index: 99999999;
    background: #0000004a;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.gallery_popup__grid.before:before {
    content: 'Before';
    position: absolute;
    margin: 20px;
    background: var(--grey-main, #292B34);
    color: #fff;
    font-size: 20px;
    padding: 4px 15px;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
}

.gallery_popup__grid.after:after {
    content: 'After';
    position: absolute;
    margin: 20px;
    background: var(--secondary-main, #F81);
    color: #fff;
    font-size: 20px;
    padding: 4px 15px;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    right: 0;
}

.gallery_popup a.close_popup {
    position: absolute;
    right: 30px;
    top: 50px;
    font-size: 22px;
    font-family: 'Manrope', sans-serif;
    color: #000;
    font-weight: 500;
}

.gallery_popup a.popup_nav {
    color: #000;
    font-size: 60px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    margin: 0 20px;
}

@media only screen and (max-width:768px) {
    .gallery_section .gl-item {
        height: 150px;
        object-fit: cover;
    }

    .gallery_section div#ml-gl-images {
        gap: 16px;
    }
}

@media only screen and (max-width:576px) {
    .gallery_popup__grid.before:before{
        right:0;
    }
    .gallery_section .gl-item {
        /* max-width: calc(100% - 22px); */
        max-width: 100%;
    }
    .before, .after{
        border-bottom: 1px solid #fff;
    }
    .exterior{
        border-top: 1px solid #fff;
    }
    .before_after_grid_pop {
        display: grid;
    }

    .before_after_grid_pop .gallery_popup__grid {
        width: 100%;
    }

    .before_after_grid_pop .gallery_popup__grid img {
        max-height: 200px;
        min-height: 200px;
        width: 262px;
        /* padding-left: 3px; */
        /* box-shadow: 0px 2px 0px #f0f0f0; */
         border-bottom: 2px solid #f0f0f0; 
    }

    .gallery_popup a.close_popup {
        top: 150px;
        color: #b5610c;
    }
}

@media only screen and (min-width:576px) and (max-width:768px) {
    .gallery_section .gl-item {
        max-width: calc((100%/2) - 22px);
    }
}

.fancybox-content img {
    height: 375px;
    max-width: unset;
    width: 500px;
}

/* Exterior Div */
.exteriormaindiv {
    /* flex-direction: column; */
    /* height: 180px !important; */
    gap: 2px;
}

.exteriordiv {
    /* height: calc(100% / 2) !important; */
}

.exteriordiv img {
    width: 100% !important;
    object-fit: cover !important;
    border-right: 0 !important;
}

.exteriorbelowdiv {
    display: flex;
    flex-direction: row;
    gap: 2px;
    flex-grow: 0;
    border-right: 0 !important;
}

.exteriorbelowdiv img {
    flex-basis: 50%;
    flex-grow: 1;
    flex-shrink: 1;
    width: calc(100% / 2);
    object-fit: cover;
    border: 0 !important;
}

.exteriormaindiv::before,
.exteriormaindiv::after {
    top: 100px !important;
}
.exteriormaindiv .exteriordiv img{
   width:100%;
}
.exteriormaindiv::before, .exteriormaindiv::after{
  top:8px !important;
}
div.open_gallery_popup:hover {
    cursor: pointer;
}

.gallery_popup__grid.exterior:after {
    content: 'Exterior';
    position: absolute;
    margin: 20px;
    background: var(--secondary-main, rgb(49, 93, 239));
    color: #fff;
    font-size: 20px;
    padding: 4px 15px;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    right: 0;
}

.gallery_section .gl-item .exteriordiv::before {
    top: 8px;
    content: "exterior";
    position: absolute;
    left: 8px;
    background: var(--grey-main, rgb(49, 93, 239));
    font-family: Manrope;
    font-size: 8px;
    font-weight: 600;
    line-height: 8px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 4px;
    color: var(--grey-white, #FFF);
}

.gallery_popup {
    background: #d2c6c6;
}

/* #f7f3f3; */
/* .gallery_popup__grid img{ border: 3px solid #faecec; } */
/* .gallery_popup__grid.before img{ padding-right: 3px;} */
.gallery_popup__grid.after img {
    /* padding-left: 3px; */
}

.gallery_popup__grid.exterior img {
    /* padding-left: 3px; */
}

#locationDiv h4 {
    margin: 16px 0 8px 0px;
    color: var(--text-500, #363D5A);
    font-weight: 700;
    font-family: Manrope;
    font-size: 14px;
    line-height: 20px;
}
#locationDiv select{
    width: 96%;
}
/*  CSS for filters on page */

/* Container for dropdowns */
#filtersonpage .container {
    display: flex;                /* Use flexbox to arrange the dropdowns horizontally */
    gap: 20px;                    /* Space between dropdowns */
    justify-content: center;      /* Center align the dropdowns horizontally */
}

/* Dropdown wrapper */
#filtersonpage .dropdown {
    width: 260px;                /* Set a fixed width for each dropdown */
    margin-bottom: 0;            /* Remove margin-bottom since we're using flex */
}

/* Dropdown label */
#filtersonpage label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: bold;
}

/* Dropdown button */
#filtersonpage .dropdown-btn, #filtersonpage .dropdown-search {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #A9ABB7;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    text-align: left;
    position: relative;
    color: #000;
}

/* Dropdown options container */
#filtersonpage .dropdown-list {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Hidden by default */
#filtersonpage .dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1;
    max-height: 150px;
    overflow-y: auto;
}

/* Show the dropdown options when active */
#filtersonpage .dropdown.active .dropdown-options {
    display: block;
}

/* Style individual option labels */
#filtersonpage .dropdown-options label {
    display: block;
    padding: 8px;
    font-size: 14px;
}

#filtersonpage .dropdown-options input[type="checkbox"] {
    margin-right: 10px;
}

/* Hover effect for options */
#filtersonpage .dropdown-options label:hover {
    background-color: #f0f0f0;
}

/* Styling for the button when the dropdown is open */
#filtersonpage .dropdown.active .dropdown-btn{
    border-color: #007BFF;
    background-color: #e9f7ff;
}
#filtersonpage{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}    
.ml-gl-filter-class{
  position: absolute !important;
  background: white !important;
  z-index: 999 !important;
  width: 100% !important;
}
#hamburger-button { display: none; outline: none;}
    #close-panel-button{ display:none; padding: .2rem .5rem;
    font-size: .8rem; }  

    @media only screen and (max-width: 540px) {
            #hamburger-button { display: block; }
            #ml-gl-filter{ display:none; }
            #close-panel-button{ display:block; }
            #hamburger-button {
                background: none;
                border: none;
                font-size: 24px; /* Adjust size as needed */
                cursor: pointer;
                margin-left: 10px;
                color: #000;
                top: -5px;
                position: absolute;
                right: 5px;
            }

            #filter-menu {
                display: block; /* Initially hidden */
            }

            #filter-menu.open {
                display: block; /* Show when open */
            }
            #hamburger-button:hover, #hamburger-button:active {
                transform: rotate(90deg);
                color: #000;
                }
    }
    /* .dropdown-list:not(.galzipcl)::after {
        position: absolute;
        content: ">";
        top: 12%;
        transform: rotate(90deg);
        right: 15px;
        font-weight: 400;
        font-size: 22px;
    } */
    .dropdown-icon{
            position: absolute;
            right: 2%;
            line-height: 40px;
            transform: rotate(90deg);
            font-size: 12px;
            font-weight: 500;
            right: 15px;
            cursor: pointer;
    }

    .dropdown-icon::before{
        /* content: ">"; */
        content: "\276F";

    }
          /* Popup container */
          .popup-container {
            display: none; /* Hidden by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            width: 480px;
            height: 400px;
            padding: 30px 20px;
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
        }

        /* Overlay for the popup */
        .popup-overlay {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Buttons */
        .popup-button {
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            font-family: "Manrope";
            line-height: 24px;
            font-weight: 600;
        }

        .popup-button.white {
            background-color: #fff;
            color: #000;
            border: 1px solid #ccc;
        }

        .popup-button.blue {
            background-color: #4361ED;
            color: #fff;
            border: none;
        }
       .popup-container h2.pop-heading {
        font-family: "Manrope";
        line-height: 32px;
        font-weight: 700;
        font-size: 24px;
        text-align: center;
        padding-top: 20px;
       }
       .popup-container .pop-btns {
        margin: 20px;
        display: flex;
        flex-direction: row;
        gap: 16px;
    }
    #localgallery {
        scroll-margin-top: 250px;
    }
    a.resetbtn{ 
        color: #4361ED; 
        font-size: 16px; 
        font-family: "Manrope"; 
        font-weight: 600;
    }
    .restdiv{
        top: 8px;
    }
    .dropdown:last-child{
        width: 6% !important;
    }
/* Mobile device Gallery On Page CSS */
    @media only screen and (max-width: 540px) {
        button#load-more-button{
            width: 100%;
            padding: 8px 12px;
        } 
        .explore_work_res{ display: none; }
        /* Gallery Filters */
        #filtersonpage {
            flex-direction: column;
            gap: 5px !important;
        }
        #filtersonpage .dropdown {  
            width: 100% ;
        }
        .popup-button{
            padding: 20px 17px;
            line-height: 10px;
        }
        .popup-container p{
            padding: 0 20px;
        }
        .popup-container{
            width: 350px;
            height: 420px;
        }
        .pop-imgh{
            margin-top: 40px;
        }
        .dropdown:last-child{
            width: 100% !important;
        }
        .restdiv{
            text-align: center;
        } 
        /* .material { z-index: 100; } */
        h2.comp_services_caption {
            text-align: left; /* Ensure text aligns to the left */
            margin: 0; /* Remove unwanted default margins */
            padding: 0; /* Remove any padding */
            float: none; /* Reset float in case it conflicts */
            display: block; /* Ensure it's a block-level element */
            width: 100%;
          }
          
          .explore_services {
            justify-content: flex-start; /* Align the flex container to the left */
          }
        h2.galfilicon::after{
            font-family: "Font Awesome 6 Free"!important;
            content: "\f0b0";
            float: right;
            padding-right: 8px;
        }
        .explore_services .explore_services_container{
            margin: 0;
        }
        #filtersonpage{ margin-top: 0 !important; display: none; }
        .explore_all{ display: none; }
    
    }/*  Width 540 */

    /* Default styles for the section */
/* .explore_services {
  display: flex;
  gap: 32px;
  margin: 30px 0;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
} */

/* Heading styling */
.comp_services_caption {
  flex-grow: 1;
  margin: 0;
}


/* Mobile-specific styles */
@media (max-width: 768px) {
  .comp_services_caption {
    text-align: left; /* Align heading to the left */
    flex: 1;
  }

  #filtersonpage {
    margin-top: 20px; /* Ensure proper spacing for the filters when displayed */
    gap:10px;
  }
}
.comp_services_caption {
    font-family: "Volkhov", serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
    text-align: left;
    color: #111527;
    margin-bottom: 0;
  }
  button.explore_all {
    border-radius: 4px;
    border: 1px solid #a9abb7;
    background: #fff;
    padding: 8px 12px;
    color: #111527;
    font-family: Manrope;
    font-size: clamp(10px, 1.5vw, 14px);
    line-height: clamp(16px, 1.5vw, 20px);
    font-style: normal;
    font-weight: 600;
    height: fit-content;
  }
  .galfilterhead{
    width: 100%; 
    display: flex;
    margin-bottom: 20px;
  }
  /* Selected Items display */
  .selected-items {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selected-item {
    padding: 5px 10px;
    color: rgb(34, 33, 33);
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.remove-btn {
    margin-left: 8px;
    color: rgb(34, 33, 33);;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}




.dropdown-search{
    cursor: pointer;
}