.content_histoire,
.content_histoire2 {
	margin: auto;
	flex: 1;
	width: 75%;
	display: flex;
	flex-direction: column;
	padding: 5rem;
	justify-content: space-between;
}
.content_histoire{
	gap: 13rem;
}

.content_histoire2{
	gap: 4rem;
}

#team{
	display: flex;
	flex-direction: column;
	gap:8rem;
}


/**************************
 *****     PAGE 1     *****
 **************************/

 #forth_phase {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	width: 100%;
 }

#bigTitle{
	font-size: 3.8rem;
	font-weight: 700;
	text-align: center;
	color:rgb(46, 45, 45) ; 
	width: 100%;

	background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "RobotoBold";
    Letter-spacing: 1px;

    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
}
#bigTitle1{
	font-size: 3.8rem;
	font-weight: 700;
	text-align: center;
	color:rgb(46, 45, 45) ; 
	width: 100%;
	/* font-family: "TuffyRegular"; */


	background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "RobotoBold";
    Letter-spacing: 1px;
    /* font-size: 5rem; */
    /* width: 100%; */
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
}
#bigTitle2{
	font-size: 3.8rem;
	font-weight: 700;
	text-align: center;
	color:rgb(46, 45, 45) ; 
	width: 100%;
	/* font-family: "TuffyRegular"; */


	background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "RobotoBold";
    Letter-spacing: 1px;
    /* font-size: 5rem; */
    /* width: 100%; */
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
	
}
#subtitle{
	font-size: 3rem;
	font-family: "TuffyBold",sans-serif;
	font-weight: bold;
}

#histoire_3{
	display: flex;
	flex-direction: column;
	gap: 87rem;
}

.subtext{
	font-size: 3rem;
	display: flex;
    flex-direction: column;
    
    gap: 3rem;
}
.subtextSpan{
	font-family: "RobotoRegular",sans-serif;
}
.subtextSpanBold{
	font-family: "RobotoBold",sans-serif;
}
 .text{
	font-size:3rem ;

 }

#second_text{
	display:flex; 
	flex-direction: row;
}

#second_text1{
	max-width: 100%;
    width: auto;
}
#logo{
	width: auto;
	height:35rem;
}
#logo2{
	width: 100%;
	height:auto;
}
#logoDiv{
	display: flex;
    flex: 2;
    justify-content: flex-end;
}
#second_text1{
	flex: 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#logoFoodHeaDiv{
		flex: 2;
	}
	#first_text{
		flex: 4;
	}
@media(max-aspect-ratio:3/4){
	#third_phase_first{
		flex-direction: column !important;
	}

	#logo{
		width: auto;
		height:60rem;
	}

	#first_text{
		display: flex;
        flex-direction: column;
        margin: auto;
        justify-content: center;
		/* margin-left: -12vh; */
		/* margin-top: -6vh; */
	}
	
	#text1{
		font-size:6rem;
		text-align:center;
	}
	#text2{
		font-size:6rem;
		text-align:center;
	}

}

#third_phase_first{
	display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-left: 19%; */
    /* margin-bottom: -1%; */
}
#third_phase{
	display: flex;
    flex-direction: column;
    gap: 10rem;
	margin-top:5rem
}
#text1{
	font-size: 3rem;
	/* width: 75% ; */
	/* margin-left:12% ;  */
}
#text2{
	font-size: 3rem;
	/* width: 85% ; */
	/* margin-left:12% ;  */
}
#text2_phase2{
	font-size: 3rem;
	text-align: center;
	font-weight: 500;
	color: rgb(46, 46, 46);
}

#second_phase{
	background-color: rgb(206, 240, 235);
	/* max-width:  100%; */
	/* width: 109.7%; */
	/* margin-left: -13%; */
	/* height: 12rem; */
	padding: 4rem;
	/* padding-left: 26.76rem; */
	/* padding-top: 1%; */
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
#text_phase2{
	font-size: 3rem;
	text-align: center;
	justify-content: center;
    display: flex;
}




#image_plate{
	width: auto;
	height: 49rem;
}

@media(max-aspect-ratio:3/4){
	#image_plate{
		width: auto;
		height: 68rem;
		/* margin-left: -26%; */
	}

	#text_phase2{
		font-size: 3.5vw;
	}
}
#first_img_project{
	/* margin-left: 88%; */
	width: 90%;
	height: auto;
}


