#about-home {
    background-color: #121212;
    padding: 56px 16px;
}

#about-home img {
    width: 335px;
    height: 335px;
}

.img-to-the-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.img-to-the-right h3 {
    margin: 24px 0 0 0;
}

.img-to-the-right p {
    font-size: 16px;
    line-height: 32.4px;
}

.img-to-the-right button {
    font-family: "Cairo", sans-serif;
    border: none;
    background-color: #FEE002;
    border-radius: 29px;
    padding: 12px 24px;
    font-size: 20px;
    font-weight: 600;
    color: #121212;

}

.services-home {
    padding: 56px 20px;
    background-color: #232323;
}

.ser-home-heading {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #e6e6e6;
}

.switch {
    all: unset;
    padding: 12px 8px;
    color: #afb0b9;
    font-size: 14px;
    font-weight: 500;
}

.activated {
    border-radius: 12px 12px 0 0;
    color: #e6e6e6;
    background-color: #434343;
    font-weight: 600;
}

.toggles {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #AFB0B9;
}

.service-card-home {
    padding: 32px 24px;
    border-radius: 20px;
    margin-bottom: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.main-section-container {
    display: none;
    margin-top: 44px;
    margin-bottom: 56px;
}

.service-home-heading {
    margin-bottom: 20px;
}

.activated-section {
    display: block;
}

.more {
    all: unset;
    cursor: pointer;
}

.more-btn {
    display: flex;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #E6E6E6;

}

.more-btn img {
    width: 24px;
    height: 24px;
}

.services-home-btn {
    padding: 12px 24px;
    background-color: #FEE002;
    border-radius: 29px;
}

.services-home-btn button {
    border: none;
    background: none;
    font-family: "Cairo", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #121212;
}


@media screen and (min-width: 760px) {
    #about-home {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
    }

    .switch {
        padding: 16px 70px;
    }

    .main-section-container.activated-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .services-home-btn {
        display: block;
        width: 230px;
        margin: 0 auto;
    }
}


@media screen and (min-width: 1000px) {
    .main-section-container.activated-section {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #about-home {
        grid-template-columns: 1fr 1fr;
    }

    /* I made this change by my self it should be redesigned by UI/UX designer*/
    .switch {
        padding: 16px 120px;
    }
}