@font-face {
  font-family: "BT Beau Sans Light";
  src: url(../../assets/fonts/BT-BeauSans-Light.ttf) format('truetype');
  font-weight: 300;
  font-display: optional;
}

@font-face {
  font-family: "BT Beau Sans Regular";
  src: url(../../assets/fonts/BT-BeauSans-Regular.ttf) format('truetype');
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "BT Beau Sans Medium";
  src: url(../../assets/fonts/BT-BeauSans-Medium.ttf) format('truetype');
  font-weight: 500;
  font-display: optional;
}

@font-face {
  font-family: "BT Beau Sans Bold";
  src: url(../../assets/fonts/BT-BeauSans-Bold.ttf) format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "BT Beau Sans Extra Bold";
  src: url(../../assets/fonts/BT-BeauSans-ExtraBold.ttf) format('truetype');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Figtree Italic";
  src: url(../../assets/fonts/Figtree-Italic-VariableFont_wght.ttf) format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url(../../assets/fonts/Figtree-VariableFont_wght.ttf) format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url(../../assets/fonts/RobotoMono-VariableFont_wght.ttf) format('truetype');
  font-display: swap;
}

:root {
  /*Config*/
  /*
    @param: interpolate-size;
    role: Turn on the transitions on keywords, like "width" or "height", if you work with the default values, like "auto", "min-content", "max-content"...
  */
  interpolate-size: allow-keywords;

  /*Colors*/
  /* --color-background: #FFFEFA; */
  --color-background: #fff1f0;
  /* --color-dark: #21322b; */
  --color-dark: hsl(268, 96%, 10%);
  /* --color-white: #f6f6f6; */
  --color-white: hsl(190, 40%, 98%);
  --color-grey-light: hsl(330, 8%, 95%);
  --color-grey-dark: hsl(0, 0%, 48%);
  /* --color-primary:#035F31; */
  --color-primary: hsl(5, 96%, 70%);
  /* --color-secondary: #048f4a; */
  --color-secondary: hsl(211, 36%, 53%);
  /* --color-ternary:#115F38; */
  --color-ternary: hsl(5, 96%, 60%);
  --color-cta: var(--color-ternary);
  --color-cta-hover: var(--color-primary);
  --color-cta-dark: var(--color-secondary);
  --color-cta-second: var(--color-secondary);
  --color-cta-second-hover: hsla(var(--color-secondary-opacity) / .8);
  --color-cta-second-dark: hsla(var(--color-secondary-opacity) / .9);
  --color-cta-ternary: #9237fb;
  --color-cta-ternary-hover: hsla(268, 96%, 60%, .8);
  --color-cta-ternary-dark: hsla(268, 96%, 60%, .9);
  --color-stars: #fdd53f;
  --color-purple: #BDB6E2;
  --color-blue-light: #DDEDFD;
  --color-blue-mid: #9AC8F6;
  --color-blue-dark: #77B2F1;
  --color-valid: #88DAB4;
  --color-warning: #FFB266;
  --color-error: hwb(13 18% 0%);
  --color-info: hsl(211, 36%, 43%);

  /*Colors HSL For Opacity*/
  --color-background-opacity: 6 100% 97%;
  --color-dark-opacity: 268 96% 10%;
  --color-white-opacity: 190 40% 98%;
  --color-grey-light-opacity: 330 8% 95%;
  --color-grey-dark-opacity: 0 0% 48%;
  --color-primary-opacity: 5 96% 70%;
  --color-secondary-opacity: 211 36% 53%;
  --color-ternary-opacity: 5 96% 60%;
  --color-cta-opacity: 32 100% 59%;
  --color-cta-hover-opacity: 27 98% 76%;
  --color-cta-dark-opacity: 42 92% 46%;
  --color-cta-second-opacity: 32 100% 59%;
  --color-cta-second-hover-opacity: 27 98% 76%;
  --color-cta-second-dark-opacity: 42 92% 46%;
  --color-cta-ternary-opacity: 268 96% 60%;
  --color-cta-ternary-hover-opacity: 27 98% 76%;
  --color-cta-ternary-dark-opacity: 42 92% 46%;
  --color-stars-opacity: 47 98% 62%;
  --color-purple-opacity: 250 43% 80%;
  --color-blue-light-opacity: 210 89% 93%;
  --color-blue-mid-opacity: 210 84% 78%;
  --color-blue-dark-opacity: 211 81% 71%;
  --color-valid-opacity: 152 53% 69%;
  --color-warning-opacity: 30 100% 70%;
  --color-error-opacity: 13 100% 59%;
  --color-info-opacity: 211 36% 43%;

  /*Fonts*/
  --font-family-light: BT Beau Sans Light, system-ui, sans-serif;
  --font-family-regular: BT Beau Sans Regular, system-ui, sans-serif;
  --font-family-medium: BT Beau Sans Medium, system-ui, sans-serif;
  --font-family-bold: BT Beau Sans Bold, system-ui, sans-serif;
  --font-family-extra-bold: BT Beau Sans Extra Bold, system-ui, sans-serif;
  --font-family-variable: Figtree, system-ui, sans-serif;
  --font-family-variable-italic: Figtree Italic, system-ui, sans-serif;
  --font-family-monospace: Roboto Mono, monospace;
  --font-size-base: 16px;
  --font-size-small: .833rem;
  --font-size-default: 1rem;
  --font-size-menu-links: .923rem;
  --font-size-text: 1rem;
  --font-size-links: .923rem;
  --font-size-subtitle: 1.307rem;
  --font-size-important: 1.154rem;
  --font-size-btn-icons: 1.08rem;
  --font-size-text-hero: 1.384rem;
  --font-size-title-hero: 1.692rem;
  --font-size-title-h1: 2.13rem;
  --font-size-title-h2: 1.692rem;
  --font-size-title-h3: 1.538rem;
  --font-size-title-h4: 1.5rem;
  --font-size-title-h5: 1.461rem;
  --font-size-title-h6: 1.423rem;
  --font-weight-bolder: 900;
  --font-weight-bold: 700;
  --font-weight-medium: 600;
  --font-weight-regular: 500;
  --font-weight-small: 400;

  /*
    Line height
  */
  --line-height-small: 1;
  --line-height-regular: 1.25;
  --line-height-medium: 1.5;
  --line-height-big: 2;
  --line-height-bigger: 2.5;

  /*Border radius*/
  --border-radius: 1rem;
  --border-radius-squircle: 1.3rem;
  --border-radius-cta: 1.33rem;
  --border-radius-big: 1.85rem;
  --border-radius-round: 999rem;

  /*
    Text-shadow
  */
  --text-shadow: 0 .05rem .05rem var(--color-dark);

  /*
    Box-shadow
  */
  --box-shadow:
    .2rem .2rem .2rem -.1rem hsla(var(--color-dark-opacity) / .45),
    -.2rem .2rem .2rem -.1rem hsla(var(--color-dark-opacity) / .45);
  --box-shadow-hover:
    .1rem .1rem .1rem -.05rem hsla(var(--color-dark-opacity) / .45),
    -.1rem .1rem .1rem -.05rem hsla(var(--color-dark-opacity) / .45);
  --box-shadow-main-nav:
    0 0 0 999rem hsla(var(--color-grey-dark-opacity) / .45);
  --box-shadow-main-nav-light:
    0 0 2.4rem -.4rem hsla(var(--color-grey-dark-opacity) / .45);
  --box-shadow-container:
    inset 0 0 .25rem -.15rem var(--color-white),
    0 -.15rem .15rem -1.1rem var(--color-grey-light),
    inset -.15rem 0 .15rem -.1rem var(--color-grey-light),
    inset .15rem 0 .15rem -.1rem var(--color-grey-light),
    0 -.25rem .5rem -.4rem var(--color-grey-dark),
    -.15rem 0 .25rem -.25rem var(--color-grey-dark),
    .15rem 0 .25rem -.25rem var(--color-grey-dark),
    0 .25rem .25rem -.25rem var(--color-dark),
    0 .5rem .5rem -.25rem var(--color-white);
  --box-shadow-container-hover:
    inset 0 0 .25rem -.15rem var(--color-white),
    0 -.15rem .15rem -1.1rem var(--color-grey-light),
    inset -.15rem 0 .15rem -.1rem var(--color-grey-light),
    inset .15rem 0 .15rem -.1rem var(--color-grey-light),
    0 -.35rem 0.5rem -.45rem var(--color-grey-dark),
    -.15rem 0 .15rem -.15rem var(--color-grey-dark),
    .15rem 0 .15rem -.15rem var(--color-grey-dark),
    0 .35rem .5rem -.25rem var(--color-dark),
    0 .5rem .5rem -.25rem var(--color-white);
  --box-shadow-img: inset 0 0 .25rem -.15rem var(--color-white),
    0 -.25rem .25rem -.15rem var(--color-grey-light),
    inset -.15rem 0 .15rem -.1rem var(--color-grey-light),
    inset .15rem 0 .15rem -.1rem var(--color-grey-light),
    0 .35rem .35rem -.2rem var(--color-dark),
    0 .5rem .5rem -.25rem var(--color-white);

  /*
      Padding
    */
  --padding: .4rem;
  --padding-null: 0;
  --padding-small: calc(var(--padding) / 2);
  --padding-regular: var(--padding);
  --padding-big: calc(var(--padding) * 2);
  --padding-bigger: calc(var(--padding) * 4);
  --padding-xl: calc(var(--padding) * 6);
  --padding-xxl: calc(var(--padding) * 8);
  --padding-xxxl: calc(var(--padding) * 12);

  /*
    Icons
  */
  --icon-size-small: 1.333rem;
  --icon-size-regular: 2rem;
  --icon-size-big: 2.666rem;
  --icon-size-bigger: 4rem;

  /*
    Width
  */
  --width-full: 100%;

  /*
    Height
  */
  --height-main-head: 5rem;

  /*
      Media queries [do not work in media query condition, just notice]
    */
  --media-xl: calc(1920px - 1.2rem);
  --media-large: calc(1280px - 1.2rem);
  --media-medium: calc(980px - 1.2rem);
  --media-small: calc(760px - 1.2rem);

}

