:root {
    --primary-green: #3c67ad;
    --dark-green: #27477a;
    --light-green: #7fa6e6;
    --accent-green: #5a8be0;
    --dark-bg: #22345a;
    --light-bg: #eaf1fb;
   }

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

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

   /* Navbar Styles */
   .navbar-custom {
       background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
       padding: 0;
    box-shadow: 0 4px 15px rgba(60, 103, 173, 0.3);

   }

   .navbar-top {
       background: var(--dark-bg);
       padding: 8px 0;
       font-size: 0.9em;
   }

   .navbar-top a {
       color: white;
       text-decoration: none;
       margin-right: 20px;
   }

   .navbar-top a:hover {
       color: var(--primary-green);
   }

   .navbar-brand {
       font-weight: bold;
       color: white !important;
       font-size: 1.5rem;
   }

   .navbar-nav .nav-link {
       color: white !important;
       font-weight: 500;
       margin: 0 10px;
       transition: all 0.3s ease;
   }

   .navbar-nav .nav-link:hover {
       color: var(--light-green) !important;
       transform: translateY(-2px);
   }

   /* Hero Section */
   .hero-section {
       position: relative;
       height: 88vh;
       overflow: hidden;
       display: flex;
       align-items: center;
       border-radius: 0px;

       
   }

   .hero-carousel {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 1;
       border-radius: 0px;
       
   }

   .hero-carousel .carousel-item {
       height: 88vh;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       position: relative;
       border-radius: 0px;
   }

   .hero-carousel .carousel-item::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
        background: linear-gradient(135deg,
               rgba(0, 0, 0, 0.869) 0%,
               rgba(26, 26, 26, 0.541) 50%,
               rgba(15, 15, 15, 0.796) 100%);
       z-index: 1;
   }

   .hero-carousel .carousel-item:nth-child(1) {
       background-image: url('../assets/images/fond/solar_woman_background_compressed\ \(1\).jpg');
   }

   .hero-carousel .carousel-item:nth-child(2) {
       background-image: url('../assets/images/fond/plumber_background_compressed.jpg');
   }

   .hero-carousel .carousel-item:nth-child(3) {
       background-image: url('../assets/images/fond/electrician_background_compressed.jpg');
   }

   .hero-carousel .carousel-item:nth-child(4) {
       background-image: url('../assets/images/fond/hydro_background_compressed.jpg');
   }

     .hero-carousel .carousel-item:nth-child(5) {
       background-image: url('../assets/images/fond/installateur_reseau_eau_optimise.jpg');
   }

    .hero-carousel .carousel-item:nth-child(6) {
       background-image: url('../assets/images/fond/maintenance_machines_electriques_femme_v2.jpg');
   }

    .hero-carousel .carousel-item:nth-child(7) {
       background-image: url('../assets/images/fond/technicien_solaire_paysage_optimise.jpg');
   }

   .hero-content {
       position: relative;
       z-index: 2;
       color: white;
   }

   .hero-carousel .carousel-control-prev,
   .hero-carousel .carousel-control-next {
       width: 5%;
       z-index: 3;
   }

   .hero-carousel .carousel-control-prev-icon,
   .hero-carousel .carousel-control-next-icon {
       background-size: 20px 20px;
       background-color: rgba(255, 255, 255, 0.5);
       border-radius: 50%;
       padding: 20px;
   }

   .hero-carousel .carousel-indicators {
       z-index: 3;
   }

   .hero-carousel .carousel-indicators button {
       width: 15px;
       height: 15px;
       border-radius: 50%;
       border: 2px solid white;
       background-color: transparent;
       margin: 0 5px;
   }

   .hero-carousel .carousel-indicators button.active {
       background-color: var(--primary-green);
       border-color: var(--primary-green);
   }

   .hero-slide-content {
       position: absolute;
       top: 50%;
       left: 50px;
       transform: translateY(-50%);
       z-index: 2;
       color: white;
       max-width: 600px;
   }

   .hero-slide-title {
       font-size: 3rem;
       font-weight: bold;
       margin-bottom: 15px;
       /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
   }

   .hero-slide-subtitle {
       font-size: 1.5rem;
       margin-bottom: 20px;
       color: var(--accent-green);
       /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
   }

   .hero-slide-description {
       font-size: 1.2rem;
       margin-bottom: 30px;
       line-height: 1.6;
       /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(-20px);
       }
   }

   .hero-title {
       font-size: 3.5rem;
       font-weight: bold;
       margin-bottom: 20px;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   }

   .hero-subtitle {
       font-size: 1.3rem;
       margin-bottom: 30px;
       opacity: 0.9;
   }

   .btn-hero {
       background: linear-gradient(45deg, var(--accent-green), var(--primary-green));
       border: none;
       padding: 15px 40px;
       font-size: 1.2rem;
       font-weight: bold;
       border-radius: 50px;
       transition: all 0.3s ease;
         color: white;
   }

   .btn-hero:hover {
       transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(60, 103, 173, 0.6);
        color: white;
   }

   /* Formations Slider */
   .formations-slider {
       padding: 80px 0;
       background: var(--light-bg);
   }

   .section-title {
       text-align: center;
       font-size: 2.5rem;
       font-weight: bold;
       color: var(--dark-bg);
       margin-bottom: 50px;
       position: relative;
   }

   .section-title::after {
       content: '';
       position: absolute;
       bottom: -10px;
       left: 50%;
       transform: translateX(-50%);
       width: 80px;
       height: 4px;
       background: linear-gradient(45deg, var(--primary-green), var(--accent-green));
       border-radius: 2px;
   }

   .formation-card {
       background: white;
       border-radius: 20px;
       padding: 30px;
       margin: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
       border: 2px solid transparent;
   }

   .formation-card:hover {
       transform: translateY(-10px);
       border-color: var(--primary-green);
    box-shadow: 0 20px 40px rgba(60, 103, 173, 0.2);
   }

   .formation-icon {
       font-size: 3rem;
       color: var(--primary-green);
       margin-bottom: 20px;
   }

   .formation-title {
       font-size: 1.5rem;
       font-weight: bold;
       color: var(--dark-bg);
       margin-bottom: 15px;
   }

   /* Formations organisées */
   .formations-organized {
       padding: 80px 0;
       background: white;
   }

   .formation-item {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    border: #3c67ad 1px solid;
    padding: 25px;
    margin-bottom: 20px;
    border-left: 7px solid var(--primary-green);
    transition: all 0.3s ease;
    }

   .formation-item:hover {
       transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(60, 103, 173, 0.2);
   }

   /* Échéances */
   .echeances {
       padding: 80px 0;
       background: linear-gradient(135deg, var(--dark-bg) 0%, #34495e 100%);
       color: white;
   }

   .echeance-card {
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       border-radius: 20px;
       padding: 30px;
       text-align: center;
       border: 1px solid rgba(255, 255, 255, 0.2);
       transition: all 0.3s ease;
   }

   .echeance-card:hover {
       background: rgba(255, 255, 255, 0.2);
       transform: translateY(-5px);
   }

   .echeance-date {
       font-size: 2rem;
       font-weight: bold;
       color: var(--light-bg);
       margin-bottom: 15px;
   }

   /* Partenaires */
   .partners {
       padding: 80px 0;
       background: var(--light-bg);
   }

   .partner-logo {
       background: white;
       border-radius: 15px;
       padding: 30px;
       margin: 15px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       height: 120px;
   }

   .partner-logo:hover {
       transform: scale(1.05);
       box-shadow: 0 10px 30px rgba(46, 204, 113, 0.2);
   }

   /* Footer */
   .footer {
       background: var(--dark-bg);
       color: white;
       padding: 50px 0 20px;
   }

   .footer-section h5 {
       color: var(--primary-green);
       margin-bottom: 20px;
   }

   .footer-section a {
       color: #bdc3c7;
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .footer-section a:hover {
       color: var(--primary-green);
   }

   .social-icons a {
       display: inline-block;
       width: 40px;
       height: 40px;
       background: var(--primary-green);
       color: white;
       text-align: center;
       line-height: 40px;
       border-radius: 50%;
       margin-right: 10px;
       transition: all 0.3s ease;
   }

   .social-icons a:hover {
       background: var(--accent-green);
       transform: translateY(-3px);
   }

   /* Animations */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .animate-on-scroll {
       animation: fadeInUp 0.8s ease-out;
   }

   /* Responsive */
   @media (max-width: 768px) {
       .hero-slide-title {
           font-size: 2.5rem;
       }

       .hero-slide-subtitle {
           font-size: 1.2rem;
       }

       .hero-slide-description {
           font-size: 1rem;
       }

       .hero-slide-content {
           left: 20px;
           right: 20px;
           max-width: none;
       }

       .navbar-top {
           display: none;
       }

       .formation-card {
           margin: 10px 0;
       }
   }