.service-container {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    width: 80%;
    margin: 0 auto;
    padding-top: 160px;
}

.page-title {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    width: 100%;
}

    .page-title h1 {
        width: 27%;
        border-bottom: 4px solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(90deg, var(--color-rgba-white) 0%, var(--color-rgba-blue) 50%, var(--color-rgba-white) 100%);
        margin: 0 auto;
        text-align: center;
    }


    .page-title p {
        width: 100%;
        margin: 24px 0;
        text-align: center;
    }

.service-container .service-cards {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    position: relative;
    width: 100%;
}


    .service-container .service-cards .card {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
        position: relative;
        width: 33%;
        height: auto;
        padding: 14px;
        margin: 8px 0;
        visibility: visible;
        opacity: 1;
        transition: all .5s;
    }

        .service-container .service-cards .card.hidden {
            visibility: hidden;
            opacity: 0;
            transition: all .5s;
        }

        .service-container .service-cards .card .overlay {
            height: calc(100% - 28px);
            width: calc(100% - 28px);
            margin: auto;
            background: rgb(14,59,140);
            background: -moz-linear-gradient(0deg, rgba(14,59,140,1) 5%, rgba(14,59,140,0.4962359943977591) 34%, rgba(255,255,255,0) 100%);
            background: -webkit-linear-gradient(0deg, rgba(14,59,140,1) 5%, rgba(14,59,140,0.4962359943977591) 34%, rgba(255,255,255,0) 100%);
            background: linear-gradient(0deg, rgba(14,59,140,1) 5%, rgba(14,59,140,0.4962359943977591) 34%, rgba(255,255,255,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e3b8c",endColorstr="#ffffff",GradientType=1);
        }

        .service-container .service-cards .card .image {
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 auto;
            position: relative;
            width: 100%;
            height: auto;
            z-index: 3;
        }

            .service-container .service-cards .card .image img {
                width: 100%;
                height: auto;
            }

        .service-container .service-cards .card .text {
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 auto;
            position: absolute;
            bottom: 10%;
            left: 0;
            z-index: 10;
            width: 100%;
            padding: 0 24px;
            text-align: center;
            line-height: 4;
            min-height: 30%;
            place-content: start;
            align-content: start;
        }

            .service-container .service-cards .card .text h4, .service-container .service-cards .card .text p {
                width: 100%;
                color: var(--color-white);
                line-height: 1.5;
                margin: 0 auto;
            }

            .service-container .service-cards .card .text .seperator {
                width: 70%;
                min-height: 1px;
                margin: 6px auto;
                border-bottom: 2px solid var(--color-white);
            }

        .service-container .service-cards .card:hover > .text, .service-container .service-cards .card:hover > .overlay {
            visibility: hidden;
            opacity: 0;
            transition: all .5s;
        }


/*#region MOBILE STYLES*/
@media (max-width: 767px) {
    .service-container {
        width: 92%;
    }

        .service-container .service-cards .card {
            width: 100%;
        }

    .page-title h1 {
        width: 100%;
    }
}
/*#endregion MOBILE STYLES*/