/********** ANDY BELL'S RESET **********/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/********** ANDY BELL'S RESET **********/

/********** HELPERS **********/

.ir {
  font: 0/0 a;
  color: transparent;
  border: 0;
  text-shadow: none;
}

.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    width: 1px;
    position: absolute;
    white-space: nowrap;
}

/********** HELPERS **********/

/********** FONTS **********/

/* livvic-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/livvic-v14-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* livvic-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/livvic-v14-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* livvic-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/livvic-v14-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/********** FONTS **********/

/********** VARIABLES **********/

:root {
    --ff: 'Livvic', sans-serif;

    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    --fs-h1-large: 10rem;
    --lh-h1-large: 10rem;
    --fs-h1-small: clamp(4rem, 3.155rem + 2.254vw, 6.4rem);
    --lh-h1-small: clamp(4rem, 3.437rem + 1.502vw, 5.6rem);
    --fs-h2: clamp(3.2rem, 2.637rem + 1.502vw, 4.8rem);
    --lh-h2: clamp(3.2rem, 2.637rem + 1.502vw, 4.8rem);
    --fs-h2-small: 3.2rem;
    --lh-h2-small: 3.2rem;
    --fs-h3: 1.8rem;
    --lh-h3: 2.8rem;
    --fs-body-1: 1.8rem;
    --lh-body-1: 2.8rem;
    --fs-body-2: 1.5rem;
    --lh-body-2: 2.5rem;

    --clr-primary-000: hsl(0, 0%, 100%);
    --clr-primary-400: hsl(0, 87%, 73%);
    --clr-primary-800: hsl(186, 98%, 17%);
    --clr-secondary-400: hsl(179, 42%, 63%);
    --clr-secondary-500: hsl(187, 41%, 29%);
    --clr-secondary-600: hsl(186, 100%, 14%);
    --clr-secondary-700: hsl(186, 96%, 10%);
    --clr-secondary-800: hsl(186, 100%, 8%);
    --clr-transparent-000: hsla(0, 0%, 100%, .6);
    --clr-transparent-001: hsla(0, 0%, 100%, .8);

    --spacing-main: clamp(2.4rem, -2.565rem + 13.239vw, 16.5rem);
}

/********** VARIABLES **********/

/********** GENERAL STYLES **********/

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    line-height: var(--lh-body-1);
    font-family: var(--ff);
    font-weight: var(--fw-semi-bold);
    color: var(--clr-primary-000);
    position: relative;
}

@media only screen and (min-width: 768px) {
    a:not(.contact-link) {
        transition: all .3s ease-in-out;
    }
    a:not(.contact-link):hover {
        color: var(--clr-primary-400);
    }
}

/* START OF HEADER */