*,
*::before,
*::after {
  /* max-width: 100%; */
  box-sizing: border-box;
  font-family: var(--font-family-regular);
  text-wrap: pretty;
  --webkit-text-wrap-ratio: 0.6;
  --moz-text-wrap-ratio: 0.6;
  --o-text-wrap-ratio: 0.6;
  margin: 0;
  padding: var(--padding-null);
}

html,
body {
  font-size: var(--font-size-base);
  margin: 0;
  padding: var(--padding-null);
}

body {
  max-width: 1920px;
  background-color: var(--color-background);
  color: var(--color-dark);
  font-family: var(--font-family-light);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-medium);
  overflow-x: hidden;
  text-box: ex alphabetic;
  margin-inline: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-big);
  font-family: var(--font-family-bold);
  color: var(--color-dark);
  text-box: cap alphabetic;
}

h1 {
  font-size: var(--font-size-title-h1);
  color: var(--color-ternary);
}

h2 {
  font-size: var(--font-size-title-h2);
}

h3 {
  font-size: var(--font-size-title-h3);
}

h4 {
  font-size: var(--font-size-title-h4);
}

h5 {
  font-size: var(--font-size-title-h5);
}

h6 {
  font-size: var(--font-size-title-h6);
}

p {
  line-height: var(--line-height-big);
  letter-spacing: .05rem;
  max-width: calc(100% - var(--padding-regular));
  font-family: var(--font-family-light);
  font-size: var(--font-size-text);
}

