body {
    background-color: #072D38;
    color: #ffffff; 
    margin: 0;
    padding: 0;
}

/* === MOBILE VERSION === */
.hero-image {
  position: relative; 
  width: 100%;       
  height: 250px;      
  
  background-image: url('https://mmi.unilim.fr/~mamedov1/SAE2.03-MAMEDOV/server/images/mise_en_avant.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  margin: 0; 
  border-radius: 0; 
  z-index: 1;
}

#main-content {
  position: relative;
  z-index: 2; 
  margin-top: 250px; 
  padding: 0 120px; 
}

/* === DESKTOP VERSION === */
@media (min-width: 1024px) {
  .hero-image {
    position: absolute; 
    top: 25px;
    left: 25px;
    right: 25px;
    height: 520px;
    border-radius: 8px;
    z-index: 0;
  }
}

#main-content {
  position: relative;
  z-index: 2; 
  margin-top: 0; 
  padding: 0; 

}