* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  [data-scroll] {
    transition: opacity 1s;
  }
  [data-scroll="in"] {
    opacity: 1;
  }
  [data-scroll="out"] {
    opacity: 0;
  }
  
  /* Body Styling */
  body {
    overflow-x: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .header {
    display: flex;
    justify-content: center; /* Center the content */
    align-items: center;
    padding: 10px 20px;
    position: relative;
    top: -8vh;
    left: 29vw;
}

.header ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px; /* Adds spacing between items */
}

.header li {
    display: flex;
    align-items: center;
}

.header img {
    /* Adjust size as needed */
    width: auto;
}

#separation {
    font-family: Unbounded;
    font-size: 34px; /* Adjust size */
    font-weight: bold;
    color: #000; /* Adjust color */
    padding: 0 10px; /* Space around the separator */
}

#carrefour {
    max-height: 80px;
}
#logo-2 {
    max-height: 250px;
    position: relative;
    left: -50px;
    top: -5px;
}

/* Responsive Design */


.basckground-images img {
    max-height: 800px;
}
#wheel-1 {
    position: absolute;
    top: -35vh;
    left: -15vw;

}
#wheel-2 {
    position: absolute;
    top: 25vh;
    left: 55vw;

}
#maintext {
    position: absolute;
    top: 50vh;
    left: 5vw;
    font-family: Unbounded;
    font-weight: 400;
    font-size: 3.4vw;
    color: #f10505;
}
#secon {
    position: absolute;
    top: 60vh;
    left:6vw;
    font-family: Unbounded;
    font-weight: 400;
    font-size: 30px;
    border-bottom: 2px solid;
}

.contact-info {
    display: block;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;
    top: 51vh;
    left: -5vw;

}
.contact-info ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px; 
    position: relative;
    left: 10vw;
}
.contact-info li {
    display: flex;
    font-family: Unbounded;
    font-size: 19px;
    
}

@media (min-width: 320px) and (max-width: 480px) {
  

    
  html, body {
      overflow-x: hidden;
      max-width: 100vw;
      max-height: 100vh;
  }

  .basckground-images {
    overflow: hidden;
  }
  
  .header {
    top: -7vh;
    left: 15vw;
  }

  #carrefour {
    max-height: 12vw;
  }
  #logo-2 {
    max-height: 45vw;
  }

  #wheel-1, #wheel-2 {
    max-height: 50vh;
  }
  #wheel-1 {
    top: 1vh;
    left: -30vw;
  }
  #wheel-2 {
    top: 60vh;
    max-height: 230px;
    left: 40vw;
  }

  #maintext {
    top: 47vh;
    left: 5vw;
    font-weight: 800;
    text-wrap: none;
  }
  #secon {
    top: 53vh;
    left: 8vw;
  }
  .contact-info {
    left: -5vw;
    top: 60vh;
  }
  .contact-info ul {
    gap: 5px;
  }
  .contact-info li {
    font-size: 2.1vw;
    font-weight: 800;
  }


}