@font-face {
    font-family: BrownSugar;
    src: url(font/brown-sugar.ttf);
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamBook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-BookItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamBookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamLightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamMedium_1.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/GothamMediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-UltraItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-XLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-XLightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}


:root {
  /* #f0f0f0 in decimal RGB */
  
  --main_color: #93b7be;
  --second_color: #92b167;
}

br{
	line-height: 2rem;
  height: 2rem;
}

html, body{
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #121212;
}

body{
	overflow-x: hidden;
}
header{
	width: 100%;
	display: flex;
	justify-content: center;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.font-title {
    font-family: BrownSugar;
	font-size: 130px;
	color: rgb(243, 243, 243);
}

.font-subtitle {
    font-family: Gotham;
	font-size: 35px;
	color: rgb(243, 243, 243);
	font-weight: 400;
}

.content {
	position: relative;
    z-index: 1; /* Place le contenu au-dessus du header */
    background-color: white; /* Fond du contenu pour couvrir le header */
    padding: 20px;
    margin-top: 800px;
}

content {
	display:flex;
	flex-direction: column;
	background: linear-gradient(140deg, rgba(18,18,18,0.1) 0%, rgba(146, 177, 103,0.1) 100%);
}

.header-background-parent{
	background: linear-gradient(140deg, rgba(1,69,113,0.90) 0%, rgba(215,237,226,0.90) 100%);
	margin: 0px;
	width: 100%;
	height: 50rem;
	position: absolute;
	z-index: -1;
	display: flex;
	justify-content: center;
}

.header-background-parent-bckg{
	background-size: cover;
	background-position: 0% 0%;
	margin: 0px;
	width: 100%;
	height: 50rem;
	position: absolute;
	z-index: -1;
	display: flex;
	justify-content: center;
}

.parent-bckg-a{
	background: no-repeat url(../img/bckg/1.jpg);
	background-size: cover;
  	background-position: 0% 0%;
	background-attachment: fixed;
    top: 0;
    height: 800px;
    z-index: 1;
}

.parent-bckg-b{
	background: no-repeat url(../img/bckg/2.jpg);
	background-size: cover;
    background-position: 0% 0%;
}


.header-background{
	background: linear-gradient(140deg, rgba(1,69,113,0.75) 0%, rgba(146, 177, 103,0.75) 100%);
	margin: 0px;
	width: 100%;
	height: 50rem;
	position: sticky;
	z-index: 2;
}

.header-parent{
	width: 70%;
	display: flex;
	justify-content: space-around;
	margin: 10px;
	position: sticky;
	z-index: 2;

}

.header-nav-ul{
	list-style-type:none;
	display: flex;
	flex-direction: row;
  align-items: center;
  margin: 0px;
}

.header-nav-li{
  margin: 0 15px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.header-nav-div{
	display: flex;
}

.header-nav-a{
	font-weight: 400;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1rem;
  color: #e3f2eb;
}

.header-logo-img{
	width: 150px;
	padding:0 25px;
	margin-top:-4px;
}

.header-logo{
	display: flex;
}

.main-title{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 2rem;
  color: #e3f2eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10rem;
  line-height: 1.3;
  text-shadow: 2px 2px 40px rgba(0,0,0,0.2);
}

.main-title-big{
	font-size: 4.5rem;
	font-weight: 600;
	color:white;
}

.main-title-align{
	display: flex;
	align-items: baseline;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 48
}

.material-symbols-outlined-fill {
  font-variation-settings:
  'FILL' 1,
  'wght' 100,
  'GRAD' -25,
  'opsz' 48
}

.go-down{
	
	/*height: 5rem;
	width: 5rem;*/
	border-radius: 50%;
	margin-top: 15rem;
	color:white;
	cursor: pointer;
	font-size: 75px;
}

.content-parent{
	display:flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	padding: 60px 0;
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  color: #222;
 
}

.content-side{
	display:flex;
	/*justify-content: center;*/
	width: inherit;
}

.content-side-left{
	justify-content: flex-end;
}

.content-side-right{
	margin-left: 60px;
	margin-top: 50px;
}

.content-side-right-txt-a{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1.2rem;
  color: #8c8b8b;
  display: block;
}

.content-side-right-txt-b{
	font-weight: 400;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 2.4rem;
  color: #e4e4e4;
  display: block;
}

.content-side-right-txt-c{
	margin-top: 75px;
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1rem;
  color: #d0cece;
	display: inline-block;
	width: 450px;
}

.content-right-align-text {
	text-align: end;
}

.content-side-right-justify{
	display: flex;
    flex-direction: row-reverse;
}

.content-side-right-margin{
	margin-right: 60px;
	margin-top: 50px;
}

.content-side-right-image {

}

.content-side-right-txt-d{
	padding: 15px 40px;
	background-color: var(--main_color);
	border-radius: 25px;
	font-weight: 400;
	font-family: 'Sofia Pro', sans-serif;
	font-size: 1rem;
	color:white;
}

.shdw-s{
	box-shadow: 2px 2px 40px rgba(0,0,0,0.2);
}

.image-ilu-right{
	width: 500px;
	height: 600px;
	margin-right: 20px;
	border-radius: 7px;
}

.image-ilu-right-p{
	background: linear-gradient(140deg, rgba(1,69,113,0.5) 0%, rgba(146, 177, 103,0.5) 100%);
	position: absolute;
}

.image-ilu-right-img{
	object-fit: cover;
	width: 500px;
	height: 600px;
	border-radius: 7px;
}

.content-side-right-txt-d:hover{
	color:#e3f2eb;
	text-decoration: none;
}

.reveal{
  opacity: 0;
  transition: 1s all ease;
}

.reveal-l{
  position: relative;
  transform: translateX(-150px);
}

.reveal-t{
  position: relative;
  transform: translateY(-150px);
}

.reveal-r{
  position: relative;
  transform: translateX(150px);
}

.active{
	transform: translateY(0);
  transform: translateX(0);
  opacity: 1;
}

.line{
	margin-left: 100px;
	height: 3px;
	width: 350px;
	margin-top: 145px;
	background-color: var(--second_color);
	position: absolute;
	border-radius: 35px;
	z-index: 10;
}

.line-left{
	margin-right: 250px;
}

.side-left-line{
	width:30%;
	height:3px;
	margin-right: 25px;
	margin-top: 15px;
	background-color: var(--second_color);
	border-radius: 35px;
	z-index: 10;
}

.button-more-a{
	margin-top: 45px;
}

.button-more-b{
	margin-top: 70px;
}


.content-parent-list{
	margin-top: 50px;
	display: flex;
	flex-direction: column;
}

.content-childparent{
	margin-top: 55px;
	display:flex;
	justify-content: space-around;
}

.content-child-list{
	display:flex;
	flex-direction: column;
	align-items: center;
	border-radius: 20px;
  box-shadow: -2px 2px 14px 0 rgb(35 31 32 / 9%), 0 0.3px 0.9px 0 rgb(35 31 32 / 1%);
  padding: 15px;
	cursor: pointer;
	transition: all 0.5s ease;
}

.content-child-list:hover{
	box-shadow: 0px 0px 14px 10px rgba(147,183,190,0.15);
}

.context-a-list{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1.3rem;
  color: #222;
  margin-top: 10px;
 text-align: center;
}

.context-b-list{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1rem;
  color: #7c797a;
  display: inline-block;
  width: 250px;
  margin-top: 15px;
  margin-left: 5px;
  text-align: center;
}

.content-bckg-image-page{
	object-fit: cover;
	height: 200px;
	width: 300px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	z-index: 9;

}

.content-childparent-page{
	width:300px;
	height:500px;
	display:flex;
	flex-direction: column;
	align-items: center;
	border-radius: 20px;
	box-shadow: -2px 2px 14px 0 rgb(35 31 32 / 9%), 0 0.3px 0.9px 0 rgb(35 31 32 / 1%);
	margin: 15px;
}	

.content-child-list-page{
	/*box-shadow: -2px 2px 14px 0 rgb(35 31 32 / 9%), 0 0.3px 0.9px 0 rgb(35 31 32 / 1%);*/
	display:flex;
	align-items: center;
	flex-direction: column;
	border-radius: 20px;
	width: 300px;
	height: fit-content;
	z-index: 10;
	margin:20px;
	background: transparent;
}

.content-child-page-sdw{
	box-shadow: -2px 2px 14px 0 rgb(35 31 32 / 9%), 0 0.3px 0.9px 0 rgb(35 31 32 / 1%);
	position: absolute;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.content-child-page{
	position: absolute;
	/*background: linear-gradient(140deg, rgba(1,69,113,0.5) 0%, rgba(215,237,226,0.5) 100%);*/
	height: 200px;
	width: 300px;
	z-index: 10;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.content-bckg-image-list-page{
	width:180px;
	margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	opacity:0.075;
	position:absolute;
	pointer-events: none;
}

.content-bckg-list-page{
	box-shadow: -2px 2px 14px 0 rgb(35 31 32 / 9%), 0 0.3px 0.9px 0 rgb(35 31 32 / 1%);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: fit-content;
	padding: 15px;
	background: white;
	z-index: 11;
	border-radius: 20px;
	margin-top: 180px;
}

.content-bckg-list-page-a{
	min-height: 410px;
}

.content-bckg-list-page-b{
	min-height: 320px;
}

.context-a-list-page{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1.3rem;
  color: #222;
  width: 80%;
 	text-align: center;
}

.context-b-list-page{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1rem;
  color: #7c797a;
  display: inline-block;
  width: 80%;
  margin-top: 20px;
  margin-left: 5px;
  text-align: center;
}

.main-color{
	color: var(--main_color);
}

.content-side-left-sub{
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1.1rem;
  color: #7c797a;
  display: block;
}

.page-txt-a{
	margin-top: 15px;
	font-weight: 300;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1rem;
  color: #424242;
	display: inline-block;
	width: 950px;
	padding-bottom: 50px;
}


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

.mobile-remove{
	display: none;
}

.content-parent {
	flex-direction: column;
	align-items: center;
}

.line{
	margin-left: 0px;
}

.content-side {
  flex-direction: column;
  align-items: center;
}

.content-side-right {
	margin-left: 0px;
}

.image-ilu-right{
	margin-right: 0px;
}

}


@media screen and (max-width: 580px) {
.go-down{
	margin-top: 2rem;
}

.image-ilu-right-img{
	width: 100%;
	height: 450px;
}

.image-ilu-right {
    width: 90%;
    height: 450px;

}

.button-more-a{
	display: flex;
	justify-content: center;
}

}