/* General css // CSS system

--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #e67e22
- Tints:
#fdf2e9
#fae5d3
#eb984e

- Shades: 
#cf711f
#45260a

- Accents:
- Greys

#888
#767676 (lightest grey allowed on #fff)
#6f6f6f (lightest grey allowed on #fdf2e9)
#555
#333

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/* -------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.5rem var(--color-focus-ring);
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}
:root {
  --section-spacing: 12rem;
}
/* -------------------------*/
/* HEADER SECTION START */
/* -------------------------*/
header {
  height: 100vh;
  position: relative;
  gap: 15rem;
  flex-direction: column;
  align-items: center;
}
nav {
  position: fixed;
  top: 1rem;
  width: 100%;
  border-radius: 15rem;
  z-index: 20;
}
.btn-mobile-nav {
  z-index: 20;
  display: none;
  border: none;
  background: none;
  cursor: pointer;
}
.btn-mobile-nav:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.btn-mobile-nav:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 4px;
}

.hamburger-menu {
  width: 4rem;
  height: 4rem;
  color: var(--color-primary);
}

.hamburger-menu[name="close-menu"] {
  display: none;
  width: 4.4rem;
  height: 4.4rem;
}

.nav-bar {
  justify-content: space-between;
  padding: 2rem 4.8rem;
  font-weight: 300;
  width: 70%;
  background-color: var(--color-surface-nav);
}
.logo-header {
  font-weight: 400;
  cursor: default;
  align-items: center;
  gap: 2rem;
}
.logo-header-svg {
  fill: var(--color-text);
  width: 3.6rem;
  height: 3.6rem;
}

.logo-name {
  color: var(--color-text);
  font-size: 2.4rem;
  font-weight: 500;
}
.header-links {
  align-items: center;
}
.nav-links {
  gap: 2.5rem;
}
nav > ul {
  align-items: center;
}
ul > li {
  list-style: none;
}
ul > li > a:link:hover,
ul > li > a:visited:hover {
  transition: 0.1s;

  color: var(--color-primary);
  text-decoration: underline;
}
ul > li > a:link,
ul > li > a:visited {
  text-decoration: none;
  color: var(--color-text-strong);
  font-size: 1.8rem;
  font-weight: 300;
}
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border: none;
  background: transparent;
  color: var(--color-text-strong);
  cursor: pointer;
}
#theme-toggle:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
#theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 4px;
}
#theme-toggle:hover {
  color: var(--color-primary);
}
#theme-toggle ion-icon {
  font-size: 2.2rem;
}
/* -------------------------*/
/* HEADER SECTION END */
/* -------------------------*/

