@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;700;800;900&display=swap');
*{
  font-family: 'poppins',sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Assure que padding et bordures sont inclus dans la largeur totale */
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Empêche tout débordement horizontal */
}

a{
    text-decoration: none;
}

.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert strong {
    font-weight: bold;
}

.alert::before {
    content: "⚠️ ";
    font-size: 18px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.alert-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: inherit;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.alert-close:hover {
    color: #000;
}

/* SCTION HEAD STYLE GOING HERE */
/* =================================================== */

/* Styles de base pour le header */
.header {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

.logo_left img {
    height: 50px;
    max-width: 150px;
    object-fit: contain;
}

.links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.links ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.links ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.links ul li a:hover {
    color: #007bff;
}

.mode {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mode ion-icon {
    font-size: 24px;
    cursor: pointer;
    color: #333;
    transition: color 0.3s ease;
}

.mode ion-icon:hover {
    color: #007bff;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .head {
        flex-direction: column;
        gap: 15px;
    }
    
    .links {
        flex-direction: column;
        text-align: center;
    }
    
    .links ul {
        flex-direction: column;
        align-items: center;
    }
}

.mode {
    display: flex;
    align-items: center;
    gap: 10px; /* Réduit l'espace entre les icônes */
    cursor: pointer;
    border: 1px solid rgb(191, 188, 188);
    border-radius: 50px;
    width: 150px;
    height: 36px; /* Hauteur fixée pour le bouton */
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet hover */
    justify-content: space-evenly;
}
.mode ion-icon {
    font-size: 20px; /* Ajuste la taille des icônes */
}


/* Masquer le burger icon sur les grands écrans */
.menu-icon {
    display: none; /* Caché par défaut */
}

/* Styles pour petits écrans */
@media screen and (max-width: 768px) {
    .head {
        justify-content: space-between;
        padding: 10px;
    }

    /* Cache les liens au départ sur les petits écrans */
    .links {
        position: absolute;
        top: 0;
        left: -100%; /* Les liens sont en dehors de l'écran */
        height: 100vh;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 70%;
        transition: left 0.3s ease;
        z-index: 999; /* Pour s'assurer que le menu est devant le reste */
    }

    .links ul {
        flex-direction: column;
        gap: 30px;
    }

    /* Icône du menu (burger icon) */
    .menu-icon {
        display: block;
        font-size: 28px;
        cursor: pointer;
        z-index: 1000;
    }

    /* Quand le menu est activé (slide-in effect) */
    .links.active {
        left: 0; /* Le menu entre depuis la gauche */
        display: flex;
        background-color: rgba(240, 240, 240, 0.95); /* Fond gris clair */
        border-radius: 0 0 15px 15px; /* Coins arrondis en bas */
    }

    /* Cache les liens et la barre de mode sur mobile par défaut */
    .links
     {
        display: none;
    }

    .mode{
        width: 150px;
        justify-content: space-evenly;
    }
}

/* ======================================================================================= */


/* ===================== HERO SECTION STYLE ======================= */
.page_content {
    width: 100%;
    margin-top: 80px; /* Espace par rapport au header fixe */
}

/* Global Hero Section Styling */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 10%;
    gap: 30px;
    background: #f9f9f9;
}

.hero_intro {
    flex: 1;
    max-width: 50%;
}

.title {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.4;
    color: #333;
    margin-bottom: 20px;
}

.title span {
    display: inline-block;
    background: #38a169; /* Greenish color */
    color: #fff;
    border-radius: 10px;
    padding: 5px 10px;
}

.informations {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}

.more .text a {
    display: inline-block;
    background: #007BFF;
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 1rem;
    transition: background 0.3s;
}

.more .text a:hover {
    background: #007bff;
}

/* Hero Images Section */
/* Styles des images rondes superposées */
.hero_img_one img,
.hero_img_two img {
    width: 300px; /* Taille initiale pour grands écrans */
    height: 300px;
    border-radius: 50%; /* Toujours rondes */
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Effet propre */
}

/* Position des images pour le grand écran */
.hero_img_one {
    position: absolute;
    top: 50px;
    left: 40px;
    z-index: 2;
}

.hero_img_two {
    position: absolute;
    top: 150px;
    left: 160px;
    z-index: 1;
    opacity: 0.95;
}

/* Hero container pour organisation */
.hero_img {
    position: relative;
    width: 400px; /* Largeur maximum */
    height: 400px; /* Hauteur maximum */
    margin: 0 auto; /* Centrer sur l'écran */
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        padding: 30px 5%;
    }

    .hero_intro {
        max-width: 100%;
        margin-bottom: 20px;
        z-index: 2;
    }

    .hero_img {
        width: 250px;
        height: 250px; /* Réduction pour petits écrans */
    }

    .hero_img_one img,
    .hero_img_two img {
        width: 220px;
        height: 220px; /* Réduction des images */
    }

    .hero_img_one {
        top: 0;
        left: 25%;
        transform: translateX(-25%);
        z-index: 2; /* Toujours visible */
    }

    .hero_img_two {
        top: 100px;
        left: 55%; /* Position plus éloignée horizontalement */
        transform: translate(-55%, -20%);
        z-index: 1;
    }
}


