body{
	height:100vh;
    font-family: 'Montserrat', sans-serif;
	margin: 0;
	background-color: #f4f4f4;
}

.pointer {
	cursor: pointer;
}
.highlight > .card  {
	background-color: rgba(40,90,245,0.2);
}
.radius{
	border-radius:1rem;	
}
header {
	background-color: white !important ;
	color: #2574c8 !important;
	padding: 20px;
	text-align: center;
	border-bottom: solid 3px #2574c8;
}

footer {
	text-align: center;
	padding: 20px;
	background-color: #2574c8;
	color: white !important;
	position: relative;
	bottom: 0;
	width: 100%;
}

.loader {
	border: 8px solid #f3f3f3; /* Grey background */
	border-top: 8px solid #3498db; /* Blue color */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index:9999;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}



/* Carte avec une ombre et un léger effet de survol */
.card {
	transition: transform 0.3s ease-in-out;
}

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

/* Espacement entre les cartes sur mobile */
@media (max-width: 767px) {
	.card {
		width: 100%;
		margin-bottom: 15px;
	}
}

/* Espacement entre les cartes sur tablettes et écrans larges */
@media (min-width: 768px) {
	.card {
		width: 100%;
	}
}

	
.navbar-nav .nav-link {
    color: black; /* Couleur par défaut des liens */
    transition: color 0.3s; /* Transition douce pour le changement de couleur */
}

.navbar-nav .nav-link:hover {
    color: white; /* Couleur des liens au survol */
}

.navbar-nav .nav-link.active {
    color: white; /* Couleur du lien actif */
    background-color: #007bff; /* Fond bleu (ou une autre couleur) pour le lien actif */
    border-radius: 4px; /* Ajoute des coins arrondis pour le fond */
    padding: 8px; /* Espace autour du texte pour un effet de bouton */
}
.container {
	width: 80%;
	margin: auto;
	padding: 20px;
}

.nav-home {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: white;
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

/* Pour les navigateurs WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 12px; /* Largeur de la scrollbar */
    height: 12px; /* Hauteur de la scrollbar horizontale */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Couleur de l'arrière-plan de la scrollbar */
}

::-webkit-scrollbar-thumb {
    background: #2574c8; /* Couleur de la barre de défilement */
    border-radius: 10px; /* Arrondi de la barre de défilement */
}

::-webkit-scrollbar-thumb:hover {
    background: #1e5f9a; /* Couleur de la barre de défilement au survol */
}

/* Pour Firefox */
* {
    scrollbar-width: thin; /* Afficher une scrollbar fine */
    scrollbar-color: #2574c8 #f1f1f1; /* Couleurs de la barre et de l'arrière-plan */
}


input::placeholder, 
textarea::placeholder {
	color: rgba(0, 0, 0, 0.5); /* Gris léger */
	font-size: 14px; /* Taille de police */
	font-style: italic; /* Italique */
	font-weight: 300; /* Police fine */
}

/* Pour les navigateurs anciens qui utilisent :-moz-placeholder et :-ms-input-placeholder */
input::-moz-placeholder, 
textarea::-moz-placeholder { /* Firefox 19+ */
	color: rgba(0, 0, 0, 0.5); /* Gris léger */
	font-size: 14px; /* Taille de police */
	font-style: italic; /* Italique */
	font-weight: 300; /* Police fine */
}
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: rgba(0, 0, 0, 0.5); /* Gris léger */
	font-size: 14px; /* Taille de police */
	font-style: italic; /* Italique */
	font-weight: 300; /* Police fine */
}
input::-ms-input-placeholder, 
textarea::-ms-input-placeholder { /* Microsoft Edge */
	color: rgba(0, 0, 0, 0.5); /* Gris léger */
	font-size: 14px; /* Taille de police */
	font-style: italic; /* Italique */
	font-weight: 300; /* Police fine */
}
input::placeholder-shown, /* Alternative pour certains cas */
textarea::placeholder-shown {
	color: rgba(0, 0, 0, 0.5); /* Gris léger */
	font-size: 14px; /* Taille de police */
	font-style: italic; /* Italique */
	font-weight: 300; /* Police fine */
}