/* Global Reset and Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
}

/* Navbar Styling */
.header_section {
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Centrer le menu de navigation */
.navbar {
    padding: 0;
    justify-content: center;
}

/* Image du logo dans la barre de menu */
.navbar-brand img {
    max-height: 60px; /* Ajuste cette valeur pour définir la hauteur du logo */
    height: auto;
    width: auto; /* Préserve le ratio de l'image */
    display: block;
    margin: 0 auto;
}

/* Navbar elements */
.navbar-nav {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-item {
    margin: 0 15px;
}

.navbar-nav .nav-link {
    font-size: 1rem;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    transition
}
.hero_image_section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: #1f2d5a;
    z-index: 999;
}

.hero_image_section canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero_image {
    width: 120%;    
    z-index: 2;
	transition: transform 0.5s ease-out;	
}



/* Add custom styling for the bits or lines if needed */



/* Conteneur de l'image, centré */
.hero_image_container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-out, width 0.5s ease-out;
}



/* Style de la barre de navigation */
.header_section {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 0;
    transform: translateY(-100%); /* Cacher la barre de navigation au début */
}

/* Quand la barre est visible */
.header_section.show {
    opacity: 1;
    transform: translateY(0); /* Faire glisser la barre dans la vue */
}



/* Section Titles */
.heading_container h2 {
    font-size: 2.5rem;
    color: #222;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 20px;
}

.heading_container p {
    color: #555;
}


/* Styling for Who Sections */
/* Section Styling */
.who_section {
    padding: 60px 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaeaea; /* Optionnel pour séparer visuellement les sections */
}

.who_section:nth-child(even) {
    background-color: #ffffff; /* Alterne le fond */
}

/* Container to align the image and text */
.who_container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

.who_container.reverse {
    flex-direction: row-reverse; /* Alterne l'ordre des éléments */
}

/* Styling for detail box */
.detail-box {
    flex: 0 0 50%; /* Prend 50% de la largeur */
    text-align: left;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-box h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #1f2d5a;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
}

.detail-box p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}


/* Styling for image */
.img-box {
    flex: 0 0 50%; /* Prend 50% de la largeur */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.img-box img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.img-box img:hover {
    transform: scale(1.05); /* Légère animation au hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .who_container {
        flex-direction: column;
        text-align: center;
    }

    .who_container.reverse {
        flex-direction: column;
    }

    .img-box {
        margin-bottom: 30px;
    }

    .detail-box {
        text-align: center;
    }

    .detail-box h2::before,
    .detail-box h2::after {
        display: none; /* Enlever les lignes sur mobile */
    }
}


/* Step Section */
/* Section steps */
.steps_section {
    padding: 50px 0;
    background-color: #fff5e1; /* Arrière-plan clair */
    text-align: center;
    position: relative;
}