header {
    display: flex;
    align-items: center;
    gap: clamp(4.8rem, 1.1429rem + 4.7619vw, 8rem);
    padding-inline: var(--spacing-main);
    padding-block-start: clamp(4.8rem, 3.92rem + 2.347vw, 7.3rem);
    padding-block-end: 2rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

.primary-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul[class] {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.primary-nav_item {
    color: inherit;
}

.primary-nav_item > a {
    text-transform: lowercase;
}

.home-about {
    display: flex;
    gap: 4rem;
}

.contact-link {
    display: inline-block;
    color: inherit;
    padding: 1rem 3.2rem;
    border: .2rem solid var(--clr-primary-000);
    border-radius: 5rem;
    transition: all .3s ease-in-out;
}

@media only screen and (max-width: 768px) {
    .primary-logo {
        height: 3.2rem;
    }
}

/*** BURGER MENU ***/

@media only screen and (max-width: 576px) {

    .wrapper-overlay {
      height: 100vh;
      width: 100vw;
      background-color: hsl(0, 0%, 0%, .3);
      position: fixed;
      z-index: 2;
      transform: translateX(100%);
    }

    .wrapper-overlay[data-visible="true"] {
      transform: translateX(0%);
    }

    .primary-nav {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 3.6rem;
      padding: 11.2rem 4.8rem;
      justify-content: start;
      transform: translateX(100%);
      transition: all .3s ease-in-out;
    } 

    .primary-nav[data-visible="true"] {
      transform: translateX(0%);
      background-color: var(--clr-secondary-500);
      position: fixed;
      top: 0;
      right: 0;
      padding-inline: 4.8rem;
      height: 100vh;
      width: fit-content;
      z-index: 998;
    }

    .primary-nav_list {
      display: flex;
      flex-direction: column;
    } 

    .home-about {
      gap: 2.4rem;
    }

    header {
      padding-inline: 2.4rem;
      position: absolute;
    }

    .primary-logo {
      position: absolute;
      top: 4.8rem;
      left: var(--spacing-main);
      width: fit-content;
    }

    .mobile-nav-toggle {
      display: block;
      position: fixed;
      width: 1rem;
      aspect-ratio : 1;
      top: 4.8rem;
      right: 2.4rem;
      background: none;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 2rem;
      width: 2rem;
      cursor: pointer;
      z-index: 999;
  } 

    .menu-icon {
      display: block;
      position: absolute;
      width: 2rem;
      height: .3rem;
      background-color: var(--clr-primary-000);
      transition: transform .4s;
      z-index: 999; 
  }

  .menu-icon::before {
      position: absolute;
      content: '';
      width: inherit;
      height: inherit;
      background-color: inherit;
      top: -.7rem;
      left: -.05rem;
  }

  .menu-icon::after {
      position:absolute;
      content:'';
      width:inherit;
      height:inherit;
      background-color :inherit;
      bottom: -.7rem;
      left: -.05rem;
  }

  .mobile-nav-toggle[aria-expanded="true"] > .menu-icon {
      transform: rotate(45deg);
  }

  .mobile-nav-toggle[aria-expanded="true"] > .menu-icon::before {
      top: unset;
  }

  .mobile-nav-toggle[aria-expanded="true"] > .menu-icon::after {
      bottom: unset;
      transform: rotate(-90deg);
  }

}

/*** BURGER MENU ***/

@media only screen and (min-width: 576px) {
    .mobile-nav-toggle {
        display: none;
    }
    header {
        background-color: var(--clr-primary-800);
    }
    .primary-nav_item > .contact-link:hover {
        background-color: var(--clr-primary-000);
        color: var(--clr-secondary-800);
    }
}

/* END OF HEADER */

/* START OF MAIN */

main {
    font-size: var(--fs-body-2);
    line-height: var(--lh-body-1);
}

section {
    padding-inline: var(--spacing-main);
}

h1 {
    font-size: var(--fs-h1-small);
    line-height: var(--lh-h1-small);
    font-weight: var(--fw-bold);
    width: 10ch;
    margin-inline: auto;
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-bold);
}

/* END OF MAIN */

/* START OF FOOTER */

footer {
    background-color: var(--clr-secondary-800);
    padding: 4.8rem var(--spacing-main);
    display: grid;
    gap: 2.4rem;
    grid-template-columns: 1fr;
    text-align: center;
}

.secondary-nav {
    text-transform: lowercase;
    justify-self: center;
    font-size: var(--fs-body-1);
    line-height: var(--lh-body-1);
}

.secondary-nav_list {
      display: flex;
      gap: clamp(2.4rem, 1.837rem + 1.502vw, 4rem);
}

.secondary-logo {
    height: clamp(2.4rem, 1.837rem + 1.502vw, 4rem);
    width: fit-content;
}

.secondary-logo-link {
    justify-self: center;
}

.address {
    padding-block-end: 1.6rem;
    color: var(--clr-transparent-000);
}

.social-networks_list {
    display: flex;
    gap: 1.6rem;
    justify-content: center;
}

.copyright {
    color: var(--clr-transparent-000);
}

footer > p {
    font-size: var(--fs-body-2);
    line-height: var(--lh-body-2);
}

@media only screen and (min-width: 768px) {

  footer {
      grid-template-columns: repeat(2,1fr);
      text-align: left;
  }

  .secondary-logo-link {
      justify-self: start;
  }

  .secondary-nav {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
  }

  .address {
      grid-column: 2;
      grid-row: 1 / 3;
      text-align: end;
  }

  .social-networks_list {
      grid-column: 1;
      grid-row: 3;
      justify-self: start;
  }

  .copyright {
      grid-column: 2;
      grid-row: 3;
      text-align: end;
  }

  .social-networks_item > a > svg > path {
      transition: all .3s ease-in-out;
  }

  .social-networks_item > a > svg:hover > path {
      fill: var(--clr-primary-400);
} 

}

@media only screen and (min-width: 1200px) {
 
  footer {
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
  }

  .address {
    grid-column: 2;
    grid-row: 1 / 3;
    text-align: start;
  }

  .social-networks_list {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .copyright {
    grid-column: 3;
    grid-row: 2;
    text-align: end;
  }

}

/* END OF FOOTER */

/********** SPECIFIC STYLES **********/

/* START OF HOME */

.hero {
    background-color: var(--clr-primary-800);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero {
    min-height: 56.7rem;
}

.home-hero::after {
    content:'';
    display: block;
    background-image: url(img/home-2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 35.8rem;
    min-height: 10rem;
    position: absolute;
    bottom: 0;
    left: calc(50% - 35.8rem/2);
}

.hero-container {
    display: flex;
    gap: clamp(1.8rem, 1.377rem + 1.127vw, 3rem);
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.color-change-1 {
    color: var(--clr-primary-400);
}

.home-hero > .hero-container > p {
    max-width: 45.7rem;
    margin-inline: auto;
}

@media only screen and (min-width: 768px) {
    .hero {
        min-height: 70rem;
    }
}

@media only screen and (min-width: 1200px) {
    .hero-container {
        flex-direction: row;
        align-items: center;
        text-align: left;
        justify-content: space-between;
        width: 100%;
    }
    .home-hero > .hero-container > h1 {
        min-width: 10ch;
        font-size: var(--fs-h1-large);
        line-height: var(--lh-h1-large);
    }
    .home-hero > .hero-container > p {
        max-width: 38ch;
    }
    .hero-container > p {
        align-self: end;
        position: relative;
    }
    .hero-container > p::before {
        content: '';
        min-width: 5rem;
        min-height: .4rem;
        background-color: var(--clr-secondary-400);
        position: absolute;
        top: -7.9rem;
    }
    .home-hero::after {
        left: calc(80% - 35.8rem/2);
    }
    .home-hero::before {
        content:'';
        display: block;
        background-image: url(img/home-1.svg);
        background-repeat: no-repeat;
        background-size: cover;
        min-width: 10rem;
        min-height: 20rem;
        position: absolute;
        top: calc(50% - 20rem/2);
        left: 0;
    }
}

.functionalities {
    background-color: var(--clr-secondary-700);
    padding-block: clamp(6.4rem, 3.724rem + 7.136vw, 14rem);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(5.6rem, 3.17rem + 6.479vw, 12.5rem);
}

.functionalities::after {
    content:'';
    display: block;
    background-image: url(img/home-3.svg);
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 10rem;
    min-height: 24.4rem;
    position: absolute;
    top: 0;
    right: 0;
}

.functionalities > h2 {
    max-width: 12ch;
    position: relative;
    margin-block-start: 3rem;
}

.functionalities > h2::before {
    content: '';
    min-width: 5rem;
    min-height: .4rem;
    background-color: var(--clr-primary-400);
    position: absolute;
    top: -3.2rem;
}

.functionalities_list {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

.functionalities_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.functionalities_item > img {
    max-width: 6.2rem;
}

.functionalities-title-paragraph > h3 {
    color: var(--clr-primary-400);
    padding-block-start: 1.6rem;
    font-weight: var(--fw-bold);
}

.functionalities-title-paragraph > p {
    color: var(--clr-transparent-001);
}

.img-container {
    position: relative;
}

.img-container > img {
    position: relative;
    min-width: 5.6rem;
    min-height: 5.6rem;
    z-index: 2;
}

.img-container::after {
    content: '';
    min-width: 5.6rem;
    min-height: 5.6rem;
    border-radius: 50%;
    background-color: var(--clr-secondary-500);
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
}

@media only screen and (min-width: 768px) {
    .functionalities > h2 {
      max-width: 23ch;
    }

    .functionalities_list {
        text-align: left;
    }

    .functionalities_item {
        flex-direction: row;
        gap: 3.9rem;
    }
    .img-container {
        top: -1rem;
    }
    .img-container::after {
        top: 1.25rem;
        left: 1.25rem;
    }
}

@media only screen and (min-width: 1200px) {
    .functionalities {
        flex-direction: row;
    }
    .functionalities > h2 {
        max-width: 16ch;
    }
    .functionalities-title-paragraph {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }
    .functionalities::after {
        bottom: 0;
        top: unset;
    }
    .functionalities > h2::before {
        top: -5.4rem;
    }
}

.testimonials {
    background-color: var(--clr-secondary-600);
    padding-inline: var(--spacing-main);
    padding-block-start: 14rem;
    padding-block-end: 16.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(8.4rem, 8.118rem + 0.751vw, 9.2rem);
    text-align: center;
}

.testimonials::before {
    content: '';
    background-image: url(img/home-4.svg);
    min-width: 14.7rem;
    min-height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
}

.testimonials::after {
    content: '';
    background-image: url(img/home-5.svg);
    min-width: 20rem;
    min-height: 10rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.testimonials > h2 {
    max-width: 93.2rem;
}

.testimonial {
    display: block;
}

.color-change-2 {
    color: var(--clr-secondary-400);
}

.testimonials_list {
    display: flex;
    flex-direction: column;
    gap: 8.4rem;
}

.testimonials_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    position: relative;
}

.testimonials_item::before {
    content: '';
    background-image: url(img/guillemets.svg);
    min-width: 6.7rem;
    min-height: 5.6rem;
    position: absolute;
    top: -3.5rem;
}

.testimonials_item > blockquote {
    position: relative;
    z-index: 1;
}

.testimonial-name-job {
    z-index: 1;
}

.testimonial-name-job > h3 {
    color: var(--clr-secondary-400);
}

.testimonial-name-job > p {
    font-style: italic;
    font-weight: var(fw-medium);
}

@media only screen and (min-width: 768px) {
    .testimonials {
        padding-block: 10rem;
    }
}

@media only screen and (min-width: 1200px) {
    .testimonials {
        align-items: center;
        padding-block: 14rem;
    }
    .testimonials_list {
        flex-direction: row;
    }
    .testimonials_item {
        gap: 2.8rem;
    }
}

.cta {
    background-color: var(--clr-primary-400);
    color: var(--clr-secondary-800);
    padding-block: 8.3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2.4rem, -5.91rem + 22.16vw, 26rem);
    position: relative;
}

@media only screen and (min-width: 768px) {
    .cta {
        padding-block: 7.6rem;
        flex-direction: row;
        text-align: left;
        gap: clamp(7.4rem, -13.857rem + 27.679vw, 26rem);
    }
    .cta > .contact-link {
        transition: all .3s ease-in-out;
    }
    .cta > .contact-link:hover {
        color: var(--clr-primary-000);
        background-color: var(--clr-secondary-700);
    }
}

.cta::after {
    content: '';
    background-image: url(img/home-6.svg);
    background-repeat: no-repeat;
    min-width: 20rem;
    min-height: 12.2rem;
    position: absolute;
    bottom: 0;
    left: 0;
}

.cta > h2 {
    max-width: 14ch;
}

@media only screen and (min-width: 768px) {
    .cta > h2 {
        max-width: 18ch;
    }
}

.cta > .contact-link {
    border: 2px solid var(--clr-secondary-800);
    text-transform: lowercase;
}

/* END OF HOME */

/* START OF ABOUT */

.about-hero {
    min-height: 52rem;
    padding-block: clamp(10.8rem, 10.377rem + 1.127vw, 12rem);
}

.about-hero::after {
    content:'';
    display: block;
    background-image: url(img/about-1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 10rem;
    min-height: 10rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media only screen and (min-width: 768px) {
    .about-hero::after {
        min-height: 20rem; 
    }
}
@media only screen and (min-width: 1200px) {
    .about-hero > .hero-container > h1 {
        min-width: 35rem;
        font-size: var(--fs-h1-small);
        line-height: var(--lh-h1-small);
    }
    .about-hero > .hero-container > p {
        min-width: 60ch;
        font-size: var(--fs-body-1);
        line-height: var(--lh-body-1);
        font-weight: var(--fw-medium);
    }

}


.team {
    background-color: var(--clr-secondary-600);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: clamp(11.6rem, 10.755rem + 2.254vw, 14rem);
    gap: 4.8rem;
    position: relative;
}

.team::before {
    content:'';
    display: block;
    background-image: url(img/about-2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: border-box;
    background-position-x: 100%;
    background-position-y: 100%;
    min-width: 10rem;
    min-height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (min-width: 768px) {
    .team::before {
        min-height: 20rem;
    }
}

.team::after {
    content:'';
    display: block;
    background-image: url(img/about-3.svg);
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 10rem;
    min-height: 10rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media only screen and (min-width: 1200px) {
    .team::after {
        min-width: 14.7rem;
    }
}

.directors_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5.2rem;
}

.directors_item {
    height: 25.3rem;
    width: 32.7rem;
    background-color: var(--clr-secondary-700);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all .3s ease-in-out;
    position: relative;
    padding-inline: 2.4rem;
}

.directors_item-active {
    background-color: var(--clr-secondary-800);
}

.read-more {
    display: block;
    position: absolute;
    bottom: -12%;
    left: calc(50% - 6rem / 2);
    opacity: 0;
    cursor: pointer;
    height: 5.6rem;
    width: 5.6rem;
    clip-path: circle(46% at 50% 50%);
    margin: 0;
    z-index: 1;
}

.read-more ~ svg {
    position: absolute;
    bottom: -12%;
    left: calc(50% - 6rem / 2);
}

.read-more ~svg > path {
    position: absolute;
    transform-origin: 50%;
}

.read-more ~ svg > circle, .read-more ~ svg > path {
    transition: all .3s ease-in-out;
}

.read-more:checked ~ svg > circle {
    fill: var(--clr-secondary-400);
}

.read-more:checked ~ svg > path {
    rotate: 45deg;
}

h3 {
    padding-block-start: 1.6rem;
    color: var(--clr-secondary-400);
}

.job-title {
    font-style: italic;
    font-weight: var(--fw-medium);
}

blockquote {
    display: none;
    padding-block: .8rem 2.4rem;
}

.social-networks_list {
    display: none;
}

.active {
    display: flex;
    flex-direction: column;
}

.active-networks {
    display: flex;
    flex-direction: row;
}

.inactive {
    display: none;
}

@media only screen and (min-width: 576px) {
    .directors_item {
        width: 28.1rem;
    }
    .directors_list {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 7.6rem;
        column-gap: 1.1rem;
    }
}

@media only screen and (min-width: 768px) {
    .team {
        gap: 6.4rem;
    }
    .directors_item {
        width: 35rem;
    }
    .directors_list {
        column-gap: 3rem;
    }
    .social-networks_item > a > svg > g > path {
        transition: all .3s ease-in-out;
    }
    .social-networks_item > a > svg:hover > g > path {
        fill: var(--clr-primary-400);
  } 
}

.clients {
    background-color: var(--clr-secondary-700);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.4rem;
    padding-block: clamp(8.8rem, 6.969rem + 4.883vw, 14rem);
    position: relative;
}

.clients::before {
    content: '';
    background-image: url(img/about-4.svg);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position-x: 100%;
    background-position-y: 100%;
    min-width: 10rem;
    min-height: 10rem;
    position: absolute;
    top: 0;
    left: 0;    
}

.clients_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.7rem;
}

@media only screen and (min-width: 576px) {
    .clients {
        padding-inline: 4rem;
    }
    .clients_list {
        flex-direction: row;
        gap: clamp(4.8rem, 2.667rem + 3.704vw, 8rem);
    }
    .clients_item {
        min-width: 61px;
        min-height: 14px;
    }
    .clients::before {
        min-width: 20rem;
        background-position-x: 0;
    }
}

@media only screen and (min-width: 768px) {
    .clients::before {
        min-height: 10rem;
        background-position-y: 100%;
    }
    .clients {
        padding-inline: clamp(4rem, -0.401rem + 11.737vw, 16.5rem);
    }
}

/* END OF ABOUT */

/* START OF CONTACT */

.contact-hero {
        flex-direction: column;
        align-items: start;
        padding-block: 16rem 8.8rem;
        padding-inline: 11.3rem;
        gap: 5.6rem;
}

@media only screen and (max-width: 576px) {
    .contact-hero {
        padding-inline: var(--spacing-main);
    }
}

.contact-hero::after {
    content: '';
    background-image: url(img/contact-2.svg);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position-x: 100%;
    min-width: 10rem;
    min-height: 11.2rem;
    position: absolute;
    bottom: 0;
    right: 0; 
}

@media only screen and (min-width: 1200px) {
    .contact-hero {
        align-items: start;
        flex-direction: row;
        padding-inline: 16.3rem;
    }
    .contact-hero::after {
        min-height: 22.5rem;
        background-position-x: 0;
    }
    .contact-hero > .hero-container {
        flex-direction: column;
    }
}

.contact-hero > .hero-container {
    width: 100%;
    position: relative;
}

@media only screen and (min-width: 576px) {
    .contact-hero > .hero-container::before {
        content: '';
        background-image: url(img/contact-1.svg);
        background-repeat: no-repeat;
        background-origin: border-box;
        background-position-x: 100%;
        min-width: 10rem;
        min-height: 20rem;
        position: absolute;
        top: 0;
        left: -16.3rem;
    }
}

@media only screen and (min-width: 576px) and (max-width: 1200px) {
    .contact-hero > .hero-container::before {
        left: -11.3rem;
    }
}


.title-subtitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-subtitle > h1 {
    margin: 0;
    align-self: center;
}

.title-subtitle > h2 {
    padding-block-start: 1.6rem;
    font-size: var(--fs-h2-small);
    line-height: var(--lh-h2-small);
}

.contact-hero > .hero-container > ul {
    font-size: var(--fs-body-1);
    padding-block-start: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.contact-hero > .hero-container > ul > li {
    flex-direction: row;
    text-align: left;
    gap: 4.3rem;
}

.contact-subtitle {
    color: var(--clr-primary-400);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
}

.input-fill {
    appearance: none;
    padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
    color: var(--clr-transparent-001);
    font-weight: var(--fw-medium);
    width: 100%;
    border-bottom: 1px solid var(--clr-primary-000);
    transition: all .3s ease-in-out;
}

.input-fill:hover {
    border-bottom: 1px solid var(--clr-secondary-400);
}

.active-border {
    border-bottom: 1px solid var(--clr-secondary-400);
}

.input-fill[placeholder] {
    padding-inline-start: 1.4rem;
    padding-block-end: 1.7rem;
}

.error {
    border-bottom: 1px solid var(--clr-primary-400);
    color: var(--clr-primary-400);
}

.success {
    border-bottom: 1px solid var(--clr-secondary-400);
    color: var(--clr-secondary-400);
}

.error-message-display {
    display: inline;
    font-weight: var(--fw-medium);
    font-style: italic;
    color: var(--clr-primary-400);
}

.submit-btn {
    width: fit-content;
    padding: 1rem 3.2rem;
    border-radius: 2.4rem;
    text-transform: lowercase;
    color: var(--clr-secondary-600);
    border: none;
}

.submit-btn:hover {
    cursor: pointer;
}

/* END OF CONTACT */