/* =================================================================
   FEUILLE DE STYLE - KAKTUS POWER LANDING PAGE
   Reconstruite a partir de la maquette Figma (couleurs, polices et
   espacements releves directement dans le fichier de design).

   Sommaire (utilise Ctrl+F / Cmd+F pour naviguer) :
   1. Variables & reset
   2. Elements generaux (boutons, titres de section, container)
   3. Header
   4. Hero
   5. How it works (les 6 etapes)
   6. Features
   7. Testimonials
   8. Contact CTA
   9. Footer
   10. Responsive (media queries)
   ================================================================= */


/* -----------------------------------------------------------------
   1. VARIABLES & RESET
   Les variables CSS (--nom) permettent de reutiliser partout les
   memes valeurs (couleurs, polices) et de tout changer facilement
   depuis un seul endroit si besoin.
   ----------------------------------------------------------------- */
:root {
  /* Couleurs unies, relevees dans Figma */
  --color-bg: #F1FAFF;          /* fond general de la page */
  --color-text: #414B54;        /* texte courant */
  --color-heading: #01176A;     /* titres fonces (footer, features...) */
  --color-white: #FFFFFF;
  --color-light-blue: #E4F1FE;  /* fond du champ email, cartes claires */
  --color-mint: #EEF6F4;        /* fond des etiquettes rondes du hero */
  --color-accent-blue: #106BD6;

  /* Degrades utilises pour les boutons, textes et accents */
  --gradient-teal:   linear-gradient(152deg, #10D6B8 0%, #12C2BE 11%, #16B2BE 50%, #137D95 84%);
  --gradient-blue:   linear-gradient(152deg, #106BD6 0%, #10A2C2 11%, #1663BE 50%, #133F95 84%);
  --gradient-purple: linear-gradient(90deg, #70429E 0%, #8CA6DB 100%);

  /* Les 3 polices de la maquette, chacune avec un role precis */
  --font-heading: 'Outfit', sans-serif;      /* gros titres H1 / H2 */
  --font-body: 'Poppins', sans-serif;        /* paragraphes, boutons, footer */
  --font-nav: 'Montserrat', sans-serif;      /* navigation + petites etiquettes */

  --container-width: 1200px;
  --radius-lg: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-bg);
  overflow-x: hidden; /* evite le scroll horizontal a cause des formes decoratives */
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}


/* -----------------------------------------------------------------
   2. ELEMENTS GENERAUX
   ----------------------------------------------------------------- */

/* Le container centre le contenu et limite sa largeur max */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Petite etiquette en degrade turquoise au-dessus des titres de section */
.section-label {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;

  /* Astuce CSS pour appliquer un degrade directement sur du texte */
  background: var(--gradient-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title {
  text-align: center;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 56px;
}

/* Sur la maquette, le titre "Support at KAKPOWER" utilise Montserrat
   au lieu d'Outfit comme les autres titres : on le reproduit fidelement */
.section-title--alt {
  font-family: var(--font-nav);
  font-weight: 500;
}

.text-accent {
  background: var(--gradient-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Variante bleu-lavande utilisee pour "KAKPOWER" dans le titre de
   "How it works" (different du degrade turquoise utilise ailleurs) */
.text-accent-lavender {
  color: #8CA6DB;
}

/* Boutons */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 13px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 194, 191, 0.35);
}

.btn-primary {
  background: var(--gradient-teal);
  color: var(--color-white);
}

.btn-light {
  background: var(--color-light-blue);
  color: var(--color-accent-blue);
  border: 2px solid var(--color-white);
}


/* -----------------------------------------------------------------
   3. HEADER
   ----------------------------------------------------------------- */
/* Pas de fond sur le header : il reste transparent pour laisser voir la
   vague de la section "How it works" (et son degrade) continuer sans
   coupure jusqu'au bord gauche, meme dans la zone du header sticky. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 20px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Le vrai logo Kaktus Power (icone + texte dans une seule image) :
   on fixe seulement la hauteur, la largeur suit automatiquement */
.logo-icon {
  height: 46px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
}

.main-nav a:not(.btn) {
  padding: 12px 16px;
  border-radius: 5px;
}

.main-nav a:not(.btn):hover {
  background: rgba(16, 107, 214, 0.06);
}

/* Bouton burger cache par defaut, visible uniquement en mobile (voir media query) */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.burger span {
  width: 24px;
  height: 2px;
  background: var(--color-heading);
  border-radius: 2px;
}


/* -----------------------------------------------------------------
   4. HERO
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 60px 0 120px;
  overflow: hidden;
}

/* Grande forme bleu pale en fond, purement decorative */
.hero-wave {
  position: absolute;
  top: -150px;
  right: -250px;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, #D9ECF9 0%, rgba(217, 236, 249, 0) 70%);
  border-radius: 50%;
  z-index: -1;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-text {
  max-width: 520px;
}

.hero-text h1 {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 16px;
}

.hero-text p {
  font-family: var(--font-nav);
  font-size: 16px;
  margin-bottom: 28px;
}

.hero-form {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--color-light-blue);
  padding: 6px;
  border-radius: 13px;
  max-width: 510px;
}

.hero-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 16px;
  font-family: var(--font-nav);
  font-size: 14px;
  background: transparent;
  color: rgba(65, 75, 84, 0.6);
}

.hero-form .btn {
  padding: 12px 24px;
  font-size: 14px;
}

/* Message de confirmation sous le formulaire hero, cache par defaut (voir js/main.js) */
.hero-form-success {
  margin-top: 12px;
}

/* Les 4 photos en forme de "pilule", toutes a la meme hauteur, avec etiquette */
.hero-images {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hero-pill {
  position: relative;
  width: 110px;
}

/* Forme "planche de skateboard" : tres elancee, arrondie en haut et en bas */
.hero-pill img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 100px;
  box-shadow: 0 12px 47px rgba(160, 142, 215, 0.2);
}

/* Petite etiquette ovale posee sur chaque photo (ex: "Large Industries") */
.pill-label {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  background: var(--color-mint);
  color: var(--color-text);
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  text-transform: capitalize;
  text-align: center;
  padding: 12px 10px;
  border-radius: 25px;
  /* Largeur fixe, un peu plus etroite que la pilule : le texte revient
     a la ligne au besoin plutot que de deborder sur les photos voisines */
  width: 92px;
  white-space: normal;
}


/* -----------------------------------------------------------------
   5. HOW IT WORKS (les 6 etapes)
   ----------------------------------------------------------------- */
.how-it-works {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Les 2 vagues de fond sont les vraies images exportees depuis Figma
   (calques "Rectangle 5" et "Rectangle 7"), plutot qu'un trace SVG
   approximatif : fidelite parfaite au pixel pres. `bottom: 0` (au lieu
   d'une hauteur fixe) les etire jusqu'en bas de la section, qui varie
   selon le contenu : ca fonctionne ici car cette hauteur est fixee par
   le contenu normal (.container), pas par ces vagues elles-memes.
   `top: -140px` remonte la vague pour que sa partie coloree apparaisse
   des le haut de la section (sous le titre), au lieu de n'apparaitre
   qu'au niveau des cartes ; le depassement au-dessus de la section est
   masque par le overflow:hidden de .how-it-works.
   `left: -28%` (au lieu de 0, avec `right: 0` fixe) elargit le calque
   vers la gauche : l'image, toujours etiree en 100% 100% mais sur une
   boite plus large, se retrouve decalee vers la gauche dans la fenetre
   visible (le bord droit reste ancre, l'exces a gauche est masque par
   le overflow:hidden). */
.how-it-works-wave {
  position: absolute;
  top: -140px;
  left: -28%;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.how-it-works-wave--1 {
  background-image: url("../images/Rectangle 5-9.png");
}

.how-it-works-wave--2 {
  background-image: url("../images/Rectangle 7.png");
}

/* Le contenu doit rester au-dessus des 2 vagues decoratives */
.how-it-works > .container {
  position: relative;
  z-index: 1;
}

/* Les 3 colonnes sont directement les images exportees depuis Figma (voir
   commentaire dans le HTML). Les largeurs et le decalage vertical ci-dessous
   sont calcules a partir de la geometrie exacte mesuree dans les fichiers :
   - largeur native gauche = droite = 684px, colonne icones = 673px
     (684 / (684+673+684) = 33.51% ; 673 / 2041 = 32.97%)
   - la colonne d'icones deborde de 121px au-dessus des cartes (anneaux
     decoratifs qui depassent) : 121 / 2041 = 5.93%. Exprime en % (et non en
     px), ce decalage reste proportionnel si la largeur de .steps-row change
     (percentage margin-top se calcule sur la largeur du bloc conteneur). */
.steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}

.steps-col {
  display: block;
  height: auto;
}

.steps-col--left,
.steps-col--right {
  width: 33.51%;
  margin-top: 5.93%;
}

.steps-col--icons {
  width: 32.97%;
}


/* -----------------------------------------------------------------
   6. FEATURES
   ----------------------------------------------------------------- */
.features {
  position: relative;
  padding: 60px 0 100px;
  overflow: hidden;
}

/* Anneaux concentriques en fond, cote gauche (image exportee depuis Figma) */
.features-rings {
  position: absolute;
  top: 10%;
  left: -140px;
  width: 700px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.features > .container {
  position: relative;
  z-index: 1;
}

/* Grille de 6 colonnes : la 1ere rangee prend 2 colonnes par carte (a,b,c),
   la 2eme rangee centre ses 2 cartes en laissant 1 colonne vide de chaque cote */
.features-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "a a b b c c"
    ". d d e e .";
  gap: 40px;
}

.feature-card {
  text-align: center;
}

.feature-card img {
  margin: 0 auto 16px;
  max-height: 150px;
}

.feature-card p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  max-width: 240px;
  margin: 0 auto;
}

.features-grid .feature-card:nth-child(1) { grid-area: a; }
.features-grid .feature-card:nth-child(2) { grid-area: b; }
.features-grid .feature-card:nth-child(3) { grid-area: c; }
.features-grid .feature-card:nth-child(4) { grid-area: d; }
.features-grid .feature-card:nth-child(5) { grid-area: e; }


/* -----------------------------------------------------------------
   7. TESTIMONIALS
   ----------------------------------------------------------------- */
.testimonials {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

/* Anneaux concentriques en fond, cote droit, derriere le collage de photos
   (image exportee depuis Figma) */
.testimonials-rings {
  position: absolute;
  top: 50%;
  right: -180px;
  transform: translateY(-50%);
  width: 780px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.testimonials-inner {
  position: relative;
  z-index: 1;
}

.testimonials-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.testimonial-content .section-label,
.testimonial-content .section-title {
  text-align: left;
}

.testimonial-content .section-title {
  margin-bottom: 32px;
}

.testimonial-card {
  position: relative;
  max-width: 440px;
  padding-top: 20px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 16px;
  border: 3px solid var(--color-light-blue);
}

.testimonial-quote-mark {
  position: absolute;
  top: 70px;
  right: -10px;
  font-size: 120px;
  line-height: 1;
  font-weight: 700;
  font-family: Georgia, serif;

  background: var(--gradient-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.testimonial-card p {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 16px;
  padding-right: 70px;
}

.testimonial-card strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;

  background: var(--gradient-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.testimonial-card > span:not(.testimonial-quote-mark) {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

.testimonial-nav {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.testimonial-nav button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 194, 191, 0.15);
  color: #137D95;
  cursor: pointer;
  font-size: 14px;
}

.testimonial-nav button:hover {
  background: var(--gradient-teal);
  color: var(--color-white);
}

/* Collage de photos a droite */
.testimonial-images {
  position: relative;
  width: 340px;
  height: 340px;
  flex-shrink: 0;
}

.testimonial-img-main {
  width: 270px;
  height: 260px;
  object-fit: cover;
  border-radius: 26px;
  position: absolute;
  top: 0;
  right: 0;
  border: 5px solid var(--color-light-blue);
  box-shadow: 0 12px 47px rgba(160, 142, 215, 0.2);
}

.testimonial-img-small {
  width: 150px;
  height: 140px;
  object-fit: cover;
  border-radius: 20px;
  position: absolute;
  border: 5px solid var(--color-white);
  box-shadow: 0 12px 47px rgba(160, 142, 215, 0.2);
}

.testimonial-img-bottom {
  bottom: 0;
  left: 30px;
}


/* -----------------------------------------------------------------
   8. CONTACT CTA (bandeau turquoise degrade)
   ----------------------------------------------------------------- */
.contact-cta {
  background: var(--gradient-teal);
  border-radius: var(--radius-lg);
  max-width: var(--container-width);
  margin: 0 auto 80px;
  overflow: hidden;
  position: relative;
}

/* 2 grandes bulles claires qui debordent du cadre, purement decoratives */
.contact-cta::before,
.contact-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  z-index: 0;
}

.contact-cta::before {
  width: 260px;
  height: 260px;
  bottom: -130px;
  left: -80px;
}

.contact-cta::after {
  width: 220px;
  height: 220px;
  top: -110px;
  right: -60px;
}

.contact-cta-inner {
  text-align: center;
  padding: 60px 24px;
  position: relative;
  z-index: 1;
}

.contact-cta h2 {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 28px;
}


/* -----------------------------------------------------------------
   8bis. PAGE CONTACT (contact.html)
   Reutilise les memes composants que le reste du site (.section-label,
   .section-title, .btn) pour rester coherent, avec juste un formulaire
   en plus.
   ----------------------------------------------------------------- */
.contact-page {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}

.contact-page-inner {
  position: relative;
  z-index: 1;
}

.contact-page-subtitle {
  font-family: var(--font-nav);
  font-size: 16px;
  color: var(--color-text);
  text-align: center;
  max-width: 520px;
  margin: 0 auto 40px;
}

/* La carte du formulaire : fond blanc, ombre douce, un peu plus etroite
   que le reste de la page pour rester lisible */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  background: var(--color-white);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(9, 58, 103, 0.08);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading);
}

.form-group input,
.form-group textarea {
  font-family: var(--font-nav);
  font-size: 14px;
  color: var(--color-text);
  padding: 12px 16px;
  border: 1px solid var(--color-light-blue);
  border-radius: 10px;
  background: var(--color-bg);
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

.contact-form .btn {
  align-self: flex-start;
  margin-top: 8px;
}

.form-success {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #0E7B79;
  margin-top: -4px;
}


/* -----------------------------------------------------------------
   9. FOOTER
   ----------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg);
  padding-top: 20px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding: 40px 24px 60px;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 16px;

  background: var(--gradient-purple);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-heading);
  font-size: 14px;
  margin-bottom: 16px;
  text-transform: capitalize;
}

.footer-col p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  margin-bottom: 10px;
}

.footer-col ul li {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 12px;
}

.footer-col ul li a:hover {
  color: var(--color-accent-blue);
}

.footer-bottom {
  border-top: 1px solid;
  border-image: var(--gradient-purple) 1;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 12px;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-icons a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons a:hover {
  background: var(--gradient-teal);
}

.social-icons a:hover svg {
  fill: var(--color-white);
}


/* -----------------------------------------------------------------
   10. RESPONSIVE - TABLETTE (< 992px)
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
  .hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-form {
    margin: 0 auto;
  }

  .testimonials-inner {
    flex-direction: column;
  }

  .testimonial-content .section-label,
  .testimonial-content .section-title {
    text-align: center;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a b"
      "c d"
      "e e";
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}


/* -----------------------------------------------------------------
   10. RESPONSIVE - MOBILE (< 768px)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Le menu devient une liste deroulante activee par le bouton burger */
  .burger {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px;
    box-shadow: 0 12px 24px rgba(1, 23, 106, 0.1);
    display: none;
  }

  .main-nav.open {
    display: flex;
  }

  /* Sur mobile, la section est beaucoup plus haute (les etapes empilees
     en colonne prennent bien plus de place) : etirer les vagues sur
     toute cette hauteur (comme en desktop) les rendrait beaucoup trop
     "montagneuses". On leur redonne donc leur proportion naturelle
     (aspect-ratio, sans etirement vertical) et on les cantonne en haut
     de la section ; le reste de la hauteur est rempli par une couleur
     unie proche du ton "pose" des vagues, pour que la couleur continue
     sans coupure jusqu'en bas. */
  .how-it-works {
    background-color: var(--color-light-blue);
  }

  .how-it-works-wave {
    top: 60px;
    left: 0;
    right: 0;
    bottom: auto;
    height: auto;
    aspect-ratio: 1440 / 1170;
  }

  .how-it-works-wave--2 {
    aspect-ratio: 1440 / 1289;
  }

  .hero-text h1 {
    font-size: 28px;
  }

  .hero-images {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 40px;
  }

  .hero-pill {
    width: 80px;
  }

  .hero-pill img {
    height: 300px;
    border-radius: 80px;
  }

  .pill-label {
    font-size: 10px;
    padding: 8px 6px;
    bottom: 50px;
    width: 68px;
  }

  /* Sur mobile, les 3 images n'ont plus assez de place cote a cote pour
     rester lisibles : on les empile en pleine largeur, dans l'ordre de
     lecture (cartes impaires, icones, cartes paires), sans le decalage
     vertical qui n'a de sens qu'en disposition 3 colonnes. */
  .steps-row {
    flex-direction: column;
    align-items: center;
  }

  .steps-col--left,
  .steps-col--right,
  .steps-col--icons {
    width: 100%;
    max-width: 320px;
    margin-top: 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e";
  }

  .testimonial-images {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .contact-form {
    padding: 24px;
  }
}