.services_container{
    --gap-size: 2rem;
    display: grid;
    gap: 0;
}
.services_container strong{
    color: var(--white);
}
.service_toggler,
.service_toggler.toggler{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-content: center;
    align-items: center;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    color: var(--black);
    transition: var(--transition);
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: var(--gap-size);
}
.service_toggler.toggler::after {
    font-size: 2rem;
    right: 0.5rem;
}
.service_toggler .img_container{
    overflow: hidden;
}
.service_toggler img{
    transition: var(--transition);
}
.service_title{
    text-align: left;
    font-weight: 600;
    font-size: 1.8rem;
    padding: 0 2.5rem 0 0.5rem;
}
.service_toggler .ui-accordion-header-icon{
    display: none;
}
.service_toggler.toggler.active,
.service_toggler.toggler.ui-state-active{
    box-shadow: none;
}
.service_toggler.toggler:hover img,
.service_toggler.toggler:focus-visible img,
.service_toggler.toggler.active img,
.service_toggler.toggler.ui-state-active img{
    transform: scale(1.1);
}
.showall_container{
    background-color: var(--primary-clr);
    color: var(--white);
    --link-clr: var(--white);
    display: grid;
    place-items: center;
    text-align: center;
    background-size: 0 0;
    background-image: none;
    padding: 4rem 0;
    box-shadow: var(--box-shadow);
}
.showall_wrapper i{
    display: block;
    margin-bottom: 1rem;
    font-size: 3rem;
}
.showall_text{
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 700;  
    display: inline;
    color: var(--link-clr);
    text-decoration: none;
    cursor: pointer;
    background-image: linear-gradient(180deg, transparent 92.5%, var(--link-clr) 0);
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease;
    background-position: left;
    line-height: 1;
}
.showall_container:hover .showall_text,
.showall_container:focus-visible .showall_text{
    background-size: 100% 100%;
}
.service_details.accordion{
    --link-clr: var(--white);
    margin-top: calc(-1 * var(--gap-size));
    margin-bottom: var(--gap-size);
    border: none;
}
.service_details.accordion .details_container{
    background-color: var(--primary-clr);
    color: var(--white);
    padding: 2rem;
}
.service_details.accordion .details_container tr{
    margin-bottom: 2rem;
    display: block;
}
.service_details.accordion .details_container td{
    display: block;
}
.service_details.accordion .details_container ul{
    list-style: none;
}
.service_details.accordion .details_container ul li::before{
    width: 1em;
    margin-left: -1em;
    display: inline-block; 
    color: var(--white);
    font-weight: bold;
    content: "\2022";
}

/* PHONE */
@media only screen and (min-width: 576px){
    .service_toggler.toggler::after {
        font-size: 3rem;
        right: 1rem;
    }
    .service_title{
        font-size: 2.2rem;
        padding: 0 4rem 0 2rem;
    }
    
    .showall_wrapper i{
        font-size: 4.5rem;
    }
    
    .showall_text{
        font-size: 2.2rem;
    }
    
}

/* TABLET */
@media only screen and (min-width: 768px){
    .services_container{
        --gap-size: 2rem;
        grid-auto-flow: dense;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: unset;
    }
    .services_container .service_details{
        grid-column: span 2;
    }
    .service_details.accordion .details_container tr{
        margin: 0;
        display: table-row;
    }
    .service_details.accordion .details_container td{
        display: table-cell;
    }
    .showall_container{
        padding: 0;
        margin-bottom: var(--gap-size);
    }
    .service_toggler.odd,
    .service_toggler.toggler.odd,
    .showall_container.odd{
        margin-right: calc(var(--gap-size) / 2);
    }
    .service_toggler.even,
    .service_toggler.toggler.even,
    .showall_container.even{
        margin-left: calc(var(--gap-size) / 2);
    }
    .service_details .details_spacer{
        width: calc(50% - var(--gap-size) / 2);
        height: var(--gap-size);
        background-color: var(--primary-clr);
    }
    .service_details:nth-of-type(even) .details_spacer{
        margin: 0 0 0 calc(50% + (var(--gap-size) / 2));
    }
}

/* DESKTOP */
@media only screen and (min-width: 1024px){
    .services_container{
        --gap-size: 3rem;
    }
    .service_title{
        padding: 0 6rem 0 3rem;
    }
    .showall_wrapper i{
        margin-bottom: 3rem;
    }
}