#first_phase_project{
	display: flex;
	flex-direction: row;
	/* margin-top: 6%;
	margin-bottom: 11%; */
}

#histoire22{
	background-image: url(../img/image1.png);
	background-size: 9%;
	background-repeat: no-repeat;
	background-position: 100% 50% ;
}

#histoire23{
	background-image: url(../img/visuels-site-web-V8.1-2.png);
	background-size: 12%;
	background-repeat: no-repeat;
	background-position: 100% 87% ;
}


#histoire2{
	background-image: url(../img/Origine/histoire1_leafl.png);
	background-size: 6%;
	background-repeat: no-repeat;
	background-position: 0% 18%;
}

@media(max-aspect-ratio:3/4){
	/* #histoire22{
		/* background-image: none; 
	}
	#histoire23{
		/* background-image: none; 
	} */
}
#histoire2_content {
	min-height: 80rem;
}

#histoire2_2 {
	background-color: #f7fbf9;
	min-height: 170rem;
}

#histoire2_4 {
	background-repeat: no-repeat;
	background-position-y: 10rem;
	background-size: 15rem;
	background-image: url(../img/Origine/histoire1_leafl.png);
}

#histoire2_3 {
	background-color: #f7fbf9;
	min-height: 120rem;
}

#flexOrdre {
	min-height: 58rem;
	align-items: center;
}

.text_margein5 {
	margin: 5rem;
}

.bleu_text_origin {
	color: var(--BLEU);
	font-size: 4rem;
	font-family: "TuffyRegular";
}

#diveureka {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 30rem;
	justify-content: space-between;
	gap: 3rem;
}



#marion_info {
	display: flex;
	justify-content: center;
}

#marion_info2 {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 5rem;
}

#image_marion {
	width: 90%;
}

#marion_img {
	width: 27%;
}

@media (max-width: 640px) {
	#marion_img {
		width: 45%;
	}
}


.text_content {
	width: 70%;
}

#description_marion {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 25rem;
}

.displayFlexCenter {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

#imageHi1 {
	max-width: 20rem;
	height: auto;
}

#image_groupP {
	width: 100%;
}

#flechPapier {
	width: 35rem;
}

#imageHi2,
#imageHi2_1 {
	max-width: 28rem;
	height: auto;
}

#imageHi3,
#imageHi4 {
	max-width: 30rem;
	height: auto;
}

#lastDivImage {
	max-width: 40%;
	height: auto;
}

#lastDivtext {
	width: 50%;
}

.displayFlexCenterAround {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#subnav {
	width: 80%;

	height: 2rem;
	border-radius: 1rem;
	background-color: var(--BLEUCLAIR);
	margin: auto;
	margin-top: 7rem;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: row;
}

#subnav * {
	flex: 1;
	margin: 0;
	padding: 0;
	border-radius: 1rem;
}

#subnav .nav_selected,
#subnav .nav_selected:hover {
	background-color: white;
	opacity: 0.5;
	border: 0;
	cursor: auto;
}

#subnav *:hover {
	background-color: white;
	opacity: 0.8;
	border: var(--BLEU) 1px solid;
	cursor: pointer;
}

#histoire1_title {
	margin: auto;
	color: var(--BLEU);
	font-size: 3.5rem;
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 5rem;
}

#histoire1_displayer {
	width: 75%;
	height: 100%;
	flex: 1;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: auto;
	justify-items: center;
}

.histoire1_tab {
	display: none;
	position: absolute;
}

.histoire1_tab_selected {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	flex: 1;
}

.histoire1_tab_selected>*:nth-child(odd) {
	width: 12.5rem;
	height: 100%;
	text-align: center;
}

.histoire1_tab_selected>a:nth-child(odd) img {
	width: 7.5rem;
	height: auto;
	margin: auto;
}


.tab_content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 144;
	max-width: 100rem;
	text-align: center;
	font-size: 2.4rem;
	align-self: stretch;
	margin: auto;
	margin-top: 0;
	margin-bottom: 5rem;
	gap: 1rem;
}

#histoire1_1,
#histoire1_4 {
	background-image: url("../img/history1_leafl"), url("../img/history1_leafr");
	background-size: 10rem auto, 10rem auto;
	background-position: left 100%, right 10%;
	background-repeat: no-repeat;
}

