body {
    margin: 0;
    padding: 0;
    background-color: white; /*#f4f4f4*/
    font-family: 'Roboto', sans-serif;
}

header.shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
	
	.pcourse {
           font-size: 40px;  color: black;
        }

.z {
	border-left: solid 0.5px #003f55;
	color: white;
	padding-left: 5px;
	font-weight: bold;
	}
	
a {
    text-decoration: none; /* Remove underline from links */
    color: white;
}

 ul {
    list-style: none; /* Remove bullet points */
	}
	


.danny {
    width: 150px; /* Scale the image */
    height: 150px; /* Maintain aspect ratio */
	border-radius: 50%;
	padding-top: 50px;
	padding-left: 40px;
}

.pt {
color: white; background-color: #52392F; padding: 8px; font-weight: bold; margin-left: 150px; font-size: 30px; border-radius: 50px; border: solid 2px  #444444;
}

.y {
display: flex; align-items: center; justify-content: center; gap: 40px;
}



h3:hover {
    transform: scale(1.02);
	}

.d  {
	background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
	color: white;
	font-size: 30px;
	font-weight: bold;
	padding-top: 30px;
	}
	
.tableau {
	font-size: 25px;
	color: #444444;
	font-weight: bold;
	}
	







footer {    
            font-family: Arial, sans-serif;
            background-color: #E7E7F2; /* Fond gris foncé */
            color: #5a0082; /* Texte blanc */
            padding: 40px 20px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            line-height: 1.8;
        }

        .column-1 {
            flex: 1;
            padding: 20px;
            min-width: 200px;
            margin: 10px;
        }

        .column-1 h3 {
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: bold;
             /* Assurez-vous que les titres sont blancs */
        }

        /* Icônes de médias sociaux */
        .social-media-links a {
            color: #fff;
            margin-right: 2px;
            text-decoration: none;
            font-size: 30px;
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50%; /* Les icônes sont circulaires */
            background-color: #6d009c; /* Fond sombre pour le cercle */
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s;
        }

        .social-media-links a:hover {
            background-color: #FF92A5; /* Couleur plus claire au survol */
        }

        .contact-details p,
        .link-section a {
            color: #5a0082;
            text-decoration: none;
            margin: 10px 0;
            font-size: 16px;
        }

        .link-section a {
            display: block; /* Assurez-vous que chaque lien soit sur une nouvelle ligne */
            color: #5a0082;
        }

        .link-section a:hover {
            color: #FF92A5;
        }

        .column-1 p {
            margin: 10px 0;
            
        }
        
      
        
        .highlight-text {
            font-size: 28px;
        }
		
		.spacer {
            padding-left: 50px;
        }
		
		.column-1 a {
            text-decoration: none;
			
        }

        .vision-statement {
            font-style: italic;
            font-size: 16px;
             /* Texte gris clair pour la section de conseil */
        }

        @media (max-width: 768px) {
            footer {
                flex-direction: column;
                align-items: flex-start; /* Aligner tout à gauche sur les petits écrans */
            }

            .column-1 {
                min-width: 100%;
                text-align: left; /* Aligner les éléments à gauche */
            }

            /* Icônes sociales en ligne et centrées */
            .social-media-links {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
            }
			
			.spacer {
            padding-left: 0px;
        }
        }
        
        
        
        
        
        
        
        
        


	
/* Chat Button */
.chat-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(45deg, #90d5ff, #ff5b00); /* Updated gradient */
    transition: background 0.3s ease-in-out;
    padding: 10px;
}

/* Hover effect */
#chat-btn:hover {
    background: linear-gradient(45deg, #ff5b00, #90d5ff); /* Inverted gradient on hover */
}

#chat-btn:hover img {
    transform: scale(1.1);  /* Slight zoom effect on hover */
}

#chat-btn i {
    font-size: 24px;  /* Adjust icon size */
    color: white;     /* Icon color */
    transition: transform 0.3s ease;
}

#chat-btn:hover i {
    transform: scale(1.2); /* Slight zoom effect on hover */
}

/* Chat Box */
.chat-box {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    background-color: #FDF4EC; /* Updated background color */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
    flex-direction: column;
    max-height: 400px;
    transition: all 0.3s ease;
}

