@import url(../../css/fonts.css);


/* **************************  icon facultes in home from mesrs   *************************/

.center-column {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center;
	background: rgba(0,0,0,0.4); /* transparent black overlay */
	padding: 20px;
}

.center-buttons {
	margin-bottom: 20px;
	display: flex;
	gap: 20px;

	position: absolute;
	width: 100%;
	top: 10px;
	justify-content: space-between;
	padding: 0 20px;
}

.center-buttons a {
	color: #fff;
	font-size: 20px;
	text-decoration: none;
}

.center-title h1 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 10px;
}

.center-title h2 {
	font-size: 18px;
}

.center-title a {
	color: #fff;
	text-decoration: underline;
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 10px;
}

.carousel-inner .item {
	position: relative;
	min-height: 500px;
	background-size: cover;
	background-position: center;
	overflow: hidden;/* Prevents child content from overflowing */
	height: 900px; /* or any fixed height you want */
	max-width: 100%;  /* Ensures slide fits its container */
	width: 100%;
	max-height: 80vh;
}

.carousel-inner .item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.center-title {
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.center-title img {
	max-width: 100%;     /* Image will not be larger than its container */
	height: auto;
	display: block;
	margin: 0 auto 15px auto;
	/*width: 300px;*/
	max-height: 70%;         /* ✅ The image height will never exceed 80% of the parent's height */
	width: auto;             /* ✅ Keeps the aspect ratio, width adjusts automatically */


}
.center-image img {
	max-height: 80%;
	width: auto;
}

.center-image   {
	max-height: 80%;
	width: auto;
	margin-bottom: -100px;
}







body, html {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

.main-section {
	display: flex;
	height: 75vh;
}

.left-column, .right-column {
	width: 25%;
	display: flex;
	flex-direction: column;
}

.center-column-img {
	/*width: 50%;*/
	margin-top:90px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	/*color: white;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	height: 500px;
}
.center-column {
	/*width: 50%;*/
	background: url('<?= App::$path ?>img/images/background.png') center/cover no-repeat, #003366;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	height: 70%;
}

.image-accordion-item {
	flex: 1;
	background-size: cover;
	background-position: center;
	position: relative;
	cursor: pointer;
	transition: flex 0.5s ease;
}

.image-accordion-item:hover {
	flex: 2;
}

.image-accordion-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: opacity 0.4s;
	opacity: 0;
}

.image-accordion-item:hover .image-accordion-overlay {
	opacity: 1;
}

.image-accordion-overlay h2 {
	margin: 0;
	font-size: 1.5rem;
}

.center-buttons {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	display: flex;
	justify-content: space-between;
}

.center-buttons a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	background: rgba(255,255,255,0.2);
	padding: 8px 15px;
	border-radius: 5px;
}

.center-title {
	margin: 0 auto;         /* Horizontally center */
	display: block;         /* Ensures margin auto works */
	width: fit-content;     /* Shrinks div to fit its content */
	text-align: center;    /* Center text inside if needed */
	max-width: 80%;
	font-size: 30px;
	background-color: #efeff0;
	color: #009688;
	text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

	/*margin-top: 15px;*/

}

.center-title h1 {
	font-size: 2rem;
	/*margin: 10px 0;*/
	margin-bottom: 10px;
}

.center-title h2 {
	margin: 0;
	font-size: 1rem;
}
.center-title h2 a {
	color: #149688;
	text-decoration: none;
}
@media(max-width: 768px) {

	.main-section {
		flex-direction: column;
		height: auto;
	}
	.center-column {
		width: 100%;
		/*height: auto;*/
		height: auto;
	}

	.left-column   {
		width: 100%;
		/*height: auto;*/
		height: 200px;
	}

	.right-column  {
		width: 100%;
		/*height: auto;*/
		height: 400px;
	}
	.image-accordion-item {
		height: 150px;
	}
}









.accordion-container {
	display: flex;
	height: 50vh;
}

.accordion-item {
	flex: 1;
	background-size: cover;
	background-position: center;
	position: relative;
	transition: flex 0.4s;
	cursor: pointer;
}

.accordion-item:hover {
	flex: 3;
}

.accordion-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity: 0;
	transition: opacity 0.4s;
	flex-direction: column;
}

.accordion-item:hover .accordion-overlay {
	opacity: 1;
}

.accordion-overlay h2 {
	font-size: 1.8rem;
	margin: 0;
}

.accordion-overlay p {
	margin: 5px 0 0;
}

