/**************************************************************************
                                  RESET  
**************************************************************************/



html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, select, input, button, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		box-sizing: border-box;
		transition: 300ms;
}

article, aside, details, figcaption, figure, 
footer, header, menu, nav, section {
		display: block;
}
html {
}
body {
		line-height: 1.3;
		font-size: 1em;
		font-family: "Work Sans", sans-serif;
		font-optical-sizing: auto;
  		font-style: normal;
  		color: #262626;
  		display: flex;
	    flex-direction: column;
	    align-items: center;
	}
body > img {
		display: none;
}
ul {
		list-style: none;
}
button {
	cursor: pointer;
	background-color: transparent;
}



/**************************************************************************
  
                                  TEXTS 

 **************************************************************************/



h1 {
		text-align: left;
		font-weight: 800;
		font-size: 64px;
		width: 100%;
}

h2 {
		font-size: 64px;
		font-weight: 800;
		text-align: center;
}

h3 {
		text-align: left;
		font-size: 22px;
		font-weight: 600;
		width: 100%;
}

h4 {
		text-align: left;
		font-size: 22px;
		width: 100%;
}

p {
		color: #262626;
		font-size: 16px;
		text-align: left;
		font-weight: 300;
}

b {
	font-weight: 600;
}


.tinytext {
		font-weight: 300;
		font-size: 0.8rem;
}


/**************************************************************************

                                 COLORS 

 **************************************************************************/

.bgPrimary {
	background-color: rgba(255, 255, 5, 1.0);
}

.bgPrimaryMedium {
	background-color: rgba(255, 255, 5, 0.56);
}

.bgPrimaryLight {
	background-color: rgba(255, 255, 5, 0.16);
}



/**************************************************************************

                                 COMPOSANTS 

 **************************************************************************/


.animate__animated {
	animation-duration: 500ms !important;
}
.screen {
		width: 100%;
		padding: 10rem 2rem 10rem 2rem ;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1rem;
}

.whitebg {
		background-color: rgba(255,255,255,0.1);
		backdrop-filter: blur(2px);
		webkit-backdrop-filter: blur(2px);
		border: 1px solid rgba(255,255,255,0.5);
}

.whitebg:hover		{
		scale: 1.05;
 		cursor: pointer;
 		background-color: rgba(255,255,255,0.15);
}

.cta {
		padding: 1rem 2rem;
		width: fit-content;
		color: #262626;
		text-decoration: none;
		transition: 0.2s;
		font-weight: 400;
		position: relative;
		transition: 0.2s;
		z-index: 1;
}
.cta:hover {
		font-weight: 600;
		transition: 0.2s;
}
.cta:before {
		height: 1rem;
		width: 1rem;
		margin-right: 16px;
		position:relative; 
  		top:2px;
}
.cta:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	transform: rotate(-0deg);
	transition: 0.2s;
	box-sizing: border-box;
}

.cta:hover:after {
	transform: rotate(-1deg);
	transition: 0.2s;
}


.cta-primary:before {
		content: url(../img/icon/mail.svg);
}
.cta-primary:after {
	background-color: rgba(255, 255, 5, 1);
}



.cta-secondary:before {
		content: url(../img/icon/copy.svg);
}
.cta-secondary:after {
		border: 2px solid rgba(255, 255, 5, 1);
		background-color: rgba(255, 255, 255, 0.5);
}

.cta-mini {
		padding: 0.625rem 1.25rem;
}

#copyMessage {
	font-weight: 500;
	position: absolute;
	left: 40%;
    top: 116%;
}

.actions {
	display: flex;
	gap: 2rem;
	position: relative;
}



/**************************************************************************
   
                                   HEADER 

 **************************************************************************/



header {
		width: 100%;
		height: auto;
		position: fixed;
		padding: 1Rem 3rem;
		z-index: 990;
		color: black;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
}

header.scrolled {
	padding: 0.5Rem auto;
}

header img {
		width: auto;
		max-width: 50%;
		height: 50px;
		display: block;
		transition: 0.2s;
}

header.scrolled img {
	height: 40px;
	transition: 0.2s;
}

header .cta {
	animation-delay: 100ms;
}






/**************************************************************************
 
                                    HOME 

 **************************************************************************/




#home {
		background-color: rgba(241, 150, 64, 0.1);
		background-image: url("../img/mountainLight.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		min-height: 696px;
		width: 100%;
		box-sizing: border-box;
		height: calc(90vh - 126px);
		height: calc(100vh - 126px);
		padding: 5rem 2rem 2.5rem 2rem;
}
@supports (background-image: url("../img/mountainLight.webp")) {
    #home {
        background-image: url("../img/mountainLight.webp");
    }
}