/* Chat Header */
.chat-header {
    background-color: black;  /* Updated header background */
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.chat-header .close-btn {
    background: none;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Chat Body */
.chat-body {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: 250px;
}

.chat-message {
    background-color: #ecf0f1;  /* Light grey background for messages */
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    max-width: 80%;
}

.bot-message {
    background-color: #ff5b00;  /* Updated color for bot messages */
    color: white;
    align-self: flex-start;
}

.user-message {
    background-color: black;  /* Updated color for user messages */
    color: white;
    align-self: flex-end;
}

/* Chat Footer */
.chat-footer {
    display: flex;
    padding: 10px;
    background-color: #FDF4EC;  /* Updated footer background */
    border-radius: 0 0 8px 8px;
}

.chat-footer input {
    width: 80%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 10px;
}

.chat-footer button {
    padding: 10px;
    background-color: #ff5b00;  /* Updated button color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.chat-footer button:hover {
    background-color: #90d5ff;  /* Updated hover color */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .chat-box {
        width: 90%;  /* Full width for smaller screens */
    }

    .chat-footer input {
        width: 70%;  /* Input field takes less space */
    }
}


















 /* Styling the filter container */
        .filter-container {
            display: flex;
            justify-content: center;
            align-items: center;
			gap: 10px;
        }
		
		@media screen and (max-width: 768px) {
    .pcourse {
           font-size: 25px;  color: black;
        }
}

        /* Styling the select dropdown */
        select {
            font-size: 16px;
            padding: 12px 20px;
            border-radius: 8px;
            border: 2px solid #C29B6C;  /* Using the specified border color */
            background-color: #947352;  /* Using a warm brown background */
            color: #fff;  /* White text color */
            transition: all 0.3s ease;
            cursor: pointer;
            width: 200px;
        }

        /* Hover and focus effects */
        select:hover {
            border-color: #704F38;  /* Darker brown for hover */
            background-color: #704F38;  /* Darker brown background for hover */
            box-shadow: 0 0 8px rgba(112, 79, 56, 0.5);  /* Adding a soft glow effect on hover */
        }

        select:focus {
            outline: none;
            border-color: #C29B6C;  /* Light brown border on focus */
            background-color: #C29B6C;  /* Light brown background on focus */
            box-shadow: 0 0 8px rgba(194, 155, 108, 0.7);  /* Subtle glow effect on focus */
        }

        /* Styling options inside the select dropdown */
        option {
            padding: 10px;
            background-color: #947352;  /* Same background color for options */
            color: #fff;  /* White text for options */
        }

        /* Option hover effect */
        option:hover {
            background-color: #704F38;  /* Darker background color on option hover */
            color: #fff;  /* Ensure text remains white */
        }

        /* Option selected style */
        option:checked {
            background-color: #704F38;  /* Darker brown for selected options */
            color: white;
        }
		
		.lay {
		display: flex; gap: 40px; height: 300px; width: 100%; background-color: #808080; align-items: center; justify-content: center;
}
 /* excel courses css..............................................................................*/ 















/* nouveau css..............................................................................*/ 


/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styles */





				.prev {
                display: none;
            }

            .next {
                display: none;
            }
		
		.testimonial-container {
               display: flex;
               
               height: auto;
               padding-top: 60px;
               padding-bottom: 60px;
            }

        .testimonial-box {
            border: solid 1.6px #f4ebfd;
            color: #00225b;
            padding: 20px;
            border-radius: 15px;
            width: 27%;
            margin: 15px auto;
            
        }

        .testimonial-box i {
            margin-top: -45px;
            font-size: 30px;
            display: block;
            text-align: center;
            margin-bottom: 10px;
            border-radius: 50%;
            background-color: #00225b;
            width: 60px;
            height: 60px;
            padding: 10px;
            color: #1e90ff;
        }

        .testimonial-box h3 {
            margin-bottom: 15px;
            text-align: center;
            font-size: 1.2em;
            color: #a955df;
        }

        .testimonial-box p {
            text-align: center;
            
            font-size: 1em;
            color: #480069;
        }

        .testimonial-box .student-name {
            margin-top: 15px;
            font-style: normal;
            font-weight: bold;
            color: #a955df;
        }

        /* Slide Show for smaller screens */
        @media screen and (max-width: 768px) {
            .testimonial-box {
                display: none;
                width: 80%;
                text-align: center;
            }

            .testimonial-container {
                position: relative;
                width: 100%;
                height: auto;
            }

            .testimonial-box.active {
                display: block;
            }

            /* Optional: Styling for Next/Previous buttons */
            .prev, .next {
                position: absolute;
                top: 50%;
                background-color: rgba(0, 0, 0, 0.5);
                color: white;
                font-size: 20px;
                padding: 10px;
                cursor: pointer;
                border: none;
                border-radius: 50%;
                transform: translateY(-50%);
            }

            .prev {
                left: 30px;
				display: flex;
            }

            .next {
			display: flex;
                right: 30px;
            }
        }





















.section-container h2 {
  font-size: 40px;
  font-weight: bold;
  color: black;
  margin-bottom: 10px;
  text-align: center;

}

.veau {
  font-size: 18px;
  line-height: 1.5;
 color: black;
  margin-bottom: 10px;
  text-align: center;

}


/* Container styling */
.section-container {
    margin: 0 17px;
    border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  padding: 60px 40px;
  background-color: #f4ebfd;
  color: #333;
  font-family: 'Arial', sans-serif;
  flex-wrap: wrap;
}

.card {
   
  background: linear-gradient(to right, #000435, #3b3b70);

  padding: 20px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  width: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}


.fa-dollar-sign {
  color: #00e500;
}

.fa-calendar-alt {
  color: #FFA500;
}

.fa-graduation-cap {
  color: #FCD12A;
}


.card-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 4px solid #f0f0f0;
}

.card-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
  margin-bottom: 10px;
}

