/* Import CSS Variables */
@import url('variables.css');

/* ========================================
    Hero CSS
     ======================================== */

.b2b-service-hero__container{
    background: url("../assets/backgrounds/bg-b2b-service.svg") center/cover no-repeat;
}


/* ========================================
    Pricing table CSS
     ======================================== */

.service-pricing .pricing-toggle.billing-wrapper {
    padding: var(--spacing-30);
}

.service-pricing .pricing-toggle .bill-label.active{
    background-color: transparent !important;
    color: var(--title-color);
}

.service-pricing .pricing-toggle .bill-label .toggle-number{
    background-color: var(--color-bg-secondary-dark);
    border-radius: 50%;
    height: 63px;
    width: 63px;
}

.service-pricing .pricing-toggle .bill-label.active .toggle-number{
    background-color: var(--color-brand-green-primary);
}

@media screen and (max-width: 991.98px) {

    .service-pricing .pricing-toggle .bill-label .toggle-number{
        height: 50px;
        width: 50px;
    }

}

/* ========================================
    Service Features CSS
     ======================================== */

.service-features .black-pills .squarePill{
    position: relative;
    border: none !important;
    color: var(--title-color) !important;
    padding: var(--spacing-24) var(--spacing-36);
}

.service-features .black-pills .squarePill.active{
    background-color: var(--color-brand-green-alpha-10) !important;
    border-radius: 0px 24px 24px 0px;
}

.service-features .black-pills .squarePill.active:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../assets/images/sections/service-active-tab.svg");
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 991.98px) {

    .service-features .black-pills .squarePill{
        padding: var(--spacing-20) var(--spacing-24);
    }

}

.how-it-works .service-icon{
    max-width: 75px;
}

/* ========================================
    Service table CSS
     ======================================== */

.service-table .compare-table table tr th{
    background-color: var(--color-text-white) !important;
    border-bottom: 2px solid var(--color-brand-green-primary);
}

.service-table .compare-table table tr td{
    background-color: var(--color-text-white) !important;
}

.service-video-slider .commanDots .swiper-pagination-bullet{
    background-color: var(--color-text-light-white);
}

.service-video-slider .commanDots .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--color-brand-green-primary);
}

.service-video-grid{
    padding: var(--spacing-36) var(--spacing-24);
}

.service-table .compare-table table .sub-table-data .highlight-column {
    background-color: var(--title-color) !important; /* your dark color */
}