a,
a:visited,
button {
  text-decoration: none;
  color: var(--color-cta);
  font-family: var(--font-family-variable);
  font-size: var(--font-size-links);
  font-weight: var(--font-weight-medium);
  letter-spacing: .035rem;
  transition: background-color .175s ease-out, color .175s ease-out;

  &:is(.inline-links) {
    text-decoration: underline;
    text-underline-offset: .15rem;
    transition: text-decoration .125s cubic-bezier(0.19, 1, 0.22, 1);

    &:hover {
      text-decoration: underline dashed;
      font-weight: var(--font-weight-bold);

      & strong {
        font-weight: var(--font-weight-bold);
      }
    }
  }

  &:is(.main-menu-links, .menu-links) {
    font-size: var(--font-size-menu-links);
  }

  &:is(.cta-links) {
    width: max-content;
    max-width: calc(100% - var(--padding-big));
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-menu-links);
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: var(--padding-regular) var(--padding-big);
    margin-inline: auto 0;
    margin-block: var(--padding-big) var(--padding-regular);
    border: var(--padding-small) solid transparent;
    border-radius: var(--border-radius-cta);

    &:hover {
      background-color: var(--color-cta-hover);
      color: var(--color-white);
    }

    &:active {
      background-color: var(--color-cta-hover);
      color: var(--color-white);
    }

    &:is(.phone-link-head) {
      opacity: 1;
      pointer-events: all;
      transition: all .175s cubic-bezier(1, .5, .5, 1);
    }

    @media (width <=680px) {
      &:is(.phone-link-head) {
        opacity: 0;
        pointer-events: none;
      }
    }
  }

  &:hover {
    color: var(--color-cta-hover);
  }

  &:active {
    transition: color .075s ease-out;
    color: var(--color-cta-dark);
  }

  &:is(.cta-links-secondary) {
    background-color: var(--color-cta-second);
    color: var(--color-white);

    &:hover {
      background-color: var(--color-cta-second-hover);
      color: var(--color-white);
    }

    &:active {
      background-color: var(--color-cta-second-dark);
      color: var(--color-white);
    }
  }

  &:is(.cta-links-ternary) {
    background-color: var(--color-cta-ternary);
    color: var(--color-white);

    &:hover {
      background-color: var(--color-cta-ternary-hover);
      color: var(--color-white);
    }

    &:active {
      background-color: var(--color-cta-ternary-dark);
      color: var(--color-white);
    }
  }

  &:is(.cta-off) {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
  }
}

.cta-links-container {
  width: max-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--padding-bigger);
  margin-inline: auto;

  @media (width <=860px) {
    display: none;
  }
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  box-shadow: var(--box-shadow-img);
  border-radius: var(--border-radius-squircle);
  margin-block: var(--padding-big);

  &:is(.illustration-img) {
    box-shadow: unset;
  }
}

ul,
ol {
  padding-inline: var(--padding-bigger);
}

strong,
b,
.important {
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-bold);
  color: var(--color-info);
}

em {
  font-size: var(--font-size-small);
  line-height: var(--line-height-medium);
}

small,
.small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-small);
}

button:is(.cta-links, .small) {
  max-width: calc(60% - var(--padding-bigger));
  font-size: .5rem;
  margin: 0;
  padding: var(--padding-small) var(--padding-regular);
}

.error {
  line-height: 2;
  background-color: var(--color-white);
  color: var(--color-error);
  padding: .15rem .25rem;
}

.list-square {
  list-style: square;
}

.mono {
  font-family: var(--font-family-monospace);
}