/* Conteneur des cercles */
.steps_container {
    display: flex;
    justify-content: space-between; /* Espacement égal entre les étapes */
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Style des cercles */
.step_box {
    position: relative;
    text-align: center;
    z-index: 1;
}

/* Étape de départ (rouge) */
.icon_circle {
    background-color: #e74c3c; /* Rouge par défaut */
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    color: #ffffff; /* Couleur de l'icône en blanc */
    font-size: 2rem; /* Taille de l'icône */
    border: 4px solid #ffffff; /* Bordure blanche autour du cercle */
    transition: background-color 0.5s ease; /* Transition fluide */
}

/* Classe active pour le vert */
.icon_circle.active {
    background-color: #27ae60; /* Vert */
}

.steps_container .step_box p {
    font-size: 1.2rem;
    color: #333;
    margin-top: 10px;
}


/* L'image à l'intérieur du cercle */
.icon_circle img {
    width: 50px;
    height: 50px;
}

/* Texte en dessous des cercles */
.step_box p {
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
}

/* Ligne dorée passant par les cercles */
.wave {
    position: absolute;
    bottom: 0; /* Place la ligne au bas des cercles */
    left: 0;
    width: 100%;
    height: 2px; /* Épaisseur de la ligne */
    background-color: #1f2d5a; /* Couleur dorée */
    z-index: 0;
}



/* Sections Qui sommes-nous et Steps, visibles par défaut */
.do_section, .steps_section {
    opacity: 1;
    transition: opacity 0.8s ease-out;
    background-color: #f8f9fa; /* Arrière-plan clair */
    text-align: center; /* Centrer tout le contenu */
}

/* Quand elles disparaissent */
.do_section.hide, .steps_section.hide {
    opacity: 0;
    pointer-events: none; /* Empêche l'interaction lorsque les sections sont masquées */
}


/* Centrage et style du titre */
.do_section .heading_container h2 {
 font-size: 3rem; /* Taille du texte */
    color: #000; /* Couleur noire */
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 30px;
    margin-top: 30px;
    position: relative;
    display: inline-block;
}

.do_section .heading_container h2::before,
.do_section .heading_container h2::after {
    content: ''; /* Contenu vide pour les lignes */
    position: absolute;
    top: 50%; /* Aligné verticalement avec le texte */
    width: 50px; /* Longueur de la ligne */
    height: 2px; /* Épaisseur de la ligne */
    background-color: #f39c12; /* Couleur jaune/orange similaire à celle de l'image */
}


.do_section .heading_container h2::before {
    left: -70px; /* Décalage de la ligne à gauche du texte */
}

.do_section .heading_container h2::after {
    right: -70px; /* Décalage de la ligne à droite du texte */
}

/* Paragraphe centré sous le titre */
.do_section .heading_container p {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.8;
    max-width: 800px; /* Limite la largeur pour éviter que le texte soit trop étalé */
    margin: 0 auto; /* Centrer le paragraphe */
    margin-bottom: 50px; /* Espacement sous le texte */
}


.do_section .container {
    margin-top: 50px; 
}

/* Ligne ondulée avec SVG */
.wave {
    position: absolute;
    top: 180px; /* Ajustée pour passer sous les cercles */
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 0;
}

/* Arrow styling */
.arrow_container {
    position: absolute;
    top: 180px; /* Aligner avec la ligne ondulée */
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 2;
}

.arrow {
    width: 20px;
    height: 20px;
    background-color: #f1c40f;
    clip-path: polygon(100% 50%, 0 100%, 0 0); /* Forme de la flèche */
    position: relative;
    animation: moveAlongPath 20s infinite;
    offset-path: path('M 50 150 Q 250 200 450 150 T 850 150 T 1150 150'); /* Assure que la flèche suit le chemin du SVG */
    offset-distance: 0%;
    offset-rotate: 180deg;
}


.expertise_flexbox {
    display: flex;
    justify-content: space-between; /* Distribute the blocks evenly */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin-top: 20px; /* Add space between the heading and the list */
}

.expertise_block {
    flex: 1; /* Flex-grow each block equally */
    padding: 0 15px; /* Add some padding between columns */
    min-width: 200px; /* Ensure a minimum width for each block */
}

.expertise_block ul {
    list-style: none; /* Remove the default bullet points */
    padding: 0;
}

.expertise_block ul li {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 10px;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
    .expertise_flexbox {
        flex-direction: column; /* Stack the blocks vertically */
    }

    .expertise_block {
        margin-bottom: 20px; /* Add space between the blocks */
    }
}

/* Ensure that the box containing the image has a fixed size */
.carousel-wrap .box {
    width: 400px; /* Set a fixed width for the box */
    height: 300px; /* Set a fixed height for the box */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* Center the box */
}

/* Ensure the images fit perfectly inside the box without stretching */
.carousel-wrap .img-box img {
    width: 100%;  /* The image takes up the entire width of the box */
    height: 100%; /* The image takes up the entire height of the box */
    object-fit: contain; /* Maintain the image aspect ratio, with padding if necessary */
    max-width: 100%; /* Ensure image doesn't exceed the box's width */
    max-height: 100%; /* Ensure image doesn't exceed the box's height */
    display: block;
    border-radius: 10px; /* Optional: Add rounded corners to the images */
}

/* Container for the summary section */
.summary_container {
    display: flex;
    justify-content: space-between; /* Space between the items */
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 20px; /* Space between blocks */
}

/* Each summary item */
.summary_item {
    flex: 1 1 23%; /* Each item takes up 23% of the container width to accommodate 4 items */
    text-align: center;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* Styling for the image box */
.summary_item .img-box {
    width: 100%;
    height: 150px; /* Set a fixed height for all images */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures images stay within the box */
    margin-bottom: 15px;
}

/* Ensure all images have the same dimensions */
.summary_item .img-box img {
    max-width: 100%;
    max-height: 100%; /* Constrain the image height */
    object-fit: contain; /* Ensure the image maintains its aspect ratio within the box */
}

/* Styling for text under each image */
.summary_item p {
    font-size: 1.1rem;
    color: #333;
}

/* Ensure responsiveness */
@media (max-width: 768px) {
    .summary_container {
        flex-direction: column; /* Stack items on smaller screens */
    }
}


/* Styling for image boxes */
.summary_item .box {
    background-color: #fff; /* White background for the boxes */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center; /* Center the text and image */
}

.summary_item img {
    max-width: 100%; /* Make sure the images fit within the box */
    height: auto;
}

/* Steps container for numbers */
.stats_container {
    display: flex;
    justify-content: space-between; /* Distribute boxes evenly */
    align-items: center;
    margin-top: 30px;
}

/* Step box styling */
.stats_box {
    flex: 1; /* All step boxes will have equal width */
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #f9f9f9;
    margin: 0 10px; /* Add space between each box */
}

/* Number in the middle with gold color */
.stats-detail h2 {
    font-size: 3rem;
    color: #f1c40f; /* Gold color for the numbers */
    margin-bottom: 10px;
}

/* Description below the number */
.stats-detail h5 {
    font-size: 1.2rem;
    color: #333;
    margin-top: 0;
}

/* Responsive styling for mobile */
@media (max-width: 768px) {
    .stats_container {
        flex-direction: column;
    }

    .stats_box {
        margin-bottom: 20px;
        width: 100%;
    }
}

/* Footer Styles */
.footer_section {
    padding: 50px 0;
    color: #fff;
}

.footer_section h4 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.footer_section p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Footer Navigation */
.footer_nav {
    list-style: none;
    padding: 0;
}

.footer_nav li {
    margin-bottom: 10px;
}

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

.footer_nav a:hover {
    color: #f1c40f; /* Gold color on hover */
    text-decoration: underline;
}

/* Social Media Icons */
.social_icons a {
    font-size: 1.5rem;
    color: #fff;
    transition: color 0.3s ease;
}

.social_icons a:hover {
    color: #f1c40f; /* Gold color on hover */
}

/* Copyright section */
.footer_section .text-center {
    margin-top: 20px;
    font-size: 0.9rem;
}


.canvas_section {
    position: relative;
    width: 100%;
    height: 400px; /* Ajustez la hauteur selon vos besoins */
    background-color: #ffffff; /* Couleur de fond */
}

#interactiveCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.separator_canvas {
    width: 100vw; /* Prend toute la largeur de l'écran */
    height: 60px; /* Ajustez cette valeur à la hauteur de padding/margin */
    display: block;
    margin: 0;
    padding: 0;
    background-color: transparent;
    /* Optionnel : pour un effet visuel plus fluide */
}