.institut-container {
	background: #fff;
	padding: 15px;
	margin-top: 30px;
	border: 1px solid #ccc;
}

.institut-container h3 {
	text-align: center;
	margin-bottom: 20px;
}

.institut-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.institut-list li {
	background: #f8f8f8;
	border-radius: 5px;
	overflow: hidden;
}

.institut-list li img {
	width: 100%;
	height: auto;
}

.institut-list li h4 {
	padding: 10px;
	font-size: 1rem;
	text-align: center;
}

@media (min-width: 768px) {
	.institut-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.institut-list {
		grid-template-columns: repeat(5, 1fr);
	}
}












/*

.image-accordion {
	display: flex;
	gap: 10px;
	height: 250px;
}
.accordion-item {
	flex: 1;
	background-size: cover;
	background-position: center;
	position: relative;
	transition: flex 0.4s;
	cursor: pointer;
}
.accordion-item:hover {
	flex: 3;
}
.accordion-item .overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity: 0;
	transition: opacity 0.4s;
}
.accordion-item:hover .overlay {
	opacity: 1;
}
.accordion-item .overlay h2 {
	margin: 0;
	font-size: 1.5rem;
}
.accordion-item .overlay p {
	margin: 0.5rem 0 0;
	font-size: 1rem;
}

!* Optional: Responsive *!
@media (max-width: 768px) {
	.image-accordion {
		flex-direction: column;
		height: auto;
	}
	.accordion-item {
		height: 200px;
	}
}
*/




















 /* **************************    *************************/
.content-header .content-title{
	font-size: 20px;
	font-weight: bold;
}

 /* ************************** begin css add article  *************************/
.container{
	width: auto !important;
}
.thumb-preview{
	height: 250px;
	/*width: 400px;*/
	width: 100%;
	border-radius: 5px;
}

.DocPdf-preview{
	height: 250px;
	/*width: 400px;*/
	width: 100%;
	border-radius: 5px;
}



.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
	float: right;/**/
}
.form-add-top{
	margin-bottom: 20px;
}

.box-infos-header{
	padding: 5px;
	background-color: #89c5dc;
	/*a	background-color: #6493b5;*/
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: 0 !important;
}
.box-infos-header .content-title{
	color: #fff !important;
}
.box-infos-header .btn-search, .box-infos-header .btn-resetDocPdf{
	float: left;
	margin-top: 4px;
}
.box-infos{
	/* border: 1px solid #acbdd0 ;*/
	border-top: 0;
	padding: 10px;
	margin-top: 0;
	margin-bottom: 20px;
	/* min-height: 200px;*/
}

.modal-header .close{
	float: left;
}
.modal-footer{
	text-align: left;
}
.form-search-wrap{ /* ok cu */
	display: none;
	padding: 0 10px;
}

input[type=file].hidden-input-file{
	display: none;
}
.thumb-reset{
	display: none;
	/*width: 260px;*/

	width: 80%;
	position: relative;
	height: 30px;
	line-height: 24px;
	top:-35px;
}
.DocPdf-reset{
	display: none;
	width: 260px;
	position: relative;
	height: 30px;
	line-height: 24px;
	top:-35px;
}
.login-header h3{
	margin: 0;
	text-align: center;
}
.panel .login-header {
	background-color: #89c5dc;
	border-color: #89c5dc;
}

.avatar{
	/* width: 64px; changed journal/index  */
/*	height: 64px;  changed announcements in faculte/presentation&&id=6  */
	border-radius: 50%;
	border: 1px solid #cccccc;
}
.avatar-lg{
	width: 128px;
	height: 128px;
	border: 5px solid #f7f7f7;
}
.profile-side .nav-pills{
	margin: 0;
	padding: 0;
}
.profile-side .nav-pills li{
	display: block;
	margin: 0;
	width: 100%;
}
.panel .panel-heading h3{
	margin: 0;
}
.fa-roles-true .fa, .fa-roles-false .fa{
	color: #fff;
	padding: 3px;
	border-radius: 3px;
}
.fa-roles-true .fa{
	background: #5cb85c;
}
.fa-roles-false .fa{
	background: red;
}
.td-roles p span:first-child{
	min-width: 200px;
	display: inline-block;
}

/* ************************** end css add article  *************************/
/*************************** begin pagination ********************************************** */

.pagination {
	margin: 0;
	padding: 0;
	float: right;
	direction: rtl;
}
.pagination li a{
	background-color: rgba(66,139,202,0.05);
	padding: 6px 8px;

}
.pagination li{

	float: right;
}
.pagination li.cur_page a {
	background-color: #89c5dc;
	/*aa	background-color: #428bca;*/
	color: #fff;
	cursor: default;
}

