@import url("https://fonts.googleapis.com/css2?family=Alata&family=Dancing+Script:wght@400..700&family=Poppins:ital,wght@0,500;0,600;1,500;1,600&display=swap");

:root {
      --blue: #6ca0dc;
      --brown: #d8bea8;
}

* {
      margin: 0;
      padding: 0;
      font-family: "Alata", sans-serif;
      font-weight: 400;
      color: black;
}

html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
}

h1,
h2 {
      font-family: "Dancing Script", cursive;
}

h3 {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
}

/* Mobile */
h1 {
      font-size: 35px;
      color: var(--blue);
}

h2 {
      font-size: 28px;
      color: #015eca;
      margin-bottom: 50px;
}

h3 {
      font-size: 20px;
      margin-bottom: 15px;
}

p,
figcaption {
      font-size: 16px;
}

/* Banner */
.banner-image {
      position: relative;
      z-index: -10;
      width: 100%;
}

.banner-text {
      position: absolute;
      width: 100%;
      top: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
}

.banner-subtitle {
      color: white;
      background-color: rgba(108, 160, 220, 0.3);
      border-radius: 10px;
}

/* Intro */
.ellipse {
      background-color: var(--brown);
      clip-path: ellipse(55% 35% at 50% 41%);
      margin-top: -35px; /* pour chevaucher la photo */
      width: 100%;
      height: 100px;
      position: absolute;
      z-index: -1;
}

.intro {
      background-color: var(--brown);
      padding: 10px 35px 50px 35px;
}

.container-text {
      display: flex;
      flex-direction: column;
      gap: 20px;
}

.intro-container-image {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 50px;
      grid-row-gap: 30px;
      place-self: center;
      margin-top: 50px;
}

.intro-image {
      width: 100px;
}

/* Main */
section {
      margin-top: 90px;
}

.about,
.animals {
      margin: 90px 35px 0 35px;
}

.about,
.about-container,
.mediation,
.mediation-container,
.animals,
.animals-container,
.testimonials,
.testimonials-container,
.contact {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.about-image,
.mediation-image {
      width: 100%;
      max-width: 300px;
}

.mediation,
.contact {
      background-color: var(--brown);
      border-radius: 50px;
      padding: 50px 35px;
}

/* Section About */
.about-image {
      margin-bottom: 40px;
}

/* Section Mediation */
.mediation-image {
      margin-top: 60px;
}

/* Section Animals */
.animals-container {
      gap: 70px;
      margin-top: 50px;
      margin-bottom: 100px;
}

/* Section Testimonials */
.testimonials {
      margin: 10px 35px 20px 35px;
}

.testimonials-container {
      gap: 70px;
      margin-bottom: 20px;
}

/* Section Contact */
form {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;
      width: 100%;
}

.form-container,
.form-info {
      display: flex;
      flex-direction: column;
      gap: 60px;
      width: 100%;
      max-width: 305px;
}

.form-input,
.form-textarea {
      display: flex;
      flex-direction: column;
      gap: 5px;
      max-width: 305px;
}

input,
textarea {
      background-color: rgba(108, 160, 220, 0.5);
      max-width: 305px;
      border: #015eca 1px solid;
      border-radius: 10px;
      padding-left: 20px;
}

input {
      height: 60px;
}

textarea {
      padding-top: 20px;
}

form button {
      width: 50%;
      padding: 15px 25px;
      border-radius: 10px;
      background-color: var(--blue);
      border: none;
}

footer {
      background-color: var(--blue);
      padding: 30px;
      margin-top: 150px;
      text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
      .banner-text {
            gap: 60px;
      }

      .ellipse {
            clip-path: ellipse(55% 40% at 50% 41%);
            height: 150px;
            margin-top: -70px;
      }

      .intro {
            padding: 0 50px 50px 50px;
      }

      .intro-image {
            width: 140px;
      }

      .about,
      .animals {
            margin: 90px 50px 0 50px;
      }

      .mediation,
      .contact {
            padding: 50px;
      }

      .testimonials {
            margin: 10px 50px 20px 50px;
      }

      form button {
            width: 140px;
      }
}

@media (min-width: 800px) {
      h1 {
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
      }

      .banner-text {
            top: 15%;
            gap: 50px;
      }
}

/* Desktop */
@media (min-width: 1000px) {
      h1 {
            font-size: 50px;
      }

      h2 {
            font-size: 35px;
      }

      h3 {
            font-size: 25px;
            margin-bottom: 20px;
      }

      p,
      figcaption {
            font-size: 20px;
      }

      .banner-text {
            top: 25%;
      }

      .ellipse {
            clip-path: ellipse(55% 40% at 50% 41%);
            margin-top: -70px; /* pour chevaucher la photo */
            height: 150px;
      }

      .intro {
            padding: 0 80px 50px 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
      }

      .intro-text {
            width: 47%;
      }

      .intro-container-image {
            grid-column-gap: 100px;
            grid-row-gap: 50px;
            margin: 0;
      }

      section {
            margin-top: 120px;
      }

      .about,
      .animals {
            margin: 120px 80px 0 80px;
      }

      .about-container,
      .mediation-container,
      .animals-container,
      .testimonials-container {
            flex-direction: row;
            justify-content: space-between;
      }

      .about-image {
            margin-bottom: 0;
      }

      .about-text {
            margin-left: 200px;
      }

      .mediation,
      .contact {
            padding: 50px 80px;
      }

      .mediation-text {
            margin-right: 150px;
      }

      .mediation-image {
            margin-top: 0;
      }

      .animals-container {
            align-items: flex-start;
      }

      .animals-container-cat {
            justify-content: space-evenly;
      }

      .testimonials {
            margin: 20px 80px 30px 80px;
      }

      .testimonials-container {
            gap: 60px;
            margin-bottom: 30px;
      }

      .form-container,
      .form-info {
            max-width: 840px;
      }

      .form-info {
            flex-direction: row;
            justify-content: space-between;
            gap: 0;
      }

      .form-input,
      .form-textarea {
            width: 100%;
      }

      .form-textarea {
            max-width: 840px;
      }

      textarea {
            max-width: 840px;
      }
}

@media (min-width: 1200px) {
      .banner-text {
            top: 35%;
      }

      .intro {
            padding: 0 120px 50px 120px;
      }

      .intro-image {
            width: 200px;
            height: 200px;
      }

      .about,
      .animals {
            margin: 120px 120px 0 120px;
      }

      .mediation,
      .contact {
            padding: 50px 120px;
      }

      .testimonials {
            margin: 20px 120px 30px 120px;
      }
}