/*
  Home CSS
*/

#header h1 {
    font-family: var( --font-bold );
    font-weight: 700;
    font-size: 70px;
    line-height: 70px;
    color: var(--dark);
}


/* Add plus after numbers counter */
#numbers .percent-value:after {
    content: " +";
    font-size: 53px;
}


/*<editor-fold desc="Service">*/
.services {
    display: grid;
}

.service {
    display: block;
    color: var( --gray );
    padding: 40px 35px 35px;
    background: var( --gray-lightest );
    /*box-shadow: 0px 2px 18px 0px rgb(184 197 207 / 42%);*/
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.21, 0.67, 0.47, 1.33);
    border-bottom: 6px solid transparent;
}

.service:hover {
    transform: translateY(-6px);
    border-color: var( --gray );
}

.service .icon {
    margin-bottom: 20px;
}

.service .icon > * {
    max-height: 30px;
}

.service h3 {
    font-size: 27px;
    line-height: 33px;
    font-family: var( --font-bold );
    margin-bottom: 10px;
    min-height: 109px;
}

.service p {
    margin-bottom: 20px;
}
/*</editor-fold>*/


/*<editor-fold desc="Testimonials">*/
.testimonials {
    width: 100%;
    position: relative;
    float: left;
}

.testimonial-blurb {
    font-size: 17px;
    line-height: 29px;
    font-weight: 400;
    padding: 30px 35px 30px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 25px;
    transition: .29s cubic-bezier(.52,.01,.16,1);
    box-shadow: 3px 4px 30px 0px rgb(157 185 207 / 19%);
    background: var(--white );
    color: var( --gray-light );
    max-width: 550px;
}

.testimonial-blurb .top-part {
    display: flex;
    align-items: center;
}

.testimonial-blurb .main-info {
    margin-left: 20px;
}

.testimonial-blurb .image-wrap {
    position: relative;
}

.testimonial-blurb .image-wrap img {
    padding: 3px;
    max-width: 65px;
    border-radius: 13px;
    border: 2px dashed var(--pink );
}

.testimonial-blurb .image-wrap::before {
    content: "";
    height: 20px;
    width: 20px;
    position: absolute;
    left: -12px;
    top: 33px;
    background: var( --pink );
    border-radius: 50px;
}

.testimonial-description-box {
    position: relative;
}

.testimonial-blurb .testimonial-description {
    margin: 30px auto 20px;
}

.testimonial-blurb .testimonial-name {
    font-size: 18px;
    line-height: 26px;
    color: var(--dark );
    padding-bottom: 2px;
    font-family: var(--font-bold );
}

.testimonial-blurb .stars {
    font-size: 26px;
    color: #ffb100;
}

.testimonial-blurb .testimonial-position {

}

.testimonial-blurb .quotes svg {
    fill: var( --blue );
    opacity: 0.4;
    width: 45px;
    height: 70px;
    position: absolute;
    display: block;
    z-index: 1;
}

.testimonial-blurb .quotes .opening {
    left: -35px;
    top: 30px;
    display: none;
}

.testimonial-blurb .quotes .closing {
    right: -1px;
    top: -113px;
    transform: rotate(180deg);
}

/*</editor-fold>*/


/* --------- DESKTOP --------- */
@media only screen and (min-width: 981px){
    /* Services */
    .services {
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }

    /*.service:nth-child(-n + 2) {*/
    /*    grid-column: span 2; !* Span 2 columns for the last two items *!*/
    /*    margin: auto; !* Center the last two items *!*/
    /*    width: 100%;*/
    /*}*/

    /* Testimonials */
    .testimonials {
        padding-bottom: 90px;
    }

    .testimonial-description-box {
        padding: 0 20px;
    }

}

/* ---------- TABLET ---------- */
@media only screen and (min-width: 768px) and (max-width: 980px) {
    /* Services */
    .services {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* --------- MOBILE --------- */
@media only screen and (max-width: 768px){
    /* Services */
    .services {
        gap: 30px;
    }

    .testimonial-blurb .quotes svg {
        width: 50px;
        height: 50px;
    }

}