.page-main {
        padding-top: 150px;
        padding-bottom: 120px;
        position: relative;
        background: var(--gray-color);
}

.counter-total h3 {
        font-size: 40px;
        margin: 0;
}

.col-service-box {
        min-height: 300px;
        max-height: 300px;
        padding: 30px;
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        display: flex;
        align-items: flex-end;
        text-decoration: none !important;
        color: #fff;
}

.service-box-text {
        overflow: hidden;
        transition: all 0.5s ease-in-out !important;
        transform: translateY(60%);
}
.col-service-box:hover  .service-box-text {
        transition: all 0.5s ease-in-out !important;
        transform: translateY(0px);
}


.service-bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        transition: transform 1s ease, opacity .5s ease .25s;
        transform: scale(1);
        z-index: -1;
}

.col-service-box:hover .service-bg {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transition: transform 9s cubic-bezier(.1, .2, .7, 1);
}

.service-bg::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(15, 15, 15, 0), rgba(15, 15, 15, .75) 100%);
        transition: opacity .65s cubic-bezier(.05, .2, .1, 1);
        opacity: 0;
}

.col-service-box:hover .service-bg::after {
        background: linear-gradient(30deg, #F53803aa 0%, #F5D02050 100%);
        opacity: 1;
}

.box-img-head img {
        filter: invert(1);
        width: 45px;
        height: 45px;
        margin-bottom: 10px;
        transition: opacity 0.3s;
}

.col-service-box:hover img {
        opacity: 0;
}

.box-img-head h3 {
        color: #fff;
}

.box-descrip {
        margin: 0 !important;
        transform: translatey(100%);
        transition: all 0.5s ease-in-out;
        color: #fff;
        height: 155px;
}

.col-service-box:hover .box-descrip {
        transform: translatey(0px);
        transition: all 0.5s ease-in-out;
}

.services-form {
        background: linear-gradient(to right, var(--primary-bg), var(--primary-bg)) padding-box, linear-gradient(45deg, #ffc806 0%, #f44336 100%) border-box !important;
        border: 2px solid var(--border-color);
        border-radius: 10px !important;
        padding: 30px;
        position: sticky;
        top: 100px;
}

ol.category-list {
        padding: 0;
        margin-bottom: 25px;
        list-style: none;
        counter-reset: list-number;
}

ol.category-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 5px 0;
}

ol.category-list li a {
        color: var(--primary-color);
        font-weight: 500;
        text-decoration: none !important;
}

ol.category-list li:before {
        counter-increment: list-number;
        content: counter(list-number);
        width: 18px;
        height: 18px;
        font-size: 10px;
        font-weight: 500;
        border: 1px solid var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
}
.wiki-inner-page-a {
        color: #000;
        text-decoration: none;
    }

/* Accordion */
.services-faqs .accordion-button:not(.collapsed) {
        color: var(--secondary-color);
        background-color: var(--secondary-bg);
        box-shadow: none !important;
        outline: none !important;
}
.services-faqs .accordion-button {
        color: var(--primary-color);
        background-color: var(--gray-color);
        box-shadow: none !important;
        outline: none !important;
}
.services-faqs .accordion-button::after {
        content: "\f078";
        font-family: 'Font Awesome 5 Pro';
        font-display: swap;
        font-weight: 500;
        transform: none !important;
        background: none;
}
.services-faqs .accordion-button:not(.collapsed)::after {
      content: "\f077";
}

/* End of Accordion */
@keyframes dash {
        to {
                stroke-dashoffset: 0;
        }
}

@keyframes filling {

        0%,
        90% {
                fill: #bac736;
                fill-opacity: 0;
        }

        100% {
                fill: #bac736;
                fill-opacity: 1;
        }
}
@media (min-width: 0px) and (max-width: 999px){
        .page-main {
                padding-top: 100px;
        }
        section.page-main.side-space.section-gap .row.align-items-center {
                gap: 50px;
         }
         .page-counter-sec {
                display: none   ;
         }
         .row.section-mian-boxxes {
                background-image: initial !important;
                padding: 0px !important;
                padding-right: 0px !important;
                margin-bottom: 0px !important;
                display: flex;
                flex-wrap: nowrap;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: scroll;
            }
            body .image-cover img {
                display: block;
            }
            body .row.section-mian-boxxes p {
                position: absolute !IMPORTANT;
                padding: 0px 20px !IMPORTANT;
                z-index: 9 !important;
                text-align: center !important;
                width: 100% !IMPORTANT;
                top: calc(50% - 50px) !IMPORTANT;
                display: flex !IMPORTANT;
                justify-content: center !important;
                align-items: center !important;
                right: 0 !important;
                left: 0 !IMPORTANT;
                height: 100px !important;
                margin-bottom: 0 !IMPORTANT;
            }
            .row.section-mian-boxxes .col-md-4 {
                margin-bottom: 0 !important;
                padding: 0px 15px !important;
                width: fit-content !important;
                padding-right: 0px !important;
            }
            .row.section-mian-boxxes p:after {
                display: none !important;
        }
        body .row.big-boxex-greycolor .baccolor {
                width: 100%;
            }
            .row.section-mian-boxxes .col-md-4 .image-cover {
                position: relative !IMPORTANT;
                width: 250px !IMPORTANT;
            }
            .row.big-boxex-greycolor .col-md-4 {
                width: 100% !IMPORTANT;
            }
           body .row.big-boxex-greycolor {
                flex-wrap: wrap !important;
                overflow-x: hidden !IMPORTANT;
            }

}