/*
Aym<3
custom.css
custom css
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    font-family: 'roboto', sans-serif;
}
body{
    background: url("https://ambiance-sanitaire.ch/img/background.jpg") repeat;
}
header{
    background-image: linear-gradient(150deg,#eeabff, white , #81c0f0 ) ;
}

#speciality{
    transition: opacity 1s;
}
.img-slide-intro{
    background-image: url("https://ambiance-sanitaire.ch/img/intro_1.jpeg");
    background-position: center;
    background-size: cover;
}
.img-slide-intro-2{
    background-image: url("https://ambiance-sanitaire.ch/img/intro_2.jpeg");
    background-position: center;
    background-size: cover;
}

.img-slide-intro-3{
    background-image: url("https://ambiance-sanitaire.ch/img/intro_3.jpeg");
    background-position: center;
    background-size: cover;
}
.carousel-img-container{
    height: 50%;
    width: 100%;
}
.carousel-img{

    width: 80%;

}

.h-40{
    height: 40% !important;
}
.vh-80{
    height: 80vh !important;

}
.carousel-intro{
    height: 55vh !important;
}
.profile-picture{
    height: 33vh !important;

}

.logo{
    height: 75px;
    width: 150px;
}


@media (min-width: 768px) {
    .carousel-intro{
        height: 60vh !important;
    }
    .profile-picture {
        height: 40vh !important;
    }
    .carousel-img{
        width: auto !important;
        height: 75vh;
    }
    .logo{
        height: 150px;
        width: 300px;
    }
}
/*
I HATE the way that I center the h1, but I don't have choice. I need that the h1 take only needed space(because linear-gradient is on background)
I couldn't add a parent div to all h1, so this is the only valid solution :(
*/
.text-gradient{
    font-weight: bolder;
    color : transparent !important;
    background-image: linear-gradient(150deg,#9932b3 , #0088ff ) ;
    background-clip: text;
    -webkit-background-clip: text;



}
.center-self{
    display: table;
    margin: 0 auto;
}
.contactItem{
    flex: 1 1 0px
}