.pagination li.cur_page input {
	width: 35px;
	display: inline;
	position: relative;
	float: right;
	padding :5px 2px;
	border: 2px solid #ddd;
	margin-right: -1px;
	text-align: center;
	outline: none;
}
.pagination li.disabled a {
	background-color: #eee;
	color: #cccccc;
}
.pagination li.total a {
	background-color: #eee;
	color: #cccccc;
}
.pagination li.enabled a {
	padding: 6px 10px;
}
.pagination .pagination-error {
	margin-top:  20px;
}/**/


/*************************** end pagination ********************************************** */

/* ************************** begin hovereffect  *************************/
.hovereffect {
	overflow:hidden;
	position:relative;
	cursor:pointer;
}

.hovereffect .overlay {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	opacity:0;
	background-color:rgba(255,255,255,0.2);
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out
}

.hovereffect img {
	display:block;
	position:relative;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}

.hovereffect a.info {
	text-decoration:none;
	display:inline-block;
	color:#fff !important;
	background-color:#009688;
	opacity: 0.6;
	width: 100%;
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	padding:7px 14px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.hovereffect a.info:hover {
	box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
	-ms-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}

.hovereffect:hover .overlay {
	opacity:1;
	filter:alpha(opacity=100);
}

.hovereffect:hover a.info {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-transform:translatey(0);
	-webkit-transform:translatey(0);
	transform:translatey(0);
}

.hovereffect:hover a.info {
	-webkit-transition-delay:.2s;
	transition-delay:.2s;
}

.hovereffect .overlay .full {
	text-decoration:none;
	display:inline-block;
	color:#fff !important;
	background-color: #22A1FDA1;
	opacity: 0.8;
	width: 100%;
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	padding:0px 15px 7px 15px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	border-radius: 0px 0px 8px 8px;
	text-align: center;
	height: 130px;
}

.hovereffect .overlay .full h3{
	font-size: 18px;
}

.hovereffect .overlay .full .button {
	margin-top: 15px;
	margin-bottom: 20px;
}

.hovereffect .overlay .full .button a{
	color: #fff;
	padding-bottom: 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	border-bottom:solid 1px #fff;
}

.hovereffect .overlay .full .button a {
	color: #FFF;
	width: initial;
}

.hovereffect .overlay .full .button:hover a {
	color: #ffcfcf;
	text-decoration: none;
	cursor: pointer;
}

.hovereffect .name {

	position: absolute;
	left: 0px;
	width: 100%;
	/*background:rgb(237, 244, 248);
	bottom: 0px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 15px;*/
	padding: 29px;
	border-radius: 0px 0px 8px 8px;
	text-align: center;
}
/* ************************** end hovereffect *************************/
/* ************************** begin image modal *************************/

/* Style the Image Used to Trigger the Modal */
.ModalImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.ModalImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 5000; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content-img {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#captionImgGrand {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content-img, #captionImgGrand {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

/* The Close Button */
.closeModalImg {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.closeModalImg:hover,
.closeModalImg:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* ************************** end image modal *************************/
/* ************************** begin search-wrap *************************/

.form-search-wrap{ /* ok cu */
	display: none;
	padding: 0 10px;
}


.content-wrapper {
	min-height:400px;
	/*margin-top: 65px;*/
	background-color: #eee;
}
.content-wrapper .content-header {
	border-bottom: 1px solid #ccc;
	margin-top: 10px;
	/*margin-bottom: 10px;
	padding-bottom: 5px;*/
	box-shadow: 0 3px 3px -3px #999;
}
/**/ .content-wrapper .content-header-home {

		 margin-top: 10px;

	 }
.content-wrapper .content-header span.content-title{
	margin:0;
	font-size: 24px;
	font-weight:bold;
	color: #89c5dc ;
	/*aa color: #6493B5 ;*/
}
.content-header ul.header-btns{
	margin: 0;
	padding: 0;
	float: left;
}
.content-header ul.header-btns li{
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
}
.content-wrapper .content {
	border: 1px solid #ccc;
	/*	min-height: 1800px;
*/	height: 100%;
	background-color: #f7f7f7;
	border-radius: 3px;
	padding: 10px;
}

/* ************************** end search-wrap *************************/
/* ************************** begin avatar from binda *************************/

.user-avatar{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid #cccccc;
}
.user-avatar-lg{
	width: 128px;
	height: 128px;
	border: 5px solid #f7f7f7;
}/* avatar and avatr-lg disactivated then reactivated*/
/* ************************** end avatar from binda *************************/
/* ************************** begin image modal *************************/

/* Style the Image Used to Trigger the Modal */
.ModalImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.ModalImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 5000; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content-img {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#captionImgGrand {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content-img, #captionImgGrand {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

/* The Close Button */
.closeModalImg {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.closeModalImg:hover,
.closeModalImg:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* ************************** end image modal *************************/




/* ************************** begin style portofolios isotope from binda  *************************/

/* porfolios beg */

.portfolios-isotope .portfolioFilter {
	padding-bottom: 40px;
}

.portfolios-isotope .portfolioFilter a {
	margin-right: 10px;
	color:#666;
	text-decoration:none;
	padding: 5px 10px;
	border:solid 1px rgba(0,0,0,0.1);
	border-radius: 8px;
	display: inline-block;
	margin-bottom: 10px;
}

.portfolios-isotope .portfolioFilter a.current {
	font-weight:bold;
	background: #009688;
	color: #fff;
}

.portfolios-isotope  .isotope-item {
	z-index: 2;
}

.portfolios-isotope  .isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}
.portfolios-isotope .isotope,
.portfolios-isotope .isotope .isotope-item {
	/* change duration value to whatever you like */

	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
}
.portfolios-isotope  .isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	transition-property: height, width;
}
.portfolios-isotope .isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}

.portfolios-isotope .portfolioContainer img {
	height: 260px;
	object-fit: cover;
	width: 100%;
	border-radius: 8px;
}

.portfolios-isotope .portfolioContainer .item {
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.portfolios-isotope .portfolioFilter {
		padding-bottom: 5px;
	}

	.portfolios-isotope .portfolioContainer img {
		height: 100px;
	}
}

.detail-profile .avatar {
	height: 80px;
	margin-bottom: 10px;
}

.detail-profile .list-group-item {
	border: 0px;
	padding-left: 0px;
}

.detail-profile .list-group-item:hover {
	background: #fff;
	color: #009688;
}

.detail-profile .list-group-item.active, .detail-profile .list-group-item.active:focus, .detail-profile .list-group-item.active:hover {
	background: #fff;
	color: #009688;
	font-weight: 400;
	position: relative;
}

.detail-profile .list-group-item.active::after {
	content: url(../../img/images_duende/menu-leftarrow.png);
	position: absolute;
	right: -24px;
	top: 10px;
	z-index: 100;

}

.detail-profile .content {
	border-left: solid 1px rgba(0,0,0,0.1);
	padding-left: 40px;
}

.detail-profile .widget-features ul li .media-left img {
	border-radius: 100px;
	width: 55px;
	height: 55px;
}

.detail-profile .widget-features ul li .description {
	font-size: 80%;
}

.detail-profile .widget-features ul li.read h4{
	font-weight: 300;
}

.detail-profile .alert-content {
	padding-top: 20px;
	padding-bottom: 20px;
}
/* ************************** end style portofolios isotope from binda  *************************/
/* ************************** begin style img_slider from binda  *************************/

.img_slider{
	display: block;
	width: 100% !important;
	/*max-width:1390px ;*/
	height: 500px !important; /*100%  450px*/
}

.carousel-inner{
	width:100%;
	margin-top: 60px;
	max-height: 450px !important;
}

.carousel-control {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	opacity: 0.9;
	filter: alpha(opacity=50);
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.carousel-control:hover, .carousel-control:focus {
	outline: 0;
	color: #ffffff;
	text-decoration: none;
	opacity: 20.9;
	filter: alpha(opacity=90);
}

.item .container-fluid {
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 0;
	margin-left: 0;
}
.carousel-indicators {
	bottom: 0px;
}
#myCarousel{
	margin-top:50px;max-height:450px
}
.carousel-caption a{
	color:#fff;
	text-decoration:none;
	font-size: 14px;
}
.item .carousel-caption{
	right: 0px;
	left: 0px;
	bottom: 30px;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color:rgba(0,0,0,0.5)}
#CollegeCarousel{margin-top:50px}
#CollegeCarousel .caption h4,#CollegeCarousel .caption p,#CollegeCarousel .caption .thumbnail{text-align:center}
#CollegeCarousel .carousel-inner > .item > img,#CollegeCarousel .carousel-inner > .item > a > img{margin:0 auto}
.news-item img{width:43%}
.news-caption{margin-right:45%}
.news-item{padding-bottom:20px}

/* ************************** end style img_slider from binda  *************************/
/* ************************** begin style pages from binda  *************************/
/* ok cu */ .content-page{
	color: black;
	font-family: 'droid-naskh', tahoma, arial, serif;
	font-size: 15px;
}
.head-page{  /* ok cu .content-page*/
	/*	background-color: #89c5dc;
        a background-color: #6493b5;
	color: #fff;*/
	text-align: center;
	padding-left: 8px;
	padding-right: 35px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}
.sub-head-page{  /* ok cu .content-page */
	background-color: #89c5dc;
	/*a background-color: #6493b5;*/
	color: #fff;
	text-align: center;
	padding-left: 8px;
	padding-right: 5px;
	margin-right: 25px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}
.sub-sub-head-page{  /* ok cu .content-page */
	/*background-color: #89c5dc;
	a background-color: #6493b5;*/
	color: red;
	text-align: center;
	padding-left: 8px;
	padding-right: 5px;
	margin-right: 25px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
}
.content-page .descr-page {  /* ok cu */
	color: black;;
	padding-left: 80px;
	padding-right: 65px;
	margin: 15px;

}

/* ok cu */.content-page .descr-page a{

			   color: black;
			   text-justify: distribute ;
			   text-align: justify;
			   font-size: 14px;
			   line-height: 40px;

		   }

/* ok cu */.content-page  .content-page-img img{
			   float: right;
			   /*width: 250px;
               */width: 75%;
			   height: 200px;
			   border-radius: 10%;
			   margin-right: 13%;
			   padding: 5px !important;
			   position: center;
			   margin-top: 10px;
			   margin-bottom: 10px;

		   }


/* ************************** end style pages from binda  *************************/
/* ************************** begin news bar *************************/
#news-bar {
	width: 100%;
	background: #89c5dc1f;
	box-shadow: 0 2px 2px black, 0 0 1px black inset;
	border-radius: 15px;
	font: 17px bold;
	padding: 1px;
	padding-left: 20px;
	padding-right: 20px;

}

#news-bar:hover {
	transition: 0.37s;
}

