/* =========================
       RESPONSIVE
    ========================= */

    @media (max-width: 1000px) {

      .navbar {
        padding: 20px;
      }

      .nav-links {
        display: none;
      }

      .menu-button {
        display: block;
      }

      .hero-content,
      .section,
      .image-break-content {
        width: min(100% - 40px, var(--max-width));
      }

      .hero h1 {
        letter-spacing: -4px;
      }

      .intro {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stat:nth-child(2) {
        border-right: 0;
      }

      .stat:nth-child(-n+2) {
        border-bottom: 1px solid #444;
      }

      .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .included-grid {
        grid-template-columns: 1fr;
      }
	  
  
    }

    @media (max-width: 650px) {

      .hero {
        min-height: 90vh;
      }

      .hero-content {
        padding-bottom: 45px;
      }

      .hero h1 {
        font-size: 58px;
        letter-spacing: -3px;
      }

      .hero-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .hero-date {
        text-align: left;
      }

      .hero-date strong {
        font-size: 38px;
      }

      .section {
        padding: 85px 0;
      }

      .stats-grid {
        grid-template-columns: 1fr;
      }

      .stat {
        border-right: 0;
        border-bottom: 1px solid #444;
      }

      .stat:last-child {
        border-bottom: 0;
      }

      .courses-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .courses-grid {
        grid-template-columns: 1fr;
      }

      .course {
        min-height: 500px;
      }

      .course h3 {
        font-size: 45px;
      }
	  
	  	  .course-remise .logo {
			font-size: 15px;			
			padding : 5px 10px;
		}
		
		.course-remise .promo {
			font-size: 10px;
		}
		
		.course-logo {
			height: 50px;
		}

      .pricing-grid {
        grid-template-columns: 1fr;
      }

      .image-break {
        min-height: 550px;
      }

      .footer-bottom {
        flex-direction: column;
        margin-top: 60px;
      }
    }