.offset{transform: translateY(50px); opacity: 0;}

section.hero{
    background: var(--primary-color);
    color: var(--text-color);
    border-bottom-left-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 11;
    position: relative;
	box-shadow: 0 5px 5px black;
}

section.hero{}

section.hero .helice{
    background: url(images/background/accueil-helice-hero.png) no-repeat; 
    background-size: contain; 
    width: 30vh; height: 30vh;
    top: 0%; left: 50%; 
    animation: rotate360 10s linear infinite;
}

section.hero img{width: 80%; margin: 0; position: relative;}

section#product{
    background: var(--text-color);
    margin-top: -60px;
    z-index: 10;
	position: relative;
    color: white;
    padding: 150px 0 75px 0;
	border-bottom-left-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
	box-shadow: 0 5px 5px black;
	
}

section#product .grid > div:nth-child(1) h2{font-family: 'montreal', Helvetica, Arial, sans-serif;}

@media(min-width: 640px){
	section#product{padding: 250px 0 150px 0;}
}

section#product .btn{margin-top: 2em;}

section#pourquoi, section#fonctionalite{
    background: var(--text-color);
    margin-top: -60px;
    z-index: 9;
    padding: 125px 0 90px 0;
    display: flex; 
    justify-content: center;
    align-items: center;
    color: white;
	box-shadow: 0 5px 5px black;
}

section#pourquoi{padding-top: 100px; 
	position: relative;}
section#fonctionalite{padding-bottom: 60px; 
	position: relative;}

@media(min-width: 640px){
	section#pourquoi{padding-top: 200px; 
	position: relative;}
section#fonctionalite{padding-bottom: 120px; 
	position: relative;}
	section#pourquoi, section#fonctionalite{padding: 200px 0 90px 0;}
}


section#product h1, section#product h2, section#pourquoi h2, section#fonctionalite h2, section#elements h2{font-size: 4vh;}


@media(min-width: 840px){
	section#product h1, section#product h2, section#pourquoi h2, section#fonctionalite h2, section#elements h2{font-size: 5vh;}
}

#hero .grid_4_5 .child{
    opacity: 0; 
    transform: translateY(0px);
}

@media(min-width: 640px){
	translateY(50px) scale(0.8);
}


@media(min-width: 640px){
	#hero .grid_4_5 .child{
		opacity: 0; 
		transform: translateY(50px) scale(1);
	}
}

section#product .grid .text_content{
    transform: translateY(100px);
    position: relative;
    opacity: 0;
}

section#pourquoi ul, section#fonctionalite ul{
    padding: 0; margin: 0; 
    text-indent: 0;
    margin-bottom: 2em;
}

section#pourquoi ul li{
    display: block; 
    width: calc(100% - 132px);
    padding: 20px 15px 20px 105px;
    border: 1px solid white;
    border-radius: 18px;
    list-style: none;
    font-size: 22px;
    margin: 15px 0;
    line-height: 1.2em;
    position: relative;
    transform: translateY(50px);
    opacity: 0;
}



section#product h2, section#pourquoi h2, #pourquoi a.btn, section#elements h2, section#contact h2{
    transform: translateY(50px);
    opacity: 0;
}

@media(max-width: 840px){
	section#product h2, section#pourquoi h2, #pourquoi a.btn, section#elements h2, section#contact h2{text-align: left;}
}

@media(min-width: 840px){
	section#pourquoi ul li{
		font-size: 30px;
	}
	
	section#product h2, section#pourquoi h2, #pourquoi a.btn, section#elements h2, section#contact h2{
		transform: translateY(150px);
	}
}


section#pourquoi ul li::before{
    content: "";
    width: 45px; 
    height: 45px; 
    position: absolute; 
    top: 50%; left: 55px; 
    transform: translateY(-50%) translateX(-50%);
}

section#pourquoi ul li:nth-child(1)::before{background: url(images/icons/star-orange.png) no-repeat; background-size: contain; background-position: center;}
section#pourquoi ul li:nth-child(2)::before{background: url(images/icons/flower-mauve.png) no-repeat; background-size: contain; background-position: center;}
section#pourquoi ul li:nth-child(3)::before{background: url(images/icons/dot-orange.png) no-repeat; background-size: contain; background-position: center;}
section#pourquoi ul li:nth-child(4)::before{background: url(images/icons/ellipse-mauve.png) no-repeat; background-size: contain; background-position: center;}

