

:root {
 

  --heading-1-font: bold 80px/80px "Cormorant Garamond";
  --heading-1-italic-font: bold italic 80px/80px "Cormorant Garamond";
  --heading-2-font: bold 56px/56px "Cormorant Garamond";
  --heading-3-font: bold 40px/140% "Cormorant Garamond";
  --heading-4-font: bold 32px/140% "Cormorant Garamond";
  --card-title-font: bold 32px/130% "Cormorant Garamond";
  --form-label-font: normal 24px/140% "Cormorant Garamond";
  --marquee-font: bold 20px/32px "Cormorant Garamond";
  --footer-title-font: 500 20px/120% "Cormorant Garamond";
  --title-font: 600 48px/56px Montserrat;
  --dot-font: 600 32px/130% Montserrat;
  --article-title: 600 32px/140% Montserrat;
  --subtitle-font: 600 24px/130% Montserrat;
  --quote-font: 500 20px/140% Montserrat;
  --article-font: normal 18px/28px Montserrat;
  --button-font: 500 18px/26px Montserrat;
  --base-font: normal 16px/140% Montserrat;
  --email-font: 300 16px/140% Montserrat;
  --copyright-font: normal 12px/140% Montserrat;

  --site-colors-mustard-btn-border: solid 1px var(--site-colors-mustard);
  --site-colors-mustard-btn-border-radius: 12px;
  --site-colors-mustard-btn-bg-color: var(--site-colors-mustard);
  --site-colors-mustard-btn-font: var(--button-font);
  --site-colors-mustard-btn-color: var(--site-colors-white);
  --site-colors-mustard-btn-padding: 14px 24px;

  --site-colors-sand-beige-btn-border: solid 1px var(--site-colors-mustard);
  --site-colors-sand-beige-btn-border-radius: 12px;
  --site-colors-sand-beige-btn-bg-color: none;
  --site-colors-sand-beige-btn-font: var(--button-font);
  --site-colors-sand-beige-btn-color: var(--site-colors-mustard);
  --site-colors-sand-beige-btn-padding: 14px 24px;

  interpolate-size: allow-keywords;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

body {
  font: var(--base-font);
  color: var(--site-colors-black);
}

h1 {
    font: var(--text-heading-xxl-font);
    letter-spacing: var(--text-heading-xxl-letterspacing);
    text-transform: var(--text-heading-xxl-transform);
}


h2 {
    font: var(--text-heading-xl-font);
    letter-spacing: var(--text-heading-xl-letterspacing);
    text-transform: var(--text-heading-xl-transform);
}

h3 {
    font: var(--text-heading-l-font);
    letter-spacing: var(--text-heading-l-letterspacing);
    text-transform: var(--text-heading-l-transform);
}

h4 {
    font: var(--text-heading-m-font);
    letter-spacing: var(--text-heading-m-letterspacing);
    text-transform: var(--text-heading-m-transform);
}

h5 {
    font: var(--text-heading-s-font);
    letter-spacing: var(--text-heading-s-letterspacing);
    text-transform: var(--text-heading-s-transform);
}

h6 {
    font: var(--text-heading-xs-font);
    letter-spacing: var(--text-heading-xs-letterspacing);
    text-transform: var(--text-heading-xs-transform);
}

.text-block-container {
    width:100%;
}

.section-100 {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 80px;
    overflow: hidden;
    position: relative;
    & > div {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 100%;
  }
}
.grid-column {
    & > div {
    
    max-width: 100%;
  }
}
.section-50 {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    gap: 24px;
    & > div {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 50%;
  }
}

.section-33 {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  gap: 24px;

  & > div {
    flex-basis: 33.333333%;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 33.333333%;
  }
}

.section-25-50-25 {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  gap: 24px;
  align-items: center;

  & > div {
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 25%;
  }

  & > div:nth-child(3n + 2) {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 50%;
  }
}

.primary-btn {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  text-align: center;
  background-color: var(--site-colors-mustard-btn-bg-color);
  border: var(--site-colors-mustard-btn-border);
  border-radius: var(--site-colors-mustard-btn-border-radius);
  font: var(--site-colors-mustard-btn-font);
  color: var(--site-colors-mustard-btn-color);
  padding: var(--site-colors-mustard-btn-padding);
}

.secondary-btn {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  text-align: center;
  background-color: var(--site-colors-sand-beige-btn-bg-color);
  border: var(--site-colors-sand-beige-btn-border);
  border-radius: var(--site-colors-sand-beige-btn-border-radius);
  font: var(--site-colors-sand-beige-btn-font);
  color: var(--site-colors-sand-beige-btn-color);
  padding: var(--site-colors-sand-beige-btn-padding);
}

span.badge {
    font: var(--button-font);
    color: var(--site-colors-mustard);
    background-color: #bd95170d;
    border: solid 1px #bd95171a;
    border-radius: 60px;
    padding: 6px 16px;
    margin-bottom:25px;
}


.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--site-colors-white);
  border-radius: 24px;
  padding: 24px;
  height: 100%;

  .card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    align-self: center;
    padding: 8px 0 18px;
  }

  &.small {
    gap: 8px;
    border: solid 1px #e4e2e2;

    .card__icon {
      align-self: flex-start;
      width: 88px;
      height: 88px;
      background-color: #bd95170d;
      border: solid 1px #bd95170d;
      border-radius: 16px;
      margin-bottom: 100px;
    }
  }

  .card__title {
    font: var(--card-title-font);
  }

  .card__description {
    color: var(--site-colors-grey);
  }
}
.card-custom {
    display: flex;
    flex-direction: column;
    height: 100%;
    .card__icon{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
        width: 100%;
        max-height: 100%;
    }

    }
}