.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  font-variation-settings:
    'FILL' 1,
    'wght' 600,
    'GRAD' 0,
    'opsz' 24;

  &:is(.star) {
    color: var(--color-stars);
  }
}

div.cookies-banner {
  width: max-content;
  max-width: calc(100% - var(--padding-big));
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--padding-big) var(--padding-bigger);
  margin-inline: auto;
  background-color: var(--color-white);
  outline: 4px solid var(--color-dark);
  opacity: 0;
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  transform: translateY(5%);
  z-index: 100115;
  animation: .99s cubic-bezier(0.16, 1, 0.3, 1) .165s forwards slideInBottomTop;
}

@keyframes slideInBottomTop {
  0% {
    top: -100%;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}

.cookies-banner-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--padding-big);
}

.cookies-banner-title {
  width: 100%;
  text-align: center;
  margin-bottom: var(--padding-regular);
}

.cookies-banner-content p {
  width: 40rem;
  max-width: calc(100% - var(--padding-xl));
  text-align: center;
  margin-bottom: var(--padding-regular);
  font-size: clamp(15px, 16px, 17px);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-monospace);
}

.cookies-banner-content a {
  font-family: var(--font-family-monospace);
}

.cookies-btn {
  width: max-content;
  margin-inline: auto 0;
  margin-top: var(--padding-big);
  font-size: clamp(17px, 18px, 19px);
  font-weight: var(--font-weight-regular);
  border: none;
  border-radius: var(--border-radius);
  padding: var(--padding-small) var(--padding-regular);
  background-color: var(--color-cta);
  color: var(--color-white);
  font-family: var(--font-family-monospace);
  cursor: pointer;
  transition: background-color .33s ease-out;
  box-shadow: inset 0 0 .25em -.15em var(--color-white);
}

.cookies-btn:hover {
  background-color: var(--color-cta-hover);
}

.cookies-btn:active {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.main-head {
  width: 100%;
  max-height: var(--height-main-head);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--padding-big);
  background-color: var(--color-background);
  padding: var(--padding-bigger) var(--padding-big);
  position: sticky;
  top: 0;
  z-index: 99;
}

.logo-header {
  width: max-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--padding-big);
  box-shadow: unset;
  cursor: pointer;
  transition: opacity .125s cubic-bezier(1, 0, 0, 1);

  &:hover {
    opacity: .9;
    box-shadow: unset;
  }
}

.logo {
  width: var(--icon-size-big);
  height: var(--icon-size-big);
  object-fit: cover;
  object-position: center;
  box-shadow: unset;

  &:hover {
    box-shadow: unset;
  }
}

.main-head-title {
  color: var(--color-dark);
  font-family: var(--font-family-extra-bold);
}

.nav-btn {
  width: var(--icon-size-big);
  height: var(--icon-size-big);
  font-size: var(--font-size-btn-icons);
  background-color: transparent;
  border: unset;
  border-radius: var(--border-radius-round);
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  pointer-events: all;
  transform: scale(1.25);
  position: relative;
  z-index: 3;

  .nav-btn-icon-open,
  .nav-btn-icon-close {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    color: var(--color-primary);
    transition: opacity .075s ease-out;

    &:is([data-state="close"]) {
      & .nav-btn-icon-close {
        opacity: 0;
      }

      & .nav-btn-icon-open {
        opacity: 1;
      }
    }

    &:is([data-state="open"]) {
      &.nav-btn-icon-close {
        opacity: 1;
      }

      &.nav-btn-icon-open {
        opacity: 0;
      }
    }
  }
}

.main-nav {
  width: max-content;
  max-width: 350px;
  min-height: max-content;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--padding-bigger);
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-main-nav-light);
  margin-inline: auto;
  padding: var(--padding-bigger) var(--padding-big);
  position: fixed;
  top: var(--padding-big);
  right: calc(var(--icon-size-big) * 1.5);
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .275s cubic-bezier(1, 0, 0, 1), height .125s cubic-bezier(1, 0, 0, 1);
  opacity: 0;
  pointer-events: all;
  z-index: 2;

  @starting-style {
    height: 0px;
  }

  @media (orientation: landscape) {
    max-width: 80%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  &:is(.close) {
    opacity: 0;
    pointer-events: none;
    height: 0px;
  }

  &:is(.open) {
    opacity: 1;
    pointer-events: all;
    max-height: 90%;
  }

  .main-menu-links {
    width: 100%;
    min-height: var(--padding-bigger);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--font-size-menu-links);
    font-weight: var(--font-weight-regular);
    letter-spacing: .05rem;
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: var(--padding-regular) var(--padding-big);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: background-color .175s ease-out, color .175s ease-out, outline .175s ease-out;

    @media (orientation:landscape) {
      width: max-content;
    }

    &:hover {
      background-color: var(--color-cta-hover);
      color: var(--color-white);
    }

    &:active {
      background-color: var(--color-cta-hover);
      color: var(--color-white);
    }
  }
}