/* -------------------------*/
/* HERO START*/
/* -------------------------*/
.hero {
  padding-top: 12rem;
  width: 100%;
  gap: 20rem;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.hero-img {
  display: flex;
  justify-content: center;
  background: var(--color-hero-circle);

  border-radius: 100%;
  width: 40rem;
  height: 40rem;
  align-items: center;
}
.hero-img > img {
  display: flex;
  justify-content: center;
  width: 30rem;
  height: 30rem;
  transition: 0.8s;
}
.hero-img > img:hover {
  transform: rotate(360deg);
}
.hero-description {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50rem;
  gap: 4rem;
  flex-direction: column;
}
.hero-title {
  flex-direction: column;
  gap: 0.5rem;
}
.hero-p-1 {
  font-size: 1.6rem;
  color: var(--color-text);
}
.hero-p-2 {
  font-size: 2.4rem;
  color: var(--color-text);
}
.hero-description > p {
  align-self: center;
}
.hero-text {
  margin-top: 4rem;
}
.btn-container {
  margin-top: 3rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.social-media {
  margin-top: 1.5rem;
  gap: 4.5rem;
}
.social-media-hero {
  justify-content: center;
}
.social-logo {
  transform: scale(2);
  background-color: var(--color-surface-solid);
  width: 2.6rem;
  height: 2.6rem;

  cursor: pointer;
  fill: var(--color-accent);
  padding: 0.2rem;
  border: var(--color-primary) solid 0.3rem;
  border-radius: 48%;
  transition: 0.4s ease-in;
  border-color: var(--color-border-accent);
}
.social-logo:hover {
  transform: scale(3);
  fill: var(--color-primary);
}
/* -------------------------*/
/* HERO END*/
/* -------------------------*/
/* -------------------------*/
/* COMPETENCE START*/
/* -------------------------*/
.section-competence {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-margin-top: 10rem;
  padding: 12rem 0 8rem;
  margin-bottom: var(--section-spacing);
}
.competence-header {
  flex-direction: column;
  align-items: center;
  padding: 0 0 6rem;
}
.competence-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  row-gap: 4rem;
  column-gap: 9rem;
  width: min(177rem, 100%);
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.competence-header > p {
  color: var(--color-text);
}

.competence-text-container {
  width: 100%;
  min-width: 0;
  height: 100%;
}
.competence-text-surface {
  display: grid;
  gap: 4.2rem;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  height: 100%;
}
.competence-text-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.competence-item-icon {
  font-size: 2.4rem;
  color: var(--color-primary);
  margin-top: 0.2rem;
}
.competence-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.competence-item-content > p {
  color: var(--color-text);
  margin: 0;
}
.competence-cart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  justify-items: stretch;
  align-items: stretch;
  align-content: stretch;
  gap: 3rem;
  min-width: 0;
  height: 100%;
}
.cart-item {
  border-radius: var(--card-radius);
  overflow: hidden;
  padding: var(--card-padding);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  transition: all 0.3s ease-in-out;
  flex-direction: column;
  gap: 3rem;
  height: 100%;
  text-align: center;
}

.cart-item-header {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.stack-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
}
.stack-list > li {
  padding: 0.8rem 1.2rem;
  border-radius: 100rem;
  border: 0.1rem solid var(--color-border-chip);
  background-color: var(--color-surface-subtle);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
}
.text-container {
  flex-direction: column;
  gap: 4rem;
}

.competance-label {
  align-items: center;
  justify-content: space-around;
  gap: 5rem;
}
.niv-comp {
  margin-left: 1rem;
  color: var(--color-text-muted);
  font-size: 1.4rem;
}
/* -------------------------*/
/* COMPETENCE END*/
/* -------------------------*/

/* ----------------------------- */
/* ABOUT ME / CONCERNANT START  */
/* ---------------------------- */
.about-me-section {
  width: 100%;

  margin-bottom: var(--section-spacing);
  flex-direction: column;
  align-items: center;
  position: relative;
}
.section-about-heading {
  padding: 15rem 0;
  text-align: center;
}
.about-me-container {
  position: relative;

  flex-direction: column;
  gap: 15rem;
  align-items: center;
  width: 100%; /*     ATTENTION A VéRIFIER */

  justify-content: center;
}
.background-svg {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.me-concernant {
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  width: 100%;
}
.about-me-card {
  background-color: var(--card-bg);
  padding: var(--card-padding);
  gap: 2.4rem;
  justify-content: center;
  flex-direction: column;
  width: min(57rem, 100%);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  border: var(--card-border);
  transition: all 0.3s ease-in-out;
}
.abt-me-img-box {
  justify-content: center;
}
.abt-me-img-box > img {
  height: 20rem;
}
.about-me-heading {
  text-align: center;
}
.about-me-card-txt {
  text-align: center;
}
.article-container {
  width: 84%;

  grid-template-columns: 1fr 1fr 1fr;
  gap: 8rem;
  text-align: center;
}
.article-box {
  align-items: center;
  gap: 2rem;
  flex-direction: column;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  transition: all 0.3s ease-in-out;
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  background-color: var(--card-bg);
}
.article-box:hover {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);

  transform: translate(0, -8%);
}

.about-table {
  width: min(130rem, 100%);
  margin: 0 auto;
  padding: 0 2rem;
  gap: 4rem;
  align-items: stretch;
}
#about .about-me-container {
  display: grid;
  grid-template-columns: minmax(28rem, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 8rem;
  width: min(130rem, 100%);
  padding: 0 2rem;
}
@media (min-width: 75em) {
  #about .about-me-container {
    width: min(150rem, 100%);
    gap: 11rem;
  }
}
#about .me-concernant {
  justify-content: flex-start;
  gap: 0;
}
#about .about-carousel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
}
#about .about-carousel-btn {
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  background-color: var(--card-bg);
  color: var(--color-text-strong);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#about .about-carousel-btn > ion-icon {
  font-size: 2.2rem;
}
#about .about-carousel-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
#about .about-carousel-viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  padding-top: 4rem;
  padding-right: 0.8rem;
  padding-bottom: 1.6rem;
  padding-left: 0.8rem;
}
#about .about-carousel-track {
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 0.35s ease;
  will-change: transform;
}
#about .about-carousel-track:not(.is-ready) {
  visibility: hidden;
}
#about .about-carousel-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0 1.6rem;
}
#about .about-carousel-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: stretch;
}
#about .about-carousel-cards .about-item {
  width: 100%;
  min-width: 0;
}
@media (max-width: 72em) {
  #about .about-me-container {
    grid-template-columns: 1fr;
    gap: 6rem;
  }
  #about .about-carousel {
    gap: 1rem;
  }
  #about .about-carousel-cards {
    grid-template-columns: 1fr;
  }
  #about .about-item {
    min-height: 52rem;
    justify-content: flex-start;
    padding-top: 5.6rem;
  }
}
@media (max-width: 48em) {
  #about .about-carousel-btn {
    width: 4.2rem;
    height: 4.2rem;
  }
  #about .about-carousel-slide {
    padding: 0 0.8rem;
  }
}
.about-table-heading {
  text-align: center;
}
.about-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
  height: 6rem;
  width: 6rem;
  padding: 1rem;
  color: var(--color-text-inverse);
  fill: var(--color-text-inverse);
  background-color: var(--color-primary-alt);
  border-radius: 50%;
}