#news-bar a {
	padding: 2px 12px;
	color: #3d80ba;
	text-decoration: none;
	font-weight: bold;
}

#news-bar a:hover {
	transition: 0.37s;
	color: red;
}
/* ************************** end news bar *************************/



.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }

  /*  ------------------------ social-icons ------------------------- */
.social-icon{
	margin-top: 5px;
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 14px;
	border-radius: 7px;
	margin-right: 11px;
	cursor: pointer;

}

.social-twitter{

	background-color: #55acee;
}


.social-facebook{

	background-color: #3b5999;
}


.social-linkedin{

	background-color: #0077B5;
}


.social-google{

	background-color: #dd4b39;
}

.social-instagram{

	background-color: #dd4b39;
}

.social-icon i{

	transition: 0.4s all;
}

.social-icon:hover i{

	transform: scale(1.1);

}

/*
* ----------------------------------------------------------------------------------------
* 05. START SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.single-service{
	padding: 40px 30px;
	box-shadow: 0px 17px 60px #00000012;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 30px;
	transition: all 0.4s ease;
}
.dark_bg .single-service{
	background: transparent;
	border: 1px solid #384967;
}
.single-service:hover{
	transform: translateY(-5px);
}
.single-service i {
	width: 70px;
	height: 70px;
	line-height: 70px;
	border-radius: 50%;
	background: #efeded;
	border: 1px solid #efeded;
	text-align: center;
	transition: all 0.4s ease;
	font-size: 35px;
	display: inline-block;
	color: black;
	/*color: #7564e5;*/
}
.dark_bg .single-service i{
	background: transparent;
	border: 1px solid black;
}
.single-service:hover i{
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
	background: #000;
	border: 1px solid #149688; /* new */
	color: #fff;
}
.single-service h4{
	font-size: 20px;
	margin-top: 30px;
	text-transform: uppercase;
	color: #222;
	transition: all 0.4s ease;
}
.dark_bg .single-service h4{
	color: #fff;
}
.single-service p{
	transition: all 0.4s ease;
	color: #333333;
	margin-top: 15px;
}
.dark_bg .single-service p{
	color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 05. END SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 06. START COUNTERUP DESIGN
* ----------------------------------------------------------------------------------------
*/
.count_overlay{
	background: rgba(232, 231, 246, 0.6) none repeat scroll 0 0;
 	padding: 60px 0;
}
.counter-content{
	margin-top: 30px;
}
.count h3{
	/*color: #7564e5;*/
	font-size: 30px;
}
.count span {
	font-size: 30px;
	font-weight: 600;
}
.count h5{
	color: #149688;
	font-size: 16px;
	font-weight: bold;
}
/*
* ----------------------------------------------------------------------------------------
* 06. END COUNTERUP DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 08. START TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
.single_team{
	position: relative;
}
.overlay-text{
	position: relative;
	-webkit-transition: all linear .7s;
	-o-transition: all linear .7s;
	transition: all linear .7s;
}
.single_team:hover .overlay-text{
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.team-overlay{
	position: absolute;
	width: 100%;
	height: 100px;
	bottom: 0;
	left: 0;
	content: '';
	background: rgba(0, 0, 0, 0.4);
	z-index: 99;
	-webkit-transition: all linear .5s;
	-o-transition: all linear .5s;
	transition: all linear .5s;
}
.single_team h3{
	font-size: 25px;
	color: #fff;
	padding-top: 10px;
	display: inline-block;
	-webkit-transition: all linear .5s;
	-o-transition: all linear .5s;
	transition: all linear .5s;
}
.single_team:hover .team-overlay{
	height: 100%;
}
.team_icon{
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.single_team:hover .team_icon i{
	opacity: 1;
}
.team_icon i:hover {
	background: #149688; /* new */
	border: 1px solid #149688; /* new */
	color: #fff;
}
.team_icon i{
	margin: 0 3px;
	border-radius: 50%;
	border: 1px solid #fff;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 16px;
	opacity: 0;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}
