.jumbotron {
    position: relative;
    overflow: hidden;
  }
  
  .jumbotron .row {
    height: 100%;
  }
  
  .jumbotron .col-md-7 {
    background: rgba(0, 0, 0, 0.6); 
  }
  
  @media (max-width: 767px) {
    .jumbotron h2 {
      font-size: 1.5rem; 
    }
  
    .jumbotron p {
      font-size: 0.875rem; 
    }
  
    .btn.button-primary {
      font-size: 0.875rem; 
      padding: 0.5rem 1rem;
    }
  }
  
  @media (min-width: 768px) {
    .jumbotron h2 {
      font-size: 2rem; 
    }
  
    .jumbotron p {
      font-size: 1rem; 
    }
  
    .btn.button-primary {
      font-size: 1rem; 
      padding: 0.75rem 1.5rem; 
    }
  }


  @media (max-width: 768px) {
    .content h2 {
      font-size: 1.5rem;
    }

    .content p {
      font-size: 0.875rem; 
    }

    .jumbotron {
      background-attachment: scroll;
      background-position: center center;
    }

    .content {
      max-height: 100vh;
      overflow-y: auto;
    }
  }

  @media (max-width: 767.98px) {
    .section-unpaired h2 {
      font-size: 1rem; 
    }
    .section-unpaired p {
      font-size: 0.8rem; 
    }
  }

  

  /*  footer */
  .home-page-footer {
    background-color: #064f98;
    color: #ffffff;
    padding: 1.5rem;
  }

  .footer-heading {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .footer-desc {
    font-size: 0.875rem;
  }

  .text-white {
    color: #ffffff;
  }

  .border-bottom {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 0.1rem;
  }

  .white-line {
    border-top: 1px solid #ffffff;
  }

  .btn {
    padding: 0.5rem 1rem;
  }

  .copyright {
    font-size: 0.875rem;
  }

  @media (max-width: 767.98px) {
    .footer-heading {
      font-size: 1.25rem;
    }

    .footer-desc {
      font-size: 0.75rem;
    }

    .btn {
      font-size: 0.75rem;
    }

    .list-unstyled li {
      margin-bottom: 0.5rem;
    }

    .list-unstyled a {
      font-size: 0.875rem; 
    }

    .list-unstyled i {
      font-size: 1rem; 
    }
  }




  /* Styles pour les boutons */
.btn-custom-secondary {
  background-color: #6c757d; 
  border-color: #6c757d;
  border-radius: 30px; 
  padding: 10px 40px;
  font-size: 0.9em;
  font-weight: bold; 
  transition: background-color 0.3s, border-color 0.3s; 
}

.btn-custom-secondary:hover,
.btn-custom-secondary:focus {
  background-color: #5a6268; 
  border-color: #545b62; 
}

.btn-custom-primary {
  background-color: #007bff;
  border-color: #007bff; 
  border-radius: 30px; 
  padding: 10px 40px; 
  font-size: 0.9em; 
  font-weight: bold;
  transition: background-color 0.3s, border-color 0.3s; 
}

.btn-custom-primary:hover,
.btn-custom-primary:focus {
  background-color: #0056b3; 
  border-color: #004085;
}

/* Styles pour le responsive */
@media (max-width: 768px) {
  .btn-custom-secondary,
  .btn-custom-primary {
      font-size: 0.85em; 
      padding: 8px 12px; 
      min-width: 70px;
      }

  .nav-item {
      margin-bottom: 10px; 
  }

  .nav-item + .nav-item {
      margin-left: 0; 
  }
}