.about-item {
  position: relative;
  flex-direction: column;
  gap: 9rem;
  padding: var(--card-padding);
  transition: all 0.3s ease-in-out;
  border-radius: var(--card-radius);
  height: 100%;

  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
}
.about-item:hover {
  box-shadow: var(--card-shadow);
  background-color: var(--color-surface-hover);
}
.about-item > h3 {
  align-self: center;
}
#about .about-item {
  box-shadow: none;
}
#about .about-btn-container {
  margin-top: auto;
  padding-top: 7rem;
}
#about .about-btn {
  margin-top: 0;
}
#about .about-item > h3 {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
}
@media (min-width: 72.0625em) {
  #about {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 8rem;
  }
  #about .about-item {
    min-height: 52rem;
    justify-content: flex-start;
    padding-top: 5.6rem;
  }
}
@media (max-width: 72em) {
  #about .about-item > h3 {
    white-space: normal;
    margin-top: 0.8rem;
  }
}
@media (max-width: 48em) {
  #about .about-btn-container {
    margin-top: 0;
    padding-top: 4rem;
  }
  #about .about-btn {
    margin-top: 0;
  }
  #about .about-item > h3 {
    white-space: normal;
    font-size: 2rem;
    letter-spacing: normal;
  }
}

.about-item-list {
  flex-direction: column;
  gap: 2rem;
}
#about .about-item-list {
  align-self: center;
  width: min(100%, 50rem);
  max-width: 100%;
  align-items: stretch;
}
#about .about-item-list > li {
  width: 100%;
  max-width: 100%;
  text-align: left;
}
.about-btn-container {
  display: flex;
  gap: 1rem;
}
.about-btn {
  margin-top: 10rem;
}
.cta-link.about-btn-contact {
  justify-content: center;
  border-radius: 15rem;
  color: var(--color-primary);
  background-color: var(--color-primary-alt);
}
/* ----------------------------- */
/* ABOUT ME / CONCERNANT END  */
/* ---------------------------- */
/* ----------------------------- */
/* PROJECT SECTION START  */
/* ---------------------------- */
.project-section {
  padding-top: 15rem;
  text-align: center;
  margin-bottom: var(--section-spacing);
  align-items: center;
}
#projet {
  margin-bottom: 58rem;
}
.project-article-container {
  width: 100%;
  flex-direction: column;
  gap: 12rem;
  align-items: center;
}
.project-details-card {
  width: min(84rem, 92%);
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  border: var(--card-border);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition:
    box-shadow 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}
