.hero{

    width: 100%;
    height: 600px;
    margin-top: 95px;
    
}
.hero *{
    color: white;
}
.hero-img{
    display: inline-block;
    width: 100%;
    height: 600px;
    /* background-image: linear-gradient(to left, red, yellow); */
    background-color: var(--black2);

}
.hero-img img{
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: middle;

    filter: sepia(0.2);
    /* filter:; */
    
}
.hero-video{
/*! IMPORTANT +++++++++++++++++++++++++++++++++++++++ */
}

.hero-text{
    position: absolute;
    width: 1000px;
    
    right: 50vw;
    transform: translateX(50%) translateY(-50%);
    top: 50%;

    /* outline: red dashed 5px; */

    display: flex;
    gap: 20px;
    flex-direction: column;
    height: min-content;
}
@media screen and (max-width: 1000px){
    
    .hero-text{
        width: 80%;
    }
}
@media screen and (max-width: 470px){
    .hero-CTA{
        display: flex;
        flex-direction: column;
    }
    .hero-CTA *{
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

}
.hero-text *{
    text-align: center;
    font-weight: bold;

    
}
.hero-text h1{
    height: min-content;
    font-size: 42px;
    text-shadow: 2px 2px 4px rgb(0, 0, 0);

}
.hero-text p{
    height: min-content;
    font-size: 24px;
    font-weight: 600;

    text-shadow: 2px 2px 4px rgb(0, 0, 0);
}
.hero-CTA{
    display: flex;
    height: min-content;

    justify-content: center;
    gap: 20px;
}
.hero-CTA > a{
    font-weight: 600;
}
.hero-CTA .CTA{
    padding: 15px 40px;

}



.hero-CTA .CTA2{

    background-color: transparent;
    border: white 2px solid;
    border-radius: 2px;
    padding: 13px 38px;
    display: flex;
    gap: 10px;
    align-items: center;
    height: min-content;
    text-decoration: none;
}
.cta2svg{
    height: 16px;
    fill: var(--white);
}

.hero-reviews{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    height: min-content;
}
.hero-reviews img{
    height: 40px;
}
.hero-reviews span{
    margin-top: 10px;
    height: min-content;
    font-size: 24px;
}



@media screen and (max-width: 480px){
    .hero-img{
        height: 700px;
    }
    .hero-img img{
        height: 700px;
    }
}
@media screen and (max-width: 415px){
    .hero-text > p{
        display: none;
    }
}