/*GENERAL*/
:root {
  --main-color: #AF8620; /* var(--main-color) */
  --second-color: #060644; /* var(--second-color) */
  --light-color: #E7DBC0; /* var(--light-color) */
  --dark-color: #1025A1; /* var(--dark-color) */
}

body {
	margin: 0;
	display: flex;
	justify-content: center;
}

.container {
	width: 100%;
	margin: auto;
}

h2, 
h3 {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
}

h2 {
	text-align: center;
	margin: 0;
	padding: 25px;
}


/*HEADER*/
header {
	position: relative;
	width: 100%;
	height: 880px;
}


header .headerTextContent {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}


header img {
	object-fit: contain;
	width: 300px
}

header .headerTextContent {
	display: flex;
	justify-content: center;
	padding-top: 25px;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 900;
	font-size: 62px;
	line-height: 75px;
}



/*CONTENT*/
section {
	padding-bottom: 80px;
	padding-top: 80px;
}

h1
{
	color: var(--main-color);
	margin-top: 0;
}

h2
{
	font-weight: 700;
	font-size: 35px;
	line-height: 38px;
	color: var(--second-color);
}

h3 {
	font-weight: 700;
	font-size: 28px;
	line-height: 27px;
	color: var(--dark-color);
	margin-bottom: 0;
	text-align: center;
}

article {
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

p {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 17px;
	color: white;
}


/***************/
.fadein {
    animation: fadeinop 2s;
    -moz-animation: fadeinop 2s; /* Firefox */
    -webkit-animation: fadeinop 2s; /* Safari et Chrome */
    -o-animation: fadeinop 2s; /* Opera */
}
@keyframes fadeinop {
    from {
        opacity:0;
		transform: translateY(50vh);
    }
    to {
        opacity: 1;
		transform: translateY(0vh);
    }
}
.directionRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.directionColumn {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.centered {
	margin: 0 auto;
}

.sectionLinearGradientBackground {
	background: linear-gradient(to bottom, var(--main-color), var(--second-color));
}

.sectionLinearGradientBackgroundTransp {
	background-image: linear-gradient(to bottom, color-mix(in srgb, var(--main-color) 50%, transparent), 
        color-mix(in srgb, var(--light-color) 60%, transparent));
	border-radius: 15px;
	border: 3px solid var(--main-color);
}


.whiteContentSection h2,
.whiteContentSection h3,
.whiteContentSection p {
	color:  white;
}

.textCenter {
	text-align: center;
}

/***************/
.sectionLightBackground {
	background-color: color-mix(in srgb, var(--light-color) 50%, transparent);
}

/* Le calque de couleur transparent posé PAR-DESSUS l'image */
.sectionLightImgOverlay::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	
	/* fond transparent uniforme basé sur votre variable Hexa */
	background-color: color-mix(in srgb, var(--light-color) 50%, transparent);
	
	/* Permet de cliquer à travers le calque (ex: clic droit sur l'image) */
	/*pointer-events: none; */
}



.button {
	margin: 20px 0px;
	padding: 28px 40px;

	border-style: solid;
	border-width: 2px;
	border-radius: 5px;

	box-sizing: border-box;

	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 22px;

	display: flex;
	align-items: center;
	justify-content: center;

	text-decoration: none;
}

.buttonDrakGreyColor {
	color: var(--dark-color);
	border-color: var(--dark-color);
}

.buttonMainColor {
	color: var(--main-color);
	border-color: var(--main-color);
}

.buttonSecondColor {
	color: var(--second-color);
	border-color: var(--second-color);
}

.buttonRounded {
	border-radius: 39px;
}

.buttonHighlight:hover {
	font-weight: 800;
	border-width: 3px;
}

@media (max-width: 780px) {
	h1 {
		font-weight: 800;
		font-size: 40px;
		line-height: 42px;
	}
	
	h2
	{
		font-weight: 700;
		font-size: 22px;
		line-height: 24px;
	}

	h3 {
		font-weight: 600;
		font-size: 20px;
		line-height: 24px;
	}

}