#histoire1_noright,
#histoire1_noleft {
	height: 30rem;
	border-radius: 4rem;
	margin: 1rem;
}

.wrongslide {
	animation-duration: 2s;
	animation-name: slide_wrongslide;
}

@keyframes slide_wrongslide {
	from {
		background-color: #FF5050;
	}

	to {
		background-color: white;
	}
}

/**************************
 ****     PAGE 1_1     ****
 **************************/
#histoire1_1_1 {
	font-family: "TuffyRegular";
	font-size: 6rem;
	color: var(--BLEU);
	padding-bottom: 3rem;
}

#histoire1_1_2 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	font-size: 3.2rem;
	color: var(--BLEU);
	text-align: right;
	padding-bottom: 2rem;
}

#histoire1_1_2 .imp {
	font-weight: 600;
}

#histoire1_1_2>div {
	max-width: 75%;
}

#histoire1_1_2 img {
	height: 15rem;
	width: auto;
	margin: auto;
}

#histoire1_1_3 {
	font-style: italic;
	padding-bottom: 3rem;
}

#histoire1_1_5 {
	font-weight: 600;
}




/**************************
 ****     PAGE 1_2     ****
 **************************/

#histoire1_2_1 {
	padding-top: 2rem;
}

#histoire1_2_1 .imp {
	font-family: "TuffyRegular";
	font-size: 5rem;
	color: var(--BLEU);
	line-height: 0;
}

#histoire1_2_2 {
	font-style: italic;
	font-size: 2rem;
}

#histoire1_2_2 a,
#histoire1_2_2 a:visited {
	color: var(--NOIR);
}

#histoire1_2_3,
#histoire1_2_4 {
	font-size: 2.2rem;
}

#histoire1_2_3 .imp {
	font-weight: 600;
	color: var(--VERT);
}

#histoire1_2_4 .imp {
	color: var(--BLEUCLAIR);
}

#histoire1_2_5 {
	font-weight: 600;
	font-size: 2.2rem;
	padding-bottom: 2rem;
	padding-top: 2rem;
}

#histoire1_2_6 {
	display: flex;
	flex-direction: row;
	text-align: center;
}

#histoire1_2_6 img {
	max-width: 25rem;
	max-height: 12rem;
	height: auto;
	width: auto;
	margin: auto;
}

.histoire1_arrcur {
	max-height: 6rem !important;
}

#histoire1_2_6>div>img {
	width: 5rem;
	height: auto;
	margin: 2rem;
	margin-top: 5rem;
}

#histoire1_2_6>div:nth-child(4n+1) {
	flex: 4;
}

#histoire1_2_6>div:nth-child(3) {
	flex: 3;
}



/**************************
 ****     PAGE 1_3     ****
 **************************/
#histoire1_3_1 {
	font-family: "TuffyRegular";
	font-size: 3.5rem;
	color: var(--VERT);
}

#histoire1_3_2 {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 2.4rem;
	text-align: left;
	font-style: italic;
	padding-bottom: 2rem;
}

#histoire1_3_2 .imp {
	font-weight: 600;
	font-style: normal;
}

#histoire1_3_2 p {
	margin: 0;
}

#histoire1_3_2 img {
	height: 15rem;
	width: auto;
	margin-left: 8rem;
	margin-right: 2rem;
}

#histoire1_3_3 {
	font-weight: 600;
	color: var(--BLEU);
}

#histoire1_3_5 {
	color: var(--BLEU);
	font-size: 2.25rem;
}

#histoire1_3_5 .imp {
	font-weight: 600;
}



/**************************
 ****     PAGE 1_4     ****
 **************************/
#histoire1_4_1 .imp {
	font-weight: 600;
}

#histoire1_4_4 {
	font-size: 2.8rem;
	color: var(--BLEU);
	font-weight: 600;
	padding: 2rem;
}

#histoire1_4_5 {
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 20rem;
	width: 70rem;
	background-image: url("../img/histoire1_eclatl.png"), url("../img/histoire1_eclatr.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left, right;
}

@media(max-aspect-ratio:3/4) {
	#first_img_project{
		width: auto;
        height: 172px;
        /* margin-right: -30vh; */
        /* margin-left: 46vw; */
	}
	

	#bigTitle{
		padding: 6vh;
		text-align: center;
		justify-content: center;
	}
	#bigTitle1{
		padding: 4vh 0;
		text-align: center;
		justify-content: center;
	}
	#bigTitle2{
		padding: 4vh 0;
		text-align: center;
		justify-content: center;
	}

	#first_phase_project{
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;
		/* margin-left: 24%; */
	}
}

