@import './reset.css';

.hero__container--service {
    position: relative;
    width: 100%;
    background: url(../images/img/img-service-hero.jpg) center center no-repeat;
    background-size: cover;
    padding: 0 1.4rem;
    color: var(--text-color-white);
    top: 0;
    left: 0
}

.hero__container--service:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(32, 32, 32, .69);
    background-size: inherit;
    left: 0;
    top: 0;
    z-index: 1
}

.hero__title,
.service__card {
    position: relative;
    width: 100%
}

.hero__title {
    display: inline-block;
    font-family: var(--font-title);
    font-size: var(--size-title-mobile);
    font-weight: 500;
    padding: 10vw 0;
    margin: auto 0;
    z-index: 10
}

.service__subTitle,
.service__title {
    font-family: var(--font-title);
    font-size: var(--size-subTitle-mobile)
}

.service {
    width: 100%;
    max-width: 1530px;
    margin: 0 auto;
    padding: 0 1.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.service__card {
    max-width: 430px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: -6px 6px 22px var(--box-shadow-color);
    box-shadow: -6px 6px 22px var(--box-shadow-color);
    border-radius: 5px;
    margin: 3rem 0;
    padding-bottom: 1.4rem;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.service__title {
    position: absolute;
    display: inline-block;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--secondary-color0);
    padding: .5rem 2.2rem;
    border-radius: 20px;
    z-index: 1
}

.service__subTitle {
    text-transform: uppercase;
    color: var(--secondary-color1)
}

.service__card .service__image {
    width: 100%;
    max-height: 900px;
    height: 14rem;
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 0 0;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.service__card .transfer {
    background-image: url(../images/img/img-service-transfer.jpg)
}

.service__card .simple {
    background-image: url(../images/img/img-service-simple.jpg)
}

.service__card .infraction {
    background-image: url(../images/img/img-servico-infracao-900.png)
}

.service__card .plus {
    background-image: url(../images/img/img-service-plus.jpg)
}

.service__text {
    padding: 2.4rem;
    display: inline-block;
    font-family: var(--font-text);
    color: var(--text-card-color);
    font-size: var(--size-text-mobile);
    text-align: justify;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.service__btn {
    width: 132px;
    cursor: pointer
}

.service__more {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .3s ease-in-out;
    -o-transition: max-height .3s ease-in-out;
    transition: max-height .3s ease-in-out;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.service__card.is-active {
    -webkit-box-shadow: -12px 10px 22px 8px var(--box-shadow-color);
    box-shadow: -12px 10px 22px 8px var(--box-shadow-color)
}

.service__card.is-active .service__image {
    max-height: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.service__card.is-active .service__more {
    overflow: hidden;
    max-height: 900px;
    -webkit-transition: max-height .5s ease-in-out;
    -o-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out
}

.service__card.is-active .service__btn,
.service__card.is-active .service__btn:focus {
    background-color: var(--unsuccess-color);
    color: var(--text-color-white);
    border: 1px solid var(--unsuccess-color)
}

.no-js .service__btn {
    display: none
}

.no-js .service__more {
    overflow: hidden;
    max-height: 200px
}

@media screen and (min-width:31rem) {
    .hero {
        padding: 0 2rem
    }
}

@media screen and (min-width:48rem) {
    .hero {
        padding: 0 3.5rem
    }

    .hero__title {
        padding: 5vw 0
    }

    .service__card {
        margin: 3rem 1rem
    }
}

@media screen and (min-width:56.25rem) {
    .service__card {
        width: 45%;
        max-width: 550px
    }

    .service__card.is-active .service__image {
        max-height: 0;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }
}

@media screen and (min-width:64rem) {

    .hero,
    .service {
        max-width: 1300px;
        margin: 0 auto
    }

    .service__card .service__image {
        border-radius: 1rem 1rem 0 0
    }

    .service__card {
        border-radius: 1rem
    }
}