.project-details-card > p {
  text-align: left;
}
#projet .project-details-card .project-highlights {
  margin: 0;
  padding-left: 1.8rem;
  display: grid;
  gap: 0.8rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: var(--line-height-body);
  color: var(--color-text);
}
#projet .project-details-card .project-highlights:empty {
  display: none;
}
#projet .project-details-card .project-highlights > li {
  margin: 0;
  font: inherit;
  line-height: inherit;
  list-style: disc;
  list-style-position: outside;
}
#projet .project-details-card .project-highlights > li::marker {
  color: var(--color-text-strong);
}
.project-stack {
  flex-wrap: wrap;
  gap: 1rem;
}
.project-stack:empty {
  display: none;
}
.project-chip {
  list-style: none;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-chip);
  background-color: var(--color-surface-hover);
  color: var(--color-text-strong);
  font-size: 1.4rem;
}
.project-links {
  gap: 1rem;
}
.project-link-btn {
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface-solid);
  color: var(--color-text-strong);
  font-size: 1.5rem;
  text-decoration: none;
}
.project-link-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.project-link-btn ion-icon {
  font-size: 1.8rem;
}
.project-link-btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.project-carousel {
  width: min(120rem, 95%);
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.project-carousel-btn {
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  background-color: var(--card-bg);
  color: var(--color-text-strong);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.project-carousel-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.project-carousel-btn > ion-icon {
  font-size: 2.2rem;
}
.project-carousel-viewport {
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 4rem;
  box-shadow: 0 0.1rem 0.5rem var(--color-shadow);
}
.project-carousel-track {
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 0.35s ease;
  will-change: transform;
}
.project-slide {
  flex: 0 0 100%;
  min-height: 39rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.project-slide--node-auth {
  background-image: url("../assets/projects/node_api.avif");
}
.project-slide--omnifood {
  background-image: url("../assets/projects/omnifood-1.avif");
}
.project-slide--one-chair {
  background-image: url("../assets/projects/one-chair-2.avif");
}
.project-slide--code-magazine {
  background-image: url("../assets/projects/the-code-magazine.avif");
}

.project-details-card.is-updating {
  animation: project-card-fade 0.26s ease-out;
}

@keyframes project-card-fade {
  from {
    opacity: 0.92;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 780px) {
  .project-carousel {
    width: 100%;
    gap: 1rem;
  }
  .project-carousel-btn {
    width: 4.2rem;
    height: 4.2rem;
  }
  .project-slide {
    min-height: 28rem;
  }
}
/* ----------------------------- */
/* PROJECT SECTION END  */
/* ---------------------------- */

/* GLOBAL SETTING  */
h1,
h2,
h3,
h4 {
  font-family: var(--font-headings);
  font-weight: 700;
  line-height: var(--line-height-headings);
}
h1 {
  font-size: 3.4rem;
  color: var(--color-primary);
  cursor: default;
}
h2 {
  color: var(--color-primary);
  font-size: 2.4rem;
  cursor: default;
}
h3 {
  color: var(--color-primary);
  font-size: 2rem;
  cursor: default;
}
h4 {
  font-size: 1.6rem;
  cursor: default;
}
P {
  color: var(--color-text);
  font-size: 1.6rem;
  letter-spacing: 0.075rem;
  line-height: 1.9rem;
}
.btn {
  font-size: 1.6rem;
  padding: 0.8rem 2.3rem;
  border-radius: 5rem;
  background-color: var(--color-surface-solid);
  border: 0.1rem solid var(--color-border-default);
  color: var(--color-text);
  transition: 0.2s ease-in-out;
}
.btn:link,
.btn:active {
  text-decoration: none;
  justify-content: center;
}
.btn-contact {
  color: var(--color-text-inverse);
  /* background-color: #000; */
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-contact:hover {
  color: var(--color-text-strong);
  border-color: var(--color-text-strong);
  background-color: var(--color-surface-solid);
}
.btn-cv {
  gap: 1rem;
  background-color: var(--color-primary);
  border: 0.1rem solid var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 0.1rem 0.5rem var(--color-shadow);
  justify-content: center;
  align-items: center;
}
.btn-cv:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: 0.1rem solid var(--color-primary);
}
.btn:hover {
  cursor: pointer;
}
.download-cv {
  height: 4.2rem;
  color: currentColor;
  height: 2.4rem;
  height: 2.4rem;
}
.grid {
  display: grid;
}
.grid-2--col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid-3--col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid-2--rows {
  grid-template-rows: 1fr 1fr;
}

@media (max-width: 48em) {
  .grid-2--col {
    grid-template-columns: 1fr;
  }
}
.logo {
  width: 6.6rem;
  height: 6.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  line-height: 1;
  background-color: var(--color-primary-alt);
  padding: 1rem;
  color: var(--color-text-inverse);
  fill: currentColor;
  border-radius: 50rem;
}
.logo-competance {
  fill: var(--color-primary-alt);
  padding: 0.1rem;
  border-radius: 50rem;
  width: 3rem;
  height: 3rem;
}

/* ------- HELPER CLASS --------- */

.flex-container {
  display: flex;
}

.absolut-positionning {
  position: absolute;
}
.cta-section {
  position: absolute;
  align-items: center;
  width: 45%;
  gap: 5rem;
  background-color: var(--color-surface-solid);
  padding: 6rem 15rem;
  margin: auto;
  top: -9rem;
  border-radius: 2rem;
  box-shadow: 0 0.1rem 0.5rem var(--color-shadow);
  padding: 5rem;
  justify-content: space-between;
}
#contact {
  background-color: var(--card-bg);
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  transition: all 0.3s ease-in-out;
}

.cta-text {
  color: var(--color-text);
}
.cta-section > h3 {
  color: var(--color-primary);
  font-size: 3rem;
  font-weight: 600;
}
.cta-section > p {
  text-align: center;
  flex-basis: 30rem;
}
.cta-contact-btn {
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 2.3rem;
  border-radius: 2rem;
  background-color: var(--color-primary-alt);
}
.contact-svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}
.download-svg {
  stroke: currentColor;
  color: var(--color-text-inverse);
}
.cta-link:link,
.cta-link:visited {
  color: var(--color-text-inverse);
  font-size: 1.6rem;
  text-decoration: none;
  transition: 0.6s;
  box-shadow: 0 0.1rem 0.5rem var(--color-shadow);
}

.cta-link:link:hover,
.cta-link:visited:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-solid);
  border: none;
}

