/* Container for the explanation section */
#expli{
  height:fit-content;         /* Adjusts height to content */
  padding-bottom: 5vh;        /* Space below the section */
  margin-top: 150px;          /* Large top spacing */
}

/* General width for explanation content blocks */
.explication_web{
  width: 60%;
}

/* First explanation block: aligned to the left */
#explication_web_site{
  margin-left: 10%;
  margin-top: 80px;
}

/* Second explanation block: aligned to the right */
#explication_web_site1{
  text-align: right;
  margin-right: 10%;
  margin-top: 50px;
  margin-left: auto;         /* Forces the block to align to the right */
}

/* Third explanation block: left aligned */
#explication_web_site2{
  margin-left: 10%;
}

/* --- MOBILE VERSION (max-width: 500px) --- */
@media (max-width: 500px) {

  /* All explanation blocks become centered and full width */
  .explication_web{
    width: 90%;                   /* Wider on mobile */
    margin-left: 5%!important;    /* Forces horizontal centering */
    text-align: center!important; /* Text centered on mobile */
    margin-right: 5%;
  }

  /* Add spacing above block #3 on mobile */
  #explication_web_site2{
    margin-top: 50px;
  }

  /* Reduce top spacing on mobile */
  #expli{
    margin-top: 100px;
  }
}