.main-content {
  width: 100%;
  min-height: calc(100dvh - var(--height-main-head));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-xxxl);
  background-color: var(--color-background);
  position: relative;
  z-index: 1;

  .video-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: -1;
    object-fit: cover;
    pointer-events: none;
  }

  @media (width <=calc(760px + 1.2rem)) {
    align-items: center;
  }
}

details,
summary {
  cursor: pointer;
  margin-block: var(--padding-big);
}

.main-sections {
  width: 100%;
  max-width: clamp(300px, calc(100% - var(--padding-bigger)), 850px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-xxl);
  background-color: hsl(var(--color-white-opacity)/.6);
  margin-block: 1.3rem;
  margin-inline: auto;
  scroll-margin-top: 80px;
  padding: var(--padding-xl) var(--padding-bigger);
  border: 0 solid var(--color-primary);
  border-left-width: 4pt;
  border-right-width: 4pt;
  border-radius: .25rem;
}

.row-sections {
  max-width: calc(100% - 1.2rem);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--padding-bigger);
  margin-inline: auto;
  padding: var(--padding-big) var(--padding-bigger);

  @media (width <=calc(760px + 1.2rem)) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--padding-xl);
  }
}

.grid-sections {
  width: max-content;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  margin-inline: auto;
  gap: var(--padding-bigger);
  margin-inline: auto;
  padding: var(--padding-big) var(--padding-bigger);

  @media (width <=calc(760px + 1.2rem)) {
    grid-template-columns: 1fr;
  }

  &.grid-sections {
    grid-template-columns: repeat(auto-fit, minmax(40dvw, 1fr));
  }
}

.hero-sections {
  width: 100%;
  min-height: calc(100dvh - var(--height-main-head));
  /* height: calc(100dvh - var(--height-main-head)); */
  /* max-height: calc(100dvh - var(--height-main-head)); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: var(--padding-bigger);
  background-color: hsla(var(--color-dark-opacity) / .5);
  padding: var(--padding-bigger) var(--padding-null);
  margin-inline: auto;
  overflow: hidden;
  position: relative;

  .hero-sections-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: flex;
    filter: grayscale(.4) brightness(.4);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}

.hero-articles {
  width: max-content;
  max-width: calc(100% - var(--padding-xl));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--padding-bigger);
  background-color: hsla(var(--color-dark-opacity) / .5);
  backdrop-filter: blur(var(--padding-small));
  color: var(--color-white);
  font-size: var(--font-size-text-hero);
  border-radius: var(--border-radius-squircle);
  margin-inline: auto;
  padding: var(--padding-xl) var(--padding-xxl);
  position: relative;
  text-shadow: var(--text-shadow);

  &>* {
    font-size: var(--font-size-text-hero);
  }

  .hero-articles-title {
    color: var(--color-white);
    font-family: var(--font-family-variable);
    font-size: max(1svw, var(--font-size-title-hero));
    font-weight: var(--font-weight-bold);
    text-align: center;
    letter-spacing: .33rem;
  }

  p {
    width: calc(60rem - var(--padding-bigger));
    font-size: calc(var(--font-size-text-hero) * 0.9);
    text-align: center;
    margin-inline: auto;
    text-wrap: pretty;
  }

  .hero-articles-stats-aside {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: row dense;
    margin-inline: auto;
    gap: var(--padding-big);
    padding: var(--padding-regular) var(--padding-big);

    @media (width <=calc(760px + 1.2rem)) {
      grid-template-columns: repeat(2, 1fr);
    }

    .hero-articles-stats {
      display: flex;
      aspect-ratio: 1/1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--padding-small);
      text-align: center;
      background-color: hsla(var(--color-white-opacity) / .015);
      backdrop-filter: blur(var(--padding-small));
      border-radius: var(--border-radius);
      margin-inline: auto;
      padding: var(--padding-regular);

      .hero-articles-stats-number {
        width: 100%;
        font-family: var(--font-family-bold);
        font-size: var(--font-size-text-hero);
        font-weight: var(--font-weight-bold);
        text-align: center;
      }

      .hero-articles-stats-description {
        width: 100%;
        font-family: var(--font-family-light);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-small);
        text-transform: lowercase;
        text-align: center;
      }
    }
  }

  .hero-articles-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }

  img {
    width: 100%;
    max-width: 40dvh;
    height: auto;
    max-height: 40dvh;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-inline: auto;
  }
}

.main-articles {
  min-width: clamp(300px, 100%, 650px);
  width: 100%;
  max-width: clamp(300px, 100%, 850px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-big);
  background-color: var(--color-white);
  /* box-shadow: var(--box-shadow-container); */
  margin-inline: auto;
  padding: var(--padding-bigger) var(--padding-bigger);
  border-radius: var(--border-radius);
}

.review-articles {
  width: 100%;
  max-width: 80dvw;
  position: relative;

  a.cta-links {
    width: max-content;
    margin-inline: auto 0;
    margin-block: var(--padding-regular) 0;
  }
}

.stars-container {
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--padding-small);
  padding: var(--padding-regular) var(--padding-null);
}

.portfolio-articles-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-big);
}

.service-formulas {
  padding: var(--padding-bigger);
  background-color: var(--color-background);
}

