@import url(variables.css);

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



#services-container{
    min-height: 100vh;
    border-bottom: 4px solid var(--site-primary);
    background-image: linear-gradient(to bottom, rgba(0, 89, 167, 0.7) 15%, rgba(255, 255, 255, 0.5) 85%) ;

}

#services-circles-container{
    width: 400px;
    height: 400px;
    top: -100px;
    left: -50px;
}

#services-first-circle{

}

#services-second-circle{
    width: 60%;
    height: 60%;
}

#services-first-circle, #services-second-circle{
    box-shadow: inset 0px 0px 3px #000000,0px 0px 3px #000000;
}


#all-service-details-container{
    padding-top: 150px;
}


.service-details-container{
    /*opacity: 0;*/
    background-color: var(--site-tertiary);
    box-shadow: var(--default-shadow);
    border-radius: var(--rounded-defualt);
    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-primary) !important ;
}

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

.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);
    transition: 250ms all;
}

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

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

/*.service-medias-container:nth-child(1){*/
/*    grid-template-rows: 1fr !important;*/
/*}*/


.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;
}


@media screen and (min-width: 0) and (max-width: 500px){
    .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;
    }

    .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;
    }

}