:root{
    --service-min: 100px;
    --service-def-fs: 34px;
    --text-default: 20px;
}

#services-container{
    min-height: 100vh;
}


#all-service-details-container{
    /*margin-top: 170px;*/
}


.service-details-container{
    background-color: var(--site-primary-second-der);
    border-radius: 25px ;
    box-shadow: var(--default-shadow);
    transition: 250ms all ease 0s;
}

.service-title-container, .service-media-container{
    height: var(--service-min);
}

.service-title-container:hover .service-title-chevron{
    color: var(--site-secondary) !important ;
}

.service-title{
    font-size: var(--service-def-fs);
    color: var(--site-secondary)
}

.service-title-icon, .service-media-icon{
    font-size: var(--service-def-fs);
}

.service-title-chevron{
    font-size: var(--service-def-fs);
    color: var(--site-secondary-second-der);
    transition: 250ms all;
}

.service-description-container{
    color: var(--site-secondary);
    font-size: var(--text-default);
}

.service-medias-container{
    transition: 250ms all ease 0s;
    display: grid;
    grid-template-rows: 1fr;
}

.service-medias-container > div{
    overflow: hidden;
}


.service-media{
    border-radius: var(--rounded-defualt);
    box-shadow: var(--bs-box-shadow);
    height: 220px;
    width: 300px;
}

.details-extension{
    transition: all 750ms cubic-bezier(0.23, 1, 0.32, 1); /* Adjust the transition duration and cubic-bezier values */
    max-height: 0;
}


#service-behind-cover{
    height: 100vh;
    background-color: var(--site-primary-second-der);

}

#service-parts-container{
    min-height: 50vh;
    backdrop-filter: blur(7px) brightness(.95);
    border-radius: 35px 35px 30px 30px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

#service-part-one{
    margin-top: 60px;
    border-radius: var(--default-radius);
    /*box-shadow: var(--default-shadow);*/
}


@media screen and (min-width: 500px) and (max-width: 1000px){
    #service-parts-container{
        width: 92%;
        padding: 50px 10px 0px 10px !important;
    }

    .service-container, .service-title-container{
        height: 80px;
    }
    .service-title-icon{
        width: 20%;
        font-size: calc(var(--service-def-fs) - 10px);
    }
    .service-title{

        width: 60%;
        font-size:18px;
        color: var(--site-secondary)
    }

    .service-title-chevron{
        width: 20%;
        font-size: calc(var(--service-def-fs) - 15px);
    }

    .service-description-container{
        font-size: calc(var(--text-default) - 5px);

    }

    .service-title{
    }

    .service-media-icon{
        font-size: 25px;
    }
}

@media screen and (min-width: 0) and (max-width: 500px){
    #service-parts-container{
        width: 100%;
        padding: 50px 10px 0px 10px !important;
    }

    .service-container, .service-title-container{
        height: 80px;
    }
    .service-title-icon{
        width: 20%;
        font-size: calc(var(--service-def-fs) - 10px);
    }
    .service-title{
        width: 60%;
        font-size: 16px;
        color: var(--site-secondary)
    }

    .service-title-chevron{
        width: 20%;
        font-size: calc(var(--service-def-fs) - 15px);
    }

    .service-description-container{
        font-size: calc(var(--text-default) - 5px);

    }

    .service-title{
    }

    .service-media-icon{
        font-size: 25px;
    }

}