.formulas {
  max-width: clamp(300px, 100%, 1200px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--padding-bigger);

  .main-sections-title {
    grid-column: 1/-1;
  }
}

.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--padding-big);
  background-color: var(--color-white);
  background-color: hsla(var(--color-purple-opacity) / .2);
  border: 3px solid hsla(var(--color-purple-opacity) / .4);
  padding: var(--padding-bigger);
  border-radius: var(--border-radius-squircle);
  /* box-shadow: var(--box-shadow-container); */

  transition: box-shadow .175s ease-out;

  /* &:hover{
    box-shadow:var(--box-shadow-container-hover);
  } */
}

.card .formulas-articles-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-regular);
  font-size: var(--font-size-title-h3);
  margin-bottom: var(--padding-big);
  color: var(--color-dark);
}

.card .price {
  display: block;
  text-align: right;
  font-size: var(--font-size-small);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.formulas-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius-squircle);
}

.card .description {
  font-size: var(--font-size-small);
  margin-bottom: var(--padding-bigger);
}

.features {
  list-style-type: none;
  padding-left: var(--padding-null);
  margin-bottom: var(--padding-xl);
}

.features li {
  margin-bottom: var(--padding-big);
}

.cta {
  width: 100%;
  max-width: calc(100% - var(--padding-bigger));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--padding-regular);
  margin-top: auto;

  .cta-text {
    width: 100%;
    max-width: 100%;
    text-align: center;
    text-transform: italic;
    color: var(--color-grey-dark);
    font-size: var(--font-size-small);
    margin-inline: auto;
  }
}

.cta .btn {
  background-color: var(--color-cta);
  color: var(--color-white);
  padding: var(--padding-big) var(--padding-bigger);
  text-decoration: none;
  border-radius: 4px;
  font-weight: var(--font-weight-small);
  margin-inline: auto;
}

.cta .btn:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-white);
}

form,
#contactForm {
  grid-column: 1/-1;
  min-width: clamp(300px, 100%, 650px);
  width: 100%;
  max-width: clamp(300px, 100%, 850px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-big);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  margin-inline: auto;
  margin-block: var(--padding-small);
  padding: var(--padding-regular) var(--padding-bigger);
}

form::selection,
#contactForm ::selection {
  background-color: inherit;
}

form label,
#contactForm label {
  font-family: var(--font-family-monospace);
  font-weight: var(--font-weight-small);
  letter-spacing: .025em;
  font-size: var(--font-size-text);
  line-height: var(--line-height-bigger);
  color: var(--color-dark);
  margin-block: var(--padding-small) var(--padding-null);
}

.rgpd-input-wrapper {
  width: 100%;
  display: grid;
  grid-template-areas:
    "btn rgpd rgpd";
  gap: var(--padding-big);
  justify-content: center;
  align-items: flex-start;
  margin-inline: auto;
}

.rgpd-input-wrapper .rgpd {
  grid-area: "btn";
  display: none;
}

.rgpd-input-wrapper .rgpd,
.rgpd-input-wrapper .rgpd:after,
.rgpd-input-wrapper .rgpd:before,
.rgpd-input-wrapper .rgpd *,
.rgpd-input-wrapper .rgpd *:after,
.rgpd-input-wrapper .rgpd *:before,
.rgpd-input-wrapper .rgpd+.rgpd-btn {
  box-sizing: border-box;
}

.rgpd {
  grid-area: btn;
  display: none;

  &,
  &::after,
  &::before,
  & *,
  & *::after,
  & *::before,
  &+.rgpd-btn {
    box-sizing: border-box;
  }

  /* Remplacement ici : propre, valide et accepté par Vite/LightningCSS */
  &,
  & *,
  &+.rgpd-btn {
    &::selection {
      background: none;
    }
  }
}


.rgpd-btn {
  grid-area: btn;
}

.rgpd-text {
  width: 100%;
  grid-area: rgpd;
  cursor: pointer;
}

.rgpd-input-wrapper .rgpd+.rgpd-btn {
  outline: 0;
  display: block;
  width: 2.25em;
  height: 1.15em;
  aspect-ratio: 19/6;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rgpd-input-wrapper .rgpd+.rgpd-btn:after,
.rgpd-input-wrapper .rgpd+.rgpd-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.rgpd-input-wrapper .rgpd+.rgpd-btn:after {
  left: 0;
}

.rgpd-input-wrapper .rgpd+.rgpd-btn:before {
  display: none;
}

.rgpd-input-wrapper .rgpd:checked+.rgpd-btn:after {
  left: 50%;
}

.rgpd-input-wrapper .rgpd-light+.rgpd-btn {
  background: var(--color-warning);
  border-radius: 2em;
  padding: var(--padding-null);
  transition: all 0.4s ease;

  &:is([checked="true"]) {
    background: var(--color-valid);
  }
}

.rgpd-input-wrapper .rgpd-light+.rgpd-btn:after {
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: 0 0 var(--padding-small) 0 var(--color-purple);
  transition: all 0.2s ease;
}

.rgpd-input-wrapper .rgpd-light:checked+.rgpd-btn {
  background: var(--color-valid);
}

form textarea,
#contactForm textarea {
  min-width: calc(100% - var(--padding-bigger));
  max-width: calc(100% - var(--padding-bigger));
  min-height: max(10vh, 10em);
  max-height: max(25vh, 25em);
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: .025em;
  line-height: var(--line-height-bigger);
  padding: var(--padding-big) var(--padding-regular);
  margin-inline: auto;
}