.single_team p{
	font-size: 16px;
	color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 08. END TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/






/* Nouveau style pour la classe media en vert Duende for faculte */
.widget-features ul li .media {
	background-color: #e0f2f1; /* vert très clair */
	border: 1px solid #b2dfdb;
	border-radius: 8px;
	/*	padding: 10px;
        margin-bottom: 10px;*/
	transition: background-color 0.3s ease;
}

.widget-features ul li .media:hover {
	background-color: #d0f0e0; /* léger hover */
}

.widget-features ul li .media h4.media-heading a {
	color: #2e7d32; /* texte principal */
	font-weight: bold;
	font-size: 17px;
	text-decoration: none;
}

.widget-features ul li .media h4.media-heading a:hover {
	color: #00695c; /* survol plus foncé */
	text-decoration: underline;
}

/* Style vert pour les blocs "media" dans la section home-why webtv.....*/
.home-why .media {
	background-color: #e0f2f1;
	border: 1px solid #b2dfdb;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.home-why .media:hover {
	background-color: #d0efdf;
	transform: scale(1.02);
}

.home-why .media .media-heading {
	color: #2e7d32;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.home-why .media .description {
	font-size: 14px;
	color: #333;
	text-align: justify;
	line-height: 1.6;
}

.home-why .media-left img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #ccc;
}