#histoire1_4_5 img {
	height: auto;
	margin: auto;
}

.histoire1_4_5_none {
	width: 1px;
}

.histoire1_4_5_slide {
	animation-duration: 2s;
	animation-name: slidefoodhea;
}

.histoire1_4_5_show {
	width: 54rem;
}

.main6_hidder_show {
	width: 0;
}

@keyframes slidefoodhea {
	from {
		width: 0;
		/*transform: rotate(-180deg);*/
	}

	to {
		width: 54rem;
		/*transform: rotate(360deg);*/
	}
}

/**************************
 *****     PAGE 2     *****
 **************************/


#headband2,
#headband3 {
	width: 100%;
	color: white;
	font-family: "TuffyRegular";
	font-size: 4.5rem;
	text-align: center;
	padding: 6rem;
	padding-left: 0;
	padding-right: 0;
	margin: 3rem 0;
}

#headband4{

	font-size: 6rem;
	font-weight: 700;
	text-align: center;
	color:rgb(46, 45, 45) ; 
	font-family: "TuffyRegular";
	background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 140rem;
    Letter-spacing: 1px;
    height: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
	margin-top: -28%;
	margin-bottom: -22%;
}

#firstDiv{
	margin-bottom: 5%;
}


#headband2 {
	background-color: hsl(173, 53%, 48%)
}

#histoire2_top {
	width: 97%;
	/* z-index: 1; */
	text-align: center;
	display: flex;
	justify-content: center;

}

#histoire2_middle {
	color: var(--BLEU);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	text-align: center;
	font-size: 2rem;
	margin: 0;
	width: 100%;
}

#histoire2_middle>div {
	width: 50%;
	display: flex;
	flex-direction: column;
	color: var(--GRIS);
	padding: 4rem;
}

#histoire2_middle>div>div:nth-child(2) {
	font-size: 2.1rem;
	color: var(--BLEU);
	height: 5rem;
	vertical-align: middle;
}

#histoire2_middle>div>div {
	padding: 0.5rem;
}

#histoire2_middle img {
	margin: auto;
	height: 15rem;
	width: auto;
}

.image_div {
	text-align: end;
	position: relative;
	bottom: 5rem;
	max-width: 75%;
	left: 20%;

}

.image_principal {

	width: 100%;
	height: auto;
}

#logos_images{
	display: flex;
    flex-direction: column;
    min-height: 70rem;
	justify-content: center;
}




/**************************
 *****     PAGE 3     *****
 **************************/

#headband3 {
	background-color: var(--SAUMON);
}

#histoire3_middle {
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	font-size: 1.8rem;
	margin: auto;
	max-width: 85%;
	padding-top: 5rem;
}

#histoire3_middle>div {
	width: 27%;
	display: flex;
	flex-direction: column;
	color: var(--BLEU);
}

#histoire3_middle>div>div:nth-child(2) {
	font-size: 1.8rem;
	color: var(--NOIR2);
	text-align: justify;
	line-height: 1.3;
}

.underline {
	text-decoration: underline;
}

#histoire3_middle>div>div {
	padding: 0.5rem;
}

#histoire3_middle img {
	margin: auto;
	height: auto;
	width: 25rem;
}





/**************************
 *****     PAGE 4     *****
 **************************/


#histoire4_content {
	justify-content: space-around;
	min-height: 100rem;
}

.histoire4_slist {
	display: flex;
	flex-direction: column;
	color: var(--GRIS2);
}

.histoire4_slist>div:nth-child(2) {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

.histoire4_slist>div:nth-child(1) {
	padding: 5rem;
	font-size: 3rem;
}

.histoire4_slist>div {
	margin: auto;
}

.histoire4_slist img {
	margin: 5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: auto;
	max-width: 40rem;
	height: 15rem;
}

/* azz added */
@media (max-width:1097.14px) {
	#histoire1_displayer {
		width: 100%;
	}
}

