.achievement-section,
.pricing-section,
.service-section {
    width: 100%;
    height: fit-content;
    background-color: var(--violet-blue);
    border-radius: 60px;
    position: relative
}

.achievement-section::after,
.pricing-section::after,
.service-section::after {
    position: absolute;
    content: '';
    width: 30%;
    height: 30%;
    top: -45px;
    left: 0;
    background-image: url('../images/serviceback.png');
    background-repeat: no-repeat;
    z-index: -1
}

.service-card-content h3,
.service-title h2 {
    color: #fff !important
}

.service-card-content p,
.service-desc p {
    color: var(--white);
    font-family: var(--secondary_font) !important;
    line-height: 30px;
    font-weight: 400;
}


.service-card-group {
    border-top: 1px solid #fffFFF1A;
    margin-top: 40px
}

.service-card-group .row {
    padding-top: 40px
}

.service-card {
    background-color: #132634;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.service-card-content {
    padding: 30px 30px 0
}

.service-card-img-div {
    width: 100%;
    height: 200px;
    padding: 0 15px 15px
}

.service-card-img-div img {
    width: 100%;
    height: 100%;
    background-size: cover;
    object-fit: cover;
    object-position: top;
}

.overlay-content {
    content: '';
    width: 90px;
    height: 90px;
    background-color: var(--violet-blue);
    padding: 12px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -10%;
    opacity: 0
}

.orange-content {
    width: 100%;
    height: 100%;
    background-color: var(--orange);
}

.service-card:hover {
    background-color: #fff;
    border-bottom-left-radius: 170px !important;
    border-bottom-right-radius: 170px !important;
    transition: .3s cubic-bezier(.19, 1, .22, 1);
    background-image: url('../images/service-hover-star.png');
    background-repeat: no-repeat;
    background-position-x: 100%;
}

.service-card:hover .service-card-img-div img {
    border-bottom-left-radius: 160px !important;
    border-bottom-right-radius: 160px !important;
    transition: .3s cubic-bezier(.19, 1, .22, 1);
}

.service-card:hover .service-card-content>*,
.service_page_section .service-card-content h3,
.service_page_section h2 {
    color: #000 !important;
}

.service_page_section .prefix span {
    padding: 0 4px;
}

.service-card:hover .service-card-content>* {
    color: var(--grey) !important;
}

.service-card:hover>.overlay-content {
    opacity: 1;
    transition: .3s cubic-bezier(.19, 1, .22, 1);
}

.service_page_section {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
}

.service_page_section p {
    color: var(--grey) !important;
}

.service_page_section .service-card {
    background-color: #fff;
    box-shadow: 0 0 40px 0 rgba(170, 217, 243, .1);
}

.service_page_section .overlay-content {
    background-color: #fef7f8;
}

.service_page_section .service-card-group .row>* {
    margin-bottom: 50px;
}

.service_page_section .service-card-group .row {
    padding-top: 0;
}

@media (min-width:1399px) {

    .service-section .row>.prefix,
    .service-section .row>.service-main-title-group {
        padding: 0 !important;
    }
}

@media (max-width:1199px) {
    .service-card-group .row {
        gap: 30px 0;
    }
}

@media (max-width:991px) {

    .achievement-section,
    .pricing-section,
    .service-section {
        border-radius: 30px;
    }

    .service-card-content {
        padding: 15px 15px 0;
    }

    .service-card-group .row>div:not(:last-child) {
        margin-bottom: 20px;
    }

    .service-main-title-group,
    .testimonial-main-title-group,
    .title-group {
        flex-direction: column;
        text-align: center;
    }

    .service-section .prefix span,
    .service_page_section .prefix span,
    .why-brandvista .prefix span {
        text-align: center;
    }

    .service-desc p {
        width: 100%;
        max-width: 735px;
        margin: 0 auto;
    }

    .accordion{
        display: block !important;
    }
}

@media (max-width:767px) {
    .service_page_section {
        padding-bottom: 50px;
    }

    .service-card-content h3 {
        text-align: center;
        font-size: 22px !important;
    }

    .service-card-content p {
        text-align: center;
    }

    .service-card-img-div {
        height: auto;
    }

    .accordion{
        display: block !important;
    }
}

@media (max-width:575px) {

    .pricing-section::after,
    .service-section::after {
        width: 100%;
        top: -40px;
        left: -30px;
    }

    .service-card-content h3 {
        text-align: center;
        font-size: 22px !important;
    }

    .service-card-content p {
        text-align: center;
    }

    .accordion-body{
        display: block;
    }

    .accordion{
        display: block !important;
    }
}