.hero-sec{
    display: flex;
    min-height: 100vh;
    background-color: #FFF;
    background-image: url('/public/img/hero.webp');
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.hero-wrapper{
    display: inline-block;
    margin-left: 10vw;
    margin-top: 25vh;
}

.hero-sec h1{
    font-weight: 800;
    font-size: 100px;
    line-height: .94;
    letter-spacing: -.05em;
    color: #222;
}

.hero-label{
    background-color: var(--webcliff-color);
    color: #FFF;
    border-radius: 1em;
    padding: 10px 42px;
    font-weight: bolder;
    letter-spacing: +0.05em;
    display: inline-block;
    margin-bottom: 0rem;
}

@media(max-width: 490px){
    
    .hero-sec{
        background-image: url('/public/img/hero_sm.webp');
    }
    
    .hero-wrapper{
        display: inline-block;
        margin: 15vh auto;
    }
    
    .hero-sec h1{
        font-size: 2.5rem;
    }
    
    .hero-btn{
        padding: 5px 20px;
    }
}
@media(min-width:491px) and (max-width: 1199px){
    
    .hero-wrapper{
        display: inline-block;
        margin: 15vh auto;
    }
    
    .hero-sec h1{
        font-size: 2.5rem;
    }
    
    .hero-btn{
        padding: 5px 20px;
    }
}


/********************** service ************************/

.services-sec{
    background-color: #E7EAE6;
    color: #000;
}

.services-sec h3{
    font-size: 32px;
    /*font-weight: bolder;*/
}

.service-card{
    /*border-bottom: 1px solid #00000026;*/
    background-color: #FFF;
    border-radius: 1.5rem;
    height: 100%;
    padding: 2rem 2rem;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}

.service-card:hover{
    transform: translateY(-3%);
}

.service-card img{
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.service-card:hover img{
    transform: scale(1.3);
}

.service-price{
    font-size: 24px;
    font-weight: bolder;
}

.service-btn, .about-me-btn{
    background-color: var(--webcliff-color);
    color: #FFF;
    box-shadow: rgba(2, 100, 105, 1) 0px 10px 20px -8px;
}

.service-btn:hover, .about-me-btn:hover{
    background-color: #00935b;
    color: #FFF;
    box-shadow: rgba(0, 147, 91, 1) 0px 10px 20px -8px;
}

@media(max-width: 490px){
    .service-btn{
        background-color: #c21212;
        color: #FFF;
        box-shadow: #c21212 0px 10px 20px -8px;
    }

    .service-btn:hover{
        background-color: #c21212;
        color: #FFF;
        box-shadow: #c21212 0px 10px 20px -8px;
    }

    .service-card:hover{
        transform: translateY(0);
    }
    
    .service-card:hover img{
        transform: scale(1);
    }
    
    .service-card h3{
        font-size: 1.5rem;
        color: var(--webcliff-color);
    }
}

@media (min-width: 1200px){
    /*
    .animation{
        transform: translateY(+60%);
        transition: all 0.7s ease-in-out;
        transition-delay: calc(0.1s * var(--i));
    }

    .show-animation .animation{
        transform: translateY(0);
    }
    
    .left-animation{
        transform: translateX(-300%);
        transition: all 0.7s ease-in-out;
    }
    
    .show-animation .left-animation{
        transform: translateX(0);
    }
    
    .zoomin-animation{
        transform: scale(0);
        transition: all 0.7s ease-in-out;
        transition-delay: calc(0.2s * var(--i));
    }
    
    .show-animation .zoomin-animation{
        transform: scale(1);
    }
    */
}

/************ About **************/

.about-logo{
    border-radius: 1rem;
}

/************ Referencia *******************/

.reference-sec{
    background-color: #E7EAE6;
    color: #000;
}

.reference-img{
    border-radius: 1rem;
}

.reference-stars{
    color: orange;
}

.reference-url{
    font-size: 1.5rem;
    color: #222;
    text-decoration: none;
    transition: all 0.3s 
}

.reference-url:hover{
    color: var(--webcliff-color);
}

.reference-wrapper ul{
    list-style: none;
}

.reference-wrapper ul i{
     color: #44c4a0;
}

.reference-counter-wrapper{
    font-size: 1.5rem;
}

.reference-count{
    font-size: 70px;
    font-weight: 900;
    color: #777;
}

.reference-count-border{
    border-left: 1px solid #AAA;
    border-right: 1px solid #AAA;
}

.reference-sub-label{
    margin-top: 100px;
    margin-bottom: 20px;
    color: var(--webcliff-color);
}


#carouselReferencia .carousel-control-next-icon, #carouselReferencia .carousel-control-prev-icon{
    background-color: var(--webcliff-color) !important;
    filter: none !important;
    border-radius: 2rem !important;
    padding: 1rem !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    background-size: 70% 70% !important;
}

#carouselReferencia .carousel-control-next-icon{
    background-position-x: 55% !important;
}

#carouselReferencia .carousel-control-prev-icon{
    background-position-x: 45% !important;
}

#carouselReferencia .carousel-control-next{
    /*opacity: 1 !important;*/
}

@media(max-width: 490px){
    #carouselReferencia .carousel-control-next-icon, #carouselReferencia .carousel-control-prev-icon{
        margin-top: -45px;
    }
    
    .reference-count-border{
        border: none;
    }
    
    .reference-sub-label{
        margin-top: 50px;
        
    }
}

/************* Vélemények *************/

.testimonial-sec{
    /*background-color: #E7EAE6;*/
    background-image: url('/public/img/testimonials_bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    color: #222;
    padding: 70px 0px;
    min-height: 630px;
    /*background: linear-gradient(133deg, rgba(104,215,8,1) 11%, rgba(2,100,105,1) 37%);*/
}

#carouselTestimonials .carousel-indicators{
    position: static !important;
}

#carouselTestimonials .carousel-indicators button{
    /*background-color: var(--webcliff-color);*/
}

#carouselTestimonials .testimonial-wrapper{
    max-width: 750px;
    margin: 0 auto;
}

#carouselTestimonials .testimonial-footer{
    font-weight: bolder;
    margin-top: 1rem;
    padding-left: 2rem;
    color: #FFF;
}
#carouselTestimonials .testimonial-body{
    background-color: #FFF;
    border-radius: 1.5rem;
    padding: 1.5rem;
}

@media(max-width: 490px){
    .testimonial-sec{
        color: #222;
        padding: 30px 0px;
        min-height: 630px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-image: url('/public/img/testimonials_bg_sm.webp');
    }
}