.bg-blue{
	background-color: #0c428b;
}

.bg-grey{
	background-color: #e6e8e7;
}

.bg-green{
	background-color: green;
}

.bg-red{
	background-color: red;
}  

.bg-orange{
	background-color: #e66000;
}

.bg-yellow{
	background-color: #f78601;
}

.text-yellow{
	color: #f78601;
}

.text-blue{
	color: #03206e;
}

.nav-text-color{
	color: #03206e;
}

/* CSS for Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #03206e;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 100px;
    height: 100px;
}

circle {
    fill: transparent;
    stroke: #3498db; /* Color of the spinner's stroke */
    stroke-width: 5; /* Adjust the stroke width as needed */
}

image {
    mask: url(#mask);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 2s linear infinite;
}

.caisse-table {
	text-align: center; 
	border: solid 0px black;
}


.banner-hero-little{
	margin-top: -25px;
	position: relative;
	height: 8vh; /* Ajustez la hauteur selon vos besoins */
	background-size: cover;
	background-position: center;
}

.banner-hero-little-ce {
	margin-top: -25px;
	position: relative;
	height: 40vh; /* Ajustez la hauteur selon vos besoins */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../images/img_site/little_hero_bg_ce.jpg');
	background-size: cover;
	background-position: center;
}

.banner-hero-little-op {
	margin-top: -25px;
	position: relative;
	height: 40vh; /* Ajustez la hauteur selon vos besoins */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../images/img_site/little_hero_bg_op.jpg');
	background-size: cover;
	background-position: center;
}

.banner-hero-little-rc {
	margin-top: -25px;
	position: relative;
	height: 40vh; /* Ajustez la hauteur selon vos besoins */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../images/img_site/little_hero_bg_rc.jpg');
	background-size: cover;
	background-position: center;
}

.banner-hero-little-ev {
	margin-top: -25px;
	position: relative;
	height: 40vh; /* Ajustez la hauteur selon vos besoins */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../images/img_site/little_hero_bg_ev.jpg');
	background-size: cover;
	background-position: center;
}

.banner-hero-little-cu {
	margin-top: -25px;
	position: relative;
	height: 40vh; /* Ajustez la hauteur selon vos besoins */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../images/img_site/little_hero_bg_cu.jpg');
	background-size: cover;
	background-position: center;
}

.banner-content {
  	position: absolute;
  	top: 50%;
  	left: 70%;
  	transform: translate(-50%, -50%);
  	text-align: center;
  	color: #fff;
}

.banner-content-title {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	text-align: center;
  	color: #fff;
}

.prinavcolor {
	color: grey;
}

.p-justify {
  text-align: justify;
  text-justify: inter-word; /* ou "inter-character" pour justifier caractère par caractère */
}

.card-color-a{
	background-color: #10046b;
	color: white;
} 
.newsletter {
	padding: 80px 0;
	background: #fff;
}

.newsletter .content {
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2; 
}
.newsletter .content h2 {
	color: #01010;
	margin-bottom: 40px; 
}
.newsletter .content .form-control {
	height: 50px;
	border-color: #653332;
	border-radius:0;
}
.newsletter .content.form-control:focus {
	box-shadow: none;
	border: 2px solid #243c4f;
}
.newsletter .content .btn {
	min-height: 50px; 
	border-radius:0;
	background: #653332;
	color: #fff;
	/*font-weight:600;*/
}

.limited-text {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit the text to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Add an ellipsis (...) to indicate truncated text */
    padding: 25px;
  }

/* Apply styles to the top header */
.top-header {
    padding: 3px; /* Add padding to create space around the content */
    border-bottom: 1px solid #ddd; /* Add a bottom border for separation */
}

/* Style the social icons */
.top-header .list-inline {
    padding: 0;
    margin: 0;
    list-style: none;
}

.top-header .list-inline-item {
    margin-right: 10px; /* Add spacing between social icons */
}

.top-header .list-inline-item a {
    text-decoration: none; /* Remove underlines from social icon links */
    color: #333; /* Set the icon color */
    font-size: 20px; /* Adjust the icon size */
}

/* Style the search bar */
.top-header .form-inline {
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-end; /* Align the search bar to the right */
}

.top-header .form-control {
    width: 200px; /* Adjust the width of the search input */
    margin-right: 10px; /* Add spacing between input and button */
}

/* Style the search button */


@media (max-width: 768px) {
  /* Adjust styles for smaller screens */
  .hero {
      background-size: contain; /* Adjust background image size for smaller screens */
 }

 @media (max-width: 768px) {
  .top-header {
    font-size: 10px;
    padding: 5px;
  }
  .social-icons {
    display: none; /* Hide social icons on smaller screens */
  }