/*
========== 
Hero.
==========
*/

.services-hero{
    background:var(--silver-color);
    padding:30px 20px;
    text-align:center;
}

.services-hero__container{
    max-width:900px;
    margin:auto;
}

.services-hero__title{
    font-size:42px;
    margin-bottom:20px;
    color: var(--lightskyblue-color);
}

.services-hero__text{
    font-size:18px;
    color:var(--black-color);
}

.services-hero__logo{
    width: 100px;
    display: block;
    margin: 0 auto 20px auto;
}

.services-hero__animate {
    opacity: 0;
    transform: translateY(-50px); 
    transition: all 1s ease;
}

.services-hero__animate--visible {
    opacity: 1;
    transform: translateY(0); 
}

/* 
==========
Services.
==========
*/

.container__service__selected{
    width: 100%;
    height: auto;
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.service{
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    margin: auto;
}

.service__container{
    max-width:100%;
    margin:auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items:center;
}

.service__image {
    width: 400px;
    height: 100%;
}

.service__content{
    width: calc(100% - (400px + 2em));
    height: auto;
}

.service__image img{
    width:100%;
    border-radius:5px;
}

.service__title{
    font-size:32px;
    margin-bottom:15px;
    color: var(--lightskyblue-color);
}

.service__text{
    margin-bottom:20px;
    color: var(--black-color);
}

.button__lightskyblue{
    text-decoration: none;
}

.reveal,
.reveal-left,
.reveal-right{
opacity:0;
transition:all .9s ease;
}

.reveal{
transform:translateY(60px);
}

.reveal-left{
transform:translateX(-60px);
}

.reveal-right{
transform:translateX(60px);
}

.active{
opacity:1;
transform:translate(0);
}

@media (max-width: 850px){
    .service__container{
        max-width:100%;
        margin:auto;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        align-items:center;
        flex-direction: column;
    }

    .service__image {
        width: 100%;
        height: 100%;
    }

    .service__content{
        width: 100%;
        height: auto;
    }
}