.footer-img {
  z-index: 2;
  width: 22rem;
  position: absolute;
  left: 7rem;
  top: -20rem;
}
footer {
  position: relative;
  margin-top: 12rem;
  gap: 4.5rem;
  justify-content: center;

  max-width: 100%;
  background-repeat: repeat;
  background-size: contain;

  border-top: var(--color-primary) solid 0.5rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.footer-info {
  flex-direction: column;
  width: 44rem;
  gap: 8.5rem;
  padding: 2rem;
}

.footer-menu {
  margin: auto 5rem;
  margin-top: 15rem;

  column-gap: 15rem;
  width: auto;
}
.footer-link-container {
  padding: 2rem;
  flex-direction: column;
  gap: 4rem;
}
.footer-link {
  flex-direction: column;
  gap: 2.5rem;
}
.footer-link > li > a:link,
.footer-link > li > a:visited {
  font-size: 1.6rem;
}
.footer-text-about {
  text-align: left;
  font-family: var(--font-body);
  width: 100%;
  max-width: 44rem;
}
.footer-text-about p {
  line-height: var(--line-height-body);
}
.contact-info-container {
  flex-direction: column;
  gap: 4rem;
  padding: 2rem;
}
.contact-info-footer {
  flex-direction: column;
  gap: 2.2rem;
}
.contact-info-footer > p {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.contact-info-footer > p > svg {
  fill: currentColor;
  width: 1.6rem;
  height: 1.6rem;
}
.social-media-container-footer {
  padding: 2rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  grid-column: 2/3;
}

.footer-social-media {
  height: 7rem;
  flex-direction: row;
  align-items: center;
  gap: 6rem;
}
footer > p {
  color: var(--color-text-inverse);
  font-size: 1.4rem;
  font-weight: 500;
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(
    to left,
    var(--color-primary),
    var(--color-accent) 80%
  );
  justify-content: center;
  align-items: center;
}