@media (max-width:768px) {
	#histoire2_middle {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-size: 3rem;
	}

	#histoire2_middle>div>div {
		padding: 0.5rem;
	}

	#histoire2_middle>div>div:nth-child(2) {
		font-size: 3.1rem;
	}

	#histoire2_middle img {
		height: 30rem;
	}

	#histoire2_middle>div {
		width: 100%;
	}

	#headband2,
	#headband3 {
		font-size: 6.7rem;
	}

	#histoire3_middle {
		display: flex;
		/* flex-direction: column; */
		/* flex-wrap: wrap; */
		font-size: 3rem;
		align-content: space-around;
	}

	#histoire3_middle>div {
		width: 60%;
		padding-bottom: 5rem;
	}

	#histoire3_middle>div>div:nth-child(2) {
		font-size: 3rem;
	}
}

/**************************
 *****     PAGE 1     *****
 **************************/
@media (max-aspect-ratio: 5/7) {
	#histoire1_title {
		font-size: 2.5vh;
	}
}

@media (max-aspect-ratio: 7/8) {
	.tab_content {
		font-size: 2.1vh;
	}
}

/**************************
 ****     PAGE 1_1     ****
 **************************/
@media (max-aspect-ratio: 3/4) {
	#histoire1_1_2 {
		flex-direction: column;
		text-align: center;
	}

	#histoire1_1_2>div {
		max-width: 100%;
	}


	#histoire1_1_1 {
		font-size: 4vh;
	}

	#histoire1_1_2 {
		font-size: 2.4vh;
	}

	#histoire1_1_2 img {
		height: 20vw;
	}

}

@media (max-aspect-ratio: 3/5) {
	#histoire1_1_2 img {
		height: 18vh;
	}

	#histoire1_3_2 img {
		height: 18vh;
	}
}

@media (max-aspect-ratio: 7 / 8) {
	.tab_content {
		padding: 4rem;
	}
}

/**************************
 ****     PAGE 1_2     ****
 **************************/

@media (max-aspect-ratio: 9/10) {
	#histoire1_2_1 .imp {
		font-size: 4.5vh;
	}

	#histoire1_2_2 {
		font-size: 1.8vh;
	}

	#histoire1_2_3,
	#histoire1_2_4,
	#histoire1_2_5 {
		font-size: 1.98vh;
	}

}

/**************************
 ****     PAGE 1_3     ****
 **************************/
@media (max-aspect-ratio: 4/5) {
	#histoire1_3_2 {
		flex-direction: column;
		text-align: center;
		font-size: 5rem;
	}

	#histoire1_3_2>div {
		max-width: 100%;
	}

	#histoire1_3_5 {
		font-size: 4.25rem;
	}

	#histoire1_4_4 {
		font-size: 5rem;
	}
}




/**************************
 ****     PAGE 1_4     ****
 **************************/

/**************************
 *****     PAGE 2     *****
 **************************/





/**************************
 *****     PAGE 3     *****
 **************************/
@media (max-aspect-ratio: 7/8) {
	#histoire3_middle {
		/* flex-direction: column; */
		justify-content: space-around;
		align-items: center;
	}



	#histoire3_middle>div>div {
		padding: 0.5vh;
	}

	#histoire3_middle img {
		margin: auto;
		height: auto;
		width: 20vh;
	}
}


/**************************
 *****     PAGE 4     *****
 **************************/
@media (max-aspect-ratio: 2/3) {
	.histoire4_slist img {
		margin: 3.4vh;
		margin-top: 1.3vh;
		margin-bottom: 1.3vh;
		height: auto;
		width: auto;
		max-width: 26vh;
		max-height: 10vh;
	}
}

/*** histoire mobile**/
@media (max-aspect-ratio: 3/5) {

	#headband4,
	#headband2,
	#headband3 {
		font-size: 3.9vh;
	}

	#histoire2_top {
		font-size: 3vh;
		width: 100%;
	}

	.image_principal {
		width: 100%;
	}



	#histoire2_middle img {
		height: 35rem;
	}

	#histoire2_middle {
		font-size: 4.5rem;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	#histoire2_middle>div>div {
		white-space: normal;
		padding: 1rem;
		white-space: normal !important;
	}

	#histoire2_middle>div>div:nth-child(2) {
		font-size: 5rem;
		padding-bottom: 4rem;
		padding-top: 2rem;
	}

	#histoire3_middle>div>div:nth-child(2) {
		font-size: 4rem;
		text-align: justify;
	}

	.tab_content {
		max-width: 100%;
	}

	#histoire3_middle {
		font-size: 4.8rem;
	}

	.histoire4_slist>div:nth-child(1) {
		font-size: 6rem;
	}

	#histoire2_middle>div {
		width: 100%;
	}

}