#home h1 {
	max-width: 936px;
	animation-delay: 500ms;
}
#home h1:after, #home h1:before {
	content: "";
	display: block;
	background-color: rgba(255, 255, 5, 1.0);
	height: 40px;
	width: 856px;
	position: absolute;
	top: calc(50% - 20px);
	left: -8px;
	z-index: -1;
	rotate: -1deg;
}
#home h3 {
	max-width: 936px;
}
#home h3:first-child {
	animation-delay: 400ms;
}
#home h3:last-child {
	animation-delay: 600ms;
}

/*@media screen and (min-height: 0px) and (max-height: 764px) {
		#home {
		position: initial;
		}
}*/


/**************************************************************************
   
                                   CLIENTS 

 **************************************************************************/


#clients, #outils {
	width: 100%;
	padding: 2rem 4rem;
	border-bottom: 1px solid #F5F5F5;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}


.logo-container {
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
}

.logo-slider {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: scroll 25s linear infinite;
    align-items: center;
}

.logo-slider img {
    margin: 0 4rem;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.logo-slider img:first-child {
	animation-delay: 900ms;
}
.logo-slider img:nth-child(2) {
	animation-delay: 950ms;
}
.logo-slider img:nth-child(3) {
	animation-delay: 1000ms;
}
.logo-slider img:nth-child(4) {
	animation-delay: 1050ms;
}
.logo-slider img:nth-child(5) {
	animation-delay: 1100ms;
}
.logo-slider img:nth-child(6) {
	animation-delay: 1150ms;
}
.logo-slider img:nth-child(7) {
	animation-delay: 1200ms;
}
.logo-slider img:nth-child(8) {
	animation-delay: 1250ms;
}
.logo-slider img:nth-child(9) {
	animation-delay: 1300ms;
}
.logo-slider img:nth-child(10) {
	animation-delay: 1350ms;
}



@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}



/**************************************************************************
                                 
                                 PRESENTATION 

 **************************************************************************/



#presentation {
		max-width: 1024px;
		display: inline-flex;
		flex-direction: row;
		gap: 4rem;
		align-items: center;
}

#presentation > * {
}

#presentation > img {
		width: 320px;
		max-width: 50%;
		height: auto;
		animation-delay: 600ms;
		animation-duration: 400ms !important;
}

#presentation > div > * {
	margin: 2rem 0 2rem 0;
}



/**************************************************************************
                                
                                SERVICES 

 **************************************************************************/



#services {
		background-color: rgba(241, 150, 64, 0.1);
		background-image: url("../img/services.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		min-height: 696px;
		width: 100%;
		box-sizing: border-box;
}

#services h2 {
	position: relative;
	max-width: 1024px;
	z-index: 9;
}

#services h2:after, #services h2:before {
	content: "";
	display: block;
	background-color: rgba(255, 255, 5, 1.0);
	height: 40px;
	width: 970px;
	position: absolute;
	top: calc(50% - 18px);
	left: -8px;
	z-index: -1;
	rotate: -1deg;
}

/*.cards {
	display: flex;
    gap: 32px;
    flex-direction: column;
    padding: 4rem 0;
}

.card {
	width: 100%;
	max-width: 1024px;
	height: auto;
	display: flex;
	flex-direction: row;
	border-radius: 8px;
	background-color: white;
	border: 2px solid rgba(255, 255, 5, 1.0);
	box-shadow: 4px 4px 0 rgba(255, 255, 5, 1.0);
}

.cardtitle {
	background-color: rgba(255, 255, 5, 1.0);
	padding: 32px;
	font-size: 24px;
	font-weight: 800;
	width: 288px;
	display: flex;
    align-items: center;
}

.cardcontent {
	padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}*/

.cards {
	display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 4rem 0;
    width: 100%;
    max-width: 1024px;
}

.card {
	width: calc(50% - 16px);
	max-width: 1024px;
	height: auto;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background-color: white;
	border: 2px solid rgba(255, 255, 5, 1.0);
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
}

.cardtitle {
	background-color: rgba(255, 255, 5, 1.0);
	padding: 2rem;
	font-size: 24px;
	font-weight: 800;
	width: 100%;
	display: flex;
    align-items: center;
}

