.service-container .service-item{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
 }
 .service-item h2{
     color: var(--colory-primary);
     margin-bottom: 1.5rem;
 }
 .service-item .items .servic_boxs{
    width: 100%;
    display: flex;
    align-items: center;
    background: #F2FBF7;
    border-radius: 4px;
    text-align: center;
    padding: 1.2rem;
    border: 1px solid #E4E8EE;
    gap: 1rem;
    margin-bottom: 0.5rem;
    color: var(--colory-black);
 }
 .service-item .items .servic_boxs h5{
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
 }
 .service-item .items .servic_boxs p{
     flex-basis: 20%;
 }
 .service-item .items .servic_boxs img{
     height: 36px;
     object-fit: cover;
 }
 .service-item .items .servic_boxs:hover{
    background: var(  --colory-primary);
    color: var( --colory-white) !important;
    transition: var(--transition);
 }
 .activeServic{
    background: var(  --colory-primary) !important;
    color: var( --colory-white) !important;
 }
 .service-item .right-content{
     margin-top: 0.4rem;
 }
 .service-item .right-content .cards{
     display: none;
 }
 .service-item .right-content .servic-0{
     display: block;
 }
 .service-item .right-content .cards .cards__image{
     height: 320px;
 }
 .service-item .right-content .cards .cards__descprition{
    text-align: justify;
    margin-top: 0.75rem;
}

@media only screen and (max-width: 1024px) {
    .service-container .service-item {
        grid-template-columns: 1fr 1.2fr;
    }
}

@media only screen and (max-width: 820px) {
    .service-container .service-item {
        grid-template-columns: 1fr  ;
    }
}