.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  height: auto;
  padding-top: 115px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #c2fbff, hsla(0, 0%, 100%, 0) 93.47%);
  z-index: 1;
  /* 
    &::before {    
        content: "";
        position: absolute;
        width: 862px;
        height: 862px;
        border-radius: 50%;
        right: -150px;
        top: -150px;
        background: #6fb7a7d1;
        z-index: -1;
    } */
}
.hero-section .image-home {
  display: flex;
  justify-content: center;
}

.h1-home {
  font-weight: 700;
  font-family: var(--primary-font);
  font-size: 3.5rem;
  color: var(--dark-blue);
}

.p-home {
  text-align: justify;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  margin-bottom: 150px;
  align-items: center;
  z-index: 1;
}
.home-hero .hero-image {
  display: flex;
  justify-content: center;
}

.button,
.home {
  width: 300px;
  margin-top: 15px;
  font-size: 1rem;
}

@media screen and (max-width: 991px) {
  h1 {
    margin-top: 30px;
  }
  img {
    display: flex;
    justify-content: center;
    padding-top: 60px 0;
  }
  .home-site-content {
    justify-content: center;
    padding-top: 20px;
  }
  .home-site-second-content {
    display: flex;
    flex-direction: column-reverse;
  }
  .home-hero {
    margin-top: 150px;
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 770px) {
  .hero-section {
    height: auto;
  }
  .mascotte {
    width: 200px;
    height: auto;
    margin-bottom: 30px;
  }
  .h1-home {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 450px) {
  .hero-section {
    height: auto;
  }
}