.cardcontent {
	padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.tags {
	display: flex;
	flex-direction: row;
	gap: 8px;
	font-size: 12px;
	flex-wrap: wrap;
}

.tag {
	background-color: rgba(255, 255, 5, 0.24);
	border-radius: 16px;
	padding: 8px 16px;

}



/**************************************************************************
                                
                                OUTILS 

 **************************************************************************/



.logo-slider2 {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: scroll 25s linear reverse infinite;
    align-items: center;
}

.logo-slider2 img {
    margin: 0 4rem;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}







/**************************************************************************
                                
                                FOOTER 

 **************************************************************************/




footer {
		background-image: url("../img/mountainDark.jpg");
		background-color: rgba(0, 0, 0, 0.5);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;
		box-sizing: border-box;
		padding: 3rem 2rem !important;
}
@supports (background-image: url("../img/mountainDark.webp")) {
    footer {
        background-image: url("../img/mountainDark.webp");
    }
}

footer p {
	color: white;
	text-align: center;
}

#social {
	display: flex;
	flex-direction: row;
	gap: 64px;
	margin-top: 1rem;
}

#social img {
	width: 48px;
	height: auto;
}

/**************************************************************************
                                
                                MEDIA QUERIES 

 **************************************************************************/



@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
	h1 {
		font-size: 56px;
		
	}

	h2 {
		font-size: 56px;
	}

	h3 {
		font-size: 20px;
	}

	p {
		font-size: 20px;
	}

	header {
		padding: 1Rem 3rem;
	}

	.screen {
		padding: 6rem 3rem ;
	}

	#home h1:after, #home h1:before {
		width: 754px;
		height: 36px;
	}
	
	.actions {
		flex-direction: column;
		gap: 1rem;
	}

	#services h2:after, #services h2:before {
		display: none;	
	}
}

@media screen and (max-width: 798px) {
	#home h1:before {
		width: 494px;
		top: calc(50% - 17px);
		left: -4px;
	}

	#home h1:after {
		width: 257px;
		top: calc(50% + 56px);
	}
}

@media screen and (max-width: 768px) {

	h1 {
		font-size: 48px;
		
	}

	h2 {
		font-size: 48px;
	}

	h3 {
		font-size:18px;
	}

	p {
		font-size: 18px;
	}


	header {
		padding: 1Rem 2rem;
	}

	header .cta:before {
    	margin-right: 0;
    }

    #home h1:after, #home h1:before {
		width: 646px;
		height: 32px;
		top: calc(50% - 16px);
	}

	.logo-slider img {
        margin: 0 3rem;
    }

    #presentation {
		flex-direction: column;
		height: auto;
	}
	.actions {
		 align-items: center;
	}

	#services h2:after, #services h2:before {
		display: block;
		height: 48px;
		
	}

	#services h2:after {
		width: 370px;
		top: calc(50% - -6px);
		left: calc(50% - 188px);
	}

	#services h2:before {
		width: 370px;
		top: 8px;
		left: calc(50% - 180px);
	}

	.card {
		width: 100%;
	}

}

@media screen and (max-width: 693px) {
	#home h1:before {
		width: 426px;
		top: calc(50% - 16px);
	}

	#home h1:after {
		width: 222px;
		top: calc(50% + 46px);
	}
}

@media screen and (max-width: 583px) {
	#home h1:before {
		width: 426px;
		top: calc(50% - 46px);
	}

	#home h1:after {
		width: 222px;
		top: calc(50% + 16px);
	}
}

@media screen and (max-width: 480px) {
	
	h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 40px;
	}

	h3 {
		font-size: 18px;
	}

	p {
		font-size: 18px;
	}

	.screen {
		padding: 6rem 2rem ;
	}

	#home h1:before, #home h1:after  {
		height: 28px;
	}

	#home h1:before {
		width: 351px;
		top: calc(50% - 40px);
	}

	#home h1:after {
		width: 186px;
		top: calc(50% + 10px);
	}

	.logo-slider img {
        margin: 0 2rem;
    }

	#services h2:after, #services h2:before {
		display: block;
		height: 40px;
		
	}

	#services h2:after {
		width: 310px;
		top: calc(50% - -6px);
		left: calc(50% - 145px);
	}

	#services h2:before {
		width: 300px;
		top: 8px;
		left: calc(50% - 155px);
	}
	#social {
		gap: 48px;
	}
	#social img {
		width: 40px;
	}
   
}

@media screen and (max-width: 410px) {
	#home h1:before {
		width: 356px;
		top: calc(50% - 14px);
	}

	#home h1:after {
		width: 186px;
		top: calc(50% + 36px);
	}
}

@media screen and (max-width: 405px) {
	#home h1:before {
		width: 186px;
		top: calc(50% - 40px);
	}

	#home h1:after {
		width: 172px;
		top: calc(50% + 14px);
	}
}