@font-face {
    font-family: 'Vivaldi';
    src: url('/assets/css/fonts/Vivaldii.eot');
    src: url('/assets/css/fonts/Vivaldii.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/Vivaldii.woff2') format('woff2'),
        url('/assets/css/fonts/Vivaldii.woff') format('woff'),
        url('/assets/css/fonts/Vivaldii.ttf') format('truetype'),
        url('/assets/css/fonts/Vivaldii.svg#Vivaldii') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Calisto MT';
    src: url('/assets/css/fonts/CalistoMT.eot');
    src: url('/assets/css/fonts/CalistoMT.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/CalistoMT.woff2') format('woff2'),
        url('/assets/css/fonts/CalistoMT.woff') format('woff'),
        url('/assets/css/fonts/CalistoMT.ttf') format('truetype'),
        url('/assets/css/fonts/CalistoMT.svg#CalistoMT') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Calisto MT';
    src: url('/assets/css/fonts/CalisMTBol.eot');
    src: url('/assets/css/fonts/CalisMTBol.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/CalisMTBol.woff2') format('woff2'),
        url('/assets/css/fonts/CalisMTBol.woff') format('woff'),
        url('/assets/css/fonts/CalisMTBol.ttf') format('truetype'),
        url('/assets/css/fonts/CalisMTBol.svg#CalisMTBol') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura Std';
    src: url('/assets/css/fonts/FuturaStd-Book.eot');
    src: url('/assets/css/fonts/FuturaStd-Book.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/FuturaStd-Book.woff2') format('woff2'),
        url('/assets/css/fonts/FuturaStd-Book.woff') format('woff'),
        url('/assets/css/fonts/FuturaStd-Book.ttf') format('truetype'),
        url('/assets/css/fonts/FuturaStd-Book.svg#FuturaStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura Std';
    src: url('/assets/css/fonts/FuturaStd-Light.eot');
    src: url('/assets/css/fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/FuturaStd-Light.woff2') format('woff2'),
        url('/assets/css/fonts/FuturaStd-Light.woff') format('woff'),
        url('/assets/css/fonts/FuturaStd-Light.ttf') format('truetype'),
        url('/assets/css/fonts/FuturaStd-Light.svg#FuturaStd-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

*{padding:0;margin:0;}
body {overflow-x:hidden;padding:0;margin:0;}
ul {padding:0 !important;}
li {list-style-type:none;}
.color-red {color:#c61d24;}
.color-white {color:#ffffff !important;}
.background-red {background:#c61d24;}
.background-grey {background:#f7f7f7;}
.background-green {background:#00935f;}
.background-lightorange {background_:#f3edd5;}
body p { font-family: 'Futura Std'; color: #666666; font-size: 16px; }


/* Le conteneur qui contient la barre du haut */
.top-bar {
    background_: #fff5d2;
    padding: 10px 0;
}

/* Le titre h1 au centre */
.top-bar h1 {
    font-family_: 'Vivaldi', sans-serif;
    font-size_: 2rem;
    font-size: 1.5rem;
    line-height: 1;
    margin: 0;
}

/* Paragraphe sous le logo */
.top-bar p {
    font-family_: 'Vivaldi', sans-serif;
    font-size: 0.7rem;
    text-align_: center;
    margin: 0;
}

/* Centrer l'image du logo et la réduire */
.top-bar img {
    max-width: 70px; 
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Media Query pour petits écrans */
@media (max-width: 768px) {
    .top-bar h1 {
        font-size: 2rem; 
    }

    .search-input {
        max-width: 100%;
    }
}


.nav-bar-sec nav.navbar.navbar-expand-lg.bg-body-tertiary { background: transparent !important; }
.navbar-collapse ul li a { padding-right: 30px !important; font-family: 'Calisto MT'; font-weight: lighter; }
.nav-bar-sec #mainmenu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.nav-bar-sec #mainmenu ul.navbar-nav.menu li.nav-item {
    margin: 0 15px 0 0;
}
.nav-bar-sec #mainmenu ul.navbar-nav.menu li.nav-item > a {
    font-size: 16px;
}

 span.navbar-text ul {
    text-align: right;
	 margin: 0;
}
span.navbar-text ul li img {
    max-width: 40px;
    min-width: 25px;
}
 span.navbar-text ul li {
    margin: 0 0 0 5px;
    display: inline-block;
}
 span.navbar-text ul a {
    margin: 0px !important;
    padding: 0px !important;
}
.army-man-sec .col.col-md-7.col-sm-12 {
    padding-left: 55px;
}
.army-man-sec .col.col-md-7.col-sm-12 h5 {
    font-family: 'Futura Std';
}
.army-man-sec .col.col-md-7.col-sm-12 h2 {
    font-family: 'Calisto MT';
    font-weight: bold;
}
.grey-bg-sec.background-grey h3 {
    margin: 10px 0 10px 0;
    font-family: 'Calisto MT';
    font-weight: bold;
}
.grey-bg-sec.background-grey p {
    max-width: 250px;
    margin: 0 auto;
}
.grey-bg-sec.background-grey p a{
    text-decoration: none;
    color:#555;
}
.lightorange-bg-sec h2 {
    font-family: 'Calisto MT';
    font-weight: bold;
}
.lightorange-bg-sec h4 {
    margin: 20px 0 15px 0;
    font-family: 'Calisto MT';
    font-weight: bold;
}
span.red-dashed-line { display: inline-block; width: 50px; background: #c61d24; height: 3px; }
.army-man-sec { margin: 70px 0 70px 0; }
.text-justify {text-align:justify;}
p.acc-btn { margin_: 30px 0 0 0; float: left; width: 100%; }
p.acc-btn a { padding: 10px 30px; text-decoration: none; border-radius: 99px; font-family: 'Calisto MT'; font-size: 18px; }
.grey-bg-sec.background-grey {
    padding: 70px 0 70px 0;
}
.grey-bg-sec .col.col-md-4.col-sm-12 {
    max-width: 450px;
    margin: 0 auto;
    text-align: center;
}
.lightorange-bg-sec {
    padding: 40px 0 70px;
}
.lightorange-bg-sec h2 {
    margin-bottom: 70px;
}
.lightorange-bg-sec .col.col-md-4.col-sm-12 {
    max-width: 320px;
    margin: 0 auto;
    border: 4px solid #000000;
    padding: 30px 40px;
    text-align: left;
}
.footer-sec .col.col-md-3.col-sm-12 ul {
    text-align: right;
}
.footer-sec ul li img {
    max-width: 50px;
}
.footer-sec ul li {
    margin: 0;
    display: inline-block;
}
.footer-sec {
    padding-top: 35px;
    padding-bottom: 35px;
}

ul {
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
 ul li {
	 font-size: 14px;
}
 ul li a {
	text-decoration: none;
	color: #fff;
	padding: 10px;
	display: inline-block;
	transition: 350ms all;
}
 ul li a:hover {
	color: #ffe400;
}

.contact p{
	color: #fff;
}
.contact p a{
	text-decoration: none;
	color: #fff;
}

.social-icons a {
    font-size: 20px;
    margin-right: 15px;
    color: #b0b3b8;
}

.social-icons a:hover {
    color: #f8f9fa;
}
.social-icons img{
	width:18px;
}


.menu-box {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 padding: 20px;
	 background: #2e58d0;
	 position: relative;
}
 .menu-box .logo {
	 max-width: 140px;
}
 .menu-box .logo img {
	 width: 100%;
}
 .menu {
	 display: flex;
	 flex-wrap: wrap;
}
 .menu li {
	 margin-right: 25px;
}
 @media only screen and (min-width: 1024px) {
	 .menu {
		 display: flex !important;
	}
	 .menu .megamenu > a:after {
		 content: "";
		 position: absolute;
		 left: 0;
		 right: 0;
		 top: 100%;
		 height: 28px;
		 display: none;
	}
	 .menu .megamenu > a:hover:after {
		 display: block;
	}
	 .menu li .submenu {
		 transition: 350ms all;
	}
	 .menu li:hover > .submenu {
		 transform: translateY(0);
		 opacity: 1;
		 visibility: visible;
	}
	 .menu li.megamenu > a {
		 padding-right: 20px;
		 position: relative;
	}
	 .menu li.megamenu > a:before {
		 content: "";
		 position: absolute;
		 right: -5px;
		 top: 18px;
		 height: 5px;
		 width: 5px;
		 border-right: 2px solid #fff;
		 border-bottom: 2px solid #fff;
		 transform: rotate(45deg);
	}
	 .menu li .submenu {
		 position: absolute;
		 top: 100%;
		 transform: translateY(50px);
		 opacity: 0;
		 visibility: hidden;
		 background: #333;
		 z-index: 1000;
	}
	 .menu li .submenu li {
		 margin-right: 0;
		 font-size: 16px;
		 position: relative;
		         min-width: 220px;
	}
	 .menu li .submenu li a {
		 color: #fff;
		 padding: 10px 20px;
		 background: #333;
		 display: block;
	}
	 .menu li .submenu li a:before {
		 right: 15px;
		 transform: rotate(-45deg);
	}
	 .menu li .submenu li a:hover {
		 background: #00935f;
	}
	 .menu li .submenu .submenu {
		 position: absolute;
		 left: 100%;
		 top: 0;
	}
}
 @media only screen and (max-width: 1023px) {
	 #menu_trigger {
		 height: 22px;
		 width: 30px;
		 display: inline-block;
	}
	 #menu_trigger .menulines {
		 margin-top: 9px;
		 position: relative;
		 display: block;
	}
	 #menu_trigger .menulines, #menu_trigger .menulines:before, #menu_trigger .menulines:after {
		 content: "";
		 height: 2px;
		 width: 30px;
		 border-radius: 5px;
		 background: #fff;
	}
	 #menu_trigger .menulines:before, #menu_trigger .menulines:after {
		 position: absolute;
		 left: 0;
	}
	 #menu_trigger .menulines:before {
		 top: -9px;
	}
	 #menu_trigger .menulines:after {
		 top: 9px;
	}
	 .mobile-menu {
		 display: none;
		 position: absolute;
		 left: 0;
		 right: 0;
		 top: 100%;
		 background: #333;
		 overflow: hidden;
	}
	 .mobile-menu ul {
		 transition: 350ms all;
		 display: block;
	}
	 .mobile-menu li {
		 margin: 0;
		 border-bottom: 1px solid #404040;
		 font-size: 16px;
	}
	 .mobile-menu li a {
		 color: #fff;
		 display: block;
		 position: relative;
		 padding: 15px 20px;
	}
	 .mobile-menu li a:hover {
		 color: #00935f;
	}
	 .mobile-menu li a .navtrigger {
		 position: absolute;
		 right: 0;
		 top: 0;
		 bottom: 0;
		 width: 30px;
		 background: #3d3d3d;
		 border: 1px solid #404040;
	}
	 .mobile-menu li a .navtrigger:before {
		 content: "";
		 position: absolute;
		 top: 50%;
		 left: 50%;
		 height: 8px;
		 width: 8px;
		 border-right: 2px solid #fff;
		 border-bottom: 2px solid #fff;
		 transform: translate(-50%, -50%) rotate(-45deg);
	}
	 .mobile-menu li .submenu {
		 position: absolute;
		 top: 0;
		 left: 100%;
		 width: 100%;
		 background: #333;
		 height: 100%;
		 transition: 350ms all;
		 z-index: 1;
	}
	 .mobile-menu li .submenu li {
		 font-size: 14px;
	}
	 .mobile-menu li .submenu .backmenu-row {
		 position: relative;
		 padding: 20px;
		 padding-left: 50px;
		 background: #333;
		 font-size: 16px;
	}
	 .mobile-menu li .submenu .backmenu-row .back-trigger {
		 padding: 0;
		 position: absolute;
		 left: 0;
		 top: 0;
		 bottom: 0;
		 width: 30px;
		 display: block;
		 background: #3d3d3d;
		 border: 1px solid #404040;
	}
	 .mobile-menu li .submenu .backmenu-row .back-trigger:before {
		 content: "";
		 position: absolute;
		 top: 50%;
		 left: 50%;
		 height: 8px;
		 width: 8px;
		 border-right: 2px solid #fff;
		 border-bottom: 2px solid #fff;
		 transform: translate(-50%, -50%) rotate(135deg);
	}
	 .mobile-menu li .submenu .backmenu-row em {
		 font-style: normal;
		 color: #fff;
	}
	 .mobile-menu li.sub-open > .submenu {
		 left: 0;
	}
}
 
 
 
 

@media (min-width: 0px) and (max-width: 767px) {
	.nav-bar-sec .container > .row > .col.col-md-12.col-sm-12 {
    padding: 0;
}

.top-bar .col.col-12.col-md-3, .top-bar .col.col-12.col-md-6  {
    text-align: center;
}
.top-bar img {
    max-width: 300px;
    margin: 20px auto;
}
.army-man-sec .col.col-md-7.col-sm-12 {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-top: 20px;
}
.grey-bg-sec .col.col-md-4.col-sm-12 {
    max-width: 320px;
    margin: 0 auto 30px;
    text-align: center;
}
.lightorange-bg-sec .col.col-md-4.col-sm-12 {
    max-width: 320px;
    margin: 0 auto 30px;
    border: 4px solid #000000;
    padding: 30px 40px;
    text-align: left;
}
.footer-sec .col.col-md-3.col-sm-12 ul {
    text-align: center;
}
}

@media (min-width: 0px) and (max-width: 980px) {
.nav-bar-sec .container-fluid {
    justify-content: flex-end !important;
}
.nav-bar-sec .container-fluid button.navbar-toggler {
    border-color: #ffffff !important;
}
 span.navbar-text ul {
    text-align: left;
    margin: 0;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.top-bar h1 {
    font-family: 'Vivaldi';
    font-size: 3rem;
    line-height: 1;
}
.footer-sec ul li a {
    padding: 5px !important;
}
.footer-sec ul li img {
    max-width: 30px;
}
}

@media (min-width: 992px) and (max-width: 1100px) {
	.nav-bar-sec #mainmenu ul.navbar-nav.menu li.nav-item {
		margin: 0 1px 0 0;
	}
	span.navbar-text ul li img {
		max-width: 40px;
		min-width: 20px;
	}
}

.menu li .submenu .backmenu-row {
    display: none;
}

.content{
	max-width: 1200px;
    margin: 0 auto;
    background-color: #F8F8F8;
}

.borderradius{
	border-radius: 10px;
}
.white-bg{
	background: #fff;
	margin:20px;
	padding:30px;
}

.center{
	text-align: center;
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    height_: 100%;
    min-height: 550px;
    max-height: 550px;
}

.card:hover {
    transform_: scale(1.05);
}

.card-body{
	flex:0 !important;
}

.card-img-top {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    height_: 200px;
    object-fit: cover;
}

.card-body {
    flex: 1; /* Prend tout l'espace restant dans la card */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-custom {
    background-color: #007bff;
    color: white;
    border-radius: 20px;
    padding: 5px 15px;
    transition: background-color 0.3s;
}

.btn-custom:hover {
    background-color: #0056b3;
}

/*form connexion*/
.center-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
.login-container {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 2rem;
	max-width: 600px;
	width: 100%;
}
.login-container h1 {
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
	text-align: center;
	color: #343a40;
}
.login-container label {
	font-weight: bold;
	margin-top: 1rem;
}
.login-container input {
	margin-bottom: 1rem;
}
.login-container .btn {
	width: 100%;
	margin-top: 1rem;
}
.login-container .mb-3 a {
	text-decoration: none;
	color: #007bff;
}
.login-container .mb-3 a:hover {
	text-decoration: underline;
}
.alert {
	font-size: 0.9rem;
}

/*error page */
.error-page {
    text-align: center;
    padding: 50px;
    font-family: Arial, sans-serif;
}

.error-image {
    max-width: 300px;
    margin: 0 auto 20px;
}

.error-page h1 {
    font-size: 36px;
    color: #333;
    margin: 20px 0;
}

.error-page p {
    font-size: 18px;
    color: #555;
}

.error-page a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
    text-decoration: none;
}

.error-page a:hover {
    background-color: #0056b3;
}

/*bloc actualites */
/* Trending Bottom Section */
.trending-bottom {
    padding: 50px 0;
}

/* Row for the items inside the trending section */
.trending-bottom .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between columns */
	row-gap: 50px;
	justify-content: center;
	align-items_: center;
	min-height: 100vh;
	margin:50px 0;

    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Align items at the top (if you want them to start from the top) */
    min-height: 100vh;
    margin: 50px 0;
}

/* Individual Column */
.trending-bottom .col-lg-4 {
    width: 33.33333%; /* For 3 columns in a row */
    padding: 15px;
}

/* Single Bottom (Individual item block) */
.single-bottom {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex; /* Alignement flexible */
    flex-direction: column; /* Empile les enfants verticalement */
    justify-content: space-between; /* Répartit l'espace disponible */
}

/* Hover Effect for the Single Bottom */
.single-bottom:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Image inside the single bottom */
.trend-bottom-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    width_: 240px;  /* Set fixed width */
    height: 300px; /* Set fixed height */

    width: 100%;
    height_: 100%;  /* Fixed height for the images */
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
}

.trend-bottom-img img {
    width: 100%;  /* Make sure the image stretches to fill the div */
    height: 100%; /* Ensure the image takes the full height */
    object-fit: cover; /* Ensure the image scales correctly and doesn't distort */
    display: block;
    transition: transform 0.3s ease;
}

/* Hover Effect for Image */
.single-bottom:hover .trend-bottom-img img {
    transform: scale(1.1); /* Zoom effect */
}
/* Trend Caption (Text below image) */
.trend-bottom-cap {
    padding: 20px;
}

.trend-bottom-cap span {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.trend-bottom-cap span a, .trend-bottom-cap span a:hover{
	color: #000;
	text-decoration: none;
}

.trend-bottom-cap h4 {
    font-size: 14px;
    font-weight_: 600;
    margin-bottom: 15px;
	line-height: 1.5;
}

.trend-bottom-cap h4 a, .trend-bottom-cap p a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.trend-bottom-cap h4 a:hover, .trend-bottom-cap p a:hover {
    color: #ff5c8e; /* Color on hover */
}

/* Color Variations for Categories */
.trend-bottom-cap span {
	color: #000;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 400;
  padding: 10px 15px;
  line-height: 1;
  margin-bottom: 15px;
  display: inline-block;
}
.color1 {
    color: #ffe7e6;
	background: #ffe7e6;
}

.color2 {
    color: #2ecc71;
	background: #2ecc71;
}

.color3 {
    color: #e74c3c;
	background: #e74c3c;
}

.pageTitleContainer {
    max-width: 100%; /* Occupe toute la largeur de la page */
    margin: 0 150px; /* Espacement à gauche et à droite */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

.pageTitle {
    font-size: 24px; /* Taille du texte */
    color: #000; /* Couleur du texte */
    margin-bottom: 10px; /* Espacement sous le texte */
    position: relative; /* Position relative pour le pseudo-élément */
}

.pageTitle::after {
    content: ''; /* Nécessaire pour afficher le pseudo-élément */
    display: block; /* Permet au trait de se comporter comme un élément de bloc */
    width: 100%; /* Le trait prend toute la largeur du conteneur */
    height: 3px; /* Épaisseur du trait */
    background: #c61d24; /* Couleur rouge */
    margin: 0 auto; /* Centre le trait dans le conteneur */
    position: absolute; /* Position absolue pour le placer sous le texte */
    left: 0; /* Débute à gauche du conteneur */
    bottom: -5px; /* Ajuste la distance par rapport au titre */
}

.pageTitle span{
	color:#c61d24;
}


/* Responsive Design for Small Screens */
@media (max-width: 992px) {
    .trending-bottom .col-lg-4 {
        width: 50%; /* 2 items per row for medium screens */
    }
}

@media (max-width: 576px) {
    .trending-bottom .col-lg-4 {
        width: 100%; /* 1 item per row for small screens */
    }
}

/*Pagination*/
/* Pagination container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    list-style-type: none;
    padding: 0;
}

/* Pagination links */
.pagination a,
.pagination span {
    padding: 10px 15px;
    margin: 0 5px;
    text-decoration: none;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 12px;
    display: inline-block;
}

/* Hover effect for links */
.pagination a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Active page */
.pagination .active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Disabled state (e.g. no previous/next page) */
.pagination .disabled {
    color: #ccc;
    border-color: #ccc;
    pointer-events: none;
}

/* First and Last page styling */
.pagination .first,
.pagination .last {
    font-weight: bold;
}

/* Additional styling for previous/next buttons */
.pagination .prev,
.pagination .next {
    font-size: 12px;
}

/*pages details*/
.details-container {
    margin: 50px auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap; /* Ensure content wraps on small screens */
}
.details-image {
    flex: 0 0 40%; /* Image takes up 40% of the width */
    max-width: 40%; /* Prevent image from growing beyond 40% */
    padding: 10px;
}
.details-image img {
    max-width: 100%;
    height: auto; /* Ensure proper scaling */
    border-radius: 10px;
}
.details-content {
    flex: 1; /* Text section takes the remaining space */
    padding: 20px;
}
.details-title {
    font-size: 2rem;
    margin-bottom: 20px;
}
.details-description {
    font-size: 1.1rem;
    color: #6c757d;
}
@media (max-width: 768px) {
    .details-container {
        flex-direction: column; /* Stack image and text vertically */
    }
    .details-image {
        max-width: 100%; /* Image takes full width on small screens */
        flex: none; /* Reset flex properties */
    }
}

.visa-info-container {
    margin-top: 10px;
    padding: 20px 0;
    line-height: 1.5;
    font-family: 'Futura Std';
    color: #666666;
}

.visa-documents, .visa-documents-english {
    margin-bottom: 30px;
}

.visa-documents a{
    text-decoration: none;
    color:#555;
}

.visa-info-container ul {
    list-style-type: none;
    margin: 10px 0 20px 10px;
    padding-left: 20px;
}

.visa-info-container ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-size: 16px !important;
}

.visa-info-container ul li::before {
    content: ''; /* Nécessaire pour afficher l'élément */
    position: absolute;
    left: 0; /* Positionner la puce à l'extrême gauche de l'élément li */
    top: 50%;
    transform: translateY(-50%); /* Centrer verticalement */
    width: 6px;
    height: 6px;
    border-radius: 50%; /* Puce circulaire */
    background-color: black;
}

p {
    margin: 15px 0;
}

.link {
    color: #007bff;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.title-block {
    margin-bottom: 20px;
}

.title-block h2 {
    font-size: 24px;
    color: #444;
    font-weight: bold;
}

.line-separator {
    width: 50px;
    height: 2px;
    background-color: #007bff;
    margin: 10px auto;
}

.consul {
    margin-bottom: 30px;
  }

  .location {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
  }

  .name {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
  }

  .address, .mobile {
    color: #666;
    margin: 5px 0;
  }

  .mobile {
    font-style: italic;
  }

  .divider {
    height: 1px;
    background-color: #ddd;
    margin: 20px 0;
  }

  .search-input {
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
  }

  .search-input:focus {
    outline: none;
    border-color: #c61d24; /* Couleur pour le focus */
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.5);
  }

  .btn-search {
    border-radius: 30px;
    background-color: #c61d24 !important; /* Ajout de !important pour garantir la priorité */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
  }

  .btn-search:hover {
    background-color: #c61d24; /* Couleur du bouton au survol */
  }

  .d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .contact-card {
    background: #fff;
    border-radius_: 10px;
    box-shadow_: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width_: 400px;
    width: 100%;
    padding: 20px 0;
    text-align_: center;
  }

  .contact-card h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1em;
  }

  .contact-card p {
    color: #555;
    margin: 10px 0;
    font-size_: 1.1em;
  }

  .contact-card p span {
    font-weight: bold;
    color: #222;
  }

  .rouge{
    color:#c61d24;
  }
  .bold{
    font-weight: 500;
  }
  span.bold{
    font-weight: bold;
  }
  .biographie-header {
    background-color: #a3d065; /* Vert clair */
    color: black; /* Texte en noir */
    font-weight: bold; /* Texte en gras */
    padding: 5px 10px; /* Espacement */
    display: inline-block; /* Pour s'ajuster à la largeur du texte */
    border-bottom: 3px solid black; /* Ligne noire en dessous */
    width: 400px;
    margin:20px 0;
}


table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    display: none; /* Caché par défaut */
}
th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}
th {
    background-color: #4CAF50;
    color: white;
}
button {
    padding: 10px 20px;
    font-size: 12px;
    margin-top: 20px;
    cursor: pointer;
}

.owl-carousel .slide {
    position: relative;
    text-align: center;
}

.owl-carousel img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.description {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 80%;
    text-align: center;
}