section#fonctionalite img{
    width: 60%;
}



section#fonctionalite ul{
    margin: 20px 0;
    display: grid; 
    grid-gap: 15px;
	font-size: 14px;
    grid-template-columns: 1fr 1fr;}



section#fonctionalite ul li{
    background: white; 
    border-radius: 22px;
    display: inline-block; 
    list-style: none;
    text-align: center;
    color: var(--text-color);
    display: flex;
    height: 90px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 1em;
    

}

@media(min-width: 840px){
	section#fonctionalite ul{
		display: grid; 
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
	}
	
	section#fonctionalite ul li{font-size: 1vw;}
}

section#fonctionalite .padding_top > div:nth-child(2){
    transform: translateY(-1em);
}

section#fonctionalite ul li:nth-child(even){
    background: var(--primary-color);
}

section#fonctionalite ul li:nth-child(1){
    background: var(--secondary-color);
}

section#fonctionalite h2, section#fonctionalite img{transform: translateY(150px); opacity: 0; position: relative;}
section#fonctionalite ul li, section#fonctionalite .btn{transform: translateY(50px); opacity: 0; }

section#fonctionalite .grid_3_6 > div:nth-child(1){position: relative;}

section#fonctionalite .flower{
    width: 150px; height: 150px; 
    position: absolute;
    top: 50%; left: 60%; 
    transform: translateY(-50%) translateX(-50%);
    background: url(images/background/accueil-flower-fonctionalites.png) no-repeat;
    background-size: contain; background-position: center;
}

section#fonctionalite{
    border-bottom-left-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
    position: relative;
    z-index: 8;
}

section#elements{
    background: var(--secondary-color);
    padding: 105px 0 75px 0;
    margin-top: -60px;
    border-bottom-left-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
    position: relative;
    z-index: 7;
	box-shadow: 0 5px 5px black;
}

@media(min-width: 640px){
	section#elements{
		padding: 170px 0 150px 0;
	}
}

section#elements ul{
	padding: 2em 0 0 0;
	display: grid; 
    grid-gap: 15px; 
    grid-template-columns: 1fr; 
}

@media(min-width: 840px){
	section#elements ul{
    display: grid; 
    grid-gap: 30px; 
    grid-template-columns: 1fr 1fr 1fr;
}
}

section#elements ul li{
    display: inline; 
    position: relative; 
    background: white; 
    border-radius: 22px; 
    padding: 90px 50px 50px 50px; 
    text-align: center;
    font-size: 20px; 
    line-height: 1.2em;
    transform: translateY(50px);
    opacity: 0;

}

section#elements ul li::before{
    content: "";
    position: absolute; 
    top: 23px; 
    left: calc(50% - 23px); 
    
    width: 45px; height: 45px; 
    background-size: contain!important; 
    background-position: center!important;
    animation: rotate360 15s linear infinite;
}

section#elements ul li:nth-child(1)::before{background: url(images/icons/accueil-elements-icon-1.png) no-repeat;}
section#elements ul li:nth-child(2)::before{background: url(images/icons/accueil-elements-icon-2.png) no-repeat;}
section#elements ul li:nth-child(3)::before{background: url(images/icons/accueil-elements-icon-3.png) no-repeat;}

section#elements ul li a.btn{
    position: absolute; 
    bottom: -15px; left: 50%; 
    transform: translateX(-50%);
	display: none;
}

section#projets{
    background: var(--text-color);
    color: white;
    padding: 210px 0 150px 0;
    margin-top: -60px;
    position: relative;
    z-index: 6;
    display: none;
}

section#projets a.btn{margin-top: 1em;}

section#projets .grid_1_1{grid-gap: 2em;}

section#projets .grid_1_1 > div{
    background: var(--secondary-color);
    padding: 50px 40px; 
    border-radius: 22px;
}