#main9_middle_id{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#logoFoodHea{
	width: 38rem;
    height: auto;
    /* margin-left: -16%; */
    /* margin-block: 20%; */
}



#main9_content {
    text-align: center;
    max-width: 100%;
    margin-bottom: 10rem;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    margin: auto;
}
.my-auto{
max-width: 75%;
}

.main9_middle {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-family: 'RobotoRegular',sans-serif;
    color: var(--GRIS);
}

.slider {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    padding: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 80%;
    margin: auto;
    min-width: 50rem;
    background-color: white;
    padding: 4rem 0;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 80%;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    justify-content: space-around;
}

.slide img {
    max-width: 22rem;
    max-height: 22rem;
}

.slide-content {
    max-width: 70%;
    text-align: left;
    position: relative;
    z-index: 1;
}

.slide-content h3 {
    color: #008080;
    margin: 0;
}

.slide-content h4 {
    margin: 2rem 0;
    font-weight: normal;
    color: #333;
}

.slide-content p {
    text-align: justify;
    margin: 0;
    font-size: 2rem;
    color: #333;
    font-weight: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 6em;
    position: relative;
}

.expand-icon {
    position: absolute;
    font-size: 1em;
    cursor: pointer;
    right: -10px;
    bottom: -2px;
    transform: translateY(50%);
}

.expand-icon {
    transform: rotate(90deg);
}

.dots {
    text-align: center;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 3px;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.dots span {
    height: 8px;
    width: 8px;
    margin: 0 1px;
    background-color: #e5f5f5;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    background-color: #c0f5f5;
}

.dots .active {
    background-color: #008080;
    height: 10px;
    width: 10px;
}


#arrowleft {

    display: inline-block;
    cursor: pointer;


    width: 3rem;
    height: 3rem;
    border-right: 0.55rem solid rgb(18, 114, 125);
    border-bottom: 0.55rem solid rgb(18, 114, 125);
    /* Arrow color */
    transform: rotate(-45deg);
    /* Rotate to create the arrow shape */
    margin: 0 4rem;
    /* Space between arrow and box */
    transform: rotate(135deg);
    /* Rotate for left arrow */
}

#arrowright {
    /* height: 8px; */
    /* width: 8px; */
    /* margin: 0 1px; */
    /* background-color: #e5f5f5; */
    /* border-radius: 50%; */
    display: inline-block;
    cursor: pointer;
    /* background-color: #c0f5f5; */


    width: 3rem;
    height: 3rem;
    border-right: 0.55rem solid rgb(18, 114, 125);
    border-bottom: 0.55rem solid rgb(18, 114, 125);
    /* Arrow color */
    transform: rotate(-45deg);
    /* Rotate to create the arrow shape */
    margin: 0 4rem;
    /* Space between arrow and box */
    /* transform: rotate(-45deg); */
    /* Rotate for right arrow */
}



.container {

display: flex;
align-items: center;
justify-content: center;
min-height: 35rem;
margin-bottom: 20rem;
}

.carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.carousel-inner {
	display: flex;
	transition: transform 0.5s ease;
}

.carousel-item {
	min-width: 33.33%;
	transition: transform 0.5s ease;
}


.carousel-control-prev,
.carousel-control-next {
	display: inline-block;
	cursor: pointer;
	width: 3rem;
	height: 3rem;
	border-right: 0.55rem solid rgb(18, 114, 125);
	border-bottom: 0.55rem solid rgb(18, 114, 125);
	margin: 0 4rem;
}

.carousel-control-prev {
	transform: rotate(135deg);
	width: 6rem;
    height: 6rem;
    border-radius: 0.5rem;
	font-weight: bold;
}

.carousel-control-next {
	transform: rotate(-45deg);
	width: 6rem;
    height: 6rem;
    border-radius: 0.5rem;
}
@media (max-width: 768px) {
    .container {
        flex-direction: row;
        min-height: auto;
        margin-bottom: 5rem;
    }

    .carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    .carousel-item {
        min-width: 33.33%;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 4rem;
        height: 4rem;
        border-radius: 0;
    }
}
#container_slider{
	padding-bottom: 15rem;
}