input,
button,
form input,
form button,
#contactForm input,
#contactForm button {
  width: calc(100% - var(--padding-bigger));
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-text);
  letter-spacing: .025em;
  font-size: var(--font-size-text);
  line-height: var(--line-height-bigger);
  color: var(--color-dark);
  margin-inline: auto;
  padding: var(--padding-regular) var(--padding-big);
  cursor: pointer;

  &:is(.menu-links, .cta-links) {
    width: max-content;
    max-width: calc(100% - var(--padding-bigger));
  }

  &:disabled {
    color: var(--color-grey-dark);
  }
}

form button[type="submit"],
#contactForm button[type="submit"] {
  font-size: var(--font-size-text);
  padding: var(--padding-regular) var(--padding-big);
  margin-block: var(--padding-bigger) var(--padding-big);

  &:disabled {
    color: var(--color-grey-dark);
    cursor: not-allowed;
  }
}

select,
form select,
form .select,
#contactForm .select {
  width: calc(100% - var(--padding-bigger));
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  border: .15em solid var(--color-primary);
  border-radius: var(--border-radius-round);
  padding: var(--padding-small) var(--padding-regular);
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-text);
  cursor: pointer;
  line-height: var(--line-height-medium);
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
  margin-inline: auto;

  &.disabled {
    border-color: var(--color-grey-dark);

    &::after {
      background-color: var(--color-grey-dark);
    }
  }
}

select::after,
.select::after {
  content: "";
  justify-self: end;
  width: 0.8em;
  height: 0.5em;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  margin-inline: auto var(--padding-big);
}

select:focus+.focus {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: .15rem solid var(--color-secondary);
  border-radius: var(--border-radius-round);
}

select,
form select,
form .select:after,
#contactForm select,
#contactForm .select:after {
  grid-area: select;
}

form select,
#contactForm select {
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-round);
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
  cursor: pointer;
  margin: var(--padding-null);
  padding: var(--padding-regular);
}

form select [label],
#contactForm select [label] {
  color: var(--color-grey-dark);
}

form select option,
#contactForm select option {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-text);
  background-color: hsl(var(--color-white-opacity) / 0.9);
  color: var(--color-dark);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-round);
}

.main-foot {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding-big);
  padding: var(--padding-big) var(--padding-bigger);
  margin-block: var(--padding-xxxl) 0;
  z-index: 1;
  position: relative;
}

@media (prefers-color-scheme: dark) {

  div.select,
  #contactForm .select {
    padding: unset;
  }

  select,
  form select,
  #contactForm select,
  input,
  form input,
  #contactForm input,
  button,
  form button,
  #contactForm button,
  textarea,
  form textarea,
  #contactForm textarea {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-round);
  }

  select optgroup,
  form select [label],
  #contactForm select [label] {
    background-color: var(--color-primary);
    color: var(--color-dark);
  }


  textarea,
  form textarea,
  #contactForm textarea {
    border-radius: var(--border-radius-squircle);
  }

  input,
  form input,
  #contactForm input,
  button,
  form button,
  #contactForm button,
  textarea,
  form textarea,
  #contactForm textarea {
    border: .15em solid var(--color-primary);

    &:disabled {
      border-color: var(--color-grey-dark);
    }
  }

  button[type="submit"],
  #contactForm button[type="submit"] {
    &:not(disabled):hover {
      background-color: var(--color-valid);
      color: var(--color-dark);
    }
  }
}

@media (prefers-color-scheme: light) {

  select,
  form select,
  #contactForm select,
  input,
  form input,
  #contactForm input,
  button,
  form button,
  #contactForm button,
  textarea,
  form textarea,
  #contactForm textarea {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-radius: var(--border-radius-round);
  }


  textarea,
  form textarea,
  #contactForm textarea {
    border-radius: var(--border-radius-squircle);
  }

  input,
  form input,
  #contactForm input,
  button,
  form button,
  #contactForm button,
  textarea,
  form textarea,
  #contactForm textarea {
    border: .15em solid var(--color-primary);

    &:disabled {
      border-color: var(--color-grey-dark);
    }
  }

  button[type="submit"],
  #contactForm button[type="submit"] {
    &:not(disabled):hover {
      background-color: hsla(var(--color-valid-opacity) / .5);
      color: var(--color-dark);
    }

    &:not(disabled):active {
      background-color: hsla(var(--color-valid-opacity) / .75);
      border-color: hsla(var(--color-valid-opacity) / .75);
      color: var(--color-dark);
    }

    &:not(disabled):focus {
      border-color: var(--color-valid);
    }
  }
}

