.title-section .title-wrapper {
    position: relative;
}

.title-section .title-wrapper svg {
    width: 100%;
    height: auto;
}

.title-section .subtitle-wrapper {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    background-color: #E8E8E6;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.title-section .subtitle-wrapper h1 {
    text-align: center;
}

.title-section .subtitle-wrapper p {
    text-align: center;
    margin-bottom: 0;
    font-size: 28px;
    font-family: 'Poppins-Bold';
}

.services-section .services-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 40px;
    padding-bottom: 40px;
}

.services-section .service-title {
    background-color: #131313;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 70px 40px;
    height: 250px;
    cursor: pointer;
    transition: all 300ms ease;
}

.services-section .service-title:hover {
    background-color: #F0684F;
}

.services-section .service {
    align-items: flex-start;
}

.services-section span {
    color: #FFF;
    font-family: 'Poppins-Bold';
    font-size: 50px;
    position: relative;
    line-height: 1.2;
    z-index: 1;
}

.services-section .service-title img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0.5;
    object-position: center;
    object-fit: cover;
    transition: all 300ms ease;
}

.services-section .service-title:hover img {
    opacity: 0.3;
}

.services-section .sub-services {
    display: none;
}

.services-section .subservices-grid {
    display: grid;
    row-gap: 10px;
    column-gap: 10px;
}

.services-section #incorp .subservices-grid {
    grid-template-areas: 'a a'
        'b e'
        'b e'
        'c e'
        'c f'
        'd f'
        'd f';
}

.services-section #cosec .subservices-grid {
    grid-template-areas: 'a a a'
        'b c d';
}

.services-section #taxation .subservices-grid {
    grid-template-areas: 'a a'
        'b d'
        'c e';
}

.services-section #accounting .subservices-grid {
    grid-template-areas: 'a a'
        'b e'
        'b e'
        'c e'
        'c f'
        'd f'
        'd f';
}

.services-section #audit .subservices-grid {
    grid-template-areas: 'a a'
        'b d'
        'c e';
}

.services-section #workpass .subservices-grid {
    grid-template-areas: 'a a'
        'b d'
        'c e';
}

.services-section #hr .subservices-grid {
    grid-template-areas: 'a a'
        'b e'
        'b e'
        'c e'
        'c f'
        'd f'
        'd f';
}

.services-section #trademark .subservices-grid {
    grid-template-areas: 'a a'
        'b b'
}

.services-section .subservices-grid .service-details {
    cursor: pointer;
}

.services-section .subservices-grid a {
    border-radius: 20px;
    font-family: 'Poppins-Bold';
    font-size: 20px;
    color: #000000;
    height: 100%;
    position: relative;
}

.services-section .subservices-grid a img {
    position: absolute;
    top: 15px;
    right: 15px;
}

.services-section .subservices-grid .a {
    grid-area: a;
    background-color: #F0684F;
    border-radius: 20px;
}

.services-section .subservices-grid .a .detail-title {
    color: #FFF;
    font-family: 'Poppins-Bold';
    font-size: 50px;
    line-height: 1.2;
}

.services-section .subservices-grid .a .detail-desc {
    color: #FFF;
}

.services-section .subservices-grid .b {
    grid-area: b;
    background-color: #DAD5CB;
}

.services-section .subservices-grid .c {
    grid-area: c;
    background-color: #DAD5CB;
}

.services-section .subservices-grid .d {
    grid-area: d;
    background-color: #DAD5CB;
}

.services-section .subservices-grid .e {
    grid-area: e;
    background-color: #BEABA4;
}

.services-section .subservices-grid .f {
    grid-area: f;
    background-color: #AABDBF;
}

.services-section #cosec .subservices-grid .c,
.services-section #audit .subservices-grid .e,
.services-section #taxation .subservices-grid .e {
    background-color: #AABDBF;
}

.services-section #audit .subservices-grid .d,
.services-section #taxation .subservices-grid .d,
.services-section #cosec .subservices-grid .d {
    background-color: #BEABA4;
}

@media screen and (max-width: 989px) {
    .services-section span,
    .services-section .subservices-grid .a .detail-title {
        font-size: 30px;
    }

    .services-section .service-title {
        padding: 30px;
        height: 150px;
    }

    .services-section .services-wrapper {
        grid-template-columns: 1fr;
    }

    .services-section #incorp .subservices-grid {
        grid-template-areas:
            'a a'
            'b b'
            'c c'
            'd d'
            'e e'
            'f f';
    }

    .services-section #cosec .subservices-grid {
        grid-template-areas:
        'a a a'
        'b b b'
        'c c c'
        'd d d';
    }

    .services-section #taxation .subservices-grid {
        grid-template-areas:
            'a a'
            'b b'
            'c c'
            'd d'
            'e e';
    }

    .services-section #accounting .subservices-grid {
        grid-template-areas:
        'a a'
        'b b'
        'c c'
        'd d'
        'e e'
        'f f';
    }

    .services-section #audit .subservices-grid {
        grid-template-areas:
            'a a'
            'b b'
            'c c'
            'd d'
            'e e';
    }

    .services-section #workpass .subservices-grid {
        grid-template-areas:
            'a a'
            'b b'
            'c c'
            'd d'
            'e e';
    }

    .services-section #hr .subservices-grid {
        grid-template-areas:
            'a a'
            'b b'
            'c c'
            'd d'
            'e e'
            'f f';
    }
}