#hero {
    padding-top: 50px;
}

#hero .heading {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 50px;
}

#services {
    padding-bottom: 50px;
}

#services .bmx-container {
    display: flex;
    flex-direction: row;
    column-gap: 50px;
}

#services .service-groups {
    background-color: var(--color-dark);
    padding: 2px;
    border-radius: 10px;

}

#services .service-groups > div {
    padding: 15px;
    margin-bottom: 2px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

#services .service-groups > div:hover, #services .service-groups > div.active {
    background-color: var(--color-dark-100);
    color: var(--color-brand);
}

#services .service-detail {
    flex: 1;
}

#services .service-detail > div {
    display: none;

}

#services .service-detail .active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


#services .service-detail .gitem {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    background-color: var(--color-dark);
    padding: 15px 18px;
    border-radius: 10px;
}

#services .service-detail .gitem .la {
    color: var(--color-brand);
    font-size: 2.4rem;
}

#services .service-detail .gitem > div > div:nth-child(1) {
    font-weight: bold;
}

#services .service-detail .gitem > div > div:nth-child(2) {
    color: var(--color-text-fade);
    
}