@media (width > 1920px) {

  html,
  body {
    font-size: calc(var(--font-size-base) * 2);
  }

  body {
    max-width: 4000px;
  }

  .termsfeed-com---pc-dialog {
    width: 100% !important;
    max-width: 70svw !important;
  }

  .termsfeed-com---nb .cc-nb-title,
  .termsfeed-com---pc-dialog .cc-cp-body-content-entry-title,
  .termsfeed-com---pc-dialog .cc-pc-head-title-headline {
    font-size: calc(var(--font-size-base) * 2) !important;
  }

  .termsfeed-com---nb .cc-nb-text,
  .termsfeed-com---pc-dialog .cc-cp-body-content-entry-text,
  .termsfeed-com---pc-dialog .cc-cp-foot-save {
    font-size: calc(var(--font-size-base) * 1.75) !important;
  }

  .termsfeed-com---nb .cc-nb-okagree,
  .termsfeed-com---nb .cc-nb-reject,
  .termsfeed-com---nb .cc-nb-changep,
  .termsfeed-com---pc-dialog .cc-pc-head-title-text,
  .termsfeed-com---pc-dialog input[type=checkbox].cc-custom-checkbox+label {
    font-size: calc(var(--font-size-base) * 1.5) !important;
  }

  .termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link {
    font-size: calc(var(--font-size-base) * 1.15) !important;
  }

  h1 {
    font-size: calc(var(--font-size-title-h1) * 1.5);
  }

  h2 {
    font-size: calc(var(--font-size-title-h2) * 1.5);
  }

  h3 {
    font-size: calc(var(--font-size-title-h3) * 1.5);
  }

  h4 {
    font-size: calc(var(--font-size-title-h4) * 1.5);
  }

  h5 {
    font-size: calc(var(--font-size-title-h5) * 1.5);
  }

  h6 {
    font-size: calc(var(--font-size-title-h6) * 1.5);
  }

  .card .formulas-articles-title {
    font-size: calc(var(--font-size-title-h3) * 1.5);
  }

  p,
  ul,
  strong,
  label,
  input,
  a,
  button label,
  form label,
  #contactForm label,
  details,
  summary {
    font-size: calc(var(--font-size-text) * 1.5);
  }

  a,
  a:visited,
  button {

    &:is(.cta-links),
    &:is(.phone-link-head) {
      font-size: calc(var(--font-size-text) * 1.25);
    }

    &:is(.main-menu-links, .menu-links) {
      font-size: calc(var(--font-size-menu-links) * 1.25);
    }
  }

  .card .description,
  .cta .cta-text,
  .card .price,
  em {
    font-size: calc(var(--font-size-small)*1.5);
  }

  form,
  #contactForm {
    max-width: clamp(1920px, 100%, 2400px);
    gap: calc(var(--padding-big) * 2);
  }

  form select,
  #contactForm select,
  select {
    min-height: 2rem;
    font-size: min(1rem, calc(var(--font-size-text) * 1.5));
  }

  select option,
  select optgroup,
  select optgroup option,
  form select option,
  #contactForm select option,
  form select optgroup,
  #contactForm select optgroup {
    font-size: min(1rem, 16px);
  }

  .rgpd-input-wrapper {
    margin-block: 2rem 0;
  }

  small {
    font-size: calc(var(--font-size-text) * 1.25);
  }

  .main-nav {
    @media (orientation: landscape) {
      max-width: 70dvw;
    }
  }

  .nav-btn {
    .nav-btn-icon-open {
      transform: scale(2.5);
    }
  }

  .main-sections {
    max-width: clamp(1920px, calc(100% - var(--padding-bigger)), 2400px);
    gap: calc(var(--padding-xxl) * 2);
  }

  .main-articles {
    max-width: clamp(1920px, 100%, 2400px);
    gap: calc(var(--padding-big) * 2);
  }

  .formulas {
    grid-template-columns: repeat(auto-fill, minmax(calc((100svw / 2 / 3)), 1fr))
  }
}

@media (width <=860px) {

  .material-symbols-rounded {
    font-size: 18px;
  }

  h1 {
    font-size: calc(var(--font-size-title-h1) * .725);
  }

  h2 {
    font-size: calc(var(--font-size-title-h2) * .75);
  }

  h3 {
    font-size: calc(var(--font-size-title-h3) * .775);
  }

  h4 {
    font-size: calc(var(--font-size-title-h4) * .8);
  }

  h5 {
    font-size: calc(var(--font-size-title-h5) * .825);
  }

  h6 {
    font-size: calc(var(--font-size-title-h6) * .85);
  }

  a,
  a:visited {
    font-size: calc(var(--font-size-text) * .85);

    &:is(.cta-links) {
      font-size: calc(var(--font-size-text) * .85);
    }
  }

  p,
  li {
    font-size: calc(var(--font-size-text) * .85);
  }

  form label,
  #contactForm label,
  select,
  form select,
  #contactForm select,
  input,
  form input,
  #contactForm input,
  button,
  form button,
  #contactForm button,
  textarea,
  form textarea,
  #contactForm textarea,
  form button[type="submit"] #contactForm button[type="submit"] {
    width: 100%;
  }
}