/* =============================================================================
   FONTS
============================================================================= */
@font-face {
   font-family: 'PP Pangram Sans';
   src: url('../fonts/PPPangramSans-Light.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PP Pangram Sans';
   src: url('../fonts/PPPangramSans-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PP Pangram Sans';
   src: url('../fonts/PPPangramSans-Extrabold.woff2') format('woff2');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

/* =============================================================================
   TOKENS
============================================================================= */
:root {
   /* Colors */
   --color-primary: #C489A7;
   --color-primary-hover: #E88CBC;
   --color-light: #fff;
   --color-dark: #000;
   --color-text: #fff;
   --color-border: #fff;
   --gradient-bg-color-top: #070707;
   --gradient-bg-color-bottom: #1B1C34;
   --line-height: 1.3;
   /* Marquee animation duration */
   --marquee-duration: 15s;
}

/* =============================================================================
   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,
h5,
p,
figure,
blockquote,
dl,
dd,
dt,
ul,
ol,
li {
   margin-block-end: 0;
   margin-block-start: 0;
}

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

/* Set core body defaults */
body {
   min-height: 100vh;
   margin: 0;
}

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

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5 {
   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-family: inherit;
   font-size: inherit;
}

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

/* =============================================================================
   BASE / NORMALIZE
============================================================================= */
html {
   font-size: 100%;
   scroll-behavior: smooth;
}

body {
   position: relative;
   padding-bottom: 80px;
   font-family: 'PP Pangram Sans', sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: var(--line-height);
   color: var(--color-text);
   overflow-x: hidden;
   background: linear-gradient(to bottom, var(--gradient-bg-color-top) 0%, var(--gradient-bg-color-bottom) 100%);
}

button {
   padding: 0;
   cursor: pointer;
   text-decoration: none;
   background: none;
   border: none;
   color: inherit;
}

a {
   transition: color 0.3s ease;
}

a:hover,
a:focus-visible {
   color: var(--color-primary-hover);
}

dl,
dd,
dt {
   margin: 0;
}

.button {
   background-color: var(--color-primary);
   transition: all 0.3s ease;
}

.button:hover,
.button:focus-visible {
   background-color: var(--color-primary-hover);
}

ul:not([role='list']),
ol:not([role='list']) {
   list-style: none;
   padding-left: 0;
}

ul:not([role='list']) li,
ol:not([role='list']) li {
   position: relative;
   padding-left: 26px;
}


ul:not([role='list']) li:not(:last-child),
ol:not([role='list']) li:not(:last-child) {
   margin-bottom: 8px;
}

ul:not([role='list']) li::before {
   position: absolute;
   display: inline-block;
   left: 16px;
   top: calc(0.5em - 1px);
   content: '';
   width: 2px;
   height: 2px;
   background: currentColor;
   border-radius: 50%;
}

ol:not([role='list']) {
   counter-reset: list-counter;
}

ol:not([role='list']) li {
   counter-increment: list-counter;
   padding-left: 40px;
}

ol:not([role='list']) li::before {
   position: absolute;
   left: 0;
   width: 40px;
   padding-right: 8px;
   display: inline-block;
   content: counter(list-counter) '.';
   font-size: inherit;
   line-height: inherit;
   text-align: right;
}

/* =============================================================================
   TYPOGRAPHY
============================================================================= */
h1 {
   /* 46px at 320px, 80px at 1140px */
   font-size: clamp(2.875rem, 2.0457rem + 4.1463vw, 5rem);
   font-weight: 900;

}

h2 {
   /* 30px at 360px, 44px at 1140 */
   font-size: clamp(1.875rem, 1.4712rem + 1.7949vw, 2.75rem);
   font-weight: 700;
}

h3 {
   /* 23px at 360px, 35px at 1140 */
   font-size: clamp(1.4375rem, 1.0913rem + 1.5385vw, 2.1875rem);
   font-weight: 700;
}

h4 {
   /* 20px at 360px, 25px at 1140 */
   font-size: clamp(1.25rem, 1.1058rem + 0.641vw, 1.5625rem);
   font-weight: 700;
}


/* =============================================================================
   LAYOUT
============================================================================= */
.container {
   position: relative;
   width: 100%;
   max-width: 1168px;
   margin-inline: auto;
   padding-inline: 24px;
   /* Grid layout */
   --grid-gap: 20px;
   --grid-col: calc((100% - 11 * var(--grid-gap)) / 12);
   --grid-step: calc(var(--grid-col) + var(--grid-gap));
}

.offset-1 {
   margin-left: var(--grid-step);
}

.offset-2 {
   margin-left: calc(2 * var(--grid-step));
}

.width-8 {
   width: calc(8 * var(--grid-step) - var(--grid-gap));
}

@media (max-width: 768px) {
   body {
      padding-bottom: 100px;
   }

   .offset-1,
   .offset-2 {
      margin-left: 0;
   }

   .width-8 {
      width: 100%;
   }
}

/* =============================================================================
   COMMON COMPONENTS
============================================================================= */
.section {
   --content-offset: 70px;
   position: relative;
   font-size: clamp(1.25rem, 1.1058rem + 0.641vw, 1.5625rem);
}

.section__header {
   position: relative;
   margin-bottom: 32px;
   padding-left: var(--content-offset);
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.section__header--indent-large {
   margin-bottom: 32px;
}

.section__subtitle {
   font-weight: 700;
   line-height: 1.2;
}

.section__icon {
   position: absolute;
   left: 0;
   top: 2px;
   width: 40px;
   padding: 2px;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.section__icon svg {
   max-width: 100%;
   max-height: 100%;
   display: block;
}

.section__content {
   padding-left: var(--content-offset);
}

.section__content--no-indent {
   padding-left: 0;
}

.section__text {
   line-height: 1.1;
}

@media (max-width: 768px) {

   .section {
      --content-offset: 42px;
   }

   .section__header {
      margin-bottom: 24px;
   }

   .section__icon {
      top: 0;
      width: 30px;
   }

   .section__content {
      display: flex;
      flex-direction: column;
      gap: 16px;
   }
}

.accordion__trigger {
   position: relative;
   padding-right: 32px;
   width: 100%;
   text-align: left;
   transition: color 0.3s ease;
}

.accordion__icon {
   position: absolute;
   top: 4px;
   right: 10px;
   color: var(--color-light);
   line-height: 1;
   transform: rotate(0);
   transition: transform 0.3s ease, color 0.3s ease;
}

.accordion__icon--center {
   top: 50%;
   transform: translateY(-50%);
}

.accordion__icon svg {
   height: 20px;
   display: block;
}

.accordion.is-open .accordion__icon {
   transform: rotate(-90deg);
}

.accordion.is-open .accordion__icon--center {
   transform: translateY(-50%) rotate(-90deg);
}

.accordion__content {
   overflow: hidden;
   height: 0;
   transition: height 0.3s ease;
}

.accordion__trigger:hover,
.accordion__trigger:focus-visible,
.accordion.is-open .accordion__trigger:hover,
.accordion__trigger:hover .accordion__icon,
.accordion__trigger:focus-visible .accordion__icon,
.accordion.is-open .accordion__trigger:hover .accordion__icon {
   color: var(--color-primary-hover);
}

.accordion.is-open .accordion__trigger,
.accordion.is-open .accordion__icon {
   color: var(--color-primary);
}

@media (max-width: 768px) {
   .accordion__icon svg {
      height: 16px;
   }
}



/* =============================================================================
   NAV
============================================================================= */
.nav {
   position: fixed;
   bottom: 12px;
   z-index: 10;
   width: 100%;
   text-align: center;
}

.nav__list {
   padding: 4px 32px;
   display: inline-flex;
   gap: 20px;
   align-items: center;
   list-style: none;
   border-radius: 40px;
   border: 2px solid var(--color-border);
   background: rgba(0, 0, 0, 0.7);
}

.nav__link {
   padding: 8px 12px;
   color: var(--color-text);
   text-decoration: none;
   font-weight: 500;
   font-size: 1.25rem;
   line-height: 90%;
   text-align: center;
   text-transform: lowercase;
   display: flex;
   gap: 10px 14px;
   align-items: center;
   transition: all 0.3s ease;
}

.nav__link svg {
   max-width: 30px;
   max-height: 30px;
}

.nav__link:hover,
.nav__link:focus-visible {
   color: var(--color-primary-hover);
}

.nav__link--active {
   color: var(--color-primary);
}

@media (max-width: 768px) {
   .nav {
      padding-inline: 16px;
   }

   .nav__link {
      font-size: .8125rem;
      flex-direction: column;
   }

   .nav__link svg {
      max-width: 24px;
      max-height: 24px;
   }
}


@media (max-width: 420px) {
   .nav__list {
      width: 100%;
      padding-inline: 8px;
      gap: 4px;
      justify-content: space-between;
   }
}


/* =============================================================================
   HERO
============================================================================= */
.hero {
   padding-block: 48px;
}

.hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   min-height: 960px;
   background: url(../assets/hero-bg.webp) no-repeat 50% -44px;
}

.hero__content {
   padding-top: 444px;
   max-width: 500px;
}

.hero__title {
   line-height: 0.9;
   color: var(--color-primary);
   text-transform: lowercase;
}

.hero__subtitle {
   position: relative;
   padding-top: 48px;
   font-weight: 700;
   font-size: clamp(1.25rem, 1.1316rem + 0.5263vw, 1.5rem);
   line-height: 1.2;
   letter-spacing: 0.6px;
}

.hero__subtitle::before {
   margin-right: 6px;
   content: '';
   display: inline-block;
   width: 90px;
   height: 6px;
   background-color: var(--color-text);
   transform: translateY(-100%);
}

.meeting-button-wrapper {
   position: absolute;
   padding: 226px 24px 0;
   left: 0;
   width: 100%;
   height: 100%;
   max-width: 1168px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9;
   pointer-events: none;
}

.meeting-button {
   pointer-events: all;
   margin-left: auto;
   position: sticky;
   top: -44px;
   padding: 72px 30px 32px;
   max-width: 168px;
   display: flex;
   gap: 16px;
   flex-direction: column;
   align-items: center;
   font-size: 1.25rem;
   line-height: 1;
   color: var(--color-dark);
   text-align: center;
   background: var(--color-primary);
   border: none;
   border-radius: 50px;
   text-decoration: none;
   transition: background 0.3s ease;
   z-index: 10;
}

.meeting-button:hover,
.meeting-button:focus-visible {
   color: var(--color-dark);
   background: var(--color-primary-hover);
}


/* Adjust background for larger screens to prevent excessive empty space on the sides */

@media (min-width: 2000px) {
   .hero::before {
      background-size: 100%;
   }
}

@media (min-width: 2880px) {
   .hero::before {
      background-size: 2880px;
      background-position: center -44px;
   }
}


@media (max-width: 992px) {
   .hero::before {
      background-position-x: right -36rem;
      background-size: auto;
   }
}

@media (max-width: 768px) {
   .hero {
      padding: 0;
   }

   .hero::before {
      background-position: 58% top;
      background-size: 992px;
   }

   .meeting-button-wrapper {
      padding-top: 0;
   }

   .meeting-button {
      top: 0px;
      padding: 12px 20px;
      max-width: 112px;
      gap: 10px;
      border-radius: 0 0 32px 32px;
      font-size: .875rem;
   }

   .meeting-button svg {
      width: 23px;
   }

   .hero__subtitle {
      padding-top: 28px;
      max-width: 312px;
   }

   .hero__subtitle::before {
      height: 3px;
      width: 58px;
   }
}


/* =============================================================================
   HOME
============================================================================= */
.section-home {
   padding-top: 100px;
}


/* =============================================================================
   SKILLS
============================================================================= */
.section-skills {
   padding-top: 120px;
}

.skills-grid {
   padding-top: 100px;
   padding-bottom: 120px;
   display: flex;
   flex-wrap: wrap;
   grid-template-columns: repeat(2, 1fr);
   align-items: start;
   gap: 60px 12%;
}

.skills-grid>*:nth-child(even) {
   transform: translateY(60px);
}

.skills-grid>*:nth-child(2) {
   transform: translateY(120px);
}

.skill-card {
   position: relative;
   padding-left: 24px;
   flex: 1 1 calc(50% - (12% / 2));
   font-size: clamp(1rem, 0.8846rem + 0.5128vw, 1.25rem);
   font-weight: 700;
   line-height: 1.2;
   text-transform: lowercase;
}

.skill-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 6px;
   height: 100%;
   background-color: var(--color-light)
}

.skill-card__title {
   margin-bottom: 8px;
   color: var(--color-primary);
   line-height: 1.2;
}

@media (max-width: 768px) {
   .section-skills {
      padding-top: 100px;
   }

   .skills-grid {
      padding-top: 60px;
      padding-bottom: 0;
      flex-direction: column;
      gap: 48px;
   }

   .skills-grid>*:nth-child(even) {
      transform: none;
   }

   .skill-card {
      width: 100%;
      padding-left: 14px;
   }

   .skills-grid>*:nth-child(2) {
      margin-top: 0;
   }

   .skill-card::before {
      width: 3px;
   }
}


/* =============================================================================
   FAQ
============================================================================= */
.section-faq {
   padding-top: 100px;
}

.faq-item {
   border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
   border-top: 1px solid var(--color-border);
}

.faq-item__trigger {
   padding-block: 16px;
   width: 100%;
   font-size: clamp(1rem, 0.8846rem + 0.5128vw, 1.25rem);
   font-weight: 700;
   text-transform: lowercase;
   text-align: left;
}

.faq-item__answer {
   padding-right: 20%;
   height: 0;
   font-size: 1rem;
}

.faq-item__answer-inner {
   padding-top: 4px;
   padding-bottom: 1rem;
}

@media (max-width: 992px) {
   .faq-item__answer {
      padding-right: 40px;
   }
}

@media (max-width: 768px) {
   .faq-item__answer {
      font-size: .875rem;
   }
}

/* =============================================================================
   PORTFOLIO
============================================================================= */
.portfolio-list {
   position: relative;
}

.portfolio-list::before {
   content: '';
   position: absolute;
   top: 8px;
   bottom: 8px;
   left: 10px;
   width: 1px;
   background-color: var(--color-border);
}

.portfolio-item {
   position: relative;
   padding-left: var(--content-offset);
}

.portfolio-item::before {
   content: '';
   position: absolute;
   left: 5px;
   top: 18px;
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background-color: var(--color-primary);
   box-shadow: 0 0 0 3px #000000;
}

.portfolio-item:not(:last-child) {
   padding-bottom: 46px;
}

.portfolio-item__trigger {
   width: 100%;
   text-align: left;
}

.portfolio-item__grid {
   display: flex;
   gap: 20px 0;
   align-items: center;
}

.portfolio-item__brand {
   padding-block: 8px;
   margin-right: 20px;
   flex: 0 0 19%;
   width: 19%;
   display: flex;
   align-items: center;
   font-size: 1rem;
}

.portfolio-item__summary {
   position: relative;
   padding-left: 20px;
}

.portfolio-item__summary::before {
   content: '';
   position: absolute;
   top: 3px;
   bottom: 3px;
   left: 0;
   width: 1px;
   height: calc(100% - 6px);
   background-color: var(--color-border);
}

.portfolio-item__company {
   font-size: clamp(1.25rem, 1.1346rem + 0.5128vw, 1.5rem);
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-primary);
   transition: color 0.3s ease;
}

.accordion:hover .portfolio-item__company {
   color: var(--color-primary-hover);
}

.portfolio-item__date {
   font-size: clamp(1.25rem, 1.1346rem + 0.5128vw, 1.5rem);
   font-weight: 400;
   line-height: 1.1;
   color: var(--color-text);
}

.portfolio-item__desc {
   height: 0;
   font-size: 1rem;
   font-weight: 400;
}

.portfolio-item__desc-inner {
   padding-top: 16px;
   padding-right: 32px;
}

.portfolio-item__role {
   padding-bottom: 12px;
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 1.2;
   text-transform: lowercase;
}

@media (max-width: 768px) {
   .portfolio-item:not(:last-child) {
      padding-bottom: 32px;
   }

   .portfolio-item::before {
      top: 3px;
   }

   .portfolio-item__grid {
      flex-direction: column;
      align-items: flex-start;
   }

   .portfolio-item__brand {
      display: none;
   }

   .portfolio-item__summary {
      padding-left: 0;
   }

   .portfolio-item__summary::before {
      content: none;
   }

   .portfolio-item__desc-inner {
      padding-right: 0;
   }


   .portfolio-item__role {
      font-size: 1rem;
   }

   .portfolio-item__desc {
      font-size: .875rem;
   }
}

/* =============================================================================
   EXPERIENCE
============================================================================= */
.section-experience {
   padding-top: 120px;
}

.experience-description {
   margin-bottom: 28px;
   /* 20px at 360px, 24px at 1140 */
   font-size: clamp(1rem, 0.8846rem + 0.5128vw, 1.25rem);
   font-weight: 700;
}

.experience-item {
   --clamp-lines: 2;
   --line-height: 1.3;
}

.experience-item:not(:last-child) {
   margin-bottom: 28px;
}

.experience-item__trigger {
   margin-bottom: 6px;
   font-size: clamp(1.25rem, 1.1346rem + 0.5128vw, 1.5rem);
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-primary);
   transition: color 0.3s ease;
}

.experience-item__desc {
   height: calc(var(--clamp-lines) * (var(--line-height) * 1em));
   font-size: 16px;
   font-weight: 400;
   line-height: var(--line-height);
   display: -webkit-box;
   -webkit-line-clamp: var(--clamp-lines);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

.experience-item__trigger[aria-expanded="true"]+.experience-item__desc {
   -webkit-line-clamp: unset;
   display: block;
}

.experience-item__desc-inner>*+* {
   padding-top: 8px;
}

@media (max-width: 768px) {
   .section-experience {
      padding-top: 48px;
   }

   .experience-item__desc {
      font-size: 14px;
   }

}

/* =============================================================================
   CONTACT
============================================================================= */
.section-contact {
   padding-top: 100px;
}

.contact-support {
   margin-top: 2px;
   font-size: 16px;
}

input,
textarea,
select {
   padding: 9px 16px;
   width: 100%;
   min-height: 40px;
   color: var(--color-text);
   font-size: 16px;
   line-height: 1.1;
   border-radius: 16px;
   border: 1px solid var(--color-border);
   background: transparent;
   outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   color: var(--color-text) !important;
   -webkit-box-shadow: 0 0 0 60px transparent inset !important;
   -webkit-text-fill-color: var(--color-text) !important;
   transition: background-color 5000s ease-in-out 0s;
   background-color: transparent !important;
}

textarea {
   display: block;
}

input:focus,
textarea:focus,
select:focus {
   border-color: var(--color-primary-hover);
}

label {
   font-weight: 400;
   font-size: 16px;
   color: var(--color-text);
   line-height: 1;
}


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

.form__row {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

.field {
   position: relative;
}

.field label {
   position: absolute;
   left: 12px;
   top: 20px;
   padding: 2px 4px;
   transform: translateY(-50%);
   pointer-events: none;
   transition: top 0.15s, font-size 0.15s, transform 0.15s, background 0.15s;
}

.field input:focus~label,
.field textarea:focus~label,
.field input:not(:placeholder-shown)~label,
.field textarea:not(:placeholder-shown)~label,
.field input:-webkit-autofill~label,
.field input:autofill~label {
   top: 0px;
   left: 12px;
   font-size: 12px;
   line-height: 1;
   background: var(--gradient-bg-color-bottom);
}

.form button {
   align-self: flex-start;
   padding: 9px 24px;
   display: inline-block;
   min-height: 40px;
   font-size: 16px;
   color: var(--color-primary);
   line-height: 1;
   width: auto;
   border-radius: 16px;
   border: 2px solid var(--color-primary);
   background: transparent;
   outline: none;
   transition: all 0.3s ease;
}

.form button:hover,
.form button:focus {
   border-color: var(--color-primary-hover);
   color: var(--color-primary-hover);
}


@media (max-width:768px) {

   input,
   textarea,
   select,
   .form button {
      min-height: 36px;
      font-size: 14px;
   }

   label {
      font-size: 14px;
   }

   .field label {
      top: 18px;
   }

   .form__row {
      grid-template-columns: 1fr;
   }

   .contact-support {
      font-size: 14px;
      margin-top: 16px;
   }
}

@media (max-width:576px) {
   .section-contact .section__subtitle {
      text-wrap: balance;
   }
}


/* =============================================================================
IMPRINT 
============================================================================= */

.page-hero {
   padding: 100px 0 100px;
}

.imprint-list {
   display: flex;
   flex-direction: column;
}

.imprint-item {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 0 20px;
   padding: 20px 0;
   border-bottom: 1px solid var(--color-border);
   font-size: 1rem;
   line-height: 1.2;
}

.imprint-item:first-child {
   border-top: 1px solid var(--color-border);
}

.imprint-item dt {
   font-size: clamp(1.25rem, 1.1346rem + 0.5128vw, 1.5rem);
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-primary);
   align-self: start;
   word-wrap: break-word;
}


@media (max-width: 768px) {
   .imprint-item {
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 16px 0;
   }
}

/* =============================================================================
   PRIVACY
============================================================================= */
.privacy-content {
   display: flex;
   flex-direction: column;
   gap: 16px;
   font-size: 1rem;
}

.privacy-content h2:not(:first-child) {
   margin-top: 2rem;
}

.privacy-content h3:not(:first-child) {
   margin-top: 1.5rem;
}

.privacy-content h4:not(:first-child) {
   margin-top: 1rem;
}

@media (max-width: 768px) {
   .privacy-content {
      font-size: .875rem;
   }
}


/* =============================================================================
   FOOTER
============================================================================= */
footer {
   margin-top: 160px;
   margin-bottom: 40px;
}

.footer {
   padding-top: 60px;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: 16px 24px;
   justify-content: space-between;
   border-top: 6px solid var(--color-border);
   font-size: 16px;
}

.footer a {
   text-decoration: none;
}

.footer__col {
   flex: 0 1 300px;
}

.footer__logo {
   flex-basis: 250px;
   width: 100%;
}

.footer__logo svg,
.footer__logo img {
   display: block;
}


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

.social-media-list {
   margin-top: 8px;
   display: flex;
   gap: 12px;
}

.social-media-list__link {
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text);
   line-height: 1;
   border: 1px solid var(--color-text);
   border-radius: 50%;
   transition: all 0.3s ease;
}

.social-media-list__link svg,
.social-media-list__link img {
   display: block;
   max-width: 16px;
   max-height: 16px;
   transition: all 0.3s ease;
}

.social-media-list__link:hover,
.social-media-list__link:focus-visible {
   color: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
}

.footer__nav-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

@media (max-width: 992px) {
   .footer__col {
      flex: 0 1 28%;
   }
}

@media (max-width: 768px) {
   footer {
      margin-top: 100px;
   }

   .footer {
      padding-top: 48px;
      flex-direction: column;
      font-size: 14px;
   }

   .footer__logo {
      max-width: 196px;
      margin-bottom: 24px;
   }

   .footer__contact,
   .footer__nav-list {
      gap: 16px;
   }

   .footer__nav-list {
      padding-right: 120px;
   }

   .social-media-list {
      margin: 0;
      position: absolute;
      bottom: 0;
      right: 0;
   }

}

/* =============================================================================
   MARQUEE
============================================================================= */
.section-marquee {
   margin-top: 100px;
   margin-bottom: 100px;
   padding: 100px 0;
}

.marquee {
   overflow: hidden;
}

.marquee__track {
   display: flex;
   align-items: center;
   width: fit-content;
   animation: marquee var(--marquee-duration) linear infinite;
   will-change: transform;
}

.marquee__group {
   display: flex;
   align-items: center;
   flex-shrink: 0;
}

@keyframes marquee {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(var(--marquee-scroll));
   }
}

.marquee__item {
   padding: 0 34px;
   font-size: clamp(1rem, 0.8846rem + 0.5128vw, 1.25rem);
   font-weight: 700;
   color: var(--color-text);
   text-transform: lowercase;
}

.marquee__item img,
.marquee__item svg {
   display: block;
   max-height: 80px;
   max-width: 240px;
}

@media (max-width: 768px) {
   .section-marquee {
      margin: 0;
   }

   .marquee__item {
      padding: 0 20px;
   }

   .marquee__item img,
   .marquee__item svg {
      max-height: 60px;
      max-width: 180px;
   }
}



/* =============================================================================
   MEDIA QUERIES
============================================================================= */

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: none;
   }

   .faq-item__answer {
      transition: none;
   }
}