/* ================================================================================= */

.page_content {
    position: relative; /* Si ce n'est pas déjà le cas */
  }
  
  .particle {
    position: absolute;
    z-index: -100;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.7;
    animation: float 3s infinite linear;
  }

.particle:nth-child(even) {
    background-color: #ff6600;
}
  
.particle:nth-child(odd) {
    background-color: #0ba65b;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(100vw - 10px), calc(100vh - 10px));
    }
}

/* Styles pour la barre de défilement */
::-webkit-scrollbar {
   width: 12px; /* Largeur de la barre de défilement */
}
  
/* Partie de la barre de défilement qui se déplace */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Couleur du curseur de la barre de défilement */
    border-radius: 10px; /* Arrondir les coins du curseur */
}
  
/* Partie de la barre de défilement qui est visible */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Couleur de la piste de la barre de défilement */
    border-radius: 10px; /* Arrondir les coins de la piste */
}

/* =========================================================================================== */
/* Section Container */
.main {
    margin-top: 45px;
    background: linear-gradient(to bottom, #ffffff, #f3f3f3);
    padding: 50px 15px;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Title */
.section_title {
    font-size: 2.5rem;
    color: #ff5733;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Section Content */
.section_content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.infos {
    flex: 1;
    padding: 20px;
    font-size: 1rem;
    line-height: 1.8;
    border-left: 5px solid #ff5733;
}

.illustration {
    flex: 1;
    text-align: center;
    position: relative;
}

.myVideo {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.play_button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 87, 51, 0.8);
    border: none;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.play_button:hover {
    background: rgba(255, 87, 51, 1);
}

.play_button ion-icon {
    color: #fff;
    font-size: 2rem;
}

/* Overview Section */
.overview {
    display: flex;
    justify-content: space-around;
    padding: 30px 0;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

.overview_element {
    text-align: center;
    flex: 1;
}

.icon {
    font-size: 3rem;
    color: #ff5733;
    margin-bottom: 10px;
}

.overview_element p {
    font-size: 1.2rem;
    color: #333;
    margin: 0;
}

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

    .infos {
        border-left: none;
        border-top: 5px solid #ff5733;
    }

    .overview {
        flex-direction: column;
        gap: 20px;
    }
}

/*  ========================================================================================== */

/* Section Container */
.services {
    background-color: #f9f9f9;
    padding: 60px 20px;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Title */
.section_title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    color: #ff5733;
}

.section_title .underline {
    display: block;
    width: 60px;
    height: 4px;
    background-color: #ff5733;
    margin: 10px auto 0;
}

/* Services Content */
.services_content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.service_card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: calc(33.33% - 20px);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.card_header {
    margin-bottom: 15px;
}

.card_icon {
    font-size: 3rem;
    color: #ff5733;
    margin-bottom: 10px;
}

.header_title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.card_content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
}

/* More Services */
.more_services {
    text-align: center;
    margin-top: 40px;
}

.more_services p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
}

.know_more {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.know_more:hover {
    background-color: #e04d2d;
}

/* Responsiveness */
@media (max-width: 1024px) {
    .service_card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .service_card {
        width: 100%;
    }

    .services_content {
        gap: 15px;
    }
}


/* --------------------------------------------------------------- */

/* Code css for the carousel section */

/* Section Styling */
.portfolio {
    background-color: #f4f4f4;
    padding: 60px 20px;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Title */
.section_title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 30px;
    color: #222;
    position: relative;
}

.text_intro p {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 40px;
    color: #555;
}

/* Carousel Container */
.carousel_container {
    display: flex;
    gap: 20px;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.carousel_item {
    flex: 0 0 calc(33.33% - 20px);
    scroll-snap-align: start;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease;
}

.carousel_item:hover {
    transform: translateY(-10px);
}

.img_container {
    position: relative;
}

.img_container img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.infos_plus {
    display: flex;
    justify-content: center;
    gap: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 20px;
}

.img_container:hover .infos_plus {
    opacity: 1;
}

.infos_plus .desc {
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s ease;
}

.infos_plus .desc:hover {
    color: #ff5733;
}

/* Carousel Dots */
.carousel_dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.carousel_dots .dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel_dots .dot.active {
    background: #ff5733;
}

/* Responsiveness */
@media (max-width: 1024px) {
    .carousel_item {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .carousel_item {
        flex: 0 0 calc(100% - 20px);
    }
}


/* ==================================================================== */

/* Team members section css here */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Title */
.section_title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    color: #222;
    position: relative;
}

.section_title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #ff5733;
    margin: 10px auto 0;
}

.section_subtitle {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.2rem;
    color: #666;
    line-height: 1.5;
}

/* Departments */
.depart_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.department {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.department:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.principal_content {
    position: relative;
    overflow: hidden;
}

.principal_content img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.department:hover .principal_content img {
    transform: scale(1.1);
}

.depart_infos {
    padding: 20px;
    text-align: center;
}

.dep_name {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
}

.depart_infos p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* Responsiveness */
@media (max-width: 768px) {
    .section_title {
        font-size: 2rem;
    }

    .section_subtitle {
        font-size: 1rem;
    }

    .dep_name {
        font-size: 1.3rem;
    }
}

/* Hover Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.department {
    animation: fadeIn 0.6s ease-in-out;
}

/* Scale Animation for Images */
@keyframes scaleUp {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/*  */
/* =========================================================================== */

/* General Styling */
/* General Container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* Section Title */
.section_title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

.section_subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 40px;
}

/* Contact Content */
.contact_content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
}

.contact_details {
    flex: 1;
    max-width: 40%;
    text-align: left;
}

.designation {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 1rem;
    color: #444;
}

.designation ion-icon {
    font-size: 1.5rem;
    margin-right: 10px;
    color: #ff5733;
}

/* Form Styling */
.contact_form {
    flex: 1;
    max-width: 50%;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form_group {
    margin-bottom: 15px;
    text-align: left;
}

.form_input,
.form_textarea {
    width: 100%;
    background: #f0f0f0;
    border: none;
    padding: 12px 15px;
    font-size: 1rem;
    border-radius: 5px;
    transition: border 0.3s, background 0.3s;
}

.form_input:focus,
.form_textarea:focus {
    border: 2px solid #007BFF;
    outline: none;
    background: #fff;
}

.form_input:hover,
.form_textarea:hover {
    border: 2px solid #007BFF;
}

.form_textarea {
    height: 100px;
    resize: none;
}

.form_button {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    background: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.form_button:hover {
    background: #0077b5;
}

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

    .contact_details,
    .contact_form {
        max-width: 100%;
    }
}


/* ================================================== */

/*  */
.newsletter {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9; /* Couleur de fond douce */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

.section_title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

.newsletter p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #555;
    line-height: 1.5;
}

.news_form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
}

.default_input {
    width: 60%; /* Largeur ajustée pour les grands écrans */
    max-width: 400px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

.news_submit {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

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



/*  */
/* Responsive Design */

/* Pour les tablettes */
@media (max-width: 768px) {
    .section_title {
        font-size: 20px; /* Taille réduite du titre */
    }

    .newsletter p {
        font-size: 14px; /* Taille réduite pour le texte */
        padding: 0 10px; /* Espacement latéral */
    }

    .news_form {
        flex-direction: column; /* Champs empilés en colonne */
        gap: 15px;
    }

    .default_input {
        width: 100%; /* Champs en pleine largeur */
        max-width: none;
    }

    .news_submit {
        width: 100%; /* Bouton en pleine largeur */
        font-size: 14px; /* Taille légèrement réduite */
    }

    .alert {
        font-size: 12px; /* Taille de texte réduite */
        flex-direction: column; /* Aligne le contenu en colonne */
        align-items: flex-start;
    }

    .alert-close {
        align-self: flex-end; /* Bouton aligné à droite */
    }
}

@media (max-width: 480px) {
    .newsletter {
        padding: 10px; /* Réduction du padding général */
    }

    .section_title {
        font-size: 18px; /* Encore plus compact */
    }

    .newsletter p {
        font-size: 12px;
    }

    .default_input {
        font-size: 14px;
        padding: 8px; /* Réduction de l'espacement interne */
    }

    .news_submit {
        padding: 8px 10px; /* Réduction de la taille du bouton */
    }
}

/*  */

/*  */
.page_footer {
    padding: 50px 0; /* Espacement intérieur */
    overflow: hidden;
  }
  
  .footer_items {
    display: flex;
    justify-content: space-between; /* Espace les éléments de manière égale */
  }

  .service_item p{
    text-align: center;
  }
  
  .logo_item img {
    max-width: 200px; /* Ajuste la taille maximale du logo */
  }
  
  .service_item ul {
    list-style: none; /* Supprime les puces de la liste */
    padding: 0;
  }
  
  .contact_items {
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
  }
  
  .contact_item {
    display: flex;
    align-items: center; /* Centre verticalement l'icône et le texte */
    margin-bottom: 10px; /* Espace entre chaque élément de contact */
  }
  
  .contact_item ion-icon {
    margin-right: 10px; /* Espace entre l'icône et le texte */
  }
  
  .links_item ion-icon {
    font-size: 30px; /* Taille des icônes */
    margin: 0 10px; /* Espace entre les icônes */
    color: #3b5998; /* Bleu pour Facebook */
    cursor: pointer;
  }
  
  .links_item a{
    text-decoration: none;
    outline: none;
  }

  .links_item ion-icon[name="logo-instagram"] {
    color: #c13584; /* Rose pour Instagram */
  }
  
  .links_item ion-icon[name="logo-linkedin"] {
    color: #0077b5; /* Bleu pour LinkedIn */
  }
  
  .terms {
    display: flex;
    justify-content: center; /* Centre horizontalement les éléments */
    margin-top: 20px;
  }
  
  .terms div {
    margin: 0 10px; /* Espace entre les éléments */
  }

.contact_links .contact_item ion-icon{
    font-size: 24px;
    color: #3880F8;
}


/* RESPONSIVE DESIGN CSS PART IS GOING TO BE HERE PLEASE BE FOCUS */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Responsive Design */

/* Pour les tablettes */
@media (max-width: 1024px) {
    .footer_items {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center; /* Centre les éléments */
        gap: 20px;
    }

    .logo_item img {
        max-width: 150px; /* Réduction de la taille du logo */
    }
}

/* Pour les tablettes plus petites et les smartphones */
@media (max-width: 768px) {
    .footer_items {
        text-align: center; /* Centre les éléments pour les petits écrans */
    }

    .service_item ul {
        padding: 0 20px; /* Ajout d'espacement intérieur pour les listes */
    }

    .links_item ion-icon {
        font-size: 25px; /* Réduction de la taille des icônes sociales */
    }
}

/* Pour les petits écrans comme les smartphones */
@media (max-width: 480px) {
    .footer_items {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .contact_item ion-icon {
        font-size: 20px; /* Réduction de la taille des icônes de contact */
    }

    .terms {
        flex-direction: column; /* Empile les termes et conditions verticalement */
        text-align: center;
    }

    .terms div {
        margin: 10px 0; /* Ajout d'espace vertical entre les éléments */
    }

    .logo_item img {
        max-width: 120px; /* Taille plus petite du logo sur mobile */
    }
}


/* DARK THEM CSS STYLE GOING HERE */

/* Dark theme */
/* --- Général: Thème clair (par défaut) --- */
body {
    background-color: #ffffff;
    color: #333333;
    transition: all 0.3s ease; /* Pour une transition fluide lors du changement de thème */
}

a {
    color: #007BFF; /* Liens en bleu clair */
}

section {
    background-color: #f9f9f9;
}

/* --- Thème sombre --- */
body.dark-theme {
    background-color: #121212; /* Fond sombre */
    color: #e0e0e0; /* Texte clair */
}

body.dark-theme a {
    color: #80c7ff; /* Liens en bleu clair */
}

body.dark-theme section {
    background-color: #1e1e1e; /* Fond des sections sombre */
}

/* Ajoute des ajustements supplémentaires pour tes éléments */
body.dark-theme .hero {
    background-color: #333333; /* Hero section sombre */
}

body.dark-theme .hero_intro h2 {
    color: #e0e0e0; /* Titre clair */
}

body.dark-theme .hero_intro p {
    color: #cccccc; /* Texte secondaire clair */
}

body.dark-theme .contact_form input,
body.dark-theme .contact_form textarea {
    background-color: #333333; /* Fond sombre pour les champs */
    color: #ffffff; /* Texte clair dans les champs */
    border: 1px solid #555555; /* Bordure gris foncé */
}

body.dark-theme .contact_form input:focus,
body.dark-theme .contact_form textarea:focus {
    border-color: #80c7ff; /* Bordure bleue lors de la sélection */
}

/* Ajuste les boutons pour le thème sombre */
body.dark-theme .form_button {
    background-color: #007BFF;
    color: #ffffff;
}

body.dark-theme .form_button:hover {
    background-color: #0056b3;
}

/* Modifications pour d'autres sections comme .menu, .links, etc. */
body.dark-theme .menu-icon {
    color: #e0e0e0; /* Icône claire */
}

body.dark-theme .links {
    background-color: #222222; /* Fond sombre pour le menu */
}

body.dark-theme .links a {
    color: #e0e0e0; /* Liens dans le menu clairs */
}

body.dark-theme .links a:hover {
    color: #80c7ff; /* Liens en bleu clair au survol */
}

/*  ============================================================== */
/* Styles communs à tous les thèmes */
/* Liens de navigation */
.header .links a {
    color: black; /* Liens en noir par défaut */
}

/* Icônes de menu */
.header .menu-icon ion-icon {
    color: black; /* Icône noire par défaut */
}

/* Mode (icônes de thème) */
.header .mode ion-icon {
    color: black; /* Icônes de mode en noir */
}

/* Dark Theme */
.dark-theme .header {
    background-color: #121212; /* Fond foncé pour le header */
    color: white;  /* Texte en blanc */
}

.dark-theme .header .logo_left img {
    filter: brightness(1) invert(1); /* Inverse les couleurs pour les images, ou utilise une image différente pour le dark mode */
}

.dark-theme .header .links a {
    color: white; /* Liens en blanc dans le dark theme */
}

.dark-theme .header .menu-icon ion-icon {
    color: white; /* Icône en blanc dans le dark mode */
}

.dark-theme .header .mode ion-icon {
    color: white; /* Icônes de mode en blanc dans le dark mode */
}

/* ================================================================= */

/* Dark Theme */
.dark-theme .main {
    background-color: #121212; /* Fond sombre pour le dark theme */
    color: #ccc; /* Texte clair pour le dark theme */
}

.dark-theme .section_title {
    color: #fff; /* Texte en blanc */
}

.dark-theme .infos p {
    color: #bbb; /* Texte plus clair dans le dark theme */
}

.dark-theme .overview_element .icon {
    color: #FFD700; /* Icônes en or pour contraster avec le fond sombre */
}

.dark-theme .overview_element p {
    color: #ccc; /* Texte des statistiques plus clair */
}

.dark-theme .illustration img {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2); /* Légère ombre claire pour les images */
}

/* Transition fluide pour les éléments */
.main {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main .section_title, 
.main .infos p, 
.main .overview_element p {
    transition: color 0.3s ease;
}

.main .overview_element .icon {
    transition: color 0.3s ease;
}

/* ======================================================== */

/* Dark Theme */
.dark-theme .services {
    background-color: #121212; /* Fond sombre pour le dark theme */
}

.dark-theme .section_title {
    color: #fff; /* Texte du titre en blanc */
}

.dark-theme .underline {
    background-color: #FFD700; /* Couleur dorée pour la barre sous le titre */
}

.dark-theme .services_content {
    display: flex;
    justify-content: space-between;
}

.dark-theme .service_card {
    background-color: #333; /* Fond sombre pour les cartes */
    color: #ccc; /* Texte clair pour les cartes */
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Ombre claire autour des cartes */
}

.dark-theme .card_icon {
    color: #FFD700; /* Icônes dorées sur fond sombre */
}

.dark-theme .header_title {
    color: #fff; /* Titre des cartes en blanc */
}

.dark-theme .card_content p {
    color: #bbb; /* Texte des cartes en gris clair */
}

.dark-theme .more_services p {
    color: #bbb; /* Texte de la section "Plus de services" en gris clair */
}

.dark-theme .know_more {
    background-color: #FFD700; /* Bouton doré */
    color: #121212; /* Texte du bouton sombre */
}

.dark-theme .know_more:hover {
    background-color: #ffa500; /* Bouton doré plus foncé au survol */
}

/* ================================================================= */

/* Dark Theme for the "departments" section */
.dark-theme .depart_container {
    background-color: #121212; /* Fond sombre pour la section */
    color: #fff; /* Texte en blanc */
}

.dark-theme .department {
    background-color: #1e1e1e; /* Fond sombre pour chaque département */
    border: 1px solid #333; /* Bordure claire pour séparer les départements */
    border-radius: 10px;
    margin-bottom: 20px; /* Espacement entre les départements */
    padding: 20px;
}

.dark-theme .department .depart_infos h3 {
    color: #fff; /* Titre du département en blanc */
}

.dark-theme .department .depart_infos p {
    color: #bbb; /* Description en gris clair */
}

.dark-theme .department .principal_content img {
    filter: brightness(0.7); /* Légèrement assombrir les images */
}

.dark-theme .department .depart_infos {
    margin-top: 15px;
}

.dark-theme .department:hover {
    background-color: #333; /* Effet de survol pour chaque département */
}

.dark-theme .department:hover .depart_infos h3 {
    color: #007bff; /* Changer la couleur du titre en bleu pendant le survol */
}


/* ============================================================================== */

/* Dark Theme */
.dark-theme .contact {
    background-color: #121212; /* Fond sombre pour le dark theme */
}

.dark-theme .contact .section_title {
    color: #fff; /* Texte du titre en blanc */
}

.dark-theme .contact .section_subtitle {
    color: #bbb; /* Texte subtile en gris clair */
}

.dark-theme .contact .contact_content {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.dark-theme .contact .contact_details {
    width: 30%;
}

.dark-theme .contact .designation {
    font-size: 1.2rem;
    color: #ccc; /* Texte clair pour les informations de contact */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.dark-theme .contact .designation ion-icon {
    font-size: 1.6rem;
    margin-right: 10px;
}

.dark-theme .contact .alerts .alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.dark-theme .contact .alerts .alert-success {
    background-color: #28a745;
    color: #fff;
}

.dark-theme .contact .alerts .alert-danger {
    background-color: #dc3545;
    color: #fff;
}

.dark-theme .contact .alerts .alert-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
}

.dark-theme .contact .contact_form {
    width: 65%;
}

.dark-theme .contact .form_input,
.dark-theme .contact .form_textarea {
    background-color: #333; /* Fond sombre pour les champs */
    color: #fff; /* Texte clair pour les champs */
    border: 1px solid #555;
}

.dark-theme .contact .form_button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    font-size: 1.1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dark-theme .contact .form_button:hover {
    background-color: #0056b3;
}