/* Grille uniforme */
.home-why-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

/* Chaque carte occupe 25% de largeur - 4 par ligne */
.home-why-grid .item {
	width: calc(25% - 20px);
	display: flex;
}

/* Fixe la hauteur uniforme */
.home-why-grid .media {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	background-color: #e0f2f1;
	border: 1px solid #b2dfdb;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	min-height: 300px; /* 👈 ajuste ici pour harmoniser */
	height: 100%;
	width: 100%;
}

.home-why-grid .media-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.home-why-grid .media-heading {
	color: #2e7d32;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.home-why-grid .description {
	font-size: 14px;
	color: #333;
	text-align: justify;
	line-height: 1.6;
}

.home-why-grid .media-left img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #ccc;
}


/* Base colors */
.single-service {
	background-color: #e0f2f1; /* light grey background */
	color: #222; /* dark text */
	padding: 20px;
	border-radius: 8px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
/*
.single-service h4 a {
	color: #007bff; /* blue links * /
	text-decoration: none;
}

.single-service h4 a:hover {
	color: #0056b3; /* darker blue on hover * /
}

.single-service p {
	color: #555; /* medium gray for paragraph * /
}

.single-service i {
	font-size: 40px;
	color: #007bff; /* same blue for icons * /
	margin-bottom: 15px;
}

/* Media query for small devices * /
@media (max-width: 768px) {
	.single-service {
		background-color: #e9ecef; /* slightly lighter bg on small screens * /
	}
	.single-service h4 a {
		color: #0056b3; /* slightly darker links * /
	}
	.single-service i {
		color: #0056b3;
	}
}
*/