.form-email {
  display: flex;
  align-items: center;
  justify-content: center;

  & > form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px;
    background-color: var(--site-colors-white);
    border-radius: 12px;

    & > input {
      font: var(--email-font);
      border: none;
      padding-left: 14px;

      &:focus {
        outline: none;
      }
    }
  }
}

.form-contact-us {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  padding: 32px;
  background-color: var(--site-colors-white);
  border-radius: 20px;
  width: 100%; 

  input,
  textarea {
    font: var(--email-font);
    padding: 18px 25px;
    border: solid 1px #dcdcdc;
    border-radius: 12px;
    width: 100%;
  }

  .primary-btn {
    margin-top: 12px;
  }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  background-color: var(--site-colors-white);
  border-radius: 16px;

  .quote__text {
    font: var(--quote-font);
  }
}

.article {
  font: var(--article-font);
  color: var(--site-colors-grey);
}

.accordion {
    background-color: var(--site-colors-snow-white);
    padding: 32px 32px 12px;
    border-radius: 24px;
    margin-bottom: 24px;
    &:last-child {
    margin-bottom: 0;
  }

  details {
    summary {
      list-style: none;
      font: var(--card-title-font);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;

      img {
        transition: all 0.3s ease-out;
      }
    }

    &[open] summary img {
      rotate: 180deg;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::marker {
      display: none;
    }
  }

  .content {
    font: var(--article-font);
    color: var(--site-colors-grey);
    width: 70%;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
  }

  details[open] + .content {
    height: max-content;
    padding-bottom: 20px;
  }
}

.header {
  background-color: var(--site-colors-white);
  position: sticky;
  top: 0;
  z-index: 200;

  @media (min-width: 1240px) {
    position: static;
  }

  .header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 80px;

    @media (min-width: 600px) {
      padding: 12px 2rem;
    }

    @media (min-width: 904px) {
      padding: 12px 1.75rem;
    }

    @media (min-width: 1240px) {
      padding: 17px 2.5rem;
    }

    @media (min-width: 1440px) {
      padding: 17px 80px;
    }

    .header__logo {
      display: flex;
      height: 40px;

      @media (min-width: 1240px) {
        height: auto;
      }

      & > img {
        height: 100%;
      }
    }

    & > nav,
    & > .header__language-label,
    & > .btn {
      display: none;

      @media (min-width: 1240px) {
        display: flex;
      }
    }

    .burger {
      width: 30px;
      height: 22px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;

      &:has(#burger:focus-visible) {
        outline: auto;
      }

      @media (min-width: 1240px) {
        display: none;
      }

      #burger {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .burger__line {
        display: flex;
        height: 3px;
        width: 100%;
        background: var(--site-colors-black);
        border-radius: 2px;
        transition: all 0.3s ease;
      }

      &:has(#burger:checked) .burger__line:nth-child(3) {
        opacity: 0;
      }

      &:has(#burger:checked) .burger__line:nth-child(2) {
        transform: translate(0px, 10px) rotate(45deg);
      }

      &:has(#burger:checked) .burger__line:nth-child(4) {
        transform: translate(0px, -9px) rotate(-45deg);
      }

      .burger:focus-visible {
        outline: 3px solid rgba(0, 0, 0, 0.12);
        outline-offset: 4px;
      }
    }
  }

  .header__language-label {
    display: flex;
    border: solid 1px #e4e4e4;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;

    &:has(#language:focus-visible),
    &:has(#language-mobile:focus-visible) {
      outline: auto;
    }

    #language,
    #language-mobile {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .header__language-selector:not(:last-child) {
      background-color: var(--site-colors-black);
      color: var(--site-colors-white);
    }

    .header__language-selector {
      display: flex;
      width: 50%;
      align-items: center;
      justify-content: center;
      padding: 10px;
      min-width: 56px;
      text-transform: uppercase;
      user-select: none;
    }

    &:has(#language:checked),
    &:has(#language-mobile:checked) {
      .header__language-selector:not(:last-child) {
        background-color: var(--site-colors-white);
        color: var(--site-colors-black);
      }

      .header__language-selector:last-child {
        background-color: var(--site-colors-black);
        color: var(--site-colors-white);
      }
    }
  }

  .header__nav__list,
  .umb-block-grid__layout-container {
    display: flex;
    align-items: center;
    gap: 32px;

    .header__nav__list-item {
      list-style-type: none;

      & > a {
        font: var(--header-nav-font);
        color: var(--site-colors-black);
        text-decoration: none;
        text-transform: uppercase;
      }
    }
  }

.header__burger-menu {
    position: fixed;
    top: 64px;
    right: 0;
    width: 100%;
    transform: translate(100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background-color: var(--site-colors-white);
    transition: all 0.3s ease;
    padding: 24px 1rem;

    @media (min-width: 600px) {
        padding: 12px 2rem;
    }

    @media (min-width: 904px) {
        padding: 12px 1.75rem;
    }

    @media (min-width: 1240px) {
        display: none;
    }

    .header__nav__list, .umb-block-grid__layout-container {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
    }
  }

  &:has(#burger:checked) > .header__burger-menu {
    transform: translate(0);
  }
}

.footer {

  .footer__container {
    display: flex;
    flex-direction: column;
    gap: 96px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 1rem 20px;

    @media (min-width: 600px) {
      padding: 24px 2rem 20px;
    }

    @media (min-width: 904px) {
      padding: 24px 1.75rem 20px;
    }

    @media (min-width: 1240px) {
      padding: 44px 2.5rem 40px;
    }

    @media (min-width: 1440px) {
      padding: 44px 80px 40px;
    }

    .footer__top {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

      @media (min-width: 1240px) {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
      }

      .footer__list__wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        align-self: stretch;        

        @media (min-width: 904px) {
          flex-direction: row;
          gap: 24px;
        }

        @media (min-width: 1240px) {
          gap: 80px;
        }

        & > div:last-child {
          max-width: 330px;
        }

        .accordion {
          padding: 0;
          align-self: stretch;
          background:transparent;
          border:none;

          @media (min-width: 904px) {
            display: none;
          }

          .footer__title {
            padding: 0;
          }
        }

        .footer__column {
          display: none;

          @media (min-width: 904px) {
            display: block;
          }
        }

        .footer__title {
          font: var(--footer-title-font);
          color: var(--grey);
          padding-bottom: 24px;
        }

        .footer__nav__list,
        .footer__list {
          display: flex;
          flex-direction: column;
          gap: 16px;

          .footer__nav__list-item,
          .footer__list-item, li, p{
            list-style-type: none;
            display: flex;
            flex-direction: column;

            & > a, p > a {
              font: var(--header-nav-font);
              color: var(--site-colors-black);
              text-decoration: none;
            }
          }
        }

        .footer__newsletter__description {
          padding-bottom: 24px;
        }

        .footer__newsletter {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          padding: 8px;
          border-radius: 12px;
          border: 1px solid #dcdcdc;

          & > input {
            font: var(--email-font);
            border: none;
            padding-left: 18px;

            &:focus {
              outline: none;
            }
          }
        }
      }
    }

    .footer__bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

      @media (min-width: 600px) {
        flex-direction: row;
        justify-content: space-between;
      }

      .footer__copyright {
        font: var(--copyright-font);
        color: var(--grey);
        order: 1;

        @media (min-width: 600px) {
          order: 0;
        }
      }

      .footer__social {
        display: flex;
        gap: 16px;

        .footer__social-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #2b2b2b;
          border-radius: 4px;
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}

.marquee {
  --duration: 30s;
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--site-colors-black);
  color: var(--site-colors-white);
  font: var(--marquee-font);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.5rem 0;
}

.marquee__inner {
  display: inline-block;
  will-change: transform;
  animation: marquee-scroll var(--duration) linear infinite;
}

.marquee__item {
  display: inline-block;

  .marquee__item-text {
    border-right: solid 1px var(--site-colors-white);
    padding: 0 36px;
  }
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee__inner,
.marquee:focus-within .marquee__inner {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__inner {
    animation: none;
    transform: none;
  }
}
@media (max-width: 600px) {
    .button-group {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}