.card-description {
  font-size: 1rem;
  color: white;
  line-height: 1.5;
  margin-top: 0;
  font-weight: bold;
}

@media (max-width: 768px) {
  .section-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}









/* General container for the discover section */
.discover-section {
  margin: 17px; 
  border-radius: 30px;
  padding: 20px 60px;
  
  
  border: solid 1.5px #9f38d9;
}

/* Header section styling */
.discover-header {
  width: 35%; /* Change width to 35% */
  margin-bottom: 20px;
}

/* Features container with three columns */
.features-container {
    padding-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Feature card base styling */
.feature-card {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 32%; /* Ensure equal width for other two columns */
}

/* Feature title styling */
.feature-title {
  font-size: 20px;
  color: #00225b; /* Text color */
  text-decoration: underline;
  text-decoration-thickness: 1px; /* Make underline thinner */
  text-decoration-color: #00225b; /* Match the underline with the text color */
  text-underline-offset: 5px; /* Add space between text and underline */
  margin-bottom: 25px; /* Extra space below the title */
  display: inline-block;
  margin-right: 10px;
  width: 100%;
}

/* Freedom column with larger text */
.freedom .feature-title, 
.satisfaction .feature-title {
  font-size: 22px;
}

/* Freedom and Satisfaction paragraphs */
.freedom p, 
.satisfaction p {
  font-size: 16px;
  line-height: 2;
  color: #00225b; /* Text color change */
}

/* Orange checkmark styling */
.feature-icon {
  color: #00a86b; /* Change the checkmark to orange */
  margin-right: 10px;
  font-size: 20px;
}

/* Header text styling */
.header-text {
  font-size: 40px;
  color: #00225b; /* Text color change */
  font-weight: bold;
}

/* Aligning icon with text */
.freedom p, .satisfaction p {
  display: flex;
  align-items: center;
}

/* Responsive design for small screens */
@media (max-width: 768px) {
  .features-container {
    flex-direction: column;
    gap: 15px;
  }
  .feature-card {
    flex: none;
    width: 100%;
   
    padding: 0;
  }

  .discover-header {
    width: 100%;
    text-align: center;
  }
  
  .discover-section {
    padding: 12px;
  }

  .feature-title {
    font-size: 18px;
    text-align: center;
  }
}









/* Main container for the section */
.degree-section {
    display: flex;
    height: auto;
	background-color: #f3f3f3;
    
    padding: 40px 60px;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    border-radius: 30px;
    margin: 17px;
    margin-bottom: 35px;
}

/* Left column (text content) */
.degree-text {
    width: 45%;
    color: black;
    font-family: 'Roboto', sans-serif;
}

.degree-heading {
    font-size: 40px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.degree-img {
    height: 70px;
    width: 70px;
    margin-left: 15px;
}

.degree-description {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    
}

.cta-button {
    display: inline-block;
    padding: 15px 35px;
    font-weight: 600;
    font-size: 18px;
    color: white;
    background-color: #00cec8;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
    background-color: #00b3a6;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.welcome-message {
    font-size: 22px;
    font-weight: bold;
    color: black;
    margin-top: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Right column (icon list) */
.degree-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 55%;
}

.degree-icons img {
    width: 100%;
  height: 100%;
  object-fit: cover;
}



@media (max-width: 768px) {
    .degree-section {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .degree-text {
        width: 100%;
        padding-right: 0;
    }

    .degree-icons {
        width: 100%;
        margin-top: 30px;
    }

    .degree-icon-item {
        margin: 10px;
    }
}







        .bibon {
            
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
            background-color: white;
            padding-bottom: 10px;
            padding-top: 95px;
        }

        .container-principal {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 97%;
            max-width: 1200px;
            height: 500px;
            background-color: #ebeafc;
            border-radius: 30px;
        }

        .image-container {
            width: 40%;
            height: 100%;
            border-radius: 30px;
            background-size: cover;
            background-position: center;
            
        }

        .boite-texte {
            width: 60%;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 70px;
        }

        .titre {
            font-size: 2.5rem;
            color: 	#353839;
            margin-bottom: 20px;
        }

        .titre span {
            color: #00aaff;
        }

        .sous-titre {
            font-size: 1.2rem;
            color: #777;
            margin-bottom: 30px;
        }

        .bouton-action {
            text-decoration: none;
            font-size: 1.1rem;
            padding: 10px 20px;
            background-color: black;
            color: white;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            width: 40%;
            text-align: center;
        }

        .bouton-action:hover {
            background-color: #0088cc;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container-principal {
                flex-direction: column;
                height: auto;
                width: 90%;
            }

            .image-container {
                width: 100%;
                height: 300px;
                border-radius: 0 0 0 100px;
            }

            .boite-texte {
                width: 100%;
                padding: 20px;
                text-align: center;
                justify-content: center; /* Centers the button horizontally */
  align-items: center;
            }

            .titre {
                font-size: 1.8rem;
            }

            .sous-titre {
                font-size: 1rem;
            }

            .bouton-action {
                font-size: 1rem;
                padding: 8px 16px;
            }
        }

        @media (max-width: 480px) {
            .titre {
                font-size: 1.5rem;
            }

            .sous-titre {
                font-size: 0.9rem;
            }

            .bouton-action {
                font-size: 0.9rem;
                padding: 6px 12px;
            }
        }









#courses {
        padding: 40px;
        border-radius: 30px;
        background-color: #ebeafc;
        margin: 30px 17px;
        margin-top: 70px;
        text-align: center;
        line-height: 1.5;
    }
    
    #courses h2 {
        font-size: 40px;
    }
    
     #courses p {
        font-size: 18px;
    }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
          .courso {
            font-family: Arial, sans-serif;
            background-color: white;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            padding: 20px ;
        }
        .course-card {
            width: calc(28% - 20px); /* 3 courses per row on large screens */
            background: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            font-family: Arial, sans-serif;
            margin-bottom: 20px;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .course-card:hover {
    transform: translateY(-10px); /* Moves the card up slightly */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a deeper shadow */
}


        .course-cardo {
            height: 180px;
            background-size: cover;
            position: relative;
        }
        .course-cardo span.category {
            background: #316AFF;
            color: white;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 0 25px 0 0;
            font-size: 14px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .course-content {
            padding: 15px;
        }
        .title {
            font-size: 21px;
            font-weight: bold;
            margin: 10px 0;
        }
        .advisor {
            padding: 10px 0;
            font-size: 14px;
            color: #555;
        }
        .advisor a {
            color: #316AFF;
            text-decoration: none;
        }
        .course-info {
            border-top: solid 1px #d3d3d3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;
            font-size: 14px;
            color: #555;
        }
        .course-info span {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .price {
            color: #316AFF;
            font-weight: bold;
            font-size: 18px;
        }

        /* Responsive design */
        

        @media (max-width: 600px) {
            .course-card {
                width: 100%; /* 1 course per row on small screens */
            }
        }

        @media (max-width: 400px) {
            .course-card {
                width: 100%; /* 1 course per row on very small screens */
            }
        } 
   
   
   
   
   
   
   
   











      .latest-news {
          margin-left: 70px;
          margin-bottom: 40px;
            display: inline-block;
            padding: 10px 20px;
            font-size: 1.5em;
            font-weight: bold;
            border-radius: 50px; /* Rounded corners */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
            text-transform: uppercase; /* Uppercase text */
            letter-spacing: 2px; /* Slight spacing between letters */
            transition: transform 0.3s; /* Smooth transition for hover */
        }

        /* "Latest" text in navy */
        .latest-news .latest {
            color: navy;
        }

        /* "News" text in orange */
        .latest-news .news {
            color: #FF5B00; /* Orange color */
        }

        /* Hover effect */
        .latest-news:hover {
            transform: scale(1.05); /* Slight zoom effect */
        }

       /* Styles globaux */
        .bodo {
            
            
            border-radius: 70px 70px 30px 30px;
            margin: 0;
            margin-bottom: 40px;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            flex-direction: column;
            padding-top: 50px;
            padding-bottom: 60px;
        }

        .news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
    gap: 30px;
    max-width: 90%; /* Takes almost full width */
    margin: 0 auto;
    width: 100%;
    padding: 0 10px;
}




        .news-card {
           
            width: 95%;
            overflow: hidden;
            border: solid 1.5px #6140ef;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 8px;
        }
        
        .lire {
            padding: 7px;
            border: solid 1.5px #6140ef;
            border-radius: 20px;
            width: 40%;
            text-align: center;
        }

       

        .news-image1, .news-image2, .news-image3 {
            width: 100%;
            height: 200px;
            object-fit: cover;
            
        }
        
       

        .news-content {
            padding: 20px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            font-family: 'Poppins', serif;
            color: #1d2545;
        }

        .news-headline {
            font-size: 1.2em;
            font-weight: bold;
            color: #1d2545;
            margin-bottom: 15px;
            font-family: 'roboto', sans-serif;
        }

        .news-date {
            font-size: 0.9em;
            color: white;
            margin-bottom: 20px;
        }

        .news-description {
            font-size: 1.1em;
            color: #1d2545;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .news-footer {
            font-size: 0.9em;
            color: #95a5a6;
            text-align: right;
            margin-top: auto;
        }

       

        /* Responsivité */
        @media (max-width: 768px) {
            .news-container {
                grid-template-columns: 1fr; /* Une colonne sur petits écrans */
            }
            
            .news-card {
           
            width: 100%;
            
        }
        }








        .bobo {
   
    
    color: black;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    box-sizing: border-box;
    position: relative; /* Set the parent div to relative for positioning pseudo-element */
    padding-bottom: 50px;
    padding-top: 50px;
}

.bobo::after {
    content: ''; /* Required for the pseudo-element */
    position: absolute; /* Position it relative to .bobo */
    bottom: 0; /* Align it to the bottom */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Offset to ensure it's centered */
    width: 85%; /* Set the width of the border (adjust as needed) */
    
}


        .faq-container {
            width: 80%;
            max-width: 1200px;
            padding: 20px;
            border-radius: 8px;
            text-align: left;
        }

        .faq-title {
            font-size: 1.8em;
            text-align: center;
            margin-bottom: 20px;
            color: #00225b;
            font-weight: bold;
        }

        .faq-item {
            margin-bottom: 10px; /* Reduced space between items */
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 7px 15px;
            font-size: 1.1em; /* Slightly smaller font size */
            border-radius: 10px;
            color: black;
            font-weight: bold;
            border: none;
            
            text-align: left;
            background-color: #ebeafc;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .faq-answer {
            height: 0;
            opacity: 0;
            padding: 0 10px;
            margin-top: 10px;
            font-size: 1em;
            line-height: 1.6;
            overflow: hidden; /* Ensures the content doesn't overflow when collapsed */
            transition: height 0.5s ease-out, opacity 0.5s ease-out;
        }

        .faq-answer p {
            margin: 0;
        }

        .faq-question:focus {
            outline: none;
        }

        /* When the answer is visible, it slides down */
        .faq-answer.open {
            height: auto;  /* Auto adjusts height based on content */
            opacity: 1;    /* Make it visible */
            padding: 10px; /* Ensure padding is visible when open */
        }

        .faq-question span {
            font-size: 1.5em;
        }

        /* Responsive design for small screens */
        @media (max-width: 600px) {
            .faq-title {
                font-size: 1.5em;
            }

            .faq-question {
                font-size: 1em; /* Reduce the font size for small screens */
                padding: 10px; /* Adjust padding */
            }

            .faq-answer {
                font-size: 0.9em; /* Smaller font size for the answer */
            }

            .faq-container {
                padding: 10px; /* Reduce the container's padding */
            }
            
            .bobo {
                 padding-bottom: 50px;
                 padding-top: 50px;
            }
        }





/* Header Background Gradient */
header {
    display: flex;
    
    position: fixed;
    top: 0;
    background-color: white;
    width: 100%; /* Set the width to 80% */
   
   justify-content: center;
   align-items: center;
   
    
    
    z-index: 2;
    height: 70px;
    padding: 0px 20px;
    
    
}



.logo-circle {
    
    width: 220px; /* Adjust size as needed */
    height: 220px; /* Adjust size as needed */
    overflow: hidden; /* Hides any overflow */
    display: flex;
    justify-content: center;
    align-items: center;
    
   
}

.logo-circle img {
    width: 100%; /* Scale the image */
    height: auto; /* Maintain aspect ratio */
}

/* Main Container */
.header-container {
    display: flex;
    align-items: center;     /* Centers items vertically */
    justify-content: center;  /* Centers items horizontally */
    gap: 60px;                /* Adds space between items */
}


/* Logo and Name Section */

.butt {
    color: black
    display: flex;
    border-radius: 30px;
    padding: 15px 10px;
    background-color: #e0b0ff;
}



/* Navigation Menu */
.nav-menu ul {
    display: flex;
    gap: 50px;
    align-items: center;
    list-style: none;
    top: 18px;
   
    text-align: center;
    
    
    padding: 13px 40px;
    height: 43px;
   
}

.nav-menu li {
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.nav-menu li a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover effect for links */
.nav-menu li a:hover {
    color: #808080; /* Light gray hover color */
}

/* Mobile Version of the Menu */
.menu-container {
    display: none;
    position: absolute;
    right: 20px;
}

.hamburger {

    padding-bottom: 10px;
	padding-right: 20px;
    font-size: 50px;
    color: black;
    cursor: pointer;
}

/* Dropdown container */
.dropdown {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position to make it always visible on top */
    top: 70px; /* Position it at the top of the screen */
    left: 0; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to truly center it */
    background-color: white; /* Rich gradient background */
    
    border-radius: 0 0 10px 10px; /* Rounded corners for a modern look */
    width: 100%; /* Make the dropdown take the full width */
    text-align: center; /* Center the content */
    padding: 15px 0; /* Increased padding for more space */
    z-index: 9999; /* Ensure it's on top of everything */
    transform: scale(0); /* Initially hidden with scale */
    opacity: 0; /* Initially hidden */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition */
    height: 100vh; /* Full height */
}

/* Show the dropdown when the class 'show' is added */
.dropdown.show {
    display: block; /* Display the dropdown */
    transform: scale(1); /* Scale it to full size */
    opacity: 1; /* Make it visible */
    animation: blow-in 0.6s ease-out forwards; /* Trigger the animation */
}

/* Style for the list inside the dropdown */
.dropdown ul {
    list-style: none;
    margin: 0;
    padding-top: 25px;
    display: flex; /* Flexbox to center items */
    flex-direction: column; /* Stack list items vertically */
    align-items: center; /* Center horizontally */
     /* Center vertically */
    height: 100%; /* Make sure the list fills the dropdown */
}

/* Style for individual list items */
.dropdown li {
    width: 80%; /* Item width */
    padding: 15px 20px; /* Larger padding for better spacing */
    margin: 5px 0; /* Space between list items */
    border-radius: 6px; /* Rounded corners for each item */
    background-color: #6140ef; /* Slight transparency for a layered effect */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for background and movement */
    position: relative; /* To position the underline correctly */
}

/* Add a bar under each li */
.dropdown li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff; /* White bar */
    opacity: 0.3; /* Slightly subtle */
    transform: scaleX(0); /* Initially hidden */
    transform-origin: left;
    transition: transform 0.3s ease; /* Smooth transition for the bar */
}



/* Hover effect for list items */
.dropdown li:hover {
    
    transform: translateY(-4px); /* Slight lift effect */
}

.dropdown li:hover::after {
    transform: scaleX(1); /* Expand the underline on hover */
}

/* Link styles inside dropdown */
.dropdown li a {
    color: white;
    text-decoration: none;
    display: block;
    font-weight: 600; /* Bold text for links */
    font-size: 16px; /* Slightly larger text */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for links */
.dropdown li a:hover {
    color: #f0f0f0; /* Slightly lighter text on hover */
}

/* Blowing effect animation */
@keyframes blow-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* Blowing effect animation */
@keyframes blow-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Trigger the blow-in animation */
.dropdown.show {
    animation: blow-in 0.6s ease-out forwards;
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    header {
        justify-content: flex-start;
        padding: 15px 0px;
        width: 100%;
        
    }
    
    .header-container {
    
    justify-content: flex-start;
    
    }

    .logo-circle {
        padding-left: 20px;
        padding-bottom: 5px;
        width: 150px;
        height: 150px;
       
    }

   

    .nav-menu {
        display: none;
    }

    .menu-container {
        display: block;
    }
    
    .butt {
    display: none;
}
}








.info-container {
    background-color: #fff;
    height: 100px;
    display: flex;
    width: 100%;
    color: #333;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 1px;
    
}

.info-item {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-right: solid 2px #f0f0f0;
}

.info-item:last-child {
    border-right: none;
}

.info-item p {
    margin: 0;
    color: #5f5f5f;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .info-container {
        flex-direction: column;
        height: auto;
    }
    
    .info-item {
        border-right: none;
        border-bottom: solid 2px #f0f0f0;
        width: 100%;
		padding: 25px;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
}








/* Flyer Container with Chevron Dots Background */
.flyer-container {
    border-top: solid 2px #6140ef;
    padding-top: 90px;
    border-radius: 40px 40px 0 0;
    margin-top: 60px;
    margin-bottom: 80px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
   position: relative;
    
}















/* Main Flyer Box */
.flyer-box {
    
    width: 100%;
    height: auto;
    display: flex;
    
    justify-content: space-between;
    position: relative;
}

/* Image Section */
.flyer-image {
    width: 50%;
    
    transition: transform 0.3s ease-in-out;
}


/* Text Section */
.flyer-text {
    padding-top: 50px;
    width: 55%;
    padding-left: 50px;
    padding-right: 40px;
    line-height: 1.4;
    font-family: 'Roboto', sans-serif;
}

.flyer-text h2 {
    font-size: 35px;
    letter-spacing: 2px;
    color: #6140ef;
    
}




.flyer-text p {
    font-size: 15px;
    color: #1f2033;
    
    margin: 20px 0;
    line-height: 1.4;
    
}

/* Button Styles */
.flyer-box .cta-button {
    background-color: black;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.cta-button {
    background-color: #FF647F;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #c0392b;
}

/* Social Media Icons */
.social-icons {
    margin-top: 30px;
    padding-left: 20px;
}

.social-icons a {
    color: white;
    font-size: 30px;
    margin-right: 20px;
    text-decoration: none;
    transition: color 0.3s ease;
    background-color: #00a86b;
    border-radius: 10px;
    padding: 5px;
}

.social-icons a:hover {
    color: #16a085;
}

/* Media Queries for Small Screens */
@media (max-width: 768px) {
    .flyer-box {
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
        
    }

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

    .flyer-text {
        width: 100%;
        text-align: center;
        
        align-content: center;
    }

    .flyer-text h2 {
        font-size: 30px;
    }

    .flyer-text p {
        font-size: 18px;
    }

    .cta-button {
        font-size: 18px;
        padding: 12px 20px;
    }

    .social-icons {
        text-align: center;
        margin-top: 20px;
    }

    .social-icons a {
        font-size: 30px;
        margin-right: 15px;
    }
}

@media (max-width: 480px) {
    .flyer-image {
        width: 100%;
        margin-bottom: 20px;
    }
    
    

   

    .cta-button {
        font-size: 16px;
        padding: 10px 15px;
    }

}









        
        
        
        
        
        
        
                .bodu {
            height: 320px; /* Pour permettre le défilement */
            background-color: white;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        
        .meil {
            text-align: left;
    color: #9400d3; /* Vert citron */
    font-size: 3em;
   
    font-weight: bold;
}

.descrip {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    
    padding: 40px;
    color: #26003a;
    text-align: center;
}
       

        /* Responsiveness for small screens */
        @media (max-width: 600px) {
            
            
            .bodu {
            height: 480px;
            
            padding-bottom: 20px;/* Pour permettre le défilement */
            
        }
        }
 
 
 
 
        
        
        

.containera {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1200px; /* max width for large screens */
  height: 350px;
  margin-bottom: 70px;
}

.flex-item {
  flex: 1;
  height: 100%;
  position: relative;
}

.item1 {
  flex: 0 0 57%;
}

.item2 {
  flex: 0 0 40%;
  
  border-radius: 30px;
}

.item2 img {
  border-radius: 30px;
}

.item1 img {
  border-radius: 0 30px 30px 0;
}

.flex-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures the image covers the div without stretching */
}

@media (max-width: 768px) {
  .containera {
    flex-direction: column; /* Stack divs vertically on smaller screens */
    height: auto; /* Allow height to adjust based on content */
    margin-bottom: -40px;
    margin-top: 70px;
    gap: 80px;
  }

   .item2 {
    flex:  96%; /* Make both items take full width in column layout */
  }

  .flex-item {
 
  width: 90%;
  
}

.item1, .item2 {
 
  left: 50%;
  transform: translate(-50%, -50%);
  
}


.item1 {
    width: 100%; /* Make both items take full width in column layout */
  }
  
  
  .item1 img {
       border-radius: 0;
  
}



}

    
    
    
    
    
    
    
    
    
    
#flux-nucleus {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 9999;
}

/* Outer Spinner */
.spindle-rotation {
    width: 100px;
    height: 100px;
    border: 4px solid transparent; /* Thinner border */
    border-top: 4px solid #6140ef;
    border-radius: 50%;
    animation: spinSpindle 2s linear infinite;
    position: absolute;
}

/* Spin animation */
@keyframes spinSpindle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Image at the center */
.logo-in-center {
    height: 80px;
    width: 80px;
    position: absolute;
}

/* Fade-in effect for content */
#core-content {
    display: none;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#core-content.show {
    display: block;
    opacity: 1;
}

        
        
        
        
        
        
        
        
        
        
        
        
        
        
.promo-popup {
    display: none;
    font-family: "Nunito", sans-serif;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 600px;
    height: 230px;
    padding: 10px;
    
    align-items: center;
    position: fixed;
    bottom: -300px; /* Start off-screen */
    left: 20px;
    z-index: 9999;
    transition: bottom 0.5s ease-in-out; /* Smooth pop-up effect */
}

.promo-popup.show-promo {
    bottom: 20px; /* Pop-up in place */
}

.promo-popup img {
    width: 260px;
    border-radius: 8px;
    margin-right: 20px;
    height: auto;
}

.promo-popup-content {
    flex: 1;
}

.promo-popup h2 {
    color: #3e3f66;
    font-size: 20px;
    margin: 0 0 20px;
}

.promo-popup p {
    font-size: 14px;
    color: #3e3f66;
}

.promo-popup button {
    background-color: white;
    color: #6140ef;
    padding: 10px 15px;
    border: solid 2px #6140ef;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
}

.promo-popup .close-btn-promo {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border-radius: 50%;
    border: none;
    color: black;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

/* Media query for small screens */
@media (max-width: 768px) {
    .promo-popup {
        display: none;
        flex-direction: column; /* Stack items vertically */
        width: 98%; /* Adjust width for smaller screens */
        height: auto; /* Allow height to adjust to content */
        padding: 25px;
        position: fixed;
        bottom: -800px; /* Start off-screen */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Offset the width by 50% to ensure it’s centered */
        
        border-radius: 12px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        transition: bottom 0.5s ease-in-out; /* Smooth pop-up effect */
    }

    .promo-popup.show-promo {
        bottom: 20px; /* Pop-up in place */
    }

    .promo-popup img {
        width: 100%; /* Make the image full-width */
        margin-right: 0; /* Remove margin for vertical layout */
        margin-bottom: 15px; /* Add space below the image */
    }

    .promo-popup-content {
        text-align: center; /* Center text content */
    }

    .promo-popup h2 {
        font-size: 18px; /* Slightly smaller title */
        margin: 0 0 10px;
    }

    .promo-popup p {
        font-size: 13px; /* Smaller paragraph text */
        margin-bottom: 20px; /* Space at the bottom of the text */
    }

    .promo-popup button {
        width: 100%; /* Make button take full width */
        padding: 12px 0; /* Larger padding for button */
    }

    .promo-popup .close-btn-promo {
        top: 15px; /* Move close button closer to top */
        right: -37%; /* Adjust close button position */
        color: white;
    }
}