@import url('general.css');
@import url('footer.css');
@import url('navigation.css');
@import url('hero.css');
@import url('responsive.css');
@import url('carousel.css'); 
@import url('cartes.css');
@import url('bouton.css');
@import url('partenaires.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT&family=Roboto&family=Roboto+Condensed:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed:ital@1&display=swap');

:root
{
    --primary-color:#2C8C44;
	--steel-blue: #3C74BC;
	--primary-black: #241C24;
	--shakespeare-bleu:#3C91CF;
	--gray: #d4d4d4;
}

nav, main
{
    /* background-image: url('/assets/img/filigrane.png');  */
    background-size: cover;
    object-fit: cover; 
	background-position: center ;
/* 	backdrop-filter: opacity(.75); */
}

html:hover *, html:hover *:before 
{
	transition-property: opacity, color, border-color, background-color, filter, -webkit-filter, mix-blend-mode, fill, stroke, transform, stroke-width, z-index;
	transition-duration:  200ms;
	transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* section{
	height: 100dvh;
} */


.message
{
    resize: none;
	height: 300px;
	outline: none;
}

.form-control{
	background-color: var(--gray);
}

.work
{
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.work img
{
    width: 100%;
    border-radius: 5px;
    display: block;
    height: 400px;
    transition: transform 0.5s;
}

.layer
{
    width: 100%;
    height: 0;
    background: linear-gradient(to right top, rgba(0,0,0,0.6), var(--primary-color));
    border-radius: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align:center ;
    transition: height 0.5s;
	color: #fff !important;
}

.layer h5
{
   font-weight: 600; 
   margin-bottom: 20px;
}


.work:hover img
{
    transform: scale(1.1);
}

.work:hover .layer
{
    height: 100%;
	transform: height 0.5s ease-out;
}