/* About Font */
.about-font-28px {
    font-size: 28px;
}
/* End About Font */


/* Header */
header {
    background: linear-gradient(
        180deg,
        rgba(3, 145, 223, 0.05) 0%,
        rgba(3, 145, 223, 0) 113.65%
    );
}

.header-list {
    padding-left: 1.8em;
}

.header-list li::marker {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    color: #0391df;
}
/* End Header */


/* Advantage */
#advantage {
    background: url(../../../assets/img/about/bg-keuntungan.svg) no-repeat;
    background-size: cover;
}

.advantage-icon {
    width: 50%;
}

.advantage-card-title {
    color: #0391df;
    transition: all 400ms;
}

#advantage .card {
    background: white;
    transition: all 700ms;
}

.advantage-card-description {
    color: #3a3b3c;
    transition: all 400ms;
}
/* End Advantage */


/* Step */
.step-img {
    width: 100%;
    height: 60vh;
    object-fit: contain;
}

.step-list {
    padding-left: 1.8em;
}

.step-list li::marker {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    color: #0391df;
}
/* End Step */


/* Our client End */
.ourclient-image {
    width: 100% !important;
    height: 100px !important;
    object-fit: contain;
}

.ourclient-carousel .slick-slide{
    opacity: .5;
    transition: all 400ms ease;
}

.ourclient-carousel .slick-center {
    opacity: 1;
    transition: all 400ms ease;
}
/* End Our Client */

@media only screen and (max-width: 997.92px) {

    /* Our Client */
    .ourclient-carousel .slick-slide{
        opacity: 1;
    }

    .ourclient-carousel {
        height: 65px !important;
    }
    /* End Our Client */

}

@media only screen and (max-width: 768px) {

    /* Advantage */
    .advantage-icon {
        width: 40%;
    }
    /* End Advantage */


    /* Step */
    .step-img {
        width: 100%;
        height: 30vh;
        object-fit: contain;
    }
    /* End Step */

}

@media only screen and (min-width: 768px) and (max-width: 991.98px){

    /* Header */
    .page-header {
        padding-bottom: 3rem;
    }
    /* End Header */

    /* Why Us */
    .why-image {
        width: 50%;
        height: auto;
        object-fit: contain;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    /* End Why Us */

}

@media (hover: hover) and (pointer: fine) {

    /* Advantage */
    #advantage .card:hover {
        background: #0391df;
        transition: all 400ms;
    }

    #advantage .card:hover span {
        background: white;
        transition: all 700ms;
    }

    #advantage .card:hover .advantage-card-title,
    #advantage .card:hover .advantage-card-description {
        color: white;
        transition: all 700ms;
    }
    /* End Advantage */
}