section#projets .grid_1_1 > div img{width: 100%; }

section#ai{
	background: var(--text-color);
    color: white;
    padding: 60px 0 40px 0;
    margin-top: -60px;
    position: relative;
    z-index: 6;
	border-bottom-left-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
	box-shadow: 0 5px 5px black;
}

@media(min-width: 640px){
	section#ai{padding: 150px 0 60px 0;}
}

section#ai .grid{align-items: center;}

section#ai img{width: 100%; position: relative;}

section#contact{
    background: var(--text-color);
    color: white;
    padding: 105px 0 75px 0;
    position: relative;
    z-index: 5;
	margin-top: -60px;
}

@media(min-width: 640px){
	section#contact{padding: 210px 0 150px 0;}
}

section#contact img{width: 100%; border-radius: 22px;}

section#contact .contact_grid{
    grid-template-columns: 1fr 5fr 1fr 4fr 1fr;
}

@media(max-width: 840px){
	
	section#contact{padding-bottom: 60px;}
	section#contact .contact_grid{
		grid-template-columns: 1fr;
		
	}
	

	
	section#contact .contact_grid > div:nth-child(1), 	section#contact .contact_grid > div:nth-child(3), 	section#contact .contact_grid > div:nth-child(5){display: none;}
}

section#ai h2{font-size: 5vh; padding-bottom: 0.5em;}
section#contact h2{font-size: 5vh; padding-bottom: 0.25em;}
@media(min-width: 640px){
	section#contact h2{padding-bottom: 2em;}
}

section#contact h3{padding-bottom: 1em; font-size: 3vh;}

section#contact a:not(.btn){
    text-decoration: none; 
    color: white; 
}

section#ai .grid > div:nth-child(1){position: relative;}
section#ai .flower{position: absolute; top: 25%; left: 25%; width: 100px; height: 100px; animation: rotate360 10s linear infinite;}
section#ai .grid > div:nth-child(2) > p:nth-child(2){opacity: 0.5;}

section#contact #gform_1 ul, section#contact #gform_2 ul{
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 10px 30px;
    padding: 0; margin: 0; text-indent: 0;
}

section#contact #gform_1 ul li, section#contact #gform_2 ul li{
    list-style: none; 
    grid-column: span 2;

}

section#contact #gform_1 ul li:nth-child(2), section#contact #gform_1 ul li:nth-child(3), section#contact #gform_2 ul li:nth-child(2), section#contact #gform_2 ul li:nth-child(3){grid-column: span 1;}

section#contact #gform_1 label, section#contact #gform_2 label{display: none;}

section#contact #gform_1 ul li input, section#contact #gform_1 ul li textarea, section#contact #gform_2 ul li input, section#contact #gform_2 ul li textarea{
    width: calc(100% - 12px);
    padding: 10px 10px;
    font-size: 16px; 
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
    background-color: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: transparent;
    border-radius: 22px; 
    color: white;
    resize: none;
    font-family: 'montreal', Helvetica, Arial, sans-serif;
}


section#contact .gform_button{
    padding: 5px 20px; 
    color: var(--text-color);
    border-radius: 25px; 
    text-decoration: none;
    display: inline-block; 
    font-size: 18px;
    margin-right: 35px;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
	width: initial;
    color: var(--text-color);
    transition-duration: 0.5s;
}

@media(max-width: 640px){
	section#contact .gform_button{
		margin-right: 25px;
	}
}

section#contact .gform_footer{
    margin-top: 1.5em;
    text-align: right;
    width: calc(100% + 10px);
}

section#contact h3, section#contact p, section#contact img, section#contact .gform_button{opacity: 0; transform: translateY(100px);}


section#contact .gform_button:hover{
    background: transparent; 
    color: var(--primary-color);
}

section#contact .gfield{
    opacity: 0;
    transform: translateY(100px);
}

.logo_wrapper{
	display: grid; 
	grid-gap: 1em;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	
}

section#contact .logo_wrapper img{width: 100%; }

@media(min-width: 640px){
	.logo_wrapper{
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	section#contact .logo_wrapper img{width: 50%; margin: 0 auto;}
}