@charset "UTF-8";
body { 
  font-family: var(--font-body);
  background-color: var(--color-white);

  --_sub-header-height: 35px;
  --_mobile-nav-height: 50px;
  --_card-width: 340px;
  --_section-gap: 36px;
  --_section-padding-block: 80px;
  --_section-padding-inline: 30px;
  --_min-a11y-font-size: 19px;

  @media screen and (max-width: 1280px) {
    --_section-padding-block: 48px;
    --_section-gap: 24px;

    padding-top: var(--_mobile-nav-height);

    @media screen and (min-width: 992px) {
      &:has(.sub-header:not(:empty)) {
        padding-top: calc(
          var(--_mobile-nav-height) + var(--_sub-header-height)
        );
      }
    }
  }

  @media screen and (max-width: 780px) {
    --_section-padding-inline: 30px;
  }

  @media screen and (max-width: 480px) {
    --_section-padding-block: 36px;
    --_section-padding-inline: 20px;
  }

  &.modal-open {
    .modal {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  &.checkout:has(#chat-widget-container) .mobile-nav.mobile-nav-b .bt-menu {
    /** move hamburger to left side of screen when chat widget exists */
    left: 20px;
    right: auto;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans) !important;
  font-weight: normal;
  text-transform: none !important;
  text-shadow: none;
}

h1 {
  font-size: clamp(3.2rem, 5vw + 1rem, 5.6rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(2.4rem, 3vw + 1rem, 4rem);
  line-height: 1.3;
}

h3 {
  font-size: clamp(2rem, 2vw + 0.5rem, 3.2rem);
  line-height: 1.4;
}

h4 {
  font-size: clamp(1.8rem, 1.5vw + 0.5rem, 2.4rem);
  line-height: 1.4;
}

p {
  a:not(.button-link):not(#map-resize):not(.fa):not([href*="tel:"]) {
    color: var(--color-link);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;

    &:hover {
      text-decoration: none;
    }

    &:visited {
      color: var(--color-brand-aubergine);
    }
  }
}

input,
textarea,
select,
label,
.floating-label > label,
input[type="checkbox"] + label,
input[type="radio"] + label,
.g-captcha-note {
  font-family: var(--font-body);
  text-transform: none;
}

button {
  text-transform: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;

  &:focus {
    background-color: var(--color-brand-secondary);
  }
}

select {
  text-transform: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  height: auto;
}

.preloader {
  background-color: var(--color-white);

  .prelogo {
    height: 46px;
    width: 230px;
    margin-left: -115px;
    margin-top: -23px;
  }
}

.main-header,
.sub-header {
  padding: 0 calc(50% - 760px);

  @media screen and (max-width: 1580px) {
    padding-inline: 30px;
  }
}

.sub-header {
  display: block;
  position: fixed;
  top: 0;
  z-index: 32;
  height: var(--_sub-header-height);
  background-color: var(--color-white);
  color: var(--color-brand-secondary);
  transition: transform 0.2s ease-out;

  &:has(~ .mobile-nav-hide) {
    transform: translateY(calc(0px - var(--_sub-header-height)));
  }

  @media screen and (max-width: 991px) {
    display: none;
  }

  & > ul {
    display: flex;
    gap: 10px;

    & > li {
      margin: 0;
      max-height: var(--_sub-header-height);

      &:before {
        margin-right: 6px;
      }

      &:hover {
        background-color: var(--color-brand-sandstone);
      }
    }

    a {
      color: var(--color-brand-secondary);
      font-family: var(--font-body);
      text-transform: none;
      font-size: 12px;
    }
  }

  #currency-btn,
  #search-submenu {
    padding-inline: 12px;
    cursor: pointer;
    height: var(--_sub-header-height);

    & > a {
      padding: 0;
      line-height: var(--_sub-header-height);
    }
  }

  #search-submenu {
    --_open-search-width: 240px;

    input {
      display: none;
    }

    &.open,
    &.focus {
      background-color: var(--color-brand-sandstone);
      min-width: var(--_open-search-width);

      form {
        width: var(--_open-search-width);
      }

      input {
        display: inline-block;
        padding: 0;
        margin: 0;
        height: var(--_sub-header-height);
        box-shadow: none;
        color: var(--color-brand-charcoal);
        font-family: var(--font-body);
        font-size: 14px;
        line-height: var(--_sub-header-height);
        font-weight: normal;
        text-transform: none;

        &::placeholder {
          color: var(--color-brand-charcoal-tint);
          font-family: var(--font-body);
          font-size: 14px;
          line-height: var(--_sub-header-height);
          font-weight: normal;
          text-transform: none;
        }
      }

      &:before {
        top: 13px;
      }
    }

    .suggestions {
      padding: 16px;
      cursor: auto;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 16px 16px rgba(0, 0, 0, 0.25);

      & > span,
      #results {
        padding: 0;
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.2;
        font-weight: normal;
        text-transform: none;
      }

      & > span {
        font-weight: 500;
        color: var(--color-brand-charcoal-tint);
        margin-bottom: 12px;

        &:after {
          display: none;
        }
      }

      #results {
        p {
          font-size: 16px;
          line-height: 1;
          font-weight: normal;
          text-transform: none;
          color: var(--color-brand-charcoal-tint);
          margin-bottom: 0;
          padding: 0;
        }
      }

      .suggestion {
        display: flex;
        gap: 12px;
        border-color: var(--color-brand-sandstone);
        padding: 8px;
        border-radius: 8px;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--color-brand-sandstone);
        }

        &:after {
          display: none;
        }

        &:last-child {
          border-bottom: none;
        }

        .img {
          border-radius: 8px;
          overflow: hidden;
          width: 50px;
          height: 50px;
          flex-shrink: 0;
        }

        p {
          & > a {
            font-size: 14px;
            font-weight: bold;
            text-transform: none;
            color: var(--color-brand-secondary);
            margin-bottom: 0;
          }
        }

        a.view {
          color: var(--color-brand-marigold);
          padding: 0;
          position: static;
          align-self: flex-end;
        }
      }

      .button-link {
        margin: 16px auto 0;
        background-color: var(--color-brand-secondary);
        color: var(--color-white);
        font-family: var(--font-body);
        width: fit-content;
        font-size: 16px;
        font-weight: bold;
        text-transform: none;
        padding: 9px 22px;
        border-radius: 30px;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--color-brand-secondary-400);
        }
      }
    }
  }

  #currency-btn {
    ul {
      background-color: var(--color-white);
      padding: 10px 0;
      list-style: none;
      font-size: 16px;
      font-weight: bold;
      text-transform: none;
      color: var(--color-brand-secondary);
      border-radius: 0 0 16px 16px;
      box-shadow: 0 8px 10px rgba(0, 0, 0, 0.25);
      margin-top: -2px;

      li {
        max-height: none;
        padding: 0;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--color-brand-sandstone);
        }

        a {
          display: block;
          margin-left: 0;
          padding: 10px 16px;
          font-size: 14px;
          font-weight: 500;
          text-transform: none;
          color: var(--color-brand-secondary);
          line-height: 1;
          cursor: pointer;
        }
      }
    }
  }
}

 .suggestions .suggestion p {
            color: var(--color-link);
            text-transform: none;
        }

  .suggestions .suggestion:hover {
            background: var(--color-brand-sandstone);
        }

.guide-search .suggestions .suggestion img {
                border-radius: 8px;
            }

.guide-search .suggestions {
  border-radius: 16px;
  margin-top:5px;
}

  .guide-search .suggestions .suggestion p {
                padding: 10px 0 5px 0;
            }

.guide-search .suggestions .suggestion a.group-search {
                font-size: 12px;
                color: var(--color-brand-charcoal);
                text-transform: none;
                display: inline-flex;
                align-items: flex-end;
                height: 15px;
                line-height: 7px;
            }

#results .suggestion:first-child {
  border-radius: 16px 16px 0 0;
}

.sec-color-grey.search-results-section {
  min-height: 700px;
}

.mobile-nav {
  height: var(--_mobile-nav-height);

  @media screen and (max-width: 1279px) {
    &.mobile-nav-hide {
      & ~ main {
        .submenu.fixed {
          top: 0 !important;
        }
      }

      & ~ .submenu.sticktop,
      & + .mobile-menu-b {
        top: 0 !important;
      }
    }
  }

  @media screen and (min-width: 992px) {
    &.mobile-nav-b {
      top: var(--_sub-header-height);

      &.mobile-nav-hide {
        transform: translateY(calc(-100% - var(--_sub-header-height)));
      }
    }
  }

  .bt-menu {
    top: 10px;

    .bt-menu-trigger {
      width: 100%;
      height: 100%;

      span {
        background-color: var(--color-brand-primary-700);
        height: 3px;

        &:before,
        &:after {
          background-color: var(--color-brand-primary-700);
          height: 3px;
        }
      }
    }

    &.bt-menu-open .bt-menu-trigger span {
      background-color: transparent;
    }
  }
}

.mobile-menu {
  --_padding-inline: 50px;

  @media screen and (max-width: 480px) {
    --_padding-inline: 30px;
  }

  background-color: var(--color-brand-sandstone);

  .accordion {
    .panel-heading {
      .panel-title {
        font-family: var(--font-body) !important;
        font-weight: 500;
        text-transform: none;
        font-size: 18px;
      }
    }

    .panel-small {
      ul {
        column-count: 1;

        li {
          font-size: 14px;
        }

        @media screen and (max-width: 480px) {
          margin-inline: 30px;
        }
      }
    }

    .panel-general {
      li {
        font-size: 1em;
        font-weight: 500;

        a {
          @media screen and (max-width: 480px) {
            padding-inline: 30px;
          }
        }
      }
    }

    .panel-social {
      padding-inline: 50px;
      text-align: left;

      & > span {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        text-transform: none;
        color: var(--color-brand-aubergine);
      }

      ul {
        justify-content: flex-start;

        li {
          a {
            color: var(--color-brand-aubergine);
            font-size: 32px;
          }
        }
      }

      @media screen and (max-width: 480px) {
        padding-inline: 30px;
      }
    }

    .panel-address {
      span {
        font-family: var(--font-body);
        color: var(--color-brand-secondary);
        font-size: 16px;
        font-weight: 500;
        text-transform: none;
      }

      p {
        font-family: var(--font-body);
        text-transform: none;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.75;
      }
    }

    .panel-group {
      .panel-heading.m-open,
      .panel-collapse {
        background: var(--color-white);
      }

      .panel-collapse {
        padding: 20px;
      }

      .m-header,
      .m-group-name,
      .m-links > a {
        font-family: var(--font-body);
        font-weight: normal;
        font-size: 16px;
        text-transform: none;
        line-height: 1.75;
        color: var(--color-brand-charcoal);
        padding-inline: 34px;

        @media screen and (max-width: 480px) {
          padding-inline: 16px;
        }

        & > i {
          margin-left: 8px;
        }
      }

      .m-header {
        color: var(--color-brand-secondary);
        font-weight: 600;
        font-size: 14px;
      }

     .m-links .m-header {
        padding-inline: 40px;
      }

     .m-links a {
        padding-inline: 55px 0px;
      }

      .m-group:has(+ .m-header) {
        border-bottom: 1px solid var(--color-brand-granite-tint);
        margin-bottom: 20px;
      }

      .m-group + .m-group {
        border-top: 1px solid var(--color-brand-granite-tint);
      }

      .m-group-name {
        padding: 16px 35px;

        i,
        .fa {
          color: var(--color-brand-secondary);
          font-size: 24px;
        }
      }
    }
  }

  ul {
    font-family: var(--font-body);
    text-transform: none;
    font-weight: 500;
    font-size: 18px;
    line-height: 2em;
  }

  &.mobile-menu-b {
    padding-top: var(--_mobile-nav-height);
    top: var(--_sub-header-height); /** announcement bar above menu */
    height: calc(100vh - var(--_sub-header-height));

    @media screen and (max-width: 992px) {
      height: 100vh;
      top: 0;
    }

    &.mobile-menu-list-bottom {
      transform: translateY(200vh); /** push off bottom of screen */
      top: auto;
      bottom: 0;

      &.open {
        transform: translateY(0); /** bring back to bottom of screen */
        box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.1);
      }
    }

    .accordion {
      .panel-group {
    .panel:first-child {
        .panel-heading {
            margin-top:40px;
          a {
            padding-inline: var(--_padding-inline);

            .i-down,
            .i-up {
              color: var(--color-brand-secondary);
              right: var(--_padding-inline);
            }
          }
        }
      }

        .panel-address {
          @media screen and (max-width: 480px) {
            padding-inline: 30px;
          }
        }
      }
    }
  }
}

.logo {
  background-image: url(https://www.nordicvisitor.com/files/nordic-visitor-logo-2025.svg);

  &.logo-united-kingdom {
    background-image: url("https://www.nordicvisitor.com/files/1/nordic-visitor-unitedkingdom-logo.svg");
  }

  &.logo-alps {
    background-image: url("https://www.nordicvisitor.com/files/1/logo/nordic-visitor-alps-logo-outline.svg");
  }

  @media (max-width: 992px) {
    &.logo-blog {
      width: 240px;
    }
  }
}

.main-header {
  background-color: var(--color-brand-primary-400);

  .logo {
    margin: 0;
    height: 70px;
    width: 230px;
  }

  .dropdown-nav {
    background-color: var(--color-brand-primary-400);

    ul {
      display: flex;
      gap: 10px;
      flex-direction: row-reverse;

      &:before {
        content: none;
      }

      & > li {
        margin-right: 0;

        &:first-child {
          background: var(--color-brand-secondary);

          & > a {
            color: var(--color-white);
          }

          &:has(> a:hover) {
            background: var(--color-brand-secondary-700);
          }
        }

        & > a {
          color: var(--color-brand-secondary);
          font-family: var(--font-body);
          font-size: 16px;
          text-transform: none;
          font-weight: bold;
          padding-block: 23px;
          display: inline-flex !important;
          align-items: center;
          gap: 6px;

          @media screen and (max-width: 1400px) {
            font-size: 14px;
            padding-inline: 12px;
          }

          .icon,
          i {
            margin: 0;
            pointer-events: none;
          }

          &:after {
            content: none !important;
          }
        }

        .nav-mega {
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
          top: 0;
          border-radius: 0 0 16px 16px;
        }

        &.open {
          &:after {
            content: none;
          }

          & > a {
            & > i {
              rotate: 180deg;
            }
          }

          .nav-mega {
            &.nav-mega-tours,
            &.nav-mega-travel-info,
            &.nav-mega-destinations {
              padding-inline: 24px;
            }
          }

          & > ul li {
            padding-top: 3px;
          }
        }

        .nav-mega-list {
          border-color: var(--color-brand-sandstone-shade);
        }

        .nav-mega-head {
          font-family: var(--font-body);
          text-transform: none;
          font-weight: 500;
          color: var(--color-brand-secondary);
          margin-bottom: 8px;
        }

        .nav-mega-featured {
          background-color: var(--color-brand-sandstone);
          border-radius: 16px;
        }

        .nav-mega-info {
          border-radius: 16px;
          transition:
            background-color 0.3s ease,
            border-color 0.3s ease;

          & > figure {
            border-radius: 8px;
          }

          .d-title,
          p {
            font-family: var(--font-body);
          }

          .d-title {
            color: var(--color-brand-secondary);
          }

          &:hover {
            background: var(--color-brand-sandstone);
            border-color: var(--color-brand-sandstone-shade);
          }
        }

        .nav-mega-list-destination {
          button {
            margin-bottom: 4px;
            transition: background-color 0.3s ease;

            &.active,
            &.active:hover {
              color: var(--color-brand-primary-600);
              background: var(--color-brand-sandstone);
              border-color: transparent;

              .nav-mega-tag {
                color: var(--color-brand-primary-800);
                background-color: var(--color-brand-primary-400);
                border-color: var(--color-brand-primary-600);
              }
            }

            & > span {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 5px;
            }

            .nav-mega-tag {
              background: var(--color-white);
              color: var(--color-brand-primary-600);
            }

            &:hover {
              background-color: var(--color-brand-sandstone);
              border-color: transparent;

              .nav-mega-tag {
                color: var(--color-brand-primary-800);
                background-color: var(--color-brand-primary-400);
                border-color: var(--color-brand-primary-600);
              }
            }
          }
        }

        .nav-mega-tag {
          margin-left: 0;
          border-color: currentColor;
          border-radius: 6px;
          transition:
            color 0.3s ease,
            border-color 0.3s ease,
            background-color 0.3s ease;
        }

        .nav-mega-content-head,
        .nav-mega-image-link {
          font-family: var(--font-body);
          font-weight: 500;
          line-height: 36px;
          text-transform: none;
          color: var(--color-brand-secondary);
          margin-bottom: 16px;
          transition: color 0.3s ease;

          &:is(a):hover {
            color: var(--color-brand-marigold) !important;
          }
        }

        .nav-mega-content-head {
          & + .row:has(> div > .nav-mega-content-links) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;

            &:before,
            &:after {
              content: none;
            }

            & > div {
              width: 100%;
            }
          }
        }

        .nav-mega-image-link {
          font-weight: bold;
        }

        .nav-mega-content-links {
          & > a {
            font-family: var(--font-body);
            color: var(--color-brand-charcoal-tint);
            text-transform: none;
            font-weight: normal;
            gap: 5px;

            & > span {
              transition: color 0.3s ease;
            }

            .nav-mega-tag {
              &.blue {
                color: var(--color-brand-secondary);
                background-color: var(--color-white);
              }
            }

            &:hover {
              & > span {
                text-decoration: none;
                color: var(--color-brand-marigold);
              }

              &.sunset {
                & > span {
                  color: var(--color-brand-marigold-shade);
                }
              }

              .nav-mega-tag {
                color: var(--color-white);
                background-color: var(--color-brand-marigold);
                border-color: var(--color-brand-marigold);
              }
            }
          }
        }

        .nav-mega-guides {
          background-color: var(--color-brand-sandstone);
          border-radius: 16px;
          border-color: var(--color-brand-sandstone-shade);

          & > p {
            font-family: var(--font-body);
            color: var(--color-brand-charcoal);
            text-transform: none;
            font-weight: normal;
          }

          .nav-mega-guide {
            border-radius: 8px;
            border: 1px solid var(--color-brand-sandstone-shade);
            font-family: var(--font-body);
            transition: box-shadow 0.3s ease;

            &:hover {
              transform: none;
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }
          }
        }
      }

      ul a {
        padding: 10px 0 10px 5px;
      }

      &.nav-b {
        min-width: 300px;
      }

      & > li ul li {
        padding: 2px 20px;
      }
    }
  }
}

body {
  &:not(.hide-topnav) {
    .main-header.sticktop {
      @media screen and (min-width: 1279px) {
        & + div {
          /* Hide the 70px height div being added - make sure it's this exact div */
          &:has(+ .mobile-nav + .mobile-menu ~ main) {
            display: none;
          }
        }

        & ~ main {
          padding-top: 70px;
        }
      }
    }
  }

  &.hide-topnav {
    --_sub-header-height: 0;

    .main-header.sticktop {
      @media screen and (min-width: 1279px) {
        & + div + div {
          /* Hide the SECOND 70px height div being added - make sure it's this exact div */
          &:has(+ .mobile-nav + .mobile-menu ~ main) {
            display: none;
          }

          & ~ .submenu.sticktop {
            /* Hide the 50px height div being added - make sure it's this exact div */
            & + div:has(+ main) {
              display: none;
            }

            & ~ main {
              padding-top: 50px;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1279px) {
    &.mobile-nav-show {
      .section-content-nav-fixed {
        top: calc(var(--_mobile-nav-height) + var(--_sub-header-height));
      }
    }
  }

  @media screen and (max-width: 992px) {
    &.mobile-nav-show {
      .section-content-nav-fixed {
        top: var(--_mobile-nav-height);
      }
    }
  }
}

.button-link,
#map-resize {
  font-family: var(--font-body);
  font-size: var(--_min-a11y-font-size);
  text-transform: none;
  font-weight: bold;
  padding: 13px 22px;
  line-height: 1;
  border-radius: 30px;
  transition: background-color 0.3s ease;
}

.button-link {
  &.light-green {
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);

    &:hover {
      background-color: var(--color-brand-primary);
    }
  }

  &.green-light {
    background-color: var(--color-brand-marigold);

    &:hover {
      background-color: var(--color-brand-marigold-shade);
    }
  }
}

input[type="submit"],
.button-icon,
.button-link,
button,
.button-filter,
.pswp__button--close {
  &:focus,
  &:focus-visible {
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text);
  }
}

input.green[type="submit"],
.green.button-icon,
.green.button-link,
button.green,
.green.button-filter,
.green.pswp__button--close,
.button-link.show-more-tours,
.button-link.show-more-tours.opened {
  background-color: var(--color-brand-secondary);
  color: var(--color-white);
  transition: background-color 0.3s ease;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: var(--color-brand-secondary-400);
    color: var(--color-white);
  }
}

.button-link,
.collage .collage-link {
  &:has(> i) {
    display: flex;
    gap: 5px;
  }

  &:has(> i:last-child:not(:only-child)) {
    padding-right: 18px;
  }
}

.show-more {
  background-color: var(--color-brand-secondary);

  &:hover {
    background-color: var(--color-brand-secondary-400);
  }
}

/** USP BAR */

.sp-small-container {
  li {
    display: flex;
    align-items: center;
    height: 100%;

    @media screen and (max-width: 767px) {
      align-items: flex-start;
      padding-block: 12px;
    }
  }

  .sp-small {
    align-items: center;
    gap: 8px;
    padding: 6px 20px 6px 10px;

    .sp-icon {
      padding: 0;
      color: var(--color-brand-primary-600);
    }

    .sp-text {
      font-family: var(--font-body);
      line-height: 1.2;
      color: var(--color-brand-charcoal-tint);
      text-wrap: pretty;

      .sp-title {
        color: var(--color-brand-primary-600);
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.2;
        text-transform: none;
        font-weight: 500;
        margin-bottom: 0;
        text-wrap: pretty;
      }
    }

    .sp-summary {
      color: var(--color-brand-charcoal-tint);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: normal;
      line-height: 1.2;
    }

    @media screen and (max-width: 767px) {
      width: 130px;
      padding: 0 10px;

      .sp-icon {
        margin: 0;
      }
    }
  }
}

/** SECTIONS STYLES */
section.sec-color-sandstone,
.info-blocks .info-block.block-sandstone,
section#most-popular-summer-tours {
  background-color: var(--color-brand-sandstone);
  border-top: 0;
}

div:has(#most-popular-summer-tours) {
  & + div {
    section.sec-color-white {
      border-top: 0;
    }
  }
}

section#most-popular-winter-tours {
  background-color: var(--color-white);
}

section.sec-color-grey,
.info-blocks .info-block.block-grey {
  /* background-color: var(--color-brand-granite-tint); */
  background-color: #eee;
  /** TODO: lighter granite */
}

section.sec-color-blue,
.info-blocks .info-block.block-blue {
  background-color: var(--color-brand-primary-200);
}

/** TODO: work out a way to style alternating sections */

/* div:has(> section.sec-color-grey) {
  &:has(+ div > section.sec-color-grey) {
    &:nth-child(odd) {
      & ~ div:nth-child(even) {
        section.sec-color-grey {
          background-color: var(--color-white);
        }
      }
    }

    &:nth-child(even) {
      & ~ div:nth-child(odd) {
        section.sec-color-grey {
          background-color: var(--color-white);
        }
      }
    }
  }
} */

div:has(> section.sec-color-grey) {
  &:has(+ div > section.sec-color-grey) {
    & + div:not(:has(.info-blocks)) {
      section.sec-color-grey {
        background-color: var(--color-white);

        .card-info {
          background-color: var(--color-brand-sandstone);
        }
      }

      /** TODO: might need to tidy up white section border-top nesting here */
      & + div:not(:has(.info-blocks)) {
        section.sec-color-grey {
          background-color: #eee;

          .card-info {
            background-color: var(--color-white);
          }
        }

        section.sec-color-white {
          border-top: 1px solid var(--color-brand-granite-tint);
        }

        & + div:not(:has(.info-blocks)) {
          section.sec-color-grey {
            background-color: var(--color-white);

            .card-info {
              background-color: var(--color-brand-sandstone);
            }
          }

          & + div:not(:has(.info-blocks)) {
            section.sec-color-grey {
              background-color: #eee;

              .card-info {
                background-color: var(--color-white);
              }
            }

            section.sec-color-white {
              border-top: 1px solid var(--color-brand-granite-tint);
            }

            & + div:not(:has(.info-blocks)) {
              section.sec-color-grey {
                background-color: var(--color-white);

                .card-info {
                  background-color: var(--color-brand-sandstone);
                }
              }

              & + div:not(:has(.info-blocks)) {
                section.sec-color-grey {
                  background-color: #eee;

                  .card-info {
                    background-color: var(--color-white);
                  }
                }

                section.sec-color-white {
                  border-top: 1px solid var(--color-brand-granite-tint);
                }

                & + div:not(:has(.info-blocks)) {
                  section.sec-color-grey {
                    background-color: var(--color-white);

                    .card-info {
                      background-color: var(--color-brand-sandstone);
                    }
                  }

                  & + div:not(:has(.info-blocks)) {
                    section.sec-color-grey {
                      background-color: #eee;

                      .card-info {
                        background-color: var(--color-white);
                      }
                    }

                    section.sec-color-white {
                      border-top: 1px solid var(--color-brand-granite-tint);
                    }

                    & + div:not(:has(.info-blocks)) {
                      section.sec-color-grey {
                        background-color: var(--color-white);

                        .card-info {
                          background-color: var(--color-brand-sandstone);
                        }
                      }

                      & + div:not(:has(.info-blocks)) {
                        section.sec-color-grey {
                          background-color: #eee;

                          .card-info {
                            background-color: var(--color-white);
                          }
                        }

                        section.sec-color-white {
                          border-top: 1px solid var(--color-brand-granite-tint);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

div:has(> section.sec-color-sandstone) {
  &:has(+ div > section.sec-color-sandstone) {
    & + div:not(:has(.info-blocks)) {
      section.sec-color-sandstone {
        background-color: var(--color-white);
      }

      /** TODO: might need to tidy up white section border-top nesting here */
      & + div:not(:has(.info-blocks)) {
        section.sec-color-sandstone {
          background-color: var(--color-brand-sandstone);
        }

        section.sec-color-white {
          border-top: 1px solid var(--color-brand-granite-tint);
        }

        & + div:not(:has(.info-blocks)) {
          section.sec-color-sandstone {
            background-color: var(--color-white);
          }

          & + div:not(:has(.info-blocks)) {
            section.sec-color-sandstone {
              background-color: var(--color-brand-sandstone);
            }

            section.sec-color-white {
              border-top: 1px solid var(--color-brand-granite-tint);
            }

            & + div:not(:has(.info-blocks)) {
              section.sec-color-sandstone {
                background-color: var(--color-white);
              }

              & + div:not(:has(.info-blocks)) {
                section.sec-color-sandstone {
                  background-color: var(--color-brand-sandstone);
                }

                section.sec-color-white {
                  border-top: 1px solid var(--color-brand-granite-tint);
                }

                & + div:not(:has(.info-blocks)) {
                  section.sec-color-sandstone {
                    background-color: var(--color-white);
                  }

                  & + div:not(:has(.info-blocks)) {
                    section.sec-color-sandstone {
                      background-color: var(--color-brand-sandstone);
                    }

                    section.sec-color-white {
                      border-top: 1px solid var(--color-brand-granite-tint);
                    }

                    & + div:not(:has(.info-blocks)) {
                      section.sec-color-sandstone {
                        background-color: var(--color-white);
                      }

                      & + div:not(:has(.info-blocks)) {
                        section.sec-color-sandstone {
                          background-color: var(--color-brand-sandstone);
                        }

                        section.sec-color-white {
                          border-top: 1px solid var(--color-brand-granite-tint);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

div:has(> section.sec-color-white) {
  & + div {
    section.sec-color-white {
      border-top: 1px solid var(--color-brand-granite-tint);
    }
  }
}

/** Treat the customer-review + video-testimonial components as one continuous
    section when they appear back-to-back, but keep each looking like a normal
    standalone section otherwise. */
.dc_custom_reviewcustomer + .dc_custom_videoembed {
  section.sec-video-embed.sec-color-white {
    border-top: 0;
  }

  .container {
    padding-top: 0;
  }
}

.dc_custom_reviewcustomer:has(+ .dc_custom_videoembed) {
  section.sec-customer-reviews.sec-color-white {
    .container {
      padding-bottom: 0;
    }
  }
}

/** Video embed (YouTube testimonial) component **/
.sec-video-embed .video-embed-wrap {
  display: flex;
  justify-content: center;
}

.sec-video-embed .video-embed-container {
  position: relative;
  width: 70%;
  max-width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.sec-video-embed .video-embed-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  display: block;
}

.sec-video-embed .video-embed-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec-video-embed .video-embed-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.sec-video-embed .video-embed-play:hover .video-embed-play-icon {
  background: #cd201f;
}

.sec-video-embed .video-embed-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 28px 28px;
  text-align: left;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: bold;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.sec-video-embed .video-embed-container.is-playing .video-embed-play,
.sec-video-embed .video-embed-container.is-playing .video-embed-thumb {
  display: none;
}

.sec-video-embed .video-embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .sec-video-embed .video-embed-container {
    width: 100%;
  }
}

section.sec-color-green,
.info-blocks .info-block.block-green {
  background-color: var(--color-brand-secondary);
}

.info-blocks .info-block.block-aubergine,
section.newsletter__signup {
  background-color: var(--color-brand-aubergine);
}

/** ORIGINAL NV STYLE */
section.sec-color-white .lead,
section.sec-color-white-grey .lead,
section.sec-color-grey .lead {
  color: #5f5c5c;
}

/** NEW NV STYLE */
section.sec-color-white .headline-section,
section.sec-color-white .package-headline,
section.sec-color-sandstone .headline-section,
section.sec-color-sandstone.blog-feed h2,
section.sec-color-sandstone .lead,
section.sec-color-sandstone .package-headline,
section.sec-color-sandstone .col-package-headline p,
section.sec-color-sandstone .package-headline + p,
section#most-popular-summer-tours .headline-section,
section#most-popular-winter-tours .headline-section {
  color: var(--color-brand-secondary);
}

section.section-help .lead,
section.sec-color-white .lead,
section.sec-color-white .col-package-headline p,
section#most-popular-summer-tours .lead,
section#most-popular-winter-tours .lead {
  color: var(--color-brand-charcoal-tint);
}

section.sec-color-green .headline-section,
section.sec-color-green .package-headline,
section.sec-color-green .package-headline + p,
section.sec-color-green .col-package-headline p,
section.sec-color-green .lead,
#reviews.sec-color-green .package-headline,
#reviews.sec-color-green .col-package-headline p {
  color: var(--color-white) !important;

  a:not(.button-link):not(#map-resize):not(.fa):not([href*="tel:"]) {
    color: var(--color-white) !important;
  }
}

section.newsletter__signup .newsletter__signup-headline,
section.newsletter__signup label,
.info-blocks .info-block.block-aubergine .inner-container .headline-section,
.info-blocks .info-block.block-aubergine .inner-container .lead {
  color: var(--color-brand-sandstone);
}

.info-blocks .info-block.block-blue .inner-container .headline-section,
.info-blocks .info-block.block-blue .inner-container .lead {
  color: var(--color-brand-primary-800);
}

.info-blocks .info-block.block-grey .inner-container a {
  color: var(--color-brand-secondary);
  text-decoration: underline solid 2px;

  &:hover {
    text-decoration: none;
  }

  &:visited {
    color: var(--color-brand-aubergine);
  }
}

section {
  .container,
  .container-section {
    display: flex;
    flex-direction: column;
    gap: var(--_section-gap);
    padding-block: var(--_section-padding-block);
    padding-inline: var(--_section-padding-inline);
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    &:before,
    &:after {
      display: none;
    }

    &.align-left {
      margin-left: auto;
      padding-left: var(--_section-padding-inline);
    }

    & + .container,
    & + .container-section:not(:has(.package-headline)) {
      padding-top: 0;
    }

    &:has(+ .container-padbtm) {
      padding-bottom: 0;
    }
  }

  &:has(~ .search-results) {
    .page-header {
      padding-bottom: var(--_section-gap);
    }
  }

  &.search-results {
    .container-section {
      padding-block: 24px;
    }
  }

  &.search-results-filterbar,
  .cloud-mobile {
    .container-section {
      padding-block: 0;
    }
  }

  &.sec-divider-top {
    border-top: 0;
  }

  &.sec-contact-groups {
    .headline-section,
    h3 {
      font-size: 24px;
      font-weight: bold;
      line-height: 1.2;
      text-transform: none;
      color: var(--color-brand-secondary);
      font-family: var(--font-body) !important;
    }

    .button-link,
    .col-opt .icon-round {
      background-color: var(--color-brand-primary-400);
      color: var(--color-brand-primary-800);
      width: auto;

      &:hover {
        background-color: var(--color-brand-primary);
      }
    }

    .col-opt {
      p {
        text-wrap: pretty;
        color: var(--color-brand-charcoal);
      }

      .icon-round {
        width: 24px;
        height: 24px;
      }

      .icon {
        color: var(--color-brand-primary);
      }
    }
  }

  .container-padbtm:last-child {
    padding-bottom: var(--_section-padding-block);
  }

  .container,
  & > .container-padbtm,
  & > .container-section {
    padding-top: var(--_section-padding-block);

    &.container-l {
      max-width: 1520px;
    }

    &:not(:last-child):not(:has(+ .container-padbtm)) {
      padding-bottom: var(--_section-gap);
    }

    .row {
      .headline-section {
        margin-bottom: var(--_section-gap);
      }

      & > div:last-child > .headline-section:last-child {
        margin-bottom: 0;
      }

      &:has(+ .row > div:first-child > p:first-child) {
        & > div:last-child > .headline-section:last-child {
          margin-bottom: var(--_section-gap);
        }
      }
    }
  }

  .mobile-horizontal-container {
    & + .container-padbtm {
      padding-top: calc(var(--_section-gap) - var(--_section-padding-block));
    }
  }

  .headline-section,
  &.blog-feed h2,
  .newsletter__signup-headline,
  .package-headline {
    font-family: var(--font-sans);
    text-transform: none !important;
    font-weight: normal;
    font-size: 48px;
    color: var(--color-brand-secondary);
    line-height: 1.1;
    margin: 0;
    margin-top: 0 !important;
    text-wrap: balance;

    @media screen and (max-width: 1280px) {
      font-size: 36px;
      line-height: 38px;
    }

    @media screen and (max-width: 800px) {
      font-size: 28px;
      line-height: 32px;
    }

    @media screen and (max-width: 480px) {
      font-size: 24px;
      line-height: 26px;
    }
  }

  .lead,
  .col-package-headline p,
  .package-headline + p {
    font-size: 24px;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 300;
    color: var(--color-brand-charcoal-tint);
    padding: 0;
    text-wrap: pretty;
    max-width: 80ch;
    margin: 0 auto;

    a {
      text-decoration: underline;
      font-weight: bold;
    }

    @media screen and (max-width: 1280px) {
      font-size: 20px;
      margin-bottom: 10px;
    }
  }

  .col-package-headline + div > p {
    margin-bottom: 0;
    max-width: 100ch;
  }

  &#about {
    .headline-section {
      & ~ p {
        margin-bottom: 0;
      }
    }
  }

  &.section-reviews-saying {
    .headline-section {
      margin-top: 0;
    }

    .lead {
      margin-bottom: var(--_section-gap);
    }
  }

  &.section-about-experts {
    .container {
      padding-bottom: 0;

      p {
        text-wrap: pretty;

        &.lead {
          padding-bottom: 0;
        }
      }

      @media screen and (max-width: 1080px) {
        padding-inline: 45px;

        .headline-section {
          text-align: left;
        }

        p.lead {
          margin-left: 0;
          text-align: left;
        }
      }

      @media screen and (max-width: 768px) {
        padding-inline: var(--_section-padding-inline);
      }
    }

    .section-about-experts-content {
      @media screen and (min-width: 1080px) {
        & > :first-child {
          padding-right: 50px;
        }
      }

      @media screen and (max-width: 1280px) {
        display: flex;
        align-items: flex-end;
        gap: 24px;

        &:before,
        &:after {
          content: none;
        }

        & > * {
          width: 100%;
        }

        .row-dual-sideimg {
          width: 60%;
          min-width: 440px;
        }
      }

      @media screen and (max-width: 1080px) {
        flex-wrap: wrap;
        justify-content: center;

        & > * {
          width: 100%;
          min-width: 0;
        }

        .row-dual-sideimg {
          width: 100%;
          background-position: bottom right;
        }

        p {
          max-width: 80ch;

          &:last-of-type {
            padding-bottom: 0;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

/** END SECTIONS STYLES */

.card .destination-label,
.submenu {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-weight: 700;
}

.image-content__caption a,
.link-red:hover,
.link-white:hover,
.notice a,
.notice a:hover {
  text-decoration: underline;
}

.col-decor,
.cx-contact,
.numberCircle,
.terms table thead tr th,
.terms table tr td,
.terms-modal table tr td {
  text-align: center;
}

.logo-hurtigruten {
  background-image: url(https://www.nordicvisitor.com/files/hurtigruten-logo.svg);
}

.logo-LIFE {
  background-image: url(https://www.nordicvisitor.com/files/travelife_logo-white.svg);
}

.logo-STA {
  background-image: url(https://www.nordicvisitor.com/files/scottish-tourism-alliance-logo.svg);
}

input[type="text"].newsletter__input {
  display: table-cell;
  float: none;
  width: 60%;
  text-transform: none;
  padding-left: 17px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  height: 60px;
  vertical-align: top;
  color: var(--color-brand-dark);
}

input[type="submit"].newsletter__submit {
  display: table-cell;
  width: 40%;
  float: none;
  background-color: var(--btn-primary-bg);
  border-radius: 0 4px 4px 0;
  height: 60px;
  vertical-align: top;

  &:hover {
    background-color: var(--btn-primary-hover-bg);
  }
}

.section-package-info .package-info-icon,
.section-right-image .package-info-icon {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: 20px 1fr;
  gap: 4px 12px;
  margin-bottom: 20px;
  cursor: default;

  .icon-style-circle {
    float: none;
    margin: 0;
  }

  h2,
  .package-info-title {
    grid-column: 2;
  }
}

.sidebar-wide {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
}

.accordion {
  h1 {
    font-size: 0.96666667em;
    line-height: 2em;
    padding: 0;
    margin: 0;
    color: var(--color-brand-dark);
    font-weight: 500;
  }

  h1 a {
    text-decoration: none;
    color: var(--color-brand-dark);
    display: block;
    width: 100%;
  }

  h1 a:after,
  h2 a:after {
    font-family: nordicvisitor;
    content: "\f077";
    margin-left: 10px;
    font-size: 0.72222222em;
    line-height: 1.84615385em;
  }

  h3 a:after {
    font-family: nordicvisitor;
    content: "\f077";
    margin-left: 10px;
    font-size: 0.72222222em;
    line-height: 1.84615385em;
  }

  .panel-group#accordion {
    .panel {
      &:last-child {
        .panel-heading {
          border-bottom: none;
        }
      }

      &:has(+ .panel .panel-heading [data-toggle="collapse"]:not(.collapsed)) {
        .panel-heading {
          border-bottom: none;
        }
      }
    }

    .panel-heading {
      padding: 0;
      border-bottom: 1px solid var(--color-brand-sandstone-shade);

      .panel-title {
        font-family: var(--font-body) !important;
        font-weight: 500;
        font-size: 18px !important;
        line-height: 1.15;
        text-transform: none;
        color: var(--color-brand-secondary) !important;
        text-align: left;

        a {
          padding: 16px 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: background-color 0.3s ease;

          &:not(.collapsed) {
            background-color: var(--color-white);
            border-radius: 16px 16px 0 0;
          }

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

    .panel-body {
      padding: 16px;
      margin-bottom: 16px;
      background-color: var(--color-white);
      border-radius: 0 0 16px 16px;

      p {
        margin-bottom: 1em;
        font-size: 18px;
        color: var(--color-brand-charcoal-tint);
        max-width: 100ch;
        text-wrap: pretty;
      }

      ul {
        padding-left: 0;
        column-count: 1;

        li {
          color: var(--color-brand-charcoal-tint);
          font-size: 18px;
          padding-block: 0;
        }
      }

      a {
        color: var(--color-brand-charcoal);
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-shade);
        }
      }
    }
  }
}

    .mobile-menu.mobile-menu-b .accordion .panel-group .panel-heading a {
        padding: 0 30px;
    }

.image-content__caption {
  background-color: rgba(103, 103, 103, 0.84);
  color: var(--color-neutral-100);
  font-size: 0.8em;
  line-height: 1.44em;
  font-style: italic;
  position: absolute;
  bottom: 0;
  padding: 4px 20px;

  a {
    color: var(--color-neutral-100);
  }
}

.youtube-player {
  position: sticky;
  padding-bottom: 56.23%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: var(--color-black);
  margin: 5px;

  .iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: 0 0;
  }

  .img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;

    &:hover {
      -webkit-filter: brightness(75%);
    }
  }

  .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url(https://www.nordicvisitor.com/files/logo/youtube-dark-playbtn.svg)
      no-repeat;
    cursor: pointer;
  }

  @media (min-width: 300px) and (max-width: 480px) {
    margin-top: 0 !important;
  }
}

.info-tooltip,
.ui-tooltip {
  display: inline-block;
  text-transform: none;
  font-family: var(--font-sans);
  color: var(--color-white);
}

.info-tooltip {
  background: var(--color-brand-dark);
  width: 12px;
  height: 12px;
  vertical-align: text-top;
  line-height: 12px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  margin-top: 1px;
  cursor: pointer;
}

.ui-tooltip {
  font-size: 12px;
  background: var(--color-brand-dark);
  padding: 15px 25px;
  z-index: 888888889;
  max-width: 320px;
  width: auto;
  border-radius: 5px;

  &.dynamic-width {
    max-width: 480px;
  }

  p {
    color: var(--color-white);
    margin: 0;
    padding: 0;
  }

  &.grey {
    &.bottom:before,
    &.top:before {
      display: block;
      content: "";
      height: 0;
      width: 0;
      left: 50%;
      position: absolute;
      border: 7px solid transparent;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    &.top:before {
      border-bottom: 7px solid var(--color-brand-dark);
      bottom: 100%;
      margin-bottom: -7px;
    }

    &.bottom:before {
      border-top: 7px solid var(--color-brand-dark);
      top: 100%;
      margin-top: 7px;
    }
  }

  @media (max-width: 768px) {
    &,
    &.dynamic-width {
      padding: 7px;
      max-width: 170px;
    }
  }
}

.ui-helper-hidden-accessible {
  display: none;
}

.card .destination-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.82);
  position: absolute;
  top: 15px;
  height: 30px;
  line-height: 30px;
  border-radius: 0 5px 5px 0;
  padding: 0 10px;
  font-size: 0.65em;
  color: var(--color-brand-dark);

  .tooltip-static-click:hover,
  .tooltip-static:hover {
    color: #3a8492;
  }
}

.card .infobox + .destination-label {
  @media (max-width: 1435px) {
    display: none;
  }
}

.itinerary-item p {
  font-size: 1em;
  line-height: 1.4em;
  position: relative;
  margin-bottom: 15px;
  color: var(--color-neutral-850);
}

.accordion h2,
.modal-highlight-details ul,
p,
section.section-everything p {
  color: var(--color-brand-dark);
}

.terms-modal ol,
.terms-modal ul,
section.section-everything ul {
  padding-left: 30px;
}

.blog__section li a,
.terms ul a,
.terms-modal ul a,
address a,
section.section-everything ul a,
td a {
  color: var(--color-textlink);
  font-weight: bold;
  text-decoration: underline;

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

.accordion h2 a,
.accordion h3 a,
.accordion .panel-title a,
.info-blocks .info-block.block-grey .inner-container > * {
  color: var(--color-brand-dark) !important;
}

@media (max-width: 768px) and (min-width: 200px) {
  .request-icon {
    display: none;
  }
}

.promotions p {
  margin-bottom: 30px;
  font-weight: 500;
  font-size: 1.1em;
  color: var(--color-white);
  text-shadow: rgba(0, 0, 0, 0.3) 1px 2px 0;
}

.sub-notice p {
  color: var(--color-white);
  margin-left: 10px;
  font-size: 14px;
}

.sub-header {
  .sub-notice {
    padding: 6px 0;

    p {
      color: var(--color-brand-secondary);
      margin-left: 0;
    }
  }
}

.accordion h2,
.footer-main .footer-blog .blog__tags,
.footer-main .footer-blog .booking-form-request,
.footer-main .footer-blog .package-headline,
.footer-main .footer-blog .price,
.footer-main .footer-blog h2 {
  font-size: 0.66666667em;
  line-height: 2em;
}

.notice {
  a {
    color: var(--color-white);

    &:hover {
      color: var(--color-brand-yellow);
    }
  }
}

.ui-datepicker-calendar {
  .ui-state-hover {
    background: #acc;
    color: var(--color-white);
  }

  .ui-state-active {
    border-radius: 0;
    background: var(--color-brand-dark);
  }
}

.accordion {
  h2 {
    padding: 0;
    margin: 0;
    font-weight: 500;

    a {
      text-decoration: none;
      display: block;
      width: 100%;
    }
  }

  h3 a {
    text-decoration: none;
    display: block;
    width: 100%;
  }
}

.cx-contact {
  position: relative;
  height: 100%;
  padding-bottom: 70px;

  .icon {
    font-size: 40px;
    color: var(--color-brand-green);
  }

  h3 {
    margin: 0;
  }

  p {
    margin: 0;
    color: var(--color-neutral-900);
  }

  p strong {
    color: var(--color-brand-red-dark);
    font-size: 1.3em;
  }

  .cx-footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
  }
}

.button-link.btn-ctx {
  margin: 0 auto;
  font-size: var(--_min-a11y-font-size);
  line-height: 1;
  color: var(--color-brand-primary-800);
  background-color: var(--color-brand-primary-400);
  border-radius: 30px;
  padding: 16px 22px;
  font-weight: 600;
  font-family: var(--font-body);
  font-weight: bold;
  text-transform: none;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--color-brand-primary);
  }
}

.button-social-share {
  font-weight: bold;
  background-color: var(--color-brand-secondary);
  color: var(--color-white);
  text-transform: none;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s ease;

  .icon::before {
    top: 0;
  }

  &:hover {
    background-color: var(--color-brand-secondary-400);
    color: var(--color-white);
  }
}

.row-flex {
  display: flex;

  &.container:after,
  &.container:before,
  &.row:after,
  &.row:before {
    content: normal;
  }
}

.ctx-form {
  padding-top: 80px;
}

.sec-customer-contact-form img {
  max-width: 100%;
}

.terms-modal h2,
[type="number"] {
  font-family: var(--font-sans);
}

.row-dual-70-front h1 {
  text-align: left;
}

/** ============================================
 *  HERO STYLES - CONSOLIDATED
 *  All .hero and .hero-subpage references
 *  Organized with proper media query cascade
 * ============================================ */

/** BASE STYLES (no media queries) */
.hero-subpage {
  .hero-text {
    position: relative;
  }
}

.hero-auto {
  height: auto !important;
}

.hero-shortest {
  height: 300px !important;
  padding-top: 4%;
}

/** HERO TRANSITION OVERRIDE */
.hero .hero-text figure h1,
.hero .hero-text figure .price,
.hero .hero-text figure .package-headline,
.hero .hero-text figure .booking-form-request,
.hero .hero-text figure .blog__tags,
.hero .hero-text figure p {
  opacity: 1;
}

.hero {
  --_hero-icon-height: 60px;
  --_hero-icon-row-gap: 24px;
  --_hero-icon-row-height: calc(
    var(--_hero-icon-height) + var(--_hero-icon-row-gap) + 10px
  );
  --_hero-padding-inline: 30px;

  text-align: left;

  @media screen and (max-width: 1520px) {
    --_hero-icon-row-height: calc(
      var(--_hero-icon-height) + var(--_hero-icon-row-gap) + 24px
    );
  }

  @media screen and (max-width: 1279px) {
    --_hero-icon-height: 40px;
    --_hero-icon-row-height: calc(
      var(--_hero-icon-height) + var(--_hero-icon-row-gap)
    );

    .hero-icon-row {
      .package-info-icon {
        width: max-content;
        display: inline-flex;
        align-items: center;
        gap: 12px;

        .icon-style-circle {
          margin-top: 0;
          float: left;
        }

        h4 {
          text-align: left;
          margin-bottom: 0;
        }
      }
    }
  }

  @media (max-width: 800px) {
    .hero-icon-row {
      background-color: transparent;
      overflow: visible;
      padding-top: 0;

      .icon-style-circle {
        &:before {
          font-size: 16px;
        }
      }

      h4 {
        font-size: 14px;
      }
    }
  }

  @media screen and (max-width: 640px) {
    --_hero-icon-row-height: 60px;

    .hero-text {
      &:has(+ .hero-icon-row) {
        .button-link {
          margin-bottom: 0;
        }
      }
    }
  }

  &.hero-subpage .hero-text-left.hero-text-long,
  &.hero-subpage .hero-text,
  &.hero-subpage-vid .hero-text {
    height: 100%;
    bottom: 0 !important;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 1500px !important;

    .button-link {
      &.video-link {
        border: 5px solid var(--color-white);
        border-radius: 66px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        padding: 13px 14px;

        &.transparent {
          color: var(--color-white);
          transition: background-color 0.3s ease;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    @media screen and (max-width: 1540px) {
      max-width: 100% !important;
      margin-inline: 0;
      left: 0;
    }
  }

  .hero-text,
  .hero-text-left,
  .hero-text-transform {
    figure {
      h1 {
        font-weight: 500;
        text-transform: none;
        text-wrap: balance;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      }

      p {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
        font-family: var(--font-body);
        text-wrap: pretty;
      }
    }

    h1,
    .blog-title {
      font-weight: 500;
      text-transform: none;
      text-wrap: balance;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      font-family: var(--font-sans);
    }

    h2 {
      text-transform: none !important;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }

    p,
    .hero-search-title {
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      font-family: var(--font-body) !important;
      text-wrap: pretty;
    }
  }

  .hero-text {
    width: 1520px;
    padding: 0;
    margin: 0 auto;

    figure {
      h1,
      p {
        max-width: 50%;
        margin: 0 auto 0.25em 0;
        padding: 0;
        text-align: left;
      }
    }

    /** repeat for no figure */
    h1,
    p {
      max-width: 50%;
      margin: 0 auto 0.25em 0 !important;
      padding: 0;
      text-align: left;
    }

    p {
      font-family: var(--font-body);
      text-wrap: pretty;
      font-size: 22px;

      a {
        color: var(--color-white) !important;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-white);
        }

        &:visited {
          color: var(--color-brand-sandstone-shade) !important;
        }
      }
    }

    .button-link {
      margin-top: 1em;
      width: max-content;

      @media screen and (max-width: 800px) {
        font-size: 16px;
      }
    }

    .button-same-width {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      justify-content: flex-start;
      align-items: center;
      margin-top: 1em;

      .video-link,
      .button-link {
        margin: 0;
        width: auto !important;

        span {
          margin-right: 4px;
        }
      }

      .video-link {
        height: 54px;
        width: auto !important;
        order: 3;

        i {
          margin-left: 0;
        }
      }

      @media only screen and (max-width: 480px) {
        flex-direction: row;
        row-gap: 12px;

        .button-link.video-link {
          margin-left: 0;
          margin-right: 0;
        }
      }
    }

    #lightGalleryTrigger {
      color: var(--color-white);
      border: 5px solid var(--color-white);
      border-radius: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      padding: 14px 20px;
      transition:
        color 0.3s ease,
        border-color 0.3s ease;

      span {
        &:before {
          top: 0;
        }
      }

      &:hover {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  & > .hero-text {
    position: absolute;
    bottom: 60px !important;
    left: calc(50vw - 750px);
    right: calc(50vw - 750px);
    margin-inline: 0 !important;

    h1 {
      padding-left: 0 !important;

      & + .button-link {
        margin-left: 0 !important;

        &.transparent {
          color: var(--color-white);
          border: 5px solid var(--color-white);
          border-radius: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: transparent;
          padding: 14px 20px;
          transition:
            color 0.3s ease,
            border-color 0.3s ease;

          span {
            &:before {
              top: 0;
            }
          }

          &:hover {
            background: transparent;
            color: rgba(255, 255, 255, 0.8);
            border-color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }

    /** CHECK IF THERE IS A HERO ICON ROW WITH ACTUAL CONTENT AFTER THE HERO TEXT */
    &:has(+ .hero-icon-row *) {
      padding-bottom: calc(
        var(--_hero-icon-row-gap) + var(--_hero-icon-row-height)
      );
    }
  }

  .hero-slide {
    .hero-text {
      padding: 0 calc(50vw - 760px);

      @media screen and (max-width: 1580px) {
        padding: 0 var(--_hero-padding-inline);
        width: 100%;
      }

      .button-link {
        background-color: var(--color-brand-secondary);
        color: var(--color-white);
        text-transform: none;
        font-family: var(--font-body);
        font-weight: 500;
        padding: 10px 20px;
        border-radius: 30px;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--color-brand-secondary-400);
          color: var(--color-white);
        }
      }
    }
  }

  .hero-text-left {
    .lead {
      text-align: left;
    }
  }

  .hero-icon-row {
    /** HIDE THE HERO ICON ROW IF IT DOES NOT HAVE ANY CONTENT. :EMPTY DOESN'T WORK BECAUSE THERE ARE EMPTY SPACES IN THE DIV */
    &:not(:has(*)) {
      display: none !important;
    }

    display: flex;
    flex-wrap: wrap;
    column-gap: var(--_hero-icon-row-gap);
    row-gap: 16px;
    bottom: 0;
    height: var(--_hero-icon-row-height);
    padding-inline: calc(50vw - 750px);
    padding-bottom: var(--_hero-icon-row-gap);

    @media only screen and (max-width: 480px) {
      height: auto;
    }

    & > * {
      padding: 0;
      width: 100%;
      max-width: 100%;
      flex: 1;

      &:hover {
        .icon-style-circle {
          background-color: var(--color-white);

          &:before {
            color: var(--color-brand-primary-600);
          }
        }
      }
    }

    .icon-style-circle {
      margin-bottom: 0;
      height: var(--_hero-icon-height);
      aspect-ratio: 1;
      transition: background-color 0.3s ease;

      &:before {
        font-size: 1.2em;
        transition: color 0.3s ease;
      }
    }

    h4 {
      text-transform: none;
      font-family: var(--font-body) !important;
      margin-bottom: 8px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }

    p {
      font-family: var(--font-body) !important;
      margin-bottom: 0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }
  }

  &.hero-short.travel-style-short > .hero-text {
    bottom: 60px !important;
  }

  &:after {
    height: 100%;
    width: 100%;
    --_stop: 70%;

    background-image: -webkit-gradient(
      linear,
      left bottom,
      right top,
      color-stop(0%, rgba(0, 0, 0, 0.85)),
      color-stop(var(--_stop), rgba(125, 185, 232, 0)),
      color-stop(100%, rgba(125, 185, 232, 0))
    );
    background-image: -moz-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(125, 185, 232, 0) var(--_stop),
      rgba(125, 185, 232, 0) 100%
    );
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(125, 185, 232, 0) var(--_stop),
      rgba(125, 185, 232, 0) 100%
    );
    background-image: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(125, 185, 232, 0) var(--_stop),
      rgba(125, 185, 232, 0) 100%
    );

    @media screen and (max-width: 1580px) {
      --_stop: 85%;
    }

    @media screen and (max-width: 1080px) {
      --_stop: 95%;
    }
  }

  .card-special-offer {
    background-color: var(--color-brand-citrus);
    color: var(--color-brand-charcoal-shade);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: bold;
    text-transform: none;
    border-radius: 8px 0 0 8px;
    padding: 4px 30px 4px 10px;
    height: auto;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);

    @media screen and (max-width: 1024px) {
      font-size: 16px;
    }

    &:hover {
      background-color: var(--color-brand-citrus-tint);
    }
  }

  &.hero-banner-search {
    .hero-text {
      h1 {
        max-width: 100% !important;
      }

      .lead {
        margin-bottom: 24px !important;
      }

      form {
        margin-inline: 0;
      }
    }
  }

  &:has(.hero-text > h1:only-child) {
    height: 340px !important;

    .hero-text {
      @media only screen and (max-width: 1480px) {
        h1 {
          font-size: 60px;
        }
      }

      @media only screen and (max-width: 1280px) {
        h1 {
          font-size: 60px;
        }
      }

      @media only screen and (max-width: 1080px) {
        h1 {
          font-size: 56px;
        }
      }

      @media only screen and (max-width: 800px) {
        h1 {
          font-size: 48px;
        }
      }
    }
  }

  &.hero-guide {
    h1 {
      margin-top: 60px;
    }

    h1,
    .lead {
      text-align: left;
    }

    .hero-search {
      margin-top: 80px;

      .hero-search-title {
        text-transform: none;
        margin-bottom: 10px;
        display: block;
      }

      input[type="text"] {
        font-size: 18px;
        color: var(--color-brand-charcoal-shade);
        text-transform: none;
        border-radius: 16px;
        font-weight: normal;
        font-family: var(--font-body);

        &::placeholder {
          color: var(--color-brand-charcoal-shade);
        }
      }

      label {
        top: 20px;
      }

      .suggestions {
        border-radius: 16px;
        top: 72px;

        .suggestion {
          transition: background-color 0.3s ease;

          &:hover {
            background-color: var(--color-brand-sandstone);
          }

          &:first-child {
            border-radius: 16px 16px 0 0;
          }

          img {
            border-radius: 8px;
          }

          p {
            padding-top: 4px;
            text-transform: none;
            font-family: var(--font-body);
            text-shadow: none;

            & > a {
              color: var(--color-brand-secondary);

              &:hover {
                color: var(--color-brand-secondary-400);
              }
            }
          }

          a.group-search {
            font-size: 12px;
            color: var(--color-brand-charcoal);
            text-transform: none;
          }
        }

        .button-link {
          background-color: var(--color-brand-secondary);
          color: var(--color-white);
          font-size: 16px;
          text-transform: none;
          padding: 8px 16px;
          transition: background-color 0.3s ease;

          &:hover {
            background-color: var(--color-brand-secondary-400);
            color: var(--color-white);
          }
        }

        #results > p {
          font-size: 18px;
          line-height: 1;
          color: var(--color-brand-charcoal);
          text-transform: none;
          padding: 16px 0;
          text-shadow: none;
        }
      }
    }

    @media screen and (max-width: 767px) {
      .container {
        padding-bottom: 0;
      }

      .hero-text-left {
        padding-inline: 20px;
        max-width: 100%;
      }

      h1,
      .lead {
        width: 100%;
      }

      .hero-search {
        padding: 0 20px;
        margin-top: 40px;
      }
    }
  }

  .kkSimpleSlide.hero-slider--ui .kkdotContainer {
    padding-left: calc(50vw - 760px);

    @media screen and (max-width: 1580px) {
      padding-left: var(--_hero-padding-inline);
    }

    .kkactive-dot {
      background-color: var(--color-brand-secondary);
    }
  }

  &.hero-blog {
    .hero-blog__info-item {
      font-size: 16px;
      line-height: 1.2em;
      text-transform: none;

      a {
        font-weight: bold;

        &:hover {
          text-decoration: underline;
          color: var(--color-brand-secondary-100);
        }
      }
    }

    .hero__scroll-icon {
      margin: 0 auto;
    }
  }

  .hero-bg .hero-bg-item {
    &.slow-zoom,
    &.slow-zoom-out {
      transition: none !important;
      -webkit-transition: none !important;
      transform: none !important;
    }
  }

   .hero-promo-ticket {
    @media screen and (max-width: 1580px) {
      right: var(--_hero-padding-inline);
    }

    @media screen and (max-width: 1279px) {
      top: var(--_hero-padding-inline);
    }
  }
}

.hero-promo-ticket {
  position: absolute;
  right: calc(50vw - 760px);
  top: 32px;
  z-index: 10;
  color: var(--color-white);

  --_bevel-size: 12px;
  --_border-radius: 20px;
  --_ticket-color: var(--color-brand-marigold);

  .hero-promo-ticket__top,
  .hero-promo-ticket__bottom {
    position: relative;
    background-color: var(--_ticket-color);
    border-radius: var(--_border-radius);
    padding: var(--_bevel-size) 12px;
    text-align: center;
    font-family: var(--font-sans);
    line-height: 1.2;
    box-shadow: 0 6px 7px -2px rgba(0, 0, 0, 0.4);
    transition:
      background-color 0.3s ease,
      box-shadow 0.3s ease;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      height: var(--_bevel-size);
      width: 100%;
      border: var(--_bevel-size) solid transparent;
      transition: border-color 0.3s ease;
    }
  }

  .hero-promo-ticket__top {
    font-size: 40px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-bottom: calc(var(--_bevel-size) / 2);

    &:before {
      bottom: calc(0px - var(--_bevel-size));
      border-bottom: 0;
      border-top-color: var(--_ticket-color);
    }
  }

  .hero-promo-ticket__bottom {
    font-size: 20px;
    margin-top: calc(var(--_bevel-size) * 2);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: calc(var(--_bevel-size) / 2);
    
    &:before {
      top: calc(0px - var(--_bevel-size));
      border-top: 0;
      border-bottom-color: var(--_ticket-color);
    }

    &:after {
      content: "";
      position: absolute;
      top: calc(-2px - var(--_bevel-size));
      left: var(--_bevel-size);
      width: calc(100% - (2 * var(--_bevel-size)));
      border-top: 4px dotted white;
    }

    .hero-promo-ticket__bottom__content {
      display: grid;
      grid-template-columns: auto 1fr;
      height: 65px;
    }
  }

  .hero-promo-ticket__bottom__num {
    font-size: 71px;
    line-height: 74px;
    grid-row: span 2;
    align-self: center;
  }

  .hero-promo-ticket__bottom__perc {
    font-size: 36px;
    line-height: 30px;
    align-self: end;
  }

  @media screen and (max-width: 1279px) {
    display: flex;
    --_bevel-size: 8px;

    .hero-promo-ticket__top,
    .hero-promo-ticket__bottom {
      padding: var(--_bevel-size) 14px;

      &:before {
        width: var(--_bevel-size);
        height: 100%;
        top: 0;
        bottom: 0;
        border: var(--_bevel-size) solid transparent;
      }
    }

    .hero-promo-ticket__top {
      border-top-right-radius: 0;
      border-bottom-left-radius: var(--_border-radius);
      padding-right: calc(var(--_bevel-size) / 2);
      display: flex;
      align-items: center;
      width: 80px;
      line-height: 32px;
      font-size: 32px;

      &:before {
        right: calc(0px - var(--_bevel-size));
        left: auto;
        border-right: 0;
        border-left-color: var(--_ticket-color);
      }
    }

    .hero-promo-ticket__bottom {
      border-bottom-left-radius: 0;
      border-top-right-radius: var(--_border-radius);
      margin: 0 0 0 calc(var(--_bevel-size) * 2);
      padding-left: calc(var(--_bevel-size) / 2);

      &:before {
        left: calc(0px - var(--_bevel-size));
        right: auto;
        border-left: 0;
        border-right-color: var(--_ticket-color);
      }

      &:after {
        left: calc(-1px - var(--_bevel-size));
        top: var(--_bevel-size);
        width: 0;
        height: calc(100% - (2 * var(--_bevel-size)));
        border-left: 2px dotted white;
        border-top: none;
      }

      .hero-promo-ticket__bottom__content {
        height: 62px;
      }
    }

    .hero-promo-ticket__bottom__num {
      font-size: 65px;
      line-height: 65px;
      align-self: center;
    }

    .hero-promo-ticket__bottom__perc {
      font-size: 29px;
      line-height: 25px;
    }
  }

  @media only screen and (max-width: 700px) {
    right: 24px;
    --_border-radius: 12px;

    .hero-promo-ticket__top {
      width: auto;
      line-height: 34px;
      font-size: 19px;
      border-top-left-radius: var(--_border-radius);
      padding-left: 8px;
    }

    .hero-promo-ticket__bottom {
      padding-block: 4px;
      font-size: 19px;
      line-height: 20px;
      border-bottom-right-radius: var(--_border-radius);
      display: flex;
      align-items: center;
      padding-right: 8px;

      .hero-promo-ticket__bottom__content {
        display: flex;
        align-items: center;
        height: 40px;
      }
    }

    .hero-promo-ticket__bottom__num {
      font-size: 40px;
      line-height: 20px;
    }

    .hero-promo-ticket__bottom__perc {
      font-size: 28px;
      line-height: 20px;
      margin-right: 4px;
      align-self: center;
    }
  }

  &:hover,
  &:focus {
    .hero-promo-ticket__top,
    .hero-promo-ticket__bottom {
      --_ticket-color: var(--btn-primary-hover-bg);
      color: var(--btn-primary-hover-text);
      box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.3);
    }
  }
}

.mobile-front {
  --_mobile-hero-padding-block: 40px;

  padding: 170px 0 var(--_mobile-hero-padding-block);

  h1 {
    font-size: 36px;
    font-weight: 500;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 18px;
    text-wrap: pretty;
    margin-inline: 24px;
  }

  .hero-promo-ticket {
    top: var(--_mobile-hero-padding-block);
    bottom: auto;
    right: 50vw;
    transform: translateX(50%);
    display: none;
  }

  .hero-promo-ticket__top {
    width: 68px;

    &:before {
      right: calc(1px - var(--_bevel-size));
    }
  }

  .hero-promo-ticket__bottom {
    margin: 0 0 0 calc((var(--_bevel-size) * 2) - 2px);

    &:before {
      left: calc(1px - var(--_bevel-size));
    }

    &:after {
      left: calc(0px - var(--_bevel-size));
    }
  }
}

.tour {
  .hero {
    .hero-text {
      h1,
      h2,
      h3 {
        color: var(--color-white);
        text-transform: none;
        line-height: 0.85;
        margin-bottom: 0.25em;
      }

      h1 {
        font-size: 48px;
        line-height: 0.95;
      }

      h2,
      h3 {
        font-family: var(--font-body) !important;
      }

      h2 {
        margin-top: 12px;
        max-width: 80%;
        text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px;
      }

      h3 {
        font-size: 24px;
        margin-top: 0;
        max-width: 80%;
        text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px;
      }
    }

    .stars {
      color: var(--color-white);
      font-family: var(--font-body);
      margin-top: 12px;
      display: flex;
      gap: 4px;
      width: fit-content;
      align-items: center;

      .stars-rating,
      .stars-count {
        color: var(--color-white);
        font-family: var(--font-body);
      }

      .stars-count {
        a {
          text-decoration: underline;
          text-underline-offset: 2px;

          &:hover {
            text-decoration: none;
            color: var(--color-white-shade);
          }
        }
      }
    }
  }
}

/** ============================================
 *  MEDIA QUERIES - MAX-WIDTH (largest to smallest)
 * ============================================ */

@media only screen and (max-width: 1580px) {
  .hero-text-container,
  .hero-subpage .hero-text {
    padding-inline: var(--_hero-padding-inline);
    max-width: 100%;

    .hero-text {
      width: 100%;
    }
  }

  .hero > .hero-text,
  .hero.hero-short.travel-style-short > .hero-text {
    padding-inline: var(--_hero-padding-inline) !important;
    width: 100%;
    bottom: 40px !important;
    left: 0;
    right: 0;
  }

  .hero .hero-icon-row {
    padding-inline: calc(50vw - 720px);
  }
}

@media only screen and (max-width: 1540px) {
  .hero .hero-icon-row {
    padding-inline: var(--_hero-padding-inline);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1520px) {
  .hero-subpage .hero-text-left.hero-text-long {
    max-width: 100%;
  }
}

@media only screen and (min-width: 1280px) and (max-width: 1439px) {
  .hero.hero-blog .hero-text.hero-text-left {
    bottom: auto !important;
  }
}

@media only screen and (max-width: 1480px) {
  .hero .hero-text {
    h1 {
      font-size: 3em;
      line-height: 54px;
      max-width: 80% !important;
    }

    p {
      max-width: 60% !important;
      font-size: 20px;
    }

    &.hero-text-transform {
      p {
        max-width: 80% !important;
      }
    }
  }

  /** DUPLICATE FOR LOWER SPECIFICITY */
  .hero.hero-short.travel-style-short > .hero-text {
    h1 {
      font-size: 3em;
      line-height: 54px;
      max-width: 60% !important;
    }

    p {
      max-width: 60% !important;
      font-size: 20px;
    }
  }

  .tour {
    .hero {
      .hero-text {
        h1 {
          font-size: 44px;
          line-height: 0.95;
          max-width: 80%;
        }
      }
    }
  }

  .hero-blog {
    .hero-text {
      h1 {
        font-size: 64px !important;
        line-height: 68px !important;
      }
    }
  }
}

@media (min-width: 960px) and (max-width: 1309px) {
  .hero.hero-subpage-vid,
  .hero.hero-subpage {
    height: 590px;
  }
}

@media only screen and (max-width: 1280px) {
  .hero,
  .hero.hero-short.travel-style-short {
    .hero-text {
      figure {
        h1 {
          max-width: 100% !important;
        }

        p {
          max-width: 80% !important;
        }
      }

      h1 {
        max-width: 100% !important;
        font-size: 44px;
      }

      p {
        max-width: 80% !important;
      }
    }
  }

  .tour {
    .hero {
      .hero-text {
        h1 {
          font-size: 40px;
        }

        h2 {
          font-size: 32px;
        }
      }
    }
  }

  .hero-blog {
    .hero-text {
      top: auto !important;
      bottom: 90px !important;
      transform: none;

      h1 {
        font-size: 64px !important;
      }

      .hero-blog__info {
        margin-bottom: 0;
      }

      .hero-blog__info-item {
        padding-bottom: 16px;
      }
    }
  }
}

@media only screen and (max-width: 1080px) {
  .hero .hero-text,
  .hero.hero-short.travel-style-short > .hero-text {
    h1 {
      font-size: 40px;
      line-height: 42px;
    }

    p {
      font-size: var(--_min-a11y-font-size);
    }
  }

  .hero-blog {
    .hero-text {
      h1 {
        font-size: 60px !important;
        line-height: 58px !important;
      }
    }
  }
}

@media only screen and (max-width: 990px) {
  .hero {
    &.hero-banner-search {
      max-height: 80vh;
    }
  }
}

@media only screen and (max-width: 980px) {
  .hero {
    &.hero-destination .hero-text .button-link {
      margin-bottom: 0;
    }
  }
}

@media only screen and (max-width: 800px) {
  .hero.hero-subpage .hero-text,
  .hero.hero-short.travel-style-short > .hero-text {
    padding-left: 30px;
  }

  .hero-blog {
    .hero-text {
      h1 {
        font-size: 48px !important;
        line-height: 52px !important;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .hero-banner-search {
    .filter-search-form {
      margin-left: 0;
    }
  }
}

@media only screen and (max-width: 640px) {
  .hero .hero-text,
  .hero.hero-short.travel-style-short > .hero-text {
    h1,
    p,
    figure p {
      max-width: 100% !important;
    }
  }

  .hero-blog .hero-text {
    top: auto;
    bottom: 100px !important;
    transform: none;
    max-width: 100%;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  .hero-front.hero-front-zero,
  .hero-subpage {
    max-height: min(60svh, 540px);
  }

  .hero-front.hero-front-zero .hero-text,
  .hero-subpage .hero-text,
  .hero.hero-short.travel-style-short > .hero-text {
    bottom: 36px;
    width: auto;
    left: 0;
    padding-inline: 30px;
  }
}

@media only screen and (max-width: 480px) {
  .hero {
    &.hero-subpage {
      height: auto;
      padding-top: 60px;

      &:after {
        content: none;
      }

      &:has(.hero-icon-row *) {
        .hero-bg {
          &:before {
            content: "";
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 80%;
            bottom: 0;
            left: 0;
            background-image: -webkit-gradient(
              linear,
              50% 100%,
              50% 0%,
              color-stop(0%, rgba(0, 0, 0, 0.85)),
              color-stop(100%, rgba(125, 185, 232, 0))
            );
          }
        }
      }

      .hero-text {
        position: relative;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 80%;
          background-image: -webkit-gradient(
            linear,
            50% 100%,
            50% 0%,
            color-stop(0%, rgba(0, 0, 0, 0.85)),
            color-stop(100%, rgba(125, 185, 232, 0))
          );
          bottom: 0;
          left: 0;
        }

        &:has(+ .hero-icon-row *) {
          &:before {
            content: none;
          }
        }

        h1 {
          font-size: 36px !important;
          line-height: 36px !important;
        }
      }

      .filter-search-form {
        .filter-input-group {
          height: 40px;
        }
      }
    }

    &.hero-banner-search {
      max-height: none;
    }

    .hero-text {
      h2 {
        font-size: 24px;
      }
    }

    .hero-text-left,
    .hero-text-left-full {
      text-align: left;
    }

    .hero-destination {
      height: 700px;
      display: flex;
    }

    .hero-destination .hero-text {
      position: static;
      padding-top: 70px;
    }

    .hero-destination .hero-icon-row {
      position: absolute;
    }
  }

  .hero-blog {
    .hero-text {
      top: auto;

      h1 {
        font-size: 36px !important;
        line-height: 40px !important;
      }

      .hero-blog__info {
        padding: 0;
      }

      .hero-blog__info-item {
        margin: 0;
      }

      .button-social-share {
        margin-bottom: 0;
      }
    }
  }

  .hero.hero-subpage .hero-text,
  .hero.hero-short.travel-style-short > .hero-text {
    bottom: 0px !important;
    padding-bottom: 25px !important;
  }

  .modal .modal-body #next-highlight,
  .modal .modal-body #prev-highlight {
    top: 85%;
  }

  .modal .modal-header button {
    margin-top: 0px;
    margin-right: 0px;
  }

  #modalActivity .modal-header button {
    margin: 0px;
  }

  #modalActivity .modal-title span#activity-day {
    padding: 10px 0 0;
  }

  .blog-title {
    margin-top: 200px !important;
  }

  #additional-services {
    padding-bottom: 30px;
  }

  .tour {
    .hero {
      .hero-text {
        h2 {
          font-size: 24px;
        }
      }
    }
  }
}

@media only screen and (max-width: 400px) {
  .hero {
    &.hero-subpage {
      .hero-text {
        padding-inline: 16px !important;
      }
    }
  }
}

@media only screen and (max-height: 760px) {
  .hero-blog {
    .hero-text {
      h1 {
        font-size: 40px !important;
        line-height: 40px !important;
      }
    }
  }
}

/** ============================================
 *  MEDIA QUERIES - MIN-WIDTH (smallest to largest)
 * ============================================ */

@media only screen and (min-width: 768px) {
  .hero-subpage .hero-text {
    padding-bottom: 30px;
  }

  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 760px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
  .hero-front.hero-front-zero,
  .hero-subpage:not(.hero-auto):not(.hero-banner-search) {
    max-height: 420px;
  }
}

@media only screen and (min-width: 960px) {
  .hero {
    height: 700px;
  }

  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 820px;
  }

  .hero-destination {
    height: 550px;
  }

  .hero.hero-subpage .hero-text,
  .hero.hero-subpage.hero-banner-search .hero-text {
    bottom: 20%;
  }

  .hero.hero-destination .hero-text {
    bottom: 30%;
  }
}

@media only screen and (min-width: 992px) {
  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 710px !important;
  }

  .hero-front {
    .hero-text-container {
      bottom: 40px;
    }
  }

  .hero-subpage .hero-text {
    padding-bottom: 40px;
  }

  .hero-blog {
    .hero-text {
      .hero-blog__info {
        padding-top: 0;
        padding-bottom: 10px;
      }
    }
  }
}

@media only screen and (min-width: 1140px) {
  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 700px !important;
  }

  .hero .hero-text-left {
    bottom: 10%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1280px) {
  .hero-front,
  .hero-subpage:not(.hero-auto) {
    max-height: 450px;
  }

  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 680px !important;
  }
}

@media only screen and (min-width: 1310px) {
  .hero {
    height: 500px;
  }

  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 820px;
  }

  .hero-destination {
    height: 650px;
  }

  .hero.hero-destination .hero-text {
    bottom: 30%;
  }

  .hero.hero-subpage.hero-banner-search .hero-text {
    bottom: 25%;
    padding-right: 10%;
  }
}

@media only screen and (min-width: 1440px) {
  .hero-front.hero-front-zero,
  .hero-subpage:not(.hero-auto) {
    max-height: 500px;
  }
}

@media only screen and (min-width: 1480px) {
  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 720px !important;
  }

  .hero .hero-text {
    h1 {
      font-size: 64px;
      line-height: 68px;
      max-width: 60%;
    }
  }

  .tour {
    .hero {
      .hero-text {
        h1 {
          max-width: 80%;
        }
      }
    }
  }
}

@media only screen and (min-width: 1520px) {
  .hero,
  .hero.hero-subpage.hero-banner-search {
    height: 600px;
  }

  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 940px;
  }
}

@media only screen and (min-width: 1680px) {
  .hero-front {
    min-height: 760px;
  }

  .hero-front .hero-text-container {
    bottom: 36px;
  }

  .hero-subpage .hero-text {
    padding-bottom: 60px;
  }

  .hero .hero-text figure {
    h1 {
      font-size: 68px;
      line-height: 62px;
      max-width: 50%;
    }

    p {
      font-size: 22px;
    }
  }
}

@media only screen and (min-width: 1900px) {
  .hero {
    height: 700px;
  }

  .hero-short {
    height: 510px;
  }

  .hero-front,
  .hero-subpage:not(.hero-auto) {
    height: 940px;
  }

  .hero.hero-subpage.hero-banner-search {
    height: 600px;
  }
}

.box-chat-right {
  p.ctry,
  p.ph {
    letter-spacing: 0;
    line-height: 23px;
    margin-bottom: 1px;
    padding: 0;
    text-align: left;
  }

  ul {
    padding-left: 1px;
    margin-bottom: 1px;
  }

  li {
    display: inline-block;
    width: 32%;
    margin-bottom: 20px;

    @media (max-width: 1200px) {
      width: 49%;
    }
  }

  p.ctry {
    font-weight: 700;
  }

  p.ph {
    font-weight: 100;
  }
}

.kkSimpleSlide {
  &.full {
    padding: 0;
    height: 100%;
  }

  &.hero-slider--ui {
    .right::before {
      content: "\f105";
    }

    .left::before {
      content: "\f104";
    }
  }
}

.kkSimpleSlideContainer {
  overflow: hidden;
  height: 100%;
}

a.anchor {
  display: block;
  position: relative;
  top: -300px;
  visibility: hidden;
}

.package-headline + p {
  display: inline;
  margin-left: 10px;
  color: var(--color-brand-charcoal-tint);
}

.sp-small p {
  color: var(--color-neutral-750);
}

.logo-saf {
  background-image: url(https://www.nordicvisitor.com/files/saf-logo.svg);
}

.main-header.sticktop {
  z-index: 32;
}

.section-booking-progress .tour-email-button {
  @media only screen and (max-width: 992px) {
    margin-bottom: 0;
  }
}

.cc-revoke.cc-left {
  @media screen and (max-width: 480px) {
    display: none;
  }
}

.terms .accordion h2,
.terms-modal h3 {
  line-height: 1.2em;
  margin-bottom: 10px;
}

.terms {
  ol,
  ul {
    color: var(--color-brand-dark);
    font-size: 18px;
    padding-left: 30px;
  }

  .accordion h2,
  p {
    font-size: 17px;
  }

  .lead {
    font-size: var(--_min-a11y-font-size);
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .accordion .panel-group .panel-collapse .panel-body {
    padding-left: 25px;
  }

  .accordion .panel-body li {
    color: var(--color-brand-dark);
    font-size: 17px;
    padding-left: 15px;
    list-style: inherit;
    overflow: unset;
  }

  .accordion li {
    padding: 0;
    cursor: auto;
  }

  .table-responsive {
    margin-left: 20px;
  }

  table thead tr {
    background-color: var(--color-neutral-150);

    th {
      color: var(--color-brand-dark);
      border: 1px solid var(--color-neutral-400);
      letter-spacing: 0.5px;
      text-transform: none;
    }
  }
}

.terms-modal {
  .table-responsive {
    margin-left: 20px;
  }

  .panel-body {
    padding: 0 30px 10px;
  }

  .panel-body-last {
    padding: 0 30px 60px;
  }

  h2 {
    font-size: 20px;
    margin-top: 35px;
  }

  h3 {
    margin-top: 0;
    font-size: 16px;
  }

  p {
    margin-bottom: 20px;
  }

  ol,
  p,
  ul {
    font-size: 15px;
    color: var(--color-brand-dark);
    font-family: var(--font-sans);
  }

  table thead tr th {
    text-align: center;
    color: var(--color-brand-dark);
    border: 1px solid var(--color-neutral-680);
    letter-spacing: 0.5px;
  }

  table tr td {
    border: 1px solid var(--color-neutral-680);
    background-color: var(--color-neutral-200);
  }

  table thead tr {
    background-color: var(--color-neutral-240);
  }
}

.TWC .headline-section,
section .guidelines {
  text-transform: none;
}

.quote-box {
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
  display: inline-block;
  margin-bottom: 20px;
}

.quote-right {
  float: right;
}

.quote-left {
  margin-right: 70px;
}

.TWC-TA {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 80px auto 10px;
}

.review-link {
  float: right;
  margin: 5px 20px 15px 10px;
}

.blockquote--large {
  color: var(--color-brand-primary-600);
  padding-left: 72px;

  &::before {
    font-size: 120px;
    font-weight: 700;
    font-style: italic;
    line-height: 130px;
    color: var(--color-brand-primary-200);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-serif);
    font-size: 120px;
  }
}

.image-content {
  & + .blockquote--large {
    margin-top: 32px;
  }
}

.blockquote--mid-large {
  font-size: 24px;
  line-height: 30px;
  padding: 36px;
  background-image: none;
  color: var(--color-brand-charcoal);
  margin-bottom: 0;
  font-style: normal;

  em {
    font-style: normal;

    &:last-child:not(:only-child) {
      font-style: italic;
      font-weight: bold;
      font-size: 20px;
    }
  }

  &::before {
    margin-left: -30px;
    content: "\201C";
    font-size: 96px;
    font-weight: 700;
    font-style: italic;
    line-height: 94px;
    color: var(--color-brand-red);
    position: absolute;
    left: 0;
    top: 0;
  }
}

.col-decor h3 {
  margin-top: 0;
}

.numberCircle {
  border-radius: 50%;
  width: 33px;
  height: 33px;
  padding: 8px;
  border: 2px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-size: 22px;
  line-height: 9px;
  margin: 0 auto 10px;
  font-weight: 500;
}

.space-box {
  min-height: 220px;
  padding: 20px 10px;
  background-color: var(--color-brand-primary) 12;
  margin: 5px;
  border-radius: 4px;
  border: 2px solid var(--color-brand-primary);
}

.gift,
textarea {
  padding: 10px;
}

.guidelines a {
  display: block;
  color: var(--color-white);
  background-color: var(--color-brand-green);
  padding: 20px 10px;
  margin: 10px;
  border-radius: 4px;

  &:hover {
    background-color: var(--color-green-pastel);
  }
}

.TWCFAQ {
  max-width: inherit;

  h3 {
    text-align: left;
    color: var(--color-brand-dark);
  }

  .accordion h2 {
    text-transform: none;
    font-size: 0.8em;
  }

  .accordion .panel {
    border-bottom: 0;
    text-align: left;
    font-size: 1em;
  }

  .panel-body p {
    font-size: 1.05em !important;
  }

  & > p {
    margin-bottom: 24px !important;
  }
}

.TWC-card {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  float: none;

  .card__horizontal {
    border: 1px solid var(--color-neutral-450);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
  }

  .card__horizontal-title {
    padding: 50px 30px;
  }

  .card-result > div {
    display: table-cell;
    padding: 70px 30px;
  }

  .card-result h1 {
    text-transform: none;
    font-size: 1.1em;
    line-height: 1.2em;
  }

  .card-result p {
    font-size: 1em;
  }
}

@media only screen and (max-width: 990px) {
  .quote-left {
    margin-right: 33px;
  }

  .quote-right {
    margin-left: 33px;
  }

  .blockquote--mid-large {
    font-size: var(--_min-a11y-font-size);
    line-height: 25px;
    padding-left: 40px;

    &::before {
      margin-left: -20px;
    }
  }

  .review-link {
    font-size: 0.9em;
  }

  .TWC-TA {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .TWC-card .card__horizontal-title {
    padding: 10px;
  }

  .TWC-card .card-result h1 {
    font-size: 1em;
    line-height: 1.2em;
  }
}

@media only screen and (min-width: 991px) {
  .TWC-card .card__horizontal .card-img {
    width: 400px;
  }
}

.TWC .info-blocks .info-block {
  padding: 20px;
}

.notify-strip {
  .container {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .sec-color-white {
    border-top: 1px solid var(--color-neutral-300);
    background-color: #fafafa;
  }
}

.filter-search-form {
  border-radius: 16px;

  .filter-input-group {
    height: 48px;
    padding: 0 12px;
    width: 290px;
    border-radius: 12px;

    &:active,
    &:hover {
      border: 1px solid #9d9fa0;
    }

    .filter-placeholder {
      font-size: 14px;
      margin: 0 0 0 12px;
      font-family: var(--font-body);
    }

    label {
      font-family: var(--font-body);
      font-size: 0.57em;
      top: 6px;
      left: 45px;
    }

    .filter-text-value {
      font-family: var(--font-body);
      margin: 12px 0 0 15px;
      font-size: 0.74em;
      font-weight: 500;
    }
  }

  .input-checkbox label,
  .input-radio label {
    font-family: var(--font-body);
    color: var(--color-brand-dark);
    border: 1px solid #dfdfdf;
    margin: 2px 0;
    font-size: 0.7666em;
    cursor: pointer;
  }

  .input-radio label {
    height: 50px;
  }

  button[type="submit"] {
    font-family: var(--font-body);
    height: 40px;
    margin: 4px 10px 0 20px;
    font-size: var(--_min-a11y-font-size);
    font-weight: bold;
    line-height: 1;
    text-transform: none;
    background-color: var(--color-brand-marigold);
    color: var(--color-white);
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--color-brand-marigold-shade);
    }
  }

  .filter-input-dropdown {
    border-radius: 8px;
    font-family: var(--font-body);
    padding: 15px;
    box-shadow: 0 7px 8px rgba(0, 0, 0, 0.4);
    width: 325px;
  }

  .input-checkbox input[type="checkbox"]:checked + label,
  .input-radio input[type="radio"]:checked + label {
    font-family: var(--font-body);
    border: 1px solid var(--color-brand-green);
  }

  .input-checkbox label {
    font-family: var(--font-body);
    height: 45px;
    padding: 7px 5px;
  }

  .input-checkbox label:hover,
  .input-radio label:hover {
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brand-secondary);
  }

  .input-checkbox input[type="checkbox"] + label:before {
    width: 17px;
    height: 17px;
    border-radius: 10px;
  }

  .input-checkbox input[type="checkbox"]:checked + label:after {
    top: 8px;
    left: 10px;
  }

  .filter-nav {
    font-family: var(--font-body);
  }
}

@media (max-width: 480px) {
  .filter-search-form .filter-input-group {
    width: 260px;
  }

  .filter-search-form button {
    margin: 15px 0 0;
  }
}

@media (max-width: 767px) {
  .cx-contact {
    padding-bottom: 45px;
  }

  .cx-contact p {
    font-size: 0.9em;
  }

  .filter-search-form .input-checkbox input[type="checkbox"] + label:after,
  .filter-search-form .input-checkbox input[type="checkbox"] + label:before {
    display: inline-block;
  }

  input[type="checkbox"] + label {
    text-align: initial;
  }
}

@media only screen and (min-width: 900px) {
  .filter-search-form .filter-input-group {
    width: 230px;
  }
}

@media only screen and (min-width: 1125px) {
  .filter-search-form .filter-input-group {
    width: 250px;
  }
}

@media only screen and (min-width: 1250px) {
  .filter-search-form .filter-input-group {
    width: 290px;
  }
}

@media (max-width: 990px) {
  .filter-search-form {
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
    gap: 8px;

    .filter-input-container,
    .filter-input-group {
      width: 100%;
    }

    button {
      width: 100%;
      margin-top: 15px;
    }

    & > div + div {
      margin-left: 0;
      margin-top: 5px;
    }
  }
}

input[type="number"] {
  border: 1px solid var(--color-neutral-520);
  height: 36px;
  font-size: 0.61111111em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
  padding: 0 17px 0 8px;
  line-height: 36px;
  background-color: var(--color-neutral-100);
  margin-bottom: 20px;
  font-weight: 700;

  &::placeholder {
    color: var(--color-neutral-700);
  }

  &:focus {
    border-color: var(--color-neutral-700);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    outline: 0;
  }

  &:required + label::after {
    content: "*";
  }
}

textarea {
  line-height: inherit;
}

.lmtd {
  color: var(--color-brand-primary-700);
  padding: 4px 10px;
  border: 1px solid var(--color-brand-primary-700);
  border-radius: 5px;
  font-size: 0.5em;
}

.alert-danger {
  background-color: var(--color-brand-red) de;
  border-color: var(--color-brand-red);
  color: var(--color-white);
  font-weight: 700;
}

input[type="checkbox"] {
  &:disabled + label {
    &:before {
      background-color: rgba(59, 59, 59, 0.3);
      border-color: rgba(118, 118, 118, 0.3);
    }

    &:after {
      content: "\2713";
      color: #efefef;
    }
  }
}

.footer-headline {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-neutral-750);
  font-weight: 400;
  text-transform: none;
  text-align: left;
  display: block;
  font-size: 0.77777778em;
  line-height: 1.71428571em;
}

@media (max-width: 992px) {
  .fh-links {
    display: none;
  }

  .getintouch,
  .licenses {
    text-align: center;
  }
}

.footer-headline-dropdown {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-brand-dark);
  font-size: 1em;
  line-height: 0.4em;
  display: block;
  text-align: left;
  margin: 0;
}

.getintouch {
  font-size: 1em;
}

.destinations {
  text-align: center;
}

.footer-social .twitter-x-social {
  height: 21px;
  width: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  pointer-events: none;
}

.blog__share-icons .twitter-x-social {
  height: 28px;
  width: 28px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  pointer-events: none;
}

.info-blocks .info-block.block-dark-blue .inner-container a .twitter-x-social {
  height: 34px;
  width: 40px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  pointer-events: none;
}

.card .card-front .card-title.long,
.card .card-front.long-content .card-title {
  font-size: 1.25em;
}

.section-right-image {
  .container-image {
    visibility: hidden;
    height: 100%;

    &.container-links {
      visibility: visible;
      padding: 0px;
    }
  }
}

.subnav-container {
  &.destinations-dropdown {
    left: -230px !important;
    padding-top: 0 !important;
    width: 610px !important;
  }

  &.destinations-dropdown ul {
    flex: 1 1 auto !important;
  }

  .heading {
    font-size: 0.88888889em;

    &:before {
      display: none;
    }
  }

  li.new:after {
    font-size: 0.88888889em;
    line-height: 0.88888889em;
  }

  li.multi:after {
    font-size: 0.88888889em;
    line-height: 0.88888889em;
  }
}

.subnav-container .featured,
.panel-body .featured {
  background-color: #ebeced;
  border-radius: 0 !important;
  margin: -10px 0 -10px 0;
  padding: 10px 0 10px 0 !important;
}

.panel-body .featured {
  margin: auto -20px 10px -20px !important;
  padding: 10px 20px !important;
}

.subnav-container .heading,
.panel-body .heading {
  color: var(--color-neutral-750);
  pointer-events: none;
}

.subnav-container .featured .heading:after,
.panel-body .featured .heading:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14px" viewBox="0 0 448 512"><path fill="rgba(236, 104, 81, 1)" d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"/></svg>');
  padding-left: 10px;
}

.subnav-container li.new a,
.panel-body li.new a,
.subnav-container li.multi a,
.panel-body li.multi a {
  display: inline !important;
}

.subnav-container li.new:after,
.panel-body li.new:after {
  background-color: var(--color-brand-red);
  border-radius: 4px;
  color: var(--color-white);
  content: "New!";
  margin-left: 6px;
  padding: 2px 4px;
}

.panel-body li.new:after {
  margin-left: 12px;
}

.subnav-container li.multi:after,
.panel-body li.multi:after {
  background-color: var(--color-brand-primary);
  border-radius: 4px;
  color: var(--color-white);
  content: "Multi";
  margin-left: 6px;
  padding: 2px 4px;
}

.panel-body li.multi:after {
  margin-left: 12px;
}

.card-tour.has-discount .stars + h5 + h4 + .levels {
  padding-bottom: 25px;
}

.latestblog {
  color: var(--color-neutral-750) !important;
  font-size: 16px !important;
  margin-left: 0px !important;
}

@media (max-width: 992px) {
  .latestblog {
    text-align: center;
  }
}

.left-info-x ul {
  color: var(--color-brand-dark) !important;
}

.left-info-x ul a:hover {
  color: var(--color-blue-pastel);
}

.promotions-b .text h2 {
  font-size: 2em;
  font-family: var(--font-sans);
  padding-top: 60px;
  text-transform: uppercase;
}

.row-dual h2 {
  color: var(--color-white);
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 1.66666667em;
  text-align: center;
  line-height: 1.04em;
  font-weight: 500;
  margin-bottom: 30px;
}

.row-dual-70-front h2 {
  text-align: left;
}

.row-dual-green p {
  color: var(--color-neutral-100);
}

.row-dual-green .checklist li {
  color: var(--color-neutral-100);
}

.card-info h3 {
  font-size: 1em;
  line-height: 1.06666667em;
  margin-bottom: 12.5px;
}

.search-results .related-categories .related-title {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 1em;
  margin-bottom: 12.5px;
  font-weight: 500;
  line-height: 1em;
}

.contact-strip-b > p.lead {
  color: var(--color-white);
}

.links-leads-lists {
  text-align: center;
  font-size: 22px;

  a {
    display: block;
    margin-bottom: 15px;
  }
}

.blog-feed h2 {
  font-weight: 700;
  line-height: 1.06666667em;
}

.blog__category-header h2 {
  font-size: 48px;
  margin-top: 40px;
  line-height: 48px;
  font-weight: 500;
}

.button-filter.clear:hover {
  color: var(--color-white);
}

.blog-feed-item .blog-feed__paragraph::after {
  height: 100px;
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0),
    rgba(252, 250, 250, 1)
  );
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0),
    rgba(252, 250, 250, 1)
  );
}

.checkbox-list .head::after {
  content: "";
  width: 20px;
  height: 1px;
  border-bottom: 1px solid var(--color-brand-green);
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Show desktop close button on larger screens */
.desktop-close {
  display: inline;
}

/* Hide mobile close button on larger screens */
.mobile-close {
  display: none;
}

/** MODAL STYLES */

.modal {
  --_header-height: 70px;
  --_footer-height: 76px;
  --_form-padding-block: 20px;

  @media screen and (max-width: 800px) {
    --_form-padding-block: 10px;
    --_header-height: 66px;
  }

  z-index: 888888888;

  &.modal-activities-detail {
    .modal-body {
      & > section {
        border-radius: 16px;
      }
    }

    .container-section {
      gap: 0;
    }

    .link-more.link-more-bigger {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.2;
      text-transform: none;
      color: var(--color-brand-secondary);
      text-decoration: none;
      text-underline-offset: 2px;
      margin-bottom: 0 !important;
      transition: color 0.3s ease;

      &:hover {
        color: var(--color-brand-secondary-400);
      }
    }
  }

  &.modal-request,
  &.modal-search {
    .modal-header {
      & > div {
        width: 100%;
      }

      div:has(> .modal-title) {
        @media screen and (max-width: 1580px) {
          display: flex;
          gap: 16px;
          justify-content: space-between;

          .modal-title {
            flex-shrink: 1;
            overflow: hidden;
            text-wrap: nowrap;
            text-overflow: ellipsis;
          }
        }

        @media screen and (max-width: 991px) {
          padding-inline: 0 !important;
        }
      }

      @media screen and (max-width: 991px) {
        & > .row {
          margin-inline: 0;
        }
      }

      padding: 0 30px;
      display: flex;
      align-items: center;
    }

    .modal-title {
      &:empty {
        display: none;
      }

      @media screen and (max-width: 800px) {
        font-size: 1em !important;
      }
    }

    .button-submit {
      background-color: var(--color-brand-primary-400);
      color: var(--color-brand-primary-800);

      &:hover {
        background-color: var(--color-brand-primary);
        color: var(--color-brand-primary-800);
      }
    }
  }

  h1,
  h2,
  h3 {
    color: var(--color-brand-secondary);

    &.modal-title-large {
      margin-bottom: 16px;
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 18px;
    color: var(--color-brand-charcoal);
    background-color: var(--color-white);
    border: 1px solid var(--color-brand-sandstone-shade);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 16px;
    width: 100%;
    font-family: var(--font-body);
    font-weight: normal;
    transition: background-color 0.3s ease;

    &::placeholder {
      text-transform: none;
      font-size: 14px;
      font-family: var(--font-body);
      font-weight: normal;
      line-height: 1.2;
      color: var(--color-brand-granite-shade);
    }

    &:focus {
      background-color: var(--color-white);
      box-shadow: none;
      outline: none;
    }
  }

  textarea {
    min-height: 180px;
    padding-block: 16px;
  }

  select {
    padding-block: 13px;
  }

  input[type="submit"] {
    font-size: var(--_min-a11y-font-size);
    line-height: 1;
    color: var(--color-brand-primary-800);
    background-color: var(--color-brand-primary-400);
    border-radius: 30px;
    padding: 16px 22px;
    font-weight: 600;
    font-family: var(--font-body);
    font-weight: bold;
    text-transform: capitalize;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--color-brand-primary);
      color: var(--color-brand-primary-800);
    }
  }

  .modal-dialog {
    &.modal-sm {
      .modal-content {
        max-width: 100%;

        .close {
          margin-right: 0;
        }
      }
    }

    .modal-content {
      background-color: var(--color-brand-sandstone);
      border: 1px solid var(--color-brand-sandstone-shade);
      border-radius: 16px;
      padding-bottom: 0;
      max-height: 90vh;
      box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);

      &:has(form) {
        .modal-header {
          padding-inline: 16px;
          padding-bottom: 10px;
        }

        .modal-body {
          padding: 24px 15px;
          max-height: calc(
            90vh - (var(--_form-padding-block) * 2) - var(--_header-height)
          ) !important;

          &:has(+ .modal-footer) {
            max-height: calc(
              90vh - (var(--_form-padding-block) * 2) - var(--_header-height) -
                var(--_footer-height)
            ) !important;
          }
        }

        form {
          padding-block: var(--_form-padding-block);
          max-height: 90vh;

          @media screen and (max-width: 800px) {
            padding-inline: 20px;
          }
        }
      }

      .modal-header {
        padding-inline: 30px;
        height: var(--_header-height);
        border-bottom: 1px solid var(--color-brand-sandstone-shade);

        .modal-title {
          font-family: var(--font-sans);
          color: var(--color-brand-secondary);
          display: inline;
          line-height: 40px;
          font-size: 32px;

          &:has(#modal-tour-name) {
            font-size: 24px;
          }

          strong {
            font-weight: 500;
          }

          & + span {
            float: none;
            clear: none;
            line-height: 40px;

            @media screen and (min-width: 1581px) {
              margin-left: 16px;
            }

            @media screen and (max-width: 1024px) {
              display: none;
            }
          }
        }
      }

      .modal-body {
        padding: 24px 30px;
        overscroll-behavior: contain;
        max-height: calc(90vh - var(--_header-height)) !important;

        &:has(+ .modal-footer) {
          max-height: calc(
            90vh - var(--_header-height) - var(--_footer-height)
          ) !important;
        }

        #generic-content {
          & > h1,
          & > h2,
          & > h3,
          & > h4,
          & > h5,
          & > h6 {
            &:first-child {
              margin-top: 0;
            }

            color: var(--color-brand-secondary);

            & > span {
              color: var(--color-brand-secondary) !important;
            }
          }

          h1,
          h2 {
            font-weight: 500;
          }
        }

        .share-tour h2,
        h3 {
          text-transform: none;
          font-family: var(--font-body) !important;
          font-size: 24px;
          font-weight: 500;
          line-height: 1.2;
          color: var(--color-brand-secondary);
          margin-bottom: 16px;
        }

        .choice {
          & > label {
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2;
            text-transform: none;
            color: var(--color-brand-secondary);

            & > span {
              display: none;
            }
          }

          & + .choice {
            &:after {
              content: none;
            }
          }
        }

        .list li {
          a {
            padding: 3px 0;
            text-transform: none;
            font-weight: 500;
            font-family: var(--font-body);
            font-size: 14px;
            border-radius: 8px;
            transition: background-color 0.3s ease;

            &:hover {
              color: var(--color-brand-secondary);
            }
          }

          &.active {
            a {
              color: var(--color-brand-secondary);
            }
          }

          @media screen and (max-width: 800px) {
            a {
              padding: 3px 8px;
              background-color: var(--color-brand-sandstone-shade);
              color: var(--color-brand-charcoal-shade);

              &:hover {
                background-color: var(--color-brand-sandstone);
                color: var(--color-brand-charcoal-shade);
              }
            }

            &.active {
              a {
                background-color: var(--color-brand-secondary);
                color: var(--color-white) !important;
              }
            }
          }
        }

        #hotels-content {
          @media screen and (max-width: 800px) {
            margin-top: 16px;
          }
        }

        .round-icon,
        .button-morph,
        .lSAction > .lSPrev,
        .lSAction > .lSNext {
          background-color: var(--color-brand-sandstone-shade) !important;
          color: var(--color-brand-dark) !important;
          transition:
            background-color 0.3s ease,
            color 0.3s ease;

          &:hover {
            background-color: var(--color-brand-charcoal-tint) !important;
            color: var(--color-white) !important;
            font-size: var(--_min-a11y-font-size);
            line-height: 1;
          }
        }

        .button-morph {
          width: auto;
          height: 40px;
          padding-block: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;

          &:hover {
            padding: 0 22px;
            height: 40px;

            span {
              &:before {
                top: 0;
                margin-left: 0;
              }
            }
          }
        }

        #accommodation-content {
          .modal-image {
            img {
              border-radius: 16px;
            }

            .title {
              font-family: var(--font-body) !important;
              border-radius: 0 0 16px 16px;
            }
          }
        }
      }

      .modal-highlight-details {
        .head {
          font-family: var(--font-body);
          font-size: 1em;
          font-weight: 500;
          line-height: 1.6em;
          margin-top: 0;
          margin-bottom: 20px;
          position: relative;

          &:after {
            content: none;
          }
        }

        .checkbox-list {
          &:not(:has(.checkbox-list-horizontal)) {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

            &#modal-travel-style {
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }

            .head {
              grid-column: 1 / -1;
            }
          }
        }

        input[type="checkbox"],
        input[type="radio"] {
          & + label {
            font-size: 14px;
            text-transform: none;
            line-height: 1.6;
            text-transform: none;
            font-weight: normal;
            font-family: var(--font-body);

            .info-tooltip {
              margin-left: 2px;
              margin-top: 3px;
            }
          }

          &:checked + label {
            color: var(--color-brand-secondary);

            &:before {
              color: var(--color-brand-secondary);
              border-color: var(--color-brand-secondary-600);
            }

            &:after {
              top: 4px;
            }
          }
        }

        #next-highlight,
        #prev-highlight {
          bottom: auto !important;
          top: 45% !important;
        }

        img {
          border-radius: 16px;
        }

        @media (max-width: 800px) {
          padding-bottom: 70px;

          #next-highlight,
          #prev-highlight {
            position: fixed;
            bottom: 30px !important;
            top: auto !important;
          }

          #next-highlight {
            right: 16px;
          }

          #prev-highlight {
            left: 16px;
          }
        }

        @media (max-width: 640px) {
          #next-highlight {
            right: 16px;
          }

          #prev-highlight {
            left: 16px;
          }
        }
      }

      .modal-footer {
        height: var(--_footer-height);
        border-top: 1px solid var(--color-brand-sandstone-shade);

        .button-link {
          .counter-dark {
            color: var(--color-white);
            font-family: var(--font-body);
            font-size: 1em;
            line-height: 1;
          }
        }
      }
    }

    @media (max-width: 1540px) {
      width: auto;
      max-width: 90vw;
      margin: 30px 5vw !important;
    }

    @media (max-width: 800px) {
      max-width: calc(100% - 60px);
      width: calc(100% - 60px);
      margin: 30px !important;
      height: 90vh;
      max-height: 90vh;
      min-height: 0;

      .modal-content {
        .modal-header {
          & > .row {
            & > div {
              padding-inline: 0;
            }
          }

          .modal-title {
            font-size: 24px;
          }
        }
      }
    }

    @media (max-width: 640px) {
      width: calc(100% - 40px);
      max-width: calc(100% - 40px);
      margin: 20px !important;

      .modal-content {
        .modal-body {
          &.modal-highlight-details {
            .head {
              margin-bottom: 10px;
            }

            .checkbox-list {
              padding-inline: 4px;

              .checkbox-list-horizontal {
                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  &.modal-optional-activies {
    .modal-header {
      .row {
        .col-md-1 {
          display: none;
        }
      }
    }

    .modal-body {
      .container-section {
        padding: 12px 0;
        gap: 12px;

        .headline-section {
          padding: 24px 0 0;
          font-size: 24px;
          line-height: 24px;
          font-weight: bold;
          font-family: var(--font-body) !important;
        }

        .row:first-child {
          .headline-section {
            padding-top: 0;
          }
        }
      }

      .mobile-horizontal-container {
        margin-top: 0;

        .mobile-horizontal-row {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
          gap: 24px;
          margin-inline: 0;
          padding: 12px 6px;

          @media screen and (min-width: 1025px) {
            &:before,
            &:after {
              content: none;
            }

            & > div {
              width: 100% !important;
              max-width: 100% !important;
              padding-inline: 0 !important;

              &:before,
              &:after {
                content: none;
              }
            }
          }

          @media screen and (max-width: 1200px) {
            margin-inline: 0;
            padding-inline: 36px;
          }

          @media screen and (max-width: 1024px) {
            display: block;
            margin-inline: -30px;
            padding: 12px;

            & > div {
              width: 340px !important;
            }
          }

          @media screen and (min-width: 540px) and (max-width: 800px) {
            & > * {
              width: 340px !important;
            }
          }
        }
      }

      @media screen and (max-width: 1024px) {
        padding: 24px 0 !important;

        .row,
        .mobile-horizontal-container {
          padding-inline: 60px;
        }
      }
    }
  }

  .modal-header {
    button {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      border: none;
      border-radius: 30px;
      padding: 12px 24px;
      max-height: 40px;
      font-size: 14px;
      font-weight: bold;
      text-transform: none;
      line-height: 1;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--color-brand-secondary-400);
        color: var(--color-white);
      }
    }
  }
}

.alert-msg {
  text-transform: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5em;
  padding: 8px 10px 8px 20px;

  &.alert-top:after {
    bottom: -4px;
  }
}

.article-catchy-line {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.88888889em !important;
  margin-bottom: 0px;
  margin-top: 25px;
  line-height: 1.5em;
  font-weight: 500;
}

@media (max-width: 480px) {
  .promotions h2 + p,
  .promotions .price + p,
  .promotions .package-headline + p,
  .promotions .booking-form-request + p,
  .promotions .blog__tags + p {
    display: none;
  }

  .row-dual h2 {
    font-size: 0.88888889em;
    line-height: 1.5em;
    margin-bottom: 15px;
    text-align: center;
  }

  .card-info h3 {
    padding: 0;
    margin-top: 0;
    font-size: 0.77777778em;
    line-height: 1.37142857em;
  }

  .card-front h4.sub-name {
    font-size: 14px;
  }

  .modal-select-tour .modal-header {
    text-align: left;

    .button-link {
      padding: 8px;
      float: right;
      font-size: 20px;
    }
  }

  .desktop-close {
    display: none;
  }
  /* Show mobile close button on smaller screens */
  .mobile-close {
    display: block;
  }
}

/** DESTINATIONS SECTION */
.destination-boxes {
  & + .destination-boxes {
    margin-top: 0;
  }

  .destination-box {
    border-radius: 16px;
    overflow: visible;
    height: 190px;
    box-shadow: 0 6px 4px -2px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.2s ease-in-out;

    &:hover {
      box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.25);

      .destination-box-image {
        opacity: 0.8;
      }
    }

    .destination-box-image {
      position: static;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      transition: opacity 0.2s ease-in-out;

      @media screen and (max-width: 767px) {
        aspect-ratio: 3 / 1;
      }
    }

    .destination-box-title {
      position: static;
      font-family: var(--font-body);
      border-radius: 0 0 16px 16px;
      overflow: hidden;
      text-transform: none;
    }

    .destination-box-label {
      left: 50%;
      top: -15px;
      background: var(--color-brand-sea-blue);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: bold;
      border-radius: 30px;
      transform: translate(-50%);
      width: max-content;
      text-transform: none;
    }
  }

  @media screen and (max-width: 767px) {
    gap: 16px;

    .destination-box {
      height: auto;

      .destination-box-image {
        aspect-ratio: 3 / 1;
      }

      .destination-box-title {
        height: 40px;
      }

      .destination-box-label {
        top: -6px;
        padding: 0px 8px;
        height: 24px;
        line-height: 24px;
      }
    }
  }

  @media screen and (max-width: 460px) {
    & > * {
      width: 100%;

      .destination-box-image {
        aspect-ratio: 3 / 1;
      }

      .destination-box-title {
        height: 48px;
      }
    }
  }
}

/** COLLAGE SECTION */
.collage {
  max-width: 1500px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--_section-padding-block);
  padding-inline: var(--_section-padding-inline);

  .collage-bg {
    transform: none !important;
  }

  & > div,
  & > figure {
    float: none;
    width: auto;
    background: var(--color-brand-granite-tint);
    border-radius: 16px;

    &:hover {
      .collage-bg {
        transform: none !important;
      }

      &:has(.collage-list) {
        opacity: 1;

        .collage-bg {
          opacity: 0.7;
        }
      }
    }
  }

  .collage-main {
    background: var(--color-brand-charcoal);
  }

  .collage-double {
    grid-column: span 2;

    .collage-link {
      margin-left: auto;
      width: max-content;
    }
  }

  .collage-link {
    font-family: var(--font-body);
    font-size: var(--_min-a11y-font-size);
    text-transform: none;
    font-weight: bold;
    padding: 13px 15px;
    line-height: 1;
    border-radius: 30px;
    background-color: var(--color-brand-marigold);
    color: var(--color-white);
    text-shadow: none;
    text-transform: none;
    transition: background-color 0.3s ease;

    &:has(> i) {
      padding-right: 9px;
    }

    &:hover {
      background-color: var(--color-brand-marigold-shade);
    }
  }

  &.collage-w-text {
    .collage-text-box {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-end;
      justify-content: flex-end;
      margin: 0;
      padding: 24px;
      background-image: linear-gradient(to top, black, transparent);
      background-repeat: no-repeat;
      transition: background-position 0.3s ease;

      a:has(h3) {
        flex: 1;
        align-self: flex-start;

        @media screen and (max-width: 1280px) {
          flex: 0 0 100%;
        }
      }

      &:not(:has(.collage-link)) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;

        h3 {
          margin-left: 0;
        }
      }

      h3 {
        margin-top: 0;
        font-family: var(--font-body) !important;
        text-transform: none;
        font-weight: bold;
        font-size: 32px;
        line-height: 1.05;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        color: var(--color-white);
        margin-bottom: 8px;

        @media screen and (max-width: 1280px) {
          font-size: 24px;
        }
      }

      p {
        font-family: var(--font-serif);
        font-size: 20px;
        font-weight: 300;
        line-height: 1.2;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        margin-bottom: 0;
        text-wrap: pretty;

        @media screen and (max-width: 1280px) {
          font-size: 18px;
        }
      }

      @media screen and (max-width: 800px) {
        padding: 20px 14px 24px 16px;
      }
    }

    .collage-quarter {
      .collage-text-box {
        flex-direction: column;
      }
    }

    & > * {
      &:hover {
        .collage-text-box {
          background-position: center 20px;
        }
      }
    }
  }

  .collage-text {
    top: 0;

    h3,
    .collage-list li a {
      font-family: var(--font-body) !important;
      text-transform: none;
      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    }

    .collage-list li a {
      font-size: 14px;
    }

    .button-link {
      position: static;
      background-color: var(--color-white);
      color: var(--color-brand-secondary);
      font-size: 16px;
      padding: 9px 20px;
      margin: 12px auto 20px;
      transform: none;
      max-width: 130px;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: var(--color-brand-secondary);
      }
    }
  }

  .collage-single,
  .collage-double,
  .collage-triple {
    width: 100%;
    border-radius: 16px;
  }

  .collage-triple {
    grid-column: span 2;
  }

  .more-images {
    p {
      font-family: var(--font-body);
      text-transform: none;
    }
  }

  &#tour-gallery {
    @media screen and (max-width: 980px) {
      gap: 16px;

      .collage-single,
      .collage-double,
      .collage-triple {
        grid-column: span 1;
      }
    }

    @media screen and (max-width: 640px) {
      .collage-single,
      .collage-double,
      .collage-triple {
        height: 180px;
      }
    }
  }

  @media screen and (min-width: 980px) and (max-width: 1540px) {
    &:has(> .collage-quarter) {
      &:not(:has(> .collage-half)) {
        .collage-quarter {
          grid-column: span 2;
          height: 313px;
        }
      }
    }
  }

  @media screen and (max-width: 991px) {
    .collage-main:has(.collage-list) {
      height: auto;
    }
  }

  @media screen and (max-width: 980px) {
    grid-template-columns: repeat(2, 1fr);

    .collage-double:not(.collage-last):not(:first-child) {
      grid-column: span 1;
    }

    & > :nth-child(3n + 1) {
      grid-column: span 2;
    }
  }

  @media screen and (max-width: 800px) {
    img {
      width: 100% !important;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 767px) {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    row-gap: 16px;

    .collage-double,
    .collage-quarter {
      min-height: 300px;
      height: 300px;
    }

    & > :nth-child(3n + 1),
    .collage-double {
      grid-column: span 1;
    }
  }

  @media screen and (max-width: 640px) {
    .collage-double,
    .collage-quarter {
      min-height: 260px;
      height: 260px;
    }
  }

  &:has(:last-child:nth-child(7)) {
    grid-template-columns: repeat(10, 1fr);
    gap: 16px;

    .collage-double {
      grid-column: span 5;
    }

    .collage-single {
      grid-column: span 2;
    }

    @media screen and (max-width: 1520px) {
      .collage-single {
        .collage-text-box {
          padding: 18px;

          h3 {
            font-size: 24px;
            margin-bottom: 6px;
          }
        }
      }
    }

    @media screen and (min-width: 801px) and (max-width: 1280px) {
      grid-template-columns: repeat(6, 1fr);

      .collage-double {
        grid-column: span 3;
      }

      .collage-single {
        grid-column: span 2;

        &:nth-child(6),
        &:nth-child(7) {
          grid-column: span 3;
        }
      }
    }

    @media screen and (max-width: 800px) {
      grid-template-columns: repeat(2, 1fr);

      .collage-text-box h3 {
        font-size: 24px;
        margin-bottom: 6px;
      }

      .collage-single,
      .collage-double {
        grid-column: span 1;
        min-height: 218px;
        height: 218px;
      }

      & > :nth-child(3n + 1) {
        grid-column: span 2;
      }
    }

    @media screen and (min-width: 641px) and (max-width: 800px) {
      .collage-main {
        &:has(.collage-list) {
          height: auto;
          grid-column: span 2;

          & ~ .collage-main:not(:has(.collage-list)) {
            grid-column: span 1;

            &:nth-child(5) {
              grid-column: span 2;
            }
          }
        }
      }
    }

    @media screen and (max-width: 640px) {
      grid-template-columns: 1fr;

      .collage-single,
      .collage-double,
      .collage-main {
        grid-column: span 1;
        min-height: 200px;
        height: 200px;
      }
    }
  }
}

/** DEDICATED TRAVEL AGENCY SECTION */
.row-dual,
.section-about-values {
  --_padding-block: 60px;

  & > div {
    padding: var(--_padding-block) 40px;
    height: auto;
  }

  & > :first-child {
    background-color: var(--color-brand-primary-400);
    width: 60%;
    padding-left: calc(50vw - 760px);
    position: relative;

    .row-travel-experts {
      margin-inline: 0;

      & > div {
        padding: 0;
      }

      .row-dual-sideimg {
        background-position: bottom right;
        right: -20px;
      }
    }

    h1,
    h2 {
      color: var(--color-brand-primary-800);
    }

    button,
    .button-link {
      background-color: var(--color-brand-primary-800);
      color: var(--color-brand-primary-400);
      text-transform: none;
      font-family: var(--font-body) !important;
      font-weight: bold;
      font-size: var(--_min-a11y-font-size);
      line-height: 1;
      padding: 13px 22px;
      border-radius: 30px;
      border: 0;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--color-brand-primary-700);
      }
    }
  }

  & > :last-child {
    width: 40%;
    padding-right: calc(50vw - 760px);
    background-color: var(--color-brand-secondary);

    .button-link {
      background-color: var(--color-brand-primary-400);
      color: var(--color-brand-primary-800);
      text-transform: none;
      font-family: var(--font-body);
      font-weight: bold;
      font-size: var(--_min-a11y-font-size);
      line-height: 1;
      padding: 13px 22px;
      border-radius: 30px;
      border: 0;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-bottom: 0 !important;

      &:hover {
        background-color: var(--color-brand-primary);
        color: var(--color-brand-primary-800);
      }
    }

    ul {
      margin-bottom: 0;

      li {
        color: var(--color-white);
        padding-bottom: 20px;

        &:last-child {
          padding-bottom: 0;
        }
      }

      & + div {
        text-align: left;
        padding-left: 0;
        margin-top: 32px;
      }
    }
  }

  h1,
  h2 {
    text-transform: none;
    font-weight: normal;
    font-size: 48px;
    line-height: 44px;
    margin: 0 0 var(--_section-gap);
    text-wrap: balance;
    text-align: left;

    @media screen and (max-width: 1280px) {
      font-size: 36px;
      line-height: 38px;
    }
  }

  p,
  ul li {
    color: var(--color-brand-primary-800);
    font-family: var(--font-body) !important;
    text-wrap: pretty;
    font-size: 18px;
    line-height: 1.25;
    text-align: left;

    & > img {
      margin-right: 8px; /** icon */
    }

    &:last-child {
      margin-bottom: 0;
    }

    &:has(+ button) {
      margin-bottom: 32px;
    }
  }

  .row-dual-green {
    p {
      color: var(--color-white) !important;
    }

    .row-travel-experts {
      p {
        color: var(--color-brand-primary-800) !important;
      }
    }
  }

  @media screen and (max-width: 1580px) {
    & > :first-child {
      padding-left: var(--_section-padding-inline);

      .row-travel-experts {
        .row-dual-sideimg {
          right: -20px;
          bottom: 0;
        }
      }
    }

    & > :last-child {
      padding-right: var(--_section-padding-inline);
    }
  }

  @media screen and (max-width: 1200px) {
    display: block;

    & > :first-child,
    & > :last-child {
      display: block;
      width: 100%;
      padding-inline: var(--_section-padding-inline);
    }

    .col-md-12 {
      float: none;
    }

    & > :first-child {
      .row-travel-experts {
        display: flex;

        .row-dual-sideimg {
          right: 0;
          bottom: calc(0px - var(--_padding-block));
          margin-top: -100px;
          margin-left: auto;
          width: 80%;
          background-position: bottom right;
          height: 420px;
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    & > :first-child {
      .row-travel-experts {
        flex-direction: column;

        .row-dual-sideimg {
          margin-top: -160px;
        }
      }
    }
  }

  @media screen and (max-width: 800px) {
    & > div {
      text-align: left;

      p {
        text-align: left;
        padding-bottom: 0;
      }
    }
  }
}

.section-about-values {
  display: grid;
  grid-template-columns: 1fr;

  .founder-row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    width: 100%;
    padding-block: 0;

    & > * {
      width: 50%;
      float: none;
      padding-inline: 0;
    }

    .founder-image-large {
      padding-inline: 0;
      background-position: bottom right;
      max-height: 460px;
    }

    h1 {
      margin-top: var(--_padding-block);
    }

    blockquote {
      font-size: 24px;
      line-height: 1.25;
      font-weight: normal;
      font-family: var(--font-body);
      text-transform: none;
      color: var(--color-brand-primary-800);
      text-wrap: pretty;
      padding-block: 0;

      @media screen and (max-width: 768px) {
        font-size: 20px;
      }
    }

    .founder {
      padding-bottom: 70px;
    }

    h2,
    h3,
    p {
      font-size: 18px;
      font-family: var(--font-body) !important;
      font-weight: normal;
      text-transform: none;
      color: var(--color-brand-primary-800) !important;
      margin-bottom: 12px;
    }

    h2,
    h3 {
      margin-bottom: 4px;
      font-weight: bold;
    }

    p {
      color: var(--color-brand-primary-700) !important;
    }

    .button-link {
      margin-bottom: 0;
    }
  }

  & > :first-child,
  & > :last-child {
    width: 100%;
    padding-inline: calc(50vw - 770px) !important;
  }

  & > :last-child {
    h1 {
      margin-bottom: var(--_section-gap);
    }

    h2,
    h3,
    p {
      color: var(--color-white) !important;
      font-family: var(--font-body) !important;
      font-weight: normal;
      text-transform: none;
      font-size: 24px;
    }

    h2,
    h3 {
      margin-top: 0;
      font-weight: bold;
      line-height: 22px;
      margin-bottom: 16px;
    }

    p {
      font-size: 16px;
    }

    & > * {
      margin-inline: auto;
    }

    @media screen and (max-width: 992px) {
      & > div:not(:first-child):not(:last-child) {
        margin-bottom: 24px;
      }
    }

    @media screen and (max-width: 768px) {
      & > * {
        padding-inline: 0;
      }

      h3 {
        font-size: 20px;
        line-height: 1.25;
      }
    }
  }

  .founder-row:first-of-type {
    padding-bottom: 0;
    gap: 48px;

    .founder-image-large {
      position: static;
      width: 30%;
      min-width: 260px;

      & + div {
        width: 50%;
      }
    }

    & + div {
      p {
        margin-bottom: 16px;
      }

      & > :last-child {
        p:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @media screen and (max-width: 1540px) {
    & > :first-child,
    & > :last-child {
      padding-inline: var(--_section-padding-inline) !important;
    }
  }

  @media screen and (max-width: 1280px) {
    & > div {
      h1 {
        font-size: 36px;
        line-height: 38px;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .founder-row:first-of-type {
      .founder-image-large {
        height: 400px;
      }
    }

    & > div {
      h1 {
        font-size: 28px;
        line-height: 32px;
      }
    }
  }

  @media screen and (max-width: 767px) {
    .founder-row:first-of-type {
      .founder-image-large {
        & + div {
          width: 100%;

          .founder {
            padding-bottom: 0;
          }

          .founder-text {
            h3 {
              margin-top: 0;
            }

            .button-link {
              width: auto;
            }
          }

          .founder-image-small {
            margin: 0;
          }
        }
      }
    }
  }

  @media screen and (max-width: 480px) {
    & > div {
      h1 {
        font-size: 24px;
        line-height: 26px;
      }
    }
  }
}

#rebrand {
  p {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

/** PROMOTIONS SECTION */
.row-strip {
  @media screen and (max-width: 1024px) {
    flex-direction: column;
  }

  .promotions {
    .cstrip {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .offer-label {
      background-color: var(--color-brand-citrus);
      color: var(--color-brand-secondary);
      font-family: var(--font-body);
      text-transform: none;
      line-height: 1;
      font-weight: bold;
      font-size: 16px;
      border-radius: 30px;
      width: fit-content;
      padding: 10px 14px 10px 12px;
      top: -16px;
      left: 24px;
    }

    .text {
      background-color: var(--color-brand-sandstone);
      padding: 24px;
      border-radius: 16px;
      text-align: left;
      margin-left: calc(50vw - 760px);
      max-width: 540px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: end;

      &:has(.offer-label) {
        padding-top: 40px;
      }

      h2 {
        font-size: 48px;
        line-height: 1.05;
        padding-top: 0;
        font-family: var(--font-sans) !important;
        font-weight: normal;
        text-transform: none;
        color: var(--color-brand-secondary);
        margin: 0 0 12px;
        grid-column: 1 / -1;
      }

      p {
        font-size: 18px;
        text-shadow: none;
        font-weight: normal;
        color: var(--color-brand-charcoal);
        line-height: 1.25;
        margin-bottom: 32px;
        grid-column: 1 / -1;
        text-wrap: pretty;
      }

      .price-from .price-superscript {
        font-size: 14px;
        color: var(--color-brand-charcoal-tint);
      }

      .price {
        font-size: 16px;
        line-height: 1;
        font-weight: bold;
        font-family: var(--font-body) !important;
        text-transform: none;
        color: var(--color-brand-marigold-shade);
        text-shadow: none;

        .mwp {
          font-size: 40px;
        }
      }

      .button-container {
        margin-left: auto;

        button {
          font-family: var(--font-body);
          font-size: var(--_min-a11y-font-size);
          text-transform: none;
          font-weight: bold;
          padding: 13px 22px;
          margin-top: 0;
          line-height: 1;
          border-radius: 30px;
          transition: background-color 0.3s ease;
        }
      }
    }
  }

  .col-strip-a {
    @media screen and (max-width: 1580px) {
      .promotions {
        .text {
          margin-left: var(--_section-padding-inline);
        }
      }
    }

    @media screen and (max-width: 1340px) {
      width: 50%;

      .promotions {
        .text {
          margin-left: var(--_section-padding-inline);
          margin-right: 40px;

          h2 {
            font-size: 32px;
          }
        }
      }
    }

    @media screen and (max-width: 1024px) {
      width: 100%;

      .promotions {
        height: auto;
        min-height: unset;

        .text {
          margin-inline: auto;
        }
      }
    }

    @media screen and (max-width: 640px) {
      .promotions {
        .text {
          margin-inline: var(--_section-padding-inline);
        }
      }
    }
  }

  .col-strip-b {
    background-color: var(--color-brand-secondary);
    display: flex;
    align-items: center;
    flex-direction: column;

    .contact-strip-b {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      height: auto;
      padding-block: var(--_section-padding-block);
      padding-right: calc(50vw - 760px);

      @media screen and (max-width: 1340px) {
        padding-block: 40px;
      }

      .headline-section {
        margin: 0 0 32px;
        text-align: left;
        color: var(--color-white);
        text-wrap: balance;
      }

      .lead {
        font-family: var(--font-body);
        font-size: 18px;
        line-height: 1.25;
        text-align: left;
        color: var(--color-white);
        text-wrap: pretty;
      }

      .contact-items {
        margin-inline: 0;
        width: 400px;
        display: flex;
        gap: 36px;

        &:before,
        &:after {
          content: none;
        }

        h3 {
          font-size: 16px;
          font-family: var(--font-body);
          font-weight: bold;
        }

        .col-opt {
          .icon {
            color: var(--color-brand-primary);

            &:hover {
              color: var(--color-brand-primary-400);
            }
          }
        }
      }

      .buttons {
        text-align: left;

        .button-link {
          background-color: var(--color-brand-primary-400);
          color: var(--color-brand-primary-800);

          &:hover {
            background-color: var(--color-brand-primary);
            color: var(--color-brand-primary-800);
          }
        }
      }
    }

    @media screen and (max-width: 1580px) {
      padding-right: var(--_section-padding-inline);
    }

    @media screen and (max-width: 1340px) {
      width: 50%;
    }

    @media screen and (max-width: 1024px) {
      width: 100%;
      padding-right: 0;

      .contact-strip-b {
        padding-inline: var(--_section-padding-inline);

        .headline-section,
        .lead,
        .buttons {
          text-align: center;
        }

        .contact-items {
          width: 100%;
          margin-inline: auto;

          .col-opt {
            width: 100%;

            a {
              text-align: center;
            }
          }
        }
      }
    }
  }

  .featured-b {
    height: 100%;
    padding-block: var(--_section-padding-block);
    padding-left: calc(50vw - 760px);
    background-color: var(--color-brand-sandstone);

    @media screen and (max-width: 1580px) {
      padding-left: var(--_section-padding-inline);
    }

    @media screen and (max-width: 1340px) {
      padding-block: 40px;
    }

    h2 {
      text-transform: none;
      font-weight: normal;
      font-size: 48px;
      line-height: 44px;
      margin: 0 0 24px;
      text-wrap: balance;
      text-align: left;
    }

    .lead {
      margin-bottom: 20px;
      margin-left: 0;
      text-align: left;
    }

    .card_featured {
      .card__horizontal {
        border-radius: 16px;
        box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;

        &:hover {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      }

      .card-img {
        border-radius: 16px 0 0 16px;
      }

      .subheadline--card,
      .card h2 {
        font-family: var(--font-body) !important;
        color: var(--color-brand-charcoal-tint);
        margin-bottom: 4px;
        font-weight: normal;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .headline--small {
        font-family: var(--font-body) !important;
        color: var(--color-brand-charcoal-shade);
        font-weight: bold;
      }

      .card-price,
      .card-currency {
        font-family: var(--font-body) !important;
        color: var(--color-brand-marigold);
      }

      .card-price {
        margin-bottom: 8px;
        font-weight: bold;
      }

      .currency-switcher {
        ul {
          background-color: var(--color-white);
          border-radius: 4px;
          width: 110px;
          padding: 8px 12px;

          li {
            color: var(--color-brand-charcoal);
            padding: 4px 0;

            &:hover {
              color: var(--color-brand-charcoal-shade);
            }
          }
        }
      }

      @media screen and (max-width: 1240px) {
        .card__horizontal-title,
        .card__horizontal-price {
          display: block;
        }

        .card__horizontal-title {
          padding-bottom: 0;
        }

        .card__horizontal-price {
          padding-top: 0;
        }
      }
    }
  }
}

/** REVIEWS SECTION */
.sec-customer-reviews {
  .row {
    margin-inline: 0;

    & > * {
      padding-inline: 0;
      width: 100%;
    }

    &:has(.cr-link) {
      text-align: center;
    }
  }

  .container,
  .row,
  .cr-image-container {
    width: 1520px;
    max-width: 100%;
    padding-inline: var(--_section-padding-inline);
    margin-inline: auto;

    @media screen and (max-width: 1520px) {
      width: 100%;
      max-width: 100%;
    }
  }

  .cr-text-container {
    gap: 24px;

    & > * {
      flex: 1;
      height: 100%;
    }
  }

  .cr-text {
    background-color: var(--color-brand-sandstone);
    border-radius: 16px;
    padding: 24px 30px 30px;
    border: 1px solid var(--color-brand-sandstone-shade);

    .cr-title {
      color: var(--color-brand-secondary);
      font-family: var(--font-sans);
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      text-transform: none;

      .initial {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        background-color: var(--color-brand-primary);
        color: var(--color-brand-primary-800);
        font-size: 24px;
        line-height: 1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
      }

      span {
        /* reviewer's country */
        font-family: var(--font-serif);
        font-weight: normal;
        font-size: 14px;
        line-height: 1.2;
        text-transform: none;
        color: var(--color-brand-charcoal-tint);
      }
    }

    .cr-stars {
      color: var(--color-brand-citrus);
      font-size: 20px;
    }

    .text {
      font-family: var(--font-body);
      font-weight: normal;
      font-size: 16px;
      line-height: 1.2;
      text-transform: none;
      color: var(--color-brand-charcoal-tint);
      text-wrap: pretty;

      .cr-more {
        color: var(--color-brand-primary-600);
      }

      &:not(.show) {
        .text-full {
          opacity: 0;
        }
      }
    }

    .review-tour {
      margin-top: 0;

      a {
        font-family: var(--font-body);
        font-size: var(--_min-a11y-font-size);
        text-transform: none;
        font-weight: bold;
        padding: 9px 22px;
        margin-top: 0;
        margin-left: -2px;
        line-height: 1;
        border-radius: 30px;
        transition: background-color 0.3s ease;
        color: var(--color-white);
        background-color: var(--color-brand-marigold);
        text-decoration: none;
        margin-top: 20px;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
          background-color: var(--color-brand-marigold-shade);
          color: var(--color-white);
        }
      }
    }
  }

  .cr-video {
    width: 100%;
    height: auto;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    max-width: 33%;
    max-height: 260px;
  }

  .cr-image-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-brand-charcoal-tint);
    text-wrap: pretty;
  }

  .cr-link {
    font-family: var(--font-body);
    text-transform: none;
    color: var(--color-brand-primary-800);
    background-color: var(--color-brand-primary-400);
    padding: 9px 22px;
    border-radius: 30px;
    text-decoration: none;
    transition: color 0.3s ease;
    margin: 0 auto var(--_section-gap);
    display: inline-block;
    font-size: var(--_min-a11y-font-size);
    font-weight: bold;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--color-brand-primary);
      color: var(--color-brand-primary-800);
    }
  }

  .cr-link-b {
    font-family: var(--font-body);
    text-transform: none;
    color: var(--color-brand-primary-600);
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: var(--color-brand-primary-800);
    }
  }

  .cr-image-container {
    margin-top: 0;
  }

  @media screen and (max-width: 1520px) {
    .cr-text-container {
      max-width: 1200px;
      margin-inline: auto;
      flex-wrap: wrap;

      & > div {
        min-width: 400px;
      }

      iframe {
        min-width: 500px;
        height: 300px;
        margin-inline: auto;
      }

      .cr-text {
        .text:not(.show) {
          max-height: 45px;
        }
      }
    }
  }

  @media screen and (max-width: 1280px) {
    .cr-text-container {
      .cr-text {
        .text:not(.show) {
          max-height: 56px;
        }

        .review-tour {
          a {
            padding-inline: 16px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 940px) {
    .cr-text-container {
      .cr-text {
        .text:not(.show) {
          max-height: 45px;
        }

        .review-tour {
          a {
            padding-inline: 22px;
            white-space: wrap;
            overflow: visible;
            text-overflow: unset;
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    .row {
      padding-inline: 0;
    }

    .cr-text-container {
      padding-inline: 0;

      & > div {
        min-width: 100%;
        margin-left: 0 !important;
      }

      .cr-text {
        width: 100%;
        padding: 20px;

        .text:not(.show) {
          max-height: 80px;
        }
      }

      iframe {
        min-width: 100%;
        margin-top: 0;
      }
    }
  }
}

.es-main-content {
  .es-review-background-container {
    background-color: var(--color-brand-sandstone) !important;
    border-color: var(--color-brand-sandstone-shade) !important;
    border-radius: 16px !important;
  }

  .es-rating-item-filled svg path {
    fill: var(--color-brand-citrus) !important;
  }

  .es-text-shortener-control {
    color: var(--color-brand-secondary) !important;
  }

  .es-tab-container {
    &::before {
      border-radius: 10px 10px 0 0;
      inset: 0;
      transform: scale(1);
    }
  }
}

.es-main-content {
  .es-review-background-container {
    background-color: var(--color-brand-sandstone) !important;
    border-color: var(--color-brand-sandstone-shade) !important;
    border-radius: 16px !important;
  }

  .es-rating-item-filled svg path {
    fill: var(--color-brand-citrus) !important;
  }

  .es-text-shortener-control {
    color: var(--color-brand-secondary) !important;
  }

  .es-tab-container {
    &::before {
      border-radius: 10px 10px 0 0;
      inset: 0;
      transform: scale(1);
    }
  }
}


/** WHY CHOOSE NORDIC VISITOR SECTION */
#why-us {
  background-color: var(--color-brand-sandstone);

  .container {
    width: 1520px;
    max-width: 1520px;
    padding-inline: var(--_section-padding-inline);

    @media screen and (max-width: 1520px) {
      width: 100%;
      max-width: 100%;
    }

    .row {
      margin-inline: 0;
    }
  }

  .headline-section {
    color: var(--color-brand-secondary);
    margin-bottom: 0;
  }

  .row-sp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 24px;
    margin-block: 0;

    .sp-container {
      width: 100%;
      margin-bottom: 0;

      &:nth-child(7):last-child {
        grid-column: 2; /* Show last item in second column: TODO: this is a hack to get the last item in the second column */

        @media screen and (max-width: 1428px) {
          /** VERY DEPENDENT ON THE MIN-SIZE IN GRID COLUMNS */
          grid-column: 1;
        }
      }

      .sp {
        border-radius: 16px;
        padding: 32px 36px 32px 32px;
        border: 1px solid var(--color-brand-sandstone-shade);

        .sp-icon {
          width: 75px;
          height: 75px;
          margin-bottom: 16px;
          margin-inline: auto;
          color: var(--color-brand-primary-600);
        }

        h3 {
          font-size: 24px;
          line-height: 1.2;
          margin-bottom: 12px;
          font-family: var(--font-body) !important;
          font-weight: bold;
          color: var(--color-brand-secondary);
        }

        p {
          margin-bottom: 12px;
          font-family: var(--font-body) !important;
          color: var(--color-brand-charcoal-tint);
          text-wrap: pretty;
          font-size: 16px;

          &:empty {
            display: none;
          }

          &:last-child,
          &:has(+ :empty:last-child) {
            margin-bottom: 0;
          }

          .link-red {
            color: var(--color-brand-secondary) !important;
            text-decoration: underline;
            text-underline-offset: 2px;
            font-family: var(--font-body);
            font-size: 1em !important;

            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }

    @media screen and (max-width: 767px) {
      display: flex;

      .sp-container {
        min-width: 300px;

        & + .sp-container {
          margin-left: 0;
        }

        .sp {
          width: 100%;
        }
      }
    }
  }
}

/** TRAVEL IDEAS AND TOUR THEMES SECTION */
.collages-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;

  .collage-inner {
    width: 100%;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;

    a {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: flex-end;

      .collage-bg {
        &:after {
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 55%;
          bottom: 0;
          background-image: linear-gradient(to top, black, transparent);
          transition: height 0.3s ease;
        }
      }

      &:hover {
        .collage-bg:after {
          height: 80%;
        }
      }

      h3 {
        font-family: var(--font-body) !important;
        font-weight: 500;
        font-size: 24px;
        line-height: 1.05;
        text-transform: none;
        color: var(--color-white);
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        margin-bottom: 6px;
        letter-spacing: 0;
        text-align: left;
        padding-inline: 16px;
        margin-inline: 0;
        top: unset;
        margin-top: 0;
        text-wrap: balance;
        position: static;

        &:not(:has(+ .desc)) {
          margin-bottom: 0;
          padding-bottom: 16px;
        }
      }

      .desc {
        font-family: var(--font-serif);
        text-align: left;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.15;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        text-transform: none;
        padding: 0 16px 16px;
        background: none;
        position: relative;
        text-wrap: pretty;
      }
    }
  }

  &:after {
    display: none;
  }

  @media screen and (max-width: 1280px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (max-width: 800px) {
    padding-inline: var(--_section-padding-inline);
    gap: 12px;

    &:not(:has(.collage-inner:nth-child(5))) {
      grid-template-columns: 1fr;
    }

    &:has(.collage-inner:nth-child(5)) {
      .collage-inner {
        &:nth-child(3n + 1) {
          grid-column: span 2;
        }
      }
    }

    .collage-inner {
      width: 100% !important;
    }
  }
}

/** BULLET POINT LIST SECTION */
.info-blocks {
  .info-block .inner-container > * {
    color: var(--color-brand-dark);
  }

  &:has(.info-block:nth-child(2)) {
    .info-block {
      width: 50%;

      &:nth-child(1) {
        .inner-container,
        .link-holder {
          padding-left: calc(50vw - 760px);
        }
      }

      &:nth-child(2) {
        .inner-container,
        & > .info-cards,
        .link-holder {
          padding-right: calc(50vw - 760px);
        }
      }

      .inner-container {
        padding-inline: 40px;

        &:has(.newsletter__signup) {
          gap: 16px;
        }

        .headline-section {
          & + * p {
            font-family: var(--font-serif);
            font-size: 18px;
            font-weight: 300;
            line-height: 1.15;
            text-transform: none;
            text-align: left;
            text-wrap: pretty;
            color: var(--color-brand-charcoal-tint);
            margin: 0;
          }
        }

        p,
        ul {
          max-width: 55ch;
        }

        ul {
          column-count: 1;
        }

        .newsletter__signup {
          margin-top: 72px;
          margin-bottom: 0;

          .container-section {
            padding: 0;
            gap: 16px;

            .newsletter__signup-headline {
              color: var(--color-brand-sandstone);
              text-transform: none;
              font-weight: normal;
              font-size: 48px;
              line-height: 54px;
              margin: 0;
              text-wrap: balance;

              @media screen and (max-width: 1280px) {
                font-size: 36px;
                line-height: 38px;
              }

              @media screen and (max-width: 800px) {
                font-size: 28px;
                line-height: 32px;
              }
            }

            .row {
              .col-md-0 {
                display: none;
              }

              &:has(input) {
                margin-inline: 0;
              }

              .newsletter__input-container {
                padding-inline: 0;
                display: flex;
                background-color: var(--color-white);
                border-radius: calc(var(--_input-height) / 2);

                --_input-height: 60px;

                input {
                  height: var(--_input-height);
                  border-radius: calc(var(--_input-height) / 2);
                  margin-bottom: 0;
                  color: var(--color-brand-charcoal-tint) !important;
                  font-family: var(--font-body);
                  font-weight: normal;

                  &[type="email"] {
                    font-size: 16px;
                    border: 0;
                    background-color: var(--color-white);
                    padding-left: 24px !important;
                  }

                  &[type="submit"] {
                    font-family: var(--font-body);
                    background-color: var(--color-brand-peony);
                    color: var(--color-brand-aubergine) !important;
                    font-size: var(--_min-a11y-font-size);
                    text-transform: none;
                    font-weight: bold;
                    padding: 9px 22px;
                    border: 8px solid var(--color-white);
                    line-height: 1;
                    border-radius: calc(var(--_input-height) / 2);
                    transition: background-color 0.3s ease;

                    &:hover {
                      background-color: var(--color-brand-peony-tint);
                    }
                  }

                  ::placeholder {
                    text-transform: none;
                  }
                }
              }
            }
          }

          label {
            padding-bottom: 0;
            margin-bottom: 0;
          }

          .row:has(form) {
            display: block;
            margin-top: 12px;
            max-width: 65ch;
          }
        }
      }
    }

    @media screen and (max-width: 1580px) {
      .info-block {
        &:first-child {
          .inner-container,
          & > .info-cards,
          .link-holder {
            padding-left: var(--_section-padding-inline);
          }
        }

        &:last-child {
          .inner-container,
          & > .info-cards,
          .link-holder {
            padding-right: var(--_section-padding-inline);
          }
        }

        .inner-container {
          ul {
            column-count: 1;
          }
        }
      }
    }

    @media screen and (max-width: 1024px) {
      .info-block {
        width: 100%;

        &:first-child,
        &:last-child {
          .inner-container,
          & > .info-cards,
          .link-holder {
            padding-inline: var(--_section-padding-inline);
          }
        }

        .inner-container {
          p,
          ul {
            max-width: 100%;
          }

          .newsletter__signup {
            margin-top: 40px;

            .row:has(form) {
              max-width: 70ch;
            }
          }
        }
      }
    }

    @media screen and (max-width: 480px) {
      .info-block {
        .inner-container {
          .newsletter__signup {
            .container-section {
              .row {
                .newsletter__input-container {
                  display: block;
                  border-radius: 28px;

                  input {
                    &[type="email"] {
                      border-radius: 28px !important;
                      padding-inline: 20px !important;
                    }

                    &[type="submit"] {
                      width: 100% !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .info-block {
    padding: 0;
    text-align: left;

    &.block-white {
      background-color: var(--color-white);
    }

    &.block-aubergine,
    &:has(.newsletter__signup) {
      background-color: var(--color-brand-aubergine);

      .inner-container {
        .headline-section {
          color: var(--color-brand-sandstone);
        }

        p label {
          color: var(--color-brand-sandstone) !important;
        }

        section .row {
          .text-center {
            text-align: left;
          }

          label {
            color: var(--color-brand-sandstone) !important;
            font-size: 1em;
            font-family: var(--font-serif);
          }

          & + div {
            display: flex;
            align-items: center;
            gap: 10px;

            &:has(
              .icon-facebook-square,
              .icon-instagram,
              .twitter-x-social,
              .icon-vimeo-square,
              .icon-pinterest-square
            ) {
              margin-top: 16px;
            }

            .icon-facebook-square,
            .icon-instagram,
            .twitter-x-social,
            .icon-vimeo-square,
            .icon-pinterest-square {
              width: 40px;
              height: 40px;
              display: inline-block;
              margin-right: 0 !important;
              color: var(--color-brand-peony);
            }

            .twitter-x-social {
              filter: brightness(0) saturate(100%) invert(92%) sepia(57%)
                saturate(7365%) hue-rotate(277deg) brightness(100%)
                contrast(105%);
            }
          }
        }

        a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .container-section {
          .row,
          .row > * {
            padding-inline: 0;
            margin-inline: 0;
          }

          :before,
          :after {
            display: none;
          }
        }
      }
    }

    &.block-green {
      .inner-container {
        & > p,
        & > ul,
        & > ul li {
          color: var(--color-white) !important;

          a {
            text-decoration: underline;
            text-underline-offset: 2px;
            color: var(--color-white) !important;

            &:hover {
              text-decoration: none;
              color: var(--color-white) !important;
            }
          }
        }
      }
    }

    &.with-button {
      .button-link {
        background-color: var(--color-brand-primary-400);
        color: var(--color-brand-primary-800);

        &:hover {
          background-color: var(--color-brand-primary);
          color: var(--color-brand-primary-800);
        }
      }
    }

    .inner-container {
      width: 100%;
      max-width: 1520px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--_section-gap);
      padding-block: var(--_section-padding-block);
      padding-inline: var(--_section-padding-inline);

      &:has(+ .info-cards) {
        padding-bottom: var(--_section-gap);

        .info-cards {
          padding-right: calc(50vw - 760px);

          @media screen and (max-width: 1580px) {
            padding-right: var(--_section-padding-inline);
          }
        }
      }

      .icon-facebook-square,
      .icon-instagram,
      .twitter-x-social,
      .icon-vimeo-square,
      .icon-pinterest-square {
        width: 40px;
        height: 40px;
        display: inline-block;
        color: var(--color-brand-peony);
      }

      .headline-section {
        padding-bottom: 0;
        text-align: left;
        color: var(--color-brand-secondary);

        & ~ p,
        & ~ * p,
        & ~ * p label,
        & ~ p label {
          font-family: var(--font-body);
          font-size: 18px;
          color: var(--color-brand-charcoal-shade);
          margin: 0;
          max-width: 80ch;
          text-align: left;
          text-wrap: pretty;

          a {
            text-decoration: underline;
            text-underline-offset: 2px;
            color: var(--color-brand-charcoal);
            font-weight: bold;

            &:hover {
              text-decoration: none;
              color: var(--color-brand-charcoal-shade);
            }
          }
        }
      }

      .container {
        padding: 0;
        width: 100%;
      }

      ul {
        margin: 0;
        column-count: 2;
        column-gap: 36px;

        li {
          color: var(--color-brand-charcoal);
          margin-bottom: 12px;
          padding-left: 24px;
          font-size: 18px;
          text-wrap: pretty;

          strong {
            a,
            a.hashclick {
              color: var(--color-brand-secondary);
              text-decoration: underline solid 2px;
              text-underline-offset: 2px;

              &:hover {
                text-decoration: none;
                color: var(--color-brand-secondary-400);
              }
            }
          }
        }
      }
    }
  }

  .info-cards {
    padding-left: var(--_section-padding-inline);
    padding-right: calc(50vw - 760px);
    padding-bottom: var(--_section-padding-block);
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;

    .card-mini {
      margin: 0;
      max-width: var(--_card-width) !important;

      @media screen and (max-width: 992px) {
        max-width: 100% !important;
      }
    }
  }

  .inner-container {
    .info-cards {
      padding-right: var(--_section-padding-inline);
      max-width: 100% !important;
    }
  }

  @media screen and (max-width: 1024px) {
    .info-block {
      .inner-container {
        ul {
          column-count: 1;
        }
      }
    }
  }
}

.info-blocks .info-cards,
.sec-travel-guide-hero {
  .card-mini {
    border-radius: 16px;
    padding: 0;
    max-width: 100%;
    width: 100%;

    @media screen and (min-width: 992px) and (max-width: 1540px) {
      max-width: var(--_card-width);
    }

    & > a {
      padding: 16px;
      display: grid;
      grid-template-columns: 100px 1fr;
      column-gap: 8px;
    }

    h3.card-title {
      font-family: var(--font-body) !important;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 500;
      color: var(--color-brand-secondary);
      margin: 0 0 8px;
      text-transform: none;
      padding-left: 0;
      grid-column: 2;
    }

    p {
      font-size: 14px;
      line-height: 1.2;
      font-weight: 400;
      padding-left: 0;
      color: var(--color-brand-charcoal-tint);
      margin-bottom: 0;
      grid-column: 2;
    }

    .image-circle {
      float: none;
      grid-row: span 2;
    }
  }
}

/** CONTACT FORM SECTION */
#contact,
#contactform,
.dc_custom_contactform {
  .container {
    width: 1520px;
    max-width: 1520px;

    .headline-section,
    .lead {
      text-align: left;
      margin-inline: 0;
    }

    .lead {
      color: var(--color-brand-charcoal-tint);
      margin-bottom: 32px;
      text-wrap: pretty;
    }

    .contact-options {
      display: flex;
      flex-direction: row-reverse;
      gap: 24px;

      & > * {
        flex: 1;
        padding-inline: 0;
      }

      form {
        padding: 0;
        max-width: 700px;
        padding-top: 0;

        label {
          font-size: 18px;
          color: var(--color-brand-secondary);

          .req {
            color: var(--color-brand-marigold);
          }
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea {
          font-size: 18px;
          color: var(--color-brand-charcoal);
          background-color: var(--color-brand-sandstone);
          border: 1px solid var(--color-brand-sandstone-shade);
          border-radius: 16px;
          padding: 24px 20px;
          margin-bottom: 16px;
          width: 100%;
          font-family: var(--font-body);
          font-weight: normal;
          transition: background-color 0.3s ease;

          &::placeholder {
            color: var(--color-brand-charcoal-tint);
          }

          &:focus {
            background-color: var(--color-white);
            box-shadow: none;
            outline: none;
          }
        }

        textarea {
          min-height: 180px;
          padding-block: 16px;
        }

        input[type="submit"] {
          font-size: var(--_min-a11y-font-size);
          line-height: 1;
          color: var(--color-brand-primary-800);
          background-color: var(--color-brand-primary-400);
          border-radius: 30px;
          padding: 16px 22px;
          font-weight: 600;
          font-family: var(--font-body);
          font-weight: bold;
          text-transform: capitalize;
          transition: background-color 0.3s ease;

          &:hover {
            background-color: var(--color-brand-primary);
            color: var(--color-brand-primary-800);
          }
        }

        .c_mobile {
          display: none !important;
        }
      }

      .cx-contact {
        padding-bottom: 0;
        display: flex;
        flex-direction: column;

        &:has(p strong) {
          min-width: max-content;
        }

        .icon {
          font-size: 60px;
          color: var(--color-brand-secondary);
        }

        h3,
        p strong {
          font-family: var(--font-body) !important;
          font-weight: bold;
          font-size: 40px;
          color: var(--color-brand-secondary);
          line-height: 1.1;
          margin-bottom: 16px;
        }

        p {
          font-family: var(--font-body) !important;
          font-weight: normal;
          font-size: 20px;
          color: var(--color-brand-charcoal-tint);
          line-height: 1.2;
          margin-bottom: 16px;
          text-wrap: pretty;

          strong {
            font-size: 32px;
            line-height: 1.4;
          }
        }

        .cx-footer {
          position: static;
          color: var(--color-brand-charcoal-tint);
          margin-top: auto;
        }
      }
    }

    @media screen and (max-width: 1580px) {
      width: 100%;
      padding-inline: var(--_section-padding-inline);

      .row {
        margin-inline: 0;
      }

      .contact-options {
        .cx-contact {
          h3,
          p strong {
            font-size: 36px;
          }

          p {
            max-width: 30ch;
            margin-inline: auto;

            strong {
              font-size: 30px;
            }
          }
        }
      }
    }

    @media screen and (max-width: 1300px) {
      .headline-section,
      .lead {
        text-align: center;
        margin-inline: auto;
      }

      .contact-options {
        flex-direction: column;
        gap: 40px;

        & > div {
          width: 100%;

          form {
            margin-inline: auto;
          }
        }
      }
    }

    @media screen and (max-width: 640px) {
      .row-flex {
        flex-direction: column;
        gap: 24px;

        & > div {
          width: 100%;
        }
      }

      .contact-options {
        form {
          padding-inline: 20px;
        }
      }
    }
  }
}

/** POPULAR BLOG POSTS SECTION */
.blog-feed {
  padding-block: 0;

  h2 {
    text-align: center;
  }

  .blog-feed-row {
    display: flex;
    gap: 24px;

    &:before,
    &:after {
      content: none;
    }

    .blog-feed-item {
      flex: 1;
      width: auto;
      padding: 0;
      margin: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 4px -2px rgba(0, 0, 0, 0.25);
      transition: box-shadow 0.2s ease-in-out;

      &:has(.blog-feed__tags) {
        background-color: var(--color-brand-sandstone);
      }

      &:hover {
        box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.25);
      }

      & > a {
        height: 100%;
        display: flex;
        flex-direction: column;

        &:has(+ .blog-feed__tags) {
          height: auto;
        }
      }

      .blog-feed-img {
        width: 100%;
        height: 320px;
        background-size: cover;
      }

      h3,
      h4.package-headline {
        font-family: var(--font-body) !important;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.1;
        margin: 0 !important;
        background-color: var(--color-white);
        color: var(--color-brand-secondary);
        padding: 16px;
        text-align: center;
        flex-grow: 1;
      }

      .blog-feed__tags {
        margin-top: 18px;
        text-align: center;

        span {
          position: static;
          color: var(--color-brand-secondary);
        }
      }

      .blog-feed__paragraph {
        padding: 0 20px;
        background-color: var(--color-white);
        font-size: 16px;

        &:after {
          height: 100px;
          background: linear-gradient(
            top,
            rgba(255, 255, 255, 0),
            rgba(252, 250, 250, 1)
          );
        }
      }
    }

    @media screen and (max-width: 991px) {
      padding-bottom: 12px;
      margin-inline: -30px;

      &.blog-feed-row-x {
        .blog-feed-item {
          &:first-child {
            margin-left: 30px;
          }

          &:last-child {
            margin-right: 30px;
          }
        }
      }
    }
  }

  .container-padbtm {
    padding-bottom: 0;
    margin-top: var(--_section-gap);
    width: 100%;
    max-width: 1500px;
    padding-inline: var(--_section-padding-inline);

    .button-link {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  &.sec-color-green {
    .container-padbtm {
      .button-link {
        background-color: var(--color-white);
        color: var(--color-brand-secondary);

        &:hover {
          background-color: rgba(255, 255, 255, 0.8);
          color: var(--color-brand-secondary);
        }
      }
    }
  }
}

section.section-help {
  .container {
    padding-bottom: 0;
    padding-inline: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;

    .row {
      margin-inline: 0;

      &:first-child {
        grid-column: span 2;
      }

      &:has(> div .button-link) {
        & > div {
          display: flex;
          gap: 20px;
          flex-wrap: wrap;

          .button-link {
            margin: 0;
          }
        }
      }

      &:has(.help-flex-image-container) {
        grid-column: 2;
      }

      .help-flex-image-container {
        height: 331px;
        width: 710px;
        justify-content: flex-start;

        img {
          width: 861px;
          aspect-ratio: 861 / 331;
          height: 331px;
          margin-right: 0;
        }
      }

      & > * {
        padding-inline: 0;
        text-align: left;
      }
    }
  }

  .headline-section,
  .lead {
    text-align: left;
    margin-inline: 0;
  }

  .button-link {
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);

    &:hover {
      background-color: var(--color-brand-primary);
    }
  }

  .row-dual-sideimg {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
  }

  @media screen and (max-width: 1280px) {
    .container {
      padding-inline: 40px;

      .row {
        .help-flex-image-container {
          width: 600px;
          justify-content: center;
        }
      }
    }
  }

  @media screen and (max-width: 1100px) {
    .container {
      grid-template-columns: 1fr;

      .row {
        grid-column: span 1 !important;

        .help-flex-image-container {
          width: 861px;
          margin-left: calc(100% - 710px);
          height: auto !important;

          img {
            height: auto !important;
            margin-left: 0;
            max-width: 100%;
            object-fit: contain;
            object-position: bottom;
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    .container {
      display: block;
      padding-inline: var(--_section-padding-inline);

      .row {
        & + .row {
          margin-top: 24px;
        }

        & > div:has(> .button-link) {
          display: flex;
          flex-wrap: wrap;
          gap: 24px;

          .button-link {
            margin: 0;
          }
        }

        .help-flex-image-container {
          width: 140%;
          margin-left: -20%;
        }
      }
    }
  }
}

.footer-main {
  border: 0;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  z-index: 0 !important;

  .blog__tags,
  .booking-form-request,
  .package-headline,
  .price,
  h2 {
    font-family: var(--font-body) !important;
    font-size: 0.77777778em;
    line-height: 1.71428571em;
    color: var(--color-neutral-750);
    display: block;
    font-weight: 400;
    text-transform: none;
    margin: 0;
  }

  p {
    font-family: var(--font-body);
    color: var(--color-brand-charcoal-tint);
    font-weight: normal;
    text-transform: none;
    display: block;
  }

  .footer-contents {
    padding: 60px 100px;
    background-color: var(--color-brand-sandstone);
    border-radius: 32px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .container,
  .row {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    max-width: 1500px;

    & > *:not(a) {
      width: 100%;
    }

    & > a {
      width: fit-content;
    }

    &:before,
    &:after {
      content: none;
    }

    &:last-of-type {
      padding-top: 0;
    }
  }

  .logo {
    height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .container {
    &:has(.footer-social) {
      display: flex;
      justify-content: space-between;

      .footer-blog {
        width: max-content;
      }
    }
  }

  .footer-connect,
  .footer-blog,
  .footer-social {
    padding-inline: 0;
    float: none;
    width: auto;
    max-width: 40%;
  }

  .footer-connect {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    background: none;

    & > span {
      grid-column: span 2;
      grid-row: 1;
      margin-bottom: 0;
    }

    span {
      font-size: 24px;
      line-height: 24px;
      color: var(--color-brand-aubergine);
    }
  }

  .footer-social {
    display: flex;
    padding-top: 0;
    gap: 8px;

    & > * {
      flex: 1;
      width: 24px;
      height: 24px;
      margin: 0;
    }

    span {
      height: 24px;
    }
  }

  .footer-connect > span,
  .footer-headline,
  .footer-blog span,
  .latestblog {
    font-size: 20px !important;
    font-family: var(--font-serif);
    font-weight: normal;
    color: var(--color-brand-charcoal-shade) !important;
    padding: 0;
    margin-bottom: 8px;
    text-transform: none;
    text-align: left;
    line-height: 1.4;
    text-wrap: pretty;
  }

  .footer-connect {
    a {
      color: var(--color-brand-aubergine);
      font-family: var(--font-body);
      font-size: 24px;
      font-weight: bold;
      text-transform: none;
      transition: color 0.3s ease;

      &:hover,
      &:hover span {
        color: var(--color-brand-peony);
      }

      &:has(.twitter-x-social) {
        &:hover {
          filter: brightness(0) saturate(100%) invert(92%) sepia(57%)
            saturate(7365%) hue-rotate(277deg) brightness(100%) contrast(105%);
        }
      }
    }

    & > a {
      &:hover {
        text-decoration: underline solid 3px var(--color-brand-peony);
      }
    }
  }

  .footer-blog a {
    font-size: 24px;
    font-family: var(--font-body);
    font-weight: bold;
    color: var(--color-brand-secondary);
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover {
      text-decoration: none;
      color: var(--color-brand-secondary-400);
    }
  }

  .footer-destinations {
    text-align: left;
    max-width: 70%;

    ul {
      margin-bottom: 0;

      li {
        font-size: 16px;
        line-height: 1.1;
        font-family: var(--font-body);
        text-transform: none;

        &:after {
          color: var(--color-brand-charcoal-tint);
          line-height: inherit;
          font-size: inherit;
        }

        a {
          font-weight: bold;
          color: var(--color-brand-secondary);
          text-underline-offset: 2px;

          &:hover {
            color: var(--color-brand-secondary-400);
            text-decoration: underline solid 2px;
          }
        }
      }
    }
  }

  .footer-link-cols {
    text-align: left;
    display: flex;
    column-gap: 24px;

    & > div {
      float: none;
      width: auto;
      padding-inline: 0;
      flex: 1;
    }

    ul {
      li {
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--color-brand-charcoal-tint);
        line-height: 2;
        font-weight: 500;
        text-transform: none;

        a {
          color: var(--color-brand-secondary);
          text-underline-offset: 3px;

          &:hover {
            color: var(--color-brand-secondary-400);
            text-decoration: underline;
          }
        }
      }
    }

    .dropdown {
      margin-bottom: 0;

      .footer-headline-dropdown {
        font-family: var(--font-body);
        text-transform: none;
        font-size: 16px;
        font-weight: normal;
        color: var(--color-brand-charcoal);
      }

      ul {
        li {
          a {
            font-weight: normal;
            font-size: 16px;
            line-height: 1.5;
            color: var(--color-brand-charcoal);

            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  .footer-licenses,
  .footer-getintouch,
  .footer-payments {
    padding-inline: 0;
  }

  .footer-licenses {
    .footer-round-icon {
      background-color: var(--color-brand-secondary);
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  .footer-bottom {
    & > .container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .footer-bottom-right {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;

      * {
        float: none;
      }
    }
  }

  .footer-payments {
    width: fit-content;

    a {
      display: grid;
      grid-template-columns: repeat(4, 24px);
      gap: 8px;
      width: fit-content;

      :first-child {
        grid-column: span 4;
        margin-bottom: 0;
      }
    }
  }

  .logo-tripadvisor {
    margin: 0;
    padding: 0;
    width: 153px;
  }

  .footer-getintouch {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    color: var(--color-brand-charcoal);

    a {
      color: var(--color-brand-secondary);
      text-decoration: underline;
      text-underline-offset: 3px;

      &:hover {
        color: var(--color-brand-secondary-400);
        text-decoration: none;
      }
    }
  }

  h5 {
    font-family: var(--font-body) !important;
    color: var(--color-brand-charcoal-tint);
    font-size: 16px !important;
  }

  @media screen and (max-width: 1580px) {
    margin-inline: 30px;
    width: calc(100% - 60px);
    max-width: calc(100% - 60px);

    .footer-contents {
      padding-inline: 60px;
    }
  }

  @media screen and (max-width: 1279px) {
    margin-inline: 0;
    width: 100%;
    max-width: 100%;

    .footer-contents {
      border-radius: 0;
      padding-inline: 40px;

      .footer-connect {
        margin-inline: 0;
        margin-bottom: 0;
      }

      .footer-blog {
        text-align: left;
      }
    }

    .footer-bottom {
      .container {
        flex-direction: column;
        gap: 24px;

        & > div {
          text-align: left;
        }
      }

      .footer-bottom-right {
        justify-content: flex-start;
        align-items: flex-start;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .container {
      &:has(.footer-social) {
        flex-direction: column;
      }

      .footer-connect,
      .footer-blog {
        max-width: 100%;
      }
    }

    .footer-link-cols {
      flex-direction: column;
      gap: 24px;

      & > div {
        width: 100%;
        max-width: 60ch;
      }
    }
  }

  @media screen and (max-width: 767px) {
    .footer-contents {
      padding-block: 40px;
      padding-inline: var(--_section-padding-inline);

      .logo {
        width: 300px;
        height: 60px;
      }

      .footer-connect {
        display: block;

        .footer-social {
          margin-top: 12px;
        }
      }
    }
  }
}

.footer-copyright {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 100px 64px !important;
  color: var(--color-brand-charcoal-tint);

  & * {
    float: none;
  }

  p {
    margin-bottom: 0;
  }
}

/** TOUR CARDS */
.container-section.mobile-horizontal-container {
  margin-bottom: var(--_section-gap);
}

.mobile-tour-horizontal-row {
  display: flex;
  gap: 24px;
  margin: 0;

  &:has(> :nth-child(5)) {
    /** eg. TOURS ON LANDING PAGE WITH "SHOW MORE" */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));

    & > * {
      min-width: 275px;
      width: 100% !important;
      max-width: var(--_card-width);
      margin: 0 auto;

      .card {
        margin: 0 auto;
      }

      @media screen and (max-width: 1231px) {
        &:nth-child(5),
        &:nth-child(6) {
          display: block !important;
        }
      }
    }
  }

  &:not(:has(> :nth-child(5))) {
    /** eg. TOURS ON HOMEPAGE WITH LINK OUT TO ANOTHER PAGE */
    @media screen and (max-width: 1240px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      justify-items: center;
      margin-inline: auto;

      & > * {
        min-width: var(--_card-width);
      }

      & > :nth-child(odd) {
        justify-self: end;
      }

      & > :nth-child(even) {
        justify-self: start;
      }
    }

    @media screen and (max-width: 800px) {
      grid-template-columns: 1fr;
    }

    @media screen and (max-width: 480px) {
      overflow-x: visible;
    }

    @media screen and (max-width: 380px) {
      & > div {
        width: 100%;
        min-width: 0;
      }
    }
  }

  @media screen and (max-width: 800px) {
    grid-template-columns: 1fr;

    & > :nth-child(odd),
    & > :nth-child(even) {
      justify-self: center !important;
      width: var(--_card-width);
    }
  }

  /** horizontal scroll */
  @media screen and (max-width: 480px) {
    display: flex;
    margin-inline: calc(0px - (var(--_section-padding-inline)));
    padding-bottom: 16px;
    align-items: normal;

    & > div {
      min-width: var(--_card-width);
    }
  }

  &:before,
  &:after {
    content: none;
  }

  & > * {
    padding-inline: 0;
    flex: 1;
    width: auto;

    .card {
      margin-inline: auto;
    }
  }

  &:not(:has(> :nth-child(4))) {
    & > * {
      /** force justify start when less than 4 items */
      max-width: var(--_card-width);
    }

    &:has(.card-info) {
      /** justify center when this is a row with a card-info */
      justify-content: center;
    }
  }
}

.card {
  &:hover {
    transform: none;
  }
/** #CARDBACK: Added card-back for same styling on both sides */
  .card-front,
  .card-back {
    padding-bottom: 0;
    border-radius: 16px;
    min-height: auto;
    box-shadow: 0 6px 7px rgba(0, 0, 0, 0.25);
    background-color: var(--color-white);
  }

  @media (min-width: 481px) and (max-width: 1310px) {
    .card-front {
      h1 {
        font-size: 1.233337em;

        &.long {
          font-size: 1.2em;
        }
      }

      h2.sub-name {
        font-size: 0.8666em;
      }
    }
  }

  &.flip {
    /** repeat */
    .card-front,
    .card-back {
      padding-bottom: 0;
      border-radius: 16px;
      min-height: auto;
      box-shadow: 0 6px 7px rgba(0, 0, 0, 0.25);
      background-color: var(--color-white);
    }

    @media (max-width: 640px) {
      &:not(.card-tour) {
        position: fixed;
      }
    }
  }

  &.card-accommodation {
    @media (max-width: 640px) {
      .card-back .inner-form {
        min-height: 100px;
      }
    }
  }

  &.url-link {
    min-height: 0;
  }

  .card-travel-guide {
    background-color: var(--color-white);
    border: 1px solid var(--color-brand-granite-tint);
    border-radius: 16px;
    padding: 36px 0;
    box-shadow: 0 6px 7px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    }

    h3.card-title {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 24px;
      font-weight: 500;
      line-height: 1;
      text-transform: none;
      color: var(--color-brand-secondary);
      font-family: var(--font-body);
      padding-inline: 24px;
    }

    p {
      margin-bottom: 0;
      font-weight: normal;
      text-transform: none;
      color: var(--color-brand-charcoal);
      font-family: var(--font-body);
      padding-inline: 24px;
    }

    .card-map-link {
      background-color: var(--color-brand-sandstone);
      color: var(--color-brand-charcoal-shade);
      padding-inline: 24px;
      font-size: 14px;
      font-weight: 500;
      text-transform: none;
      text-align: center;
      font-family: var(--font-body);
    }
  }
}

.card,
.card-tour,
.card-optional,
.card-back-full {
  --_padding: 24px;
  --_card-map-link-height: 45px;

  @media screen and (max-width: 1500px) {
    --_padding: 16px;
  }
}

.card-tour,
.card-optional {
  --_img-height: 231px;
  --_transport-height: 36px;

  margin-inline: 0;
  margin-bottom: 0;
  min-height: auto;
  height: 100% !important;

  @media screen and (max-width: 480px) {
    --_img-height: 130px;
  }

  @media screen and (max-width: 991px) {
    --_img-height: 130px;
  }

  &:hover {
    transform: none;

    .card-front,
    .card-back {
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

      .card-img {
        opacity: 0.8;
      }
    }
  }

  .card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - var(--_img-height));
    padding-top: 0;

    &:not(:has(.card-price-container)) {
      .card-map-link,
      .card-flip-link {
        margin-top: auto;
      }
    }
  }

  .card-front,
 .card-back {
    a:hover {
      & ~ .card-title,
      & ~ .card-content .card-title {
        color: var(--color-brand-primary-700);
      }

      & ~ .sub-name,
      & ~ .card-content .sub-name {
        color: var(--color-brand-charcoal-tint);
      }
    }

    &:not(:has(> .card-content)) {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .card-img {
      height: var(--_img-height);
      transition: opacity 0.3s ease;
    }

    .card-transport {
      height: var(--_transport-height);
      margin-top: calc(0px - (var(--_transport-height) / 2));
      float: none;
      position: absolute;
      top: var(--_img-height);

      & + * {
        padding-top: var(--_transport-height) !important;
      }

      .card-transport-inner {
        padding: 10px 12px;
        height: var(--_transport-height);
        font-size: 14px;
        line-height: 1.2;
        font-weight: bold;
        font-family: var(--font-body);
        text-transform: none;
        color: var(--color-brand-secondary);
        background-color: var(--color-white);
      }
    }

    .card-duration,
    h3 + span {
      order: 2;

      @media screen and (min-width: 1501px) {
        order: 1;
      }
    }

    .card-duration-stars {
      display: grid;
      gap: 12px;
      align-items: center;
      margin: 0 0 12px;
      grid-template-columns: auto 125px;

      @media screen and (max-width: 1500px) {
        gap: 4px;
        grid-template-columns: 1fr;
      }
    }

    .stars {
      display: flex;
      align-items: center;
      gap: 2px;
      width: fit-content;
      order: 1;

      .stars-rating {
        font-size: 16px;
      }

      @media screen and (min-width: 1501px) {
        justify-self: end;
        order: 2;
      }

      i {
        color: var(--color-brand-citrus);
        width: 0.8em;
        font-size: 1em;
      }
    }

    .stars-rating {
      font-family: var(--font-body);
      color: var(--color-brand-charcoal-tint);
      margin: 0 0 0 6px;
    }

/** #CARDBACK: added margin-bottom 0 for consistency with front */
    .sub-name {
      font-size: 14px;
      color: var(--color-brand-primary-700);
      font-weight: bold;
      margin-top: 0;
      margin-bottom: 0;

      @media screen and (max-width: 480px) {
        font-size: 14px !important;
        margin: 0 !important;
      }
    }

    .levels {
      position: static;
      padding-bottom: 0 !important;
      margin-block: 16px;
      justify-content: flex-start;
      gap: 18px;

      &:empty {
        display: none;
      }

      .level {
        align-items: flex-end;
        font-size: 14px;
        font-weight: 500;
        font-family: var(--font-body);
        text-transform: none;
        color: var(--color-brand-charcoal-tint);
      }
    }
  }

  &.card-optional {
    .card-front {
      .card-img {
        @media screen and (max-width: 1024px) {
          --_img-height: 130px;
        }
      }
    }
  }
}

.card-tour .card-front,
.card-tour .card-back,
.card-optional .card-front,
.card-optional .card-back,
.card-back-full {
  * {
    text-align: left;
  }
/** #CARDBACK: Added position fixed */
  .destination-label,
  .card-special-offer,
  .card-label,
  .card-best-offer {
    position: fixed;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
    color: var(--color-brand-charcoal);
    padding: 8px 12px;
    border-radius: 0 30px 30px 0;
    line-height: 1;
    height: auto;
    top: 16px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .card-title,
  h3,
  h3 + span,
  .card-duration-stars,
  .card-season,
  .levels,
  .card-price-container,
  .card-map-link,
  .sub-name {
    margin-inline: 0;
    padding: 0 var(--_padding);
    font-family: var(--font-body) !important;
  }

  .destination-label {
    max-width: 50%;
  }

  .card-best-offer {
    background-color: var(--color-neutral-200);
    color: var(--color-brand-secondary);
    top: 16px !important;

    &:before {
      content: "";
    }

    i {
      margin-right: 6px;
      font-size: 0.9em;
    }
  }

  .card-label {
    background-color: var(--color-brand-sea-blue);
    color: var(--color-brand-primary-800);
    border-radius: 30px 0 0 30px;
  }

  .card-special-offer,
  .card-best-offer {
    border-radius: 30px 0 0 30px;
    text-align: right;
    width: auto;
  }

  .card-special-offer {
    background-color: var(--color-brand-citrus)
  }

  .card-best-offer {
    /** best offer always goes first */

    & ~ .card-label,
    & ~ .bestLabel .card-special-offer {
      top: 50px;
    }

    & ~ .bestLabel ~ .card-label {
      top: 84px;
    }
  }

  .bestLabel {
    /** special offer always goes second */

    &:has(~ .card-best-offer) {
      .card-special-offer {
        top: 50px;
        background-color: var(--color-brand-citrus);
      }

      & ~ .card-label {
        top: 84px;
      }
    }

    & ~ .card-label {
      top: 50px;
    }

    .card-special-offer {
      &:not(.no-icon) {
        padding-left: 32px;
       background-color: var(--color-brand-citrus);
      }
    }
  }

  .card-label {
    /** card label always goes last */

    &:has(~ .card-best-offer) {
      top: 50px;

      &:has(~ .bestLabel) {
        top: 84px;
      }
    }
  }

  .card-title,
  h3 {
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1;
    text-transform: none;
    color: var(--color-brand-secondary);
    margin-bottom: 10px;
    transition: color 0.3s ease;

    &:has(> a) {
      transition: none;

      & > a {
        transition: color 0.3s ease;
      }
    }
  }

  h3 {
    & + span {
      display: block;
      margin: 0 0 12px;
    }
  }

  .card-duration,
  h3 + span {
    margin-top: 0;
    padding-top: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    font-family: var(--font-body);
    text-transform: none;
    color: var(--color-brand-primary-700);

    @media screen and (max-width: 480px) {
      & + .stars {
        font-size: 14px;
      }
    }
  }

  .card-season {
    color: var(--color-brand-charcoal-tint);
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 14px;
  }

  .card-price-container {
    margin-top: auto;
    margin-bottom: 20px;
    position: static !important;

    label {
      color: var(--color-brand-charcoal-tint);
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font-body);
      text-transform: none;
    }

    .card-price {
      @media screen and (max-width: 480px) {
        padding-top: 5px;
      }
    }

    .card-price-before {
      color: var(--color-brand-charcoal-tint);
      font-family: var(--font-body);
      font-size: 24px;

      .mw-currency {
        font-size: 16px;
        margin-left: 4px;
      }

      .strike {
        position: relative;
        background: none;

        &:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          height: 2px;
          background: var(--color-brand-marigold);
        }
      }

      & + .card-price,
      & + .card-price + .card-currency {
        color: var(--color-brand-marigold);
        margin-top: 0;
      }

      & + .card-price + .card-currency {
        &:hover {
          color: var(--color-brand-marigold-shade);
        }
      }
    }

    .card-price,
    .card-currency {
      font-family: var(--font-body);
      font-size: 40px;
      font-weight: bold;
      line-height: 0.9;
      color: var(--color-brand-secondary);
      margin-bottom: 0;
    }

    .card-currency {
      font-size: var(--_min-a11y-font-size);
      font-weight: bold;
      cursor: pointer;

      &:hover {
        color: var(--color-brand-secondary-400);
      }
    }

    &.card-currency-open {
      cursor: auto;
      position: absolute !important;
      top: 0;
      bottom: 0 !important;
      margin-bottom: 0;
      padding: var(--_padding);
      background-color: var(--color-brand-sandstone);

      .card-price {
        margin-top: 0;
      }

      .card-price-before {
        display: none;
      }

      .card-currency {
        &:after {
          content: none;
        }
      }

      label,
      .card-ticket-label {
        display: none;
      }

      .currency-change {
        padding: 16px;
        margin-top: 16px;
        border-radius: 12px;
        background-color: var(--color-white);

        .currency-change-header,
        ul,
        ul li a,
        .currency-close {
          background-color: transparent;
          font-family: var(--font-body);
          text-transform: none;
        }

        .currency-change-header {
          font-size: 16px;
          line-height: 1;
          font-weight: 500;
          color: var(--color-brand-secondary);
          margin-bottom: 16px;
        }

        ul {
          padding-bottom: 0;
          margin-bottom: 0;

          li {
            padding: 6px 8px;
            border-radius: 8px;
            transition: background-color 0.3s ease;

            &:hover {
              background-color: var(--color-brand-sandstone);
            }

            a {
              color: var(--color-brand-charcoal);
              font-size: 20px;
              line-height: 24px;
              font-weight: bold;
              padding-left: 0;

              .currency-symbol {
                font-size: 16px;
                color: var(--color-brand-secondary);
              }
            }
          }
        }

        .currency-close {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          padding-block: 12px;
          background-color: var(--color-brand-sandstone);
          color: var(--color-brand-charcoal-shade);
          border-top: 1px solid var(--color-brand-sandstone-shade);
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 500;
          transition: background-color 0.3s ease;

          &::after {
            margin: 0 10px 0 0;
          }

          &:hover {
            background-color: var(--color-brand-sandstone-shade);
          }
        }
      }
    }
  }

  .card-map-link,
  .card-flip-link,
  .card-bottom {
    position: static;
    display: block;
    padding-block: var(--_padding);
    text-transform: none;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    transition: padding 0.3s ease;

    span {
      margin-right: 0;
      font-size: 1em;
    }
  }

  .card-map-link,
  .card-flip-link {
    padding-block: 12px;
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--color-brand-primary);
    }
  }
}

.card-tour .card-back,
.card-optional .card-back,
.card-back-full {
  display: flex;
  flex-direction: column;
/** #CARDBACK: Changed for same styling as on front card */
  .card-best-offer {
    border-radius: 30px 0 0 30px;
    width: auto !important;
    right: 0;
    left: auto;
  }
/** #CARDBACK: Hidden for same styling as on front card */
  /* .card-duration {
    padding-inline: var(--_padding);
    margin-top: 16px;
    margin-bottom: 8px;
  } */

  a:has(.tmp_map) {
    order: -1;
    padding-top: 30px; /** #CARDBACK: Changed due to travel-style label */
    padding-bottom: 15px; /** #CARDBACK: Added due to travel-style label */
    background-color: #a2cfd5; /** #a2cfd5 is the color of the map background */

    .tmp_map {
      transition: opacity 0.3s ease;
    }

    &:hover {
      .tmp_map {
        opacity: 0.8;
      }
    }
  }

  .card-map-link,
  .card-flip-link {
    margin-top: 0;
  }

  &:not(:has(.card-price-container)) {
    .card-map-link,
    .card-flip-link {
      margin-top: auto;
    }
  }

  .card-title:hover {
    color: var(--color-brand-primary-700);
  }

/** #CARDBACK: Hidden for same styling as front card */
  /* .card-label {
    top: 16px !important;

    &:has(~ .bestLabel) {
      top: 50px !important;
    }
  } */

  .bestLabel {
    /** special offer always goes at top as "best seller" is on left */

/** #CARDBACK: Hidden for same styling as front card */
    /* .card-special-offer {
      top: 16px !important;
    } 

    & ~ .card-label {
      top: 50px !important;
    } */
  }
}

/** #CARDBACK: Added row-gap for extra spacing in mobile map view */
.card-back-full {
  text-align: left;
  row-gap: 10px;

  .button-toggle {
    input[type="checkbox"],
    input[type="radio"] {
      & + label {
        background-color: var(--color-brand-marigold);
        margin: 0 20px 20px;
        padding: 0 14px;
        max-width: 100%;
        font-size: var(--_min-a11y-font-size);
        font-family: var(--font-body);
        font-weight: bold;
        text-transform: none;
        text-align: center;
        transition: background-color 0.3s ease;

        &:after {
          font-size: var(--_min-a11y-font-size);
          font-family: var(--font-body);
          font-weight: bold;
          text-transform: none;
        }

        &:hover {
          background-color: var(--color-brand-marigold-shade);
        }
      }
    }
  }
}

/** #CARDBACK: Added separate styling for mobile (card back full) and tablet - makes map view smaller */
@media (max-width: 991px) {
    .card-back-full .tmp_map {
        min-height: 220px !important;
    }
    .card-back .tmp_map {
        min-height: 130px !important;
    }
    .card-back-full a:has(.tmp_map) {
        padding-top: 40px !important;
        padding-bottom: 0px !important;
    }
    .card-back a:has(.tmp_map) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

.card:not(.card-car):not(.card-accommodation),
.card-back-full {
  .card-map-link,
  .card-flip-link,
  .currency-close {
    height: var(--_card-map-link-height);
  }
}

/** hide promo when card-back-full is present */
.Campaign {
  &:has(~ .card-back-full) {
    display: none !important;
  }
}

.card-tour {
  .card-front > a {
    height: calc(
      100% - var(--_card-map-link-height) - 100px
    ); /** 100px approx price height */
  }
}

.card-optional {
  .card-front {
    display: flex;
    flex-direction: column;
    height: 100%;

    .card-price-container {
      margin-bottom: 0;
    }

    .card-bottom {
      padding-top: calc(var(--_padding) * 0.75);
    }
  }
}

.card-info {
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 0;

  h3 {
    font-family: var(--font-body) !important;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-brand-secondary);
    text-transform: none;
  }

  ul {
    li {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.2;
      color: var(--color-brand-charcoal);
      text-transform: none;
    }
  }

  @media screen and (max-width: 800px) {
    min-height: 0;
  }
}

/** SEARCH */
.search-results-filterbar,
.cloud-mobile {
  background-color: var(--color-brand-granite-tint);

  button,
  .button-link {
    padding: 10px 24px;

    &:has(> i) {
      padding-right: 20px;
    }
  }

  .sort-filter {
    select {
      max-width: 50vw;
    }

    label {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-brand-charcoal-tint);
      text-transform: none;
      font-family: var(--font-body);
    }
  }

  .button-filter {
    background-color: var(--color-brand-secondary);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    font-family: var(--font-body);
    padding: 10px 32px 10px 14px;
    border-radius: 8px;
    margin-bottom: 0;

    &.clear {
      background-color: transparent;
      color: var(--color-brand-charcoal-tint);
      padding-inline: 14px;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    &:after {
      top: 8px;
    }
  }

  @media screen and (max-width: 1279px) {
    padding-block: 16px;

    .row {
      margin-inline: 0;

      & > div {
        padding-inline: 0;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @media screen and (max-width: 800px) {
    select,
    button {
      margin-top: 0;
    }
  }
}

.cloud-mobile {
  border-radius: 16px;
}

.search-results {
  .filter-result-summary h2 {
    font-family: var(--font-body) !important;
    font-size: 32px;
    font-weight: normal;
    color: var(--color-brand-charcoal-shade);
    text-transform: none;

    @media screen and (max-width: 1279px) {
      margin-bottom: 18px;
    }

    span {
      font-weight: bold;
      color: var(--color-brand-primary-600);
    }
  }

  .search-results-filters {
    &.box {
      padding: 0;
      border-radius: 0;

      &.sandstone {
        .head {
          background-color: var(--color-brand-sandstone);
        }
      }
    }

    .head {
      font-family: var(--font-body) !important;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-brand-charcoal);
      text-transform: none;
      padding: 16px 20px;
      margin-bottom: 0;
      border: 1px solid var(--color-brand-sandstone-shade);
      border-radius: 16px 16px 0 0;
      border-bottom: none;

      &:after {
        content: none;
      }
    }

    .accordion {
      background-color: var(--color-white);
      border-radius: 0 0 16px 16px;
      border: 1px solid var(--color-brand-sandstone-shade);
      border-top: none;

      .panel-heading {
        padding: 0;
        border-bottom: 0 !important;

        .panel-title {
          font-family: var(--font-body);
          text-transform: none;
          font-size: 16px;
          font-weight: 500;
          line-height: 1.2;
          color: var(--color-brand-charcoal);
          padding: 0;

          a {
            padding: 16px 20px;
          }
        }
      }

      .panel-group {
        &:only-child {
          margin-bottom: 0;
        }

        .panel {
          &:first-child {
            border-top: none;
          }

          border-top: 1px solid var(--color-brand-sandstone-shade);
        }

        .panel-collapse {
          .panel-body {
            background-color: var(--color-white);
            padding: 16px 28px 0 !important;

            &:has(+ .panel-body) {
              margin-bottom: 0 !important;
            }

            &:last-child {
              padding-bottom: 8px !important;
            }
          }
        }
      }

      .date-filter {
        &:before,
        &:after {
          content: none;
        }
      }

      input[type="text"],
      select {
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--color-brand-charcoal);
        background-color: var(--color-brand-sandstone);
        text-transform: none;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      input[type="checkbox"],
      input[type="radio"] {
        & + label {
          display: flex;
          align-items: center;
          gap: 8px;
          font-family: var(--font-body);
          font-size: 16px;
          font-weight: 500;
          line-height: 1.2;
          color: var(--color-brand-charcoal-tint);
          text-transform: none;
          cursor: pointer;
          transition: color 0.3s ease;

          .tcount {
            font-family: var(--font-body);
            font-size: 1em;
            font-style: normal;
            color: var(--color-brand-marigold);
            text-transform: none;
            margin-left: 0;
            align-self: baseline;
          }

          &:before {
            margin-right: 0;
            transition:
              background-color 0.3s ease,
              border-color 0.3s ease;
          }

          &:hover {
            color: var(--color-brand-marigold);
          }
        }

        &:checked {
          & + label {
            color: var(--color-brand-marigold);

            &:before {
              background-color: var(--color-brand-marigold);
              border-color: var(--color-brand-marigold-shade);
            }

            &:after {
              content: none;
            }
          }
        }
      }

      & + .button-link.clear {
        margin-top: 16px;
        margin-left: 0;
        padding-inline: 20px;
        background-color: var(--color-brand-secondary);

        &:hover {
          background-color: var(--color-brand-secondary-400);
        }
      }
    }

    & > .button-link {
      margin-top: 20px;
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      padding: 10px 20px;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  .slider-filter {
    padding-inline: 16px;

    .ui-slider .ui-slider-range {
      background-color: var(--color-brand-sandstone-shade);

      .ui-slider-handle {
        border-color: var(--color-brand-charcoal);
        cursor: pointer;

        &.ui-state-active {
          background-color: var(--color-brand-charcoal);
        }
      }
    }

    .slider-labels {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-brand-charcoal-tint);
      text-transform: none;
    }
  }

  .row#tours,
  #searchResults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
    justify-items: center;

    @media screen and (max-width: 1279px) {
      margin-inline: 0;
    }

    &:before,
    &:after {
      content: none;
    }

    & > * {
      width: 100% !important;
      max-width: var(--_card-width);
      padding-inline: 0;

      @media screen and (max-width: 680px) {
        width: 90% !important;
      }
    }

    & + .container-padbtm {
      width: 100% !important;
    }
  }

  @media screen and (max-width: 1279px) {
    padding-top: 0;
  }

  .button-link {
    &.show-all {
      margin-top: 24px;
      background-color: var(--color-brand-secondary);
      text-transform: none;
      font-family: var(--font-body);
      font-size: var(--_min-a11y-font-size);
      font-weight: 500;
      padding: 13px 22px;
      transition: background-color 0.3s ease;

      &:hover,
      &:focus {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  .related-categories {
    .related-title,
    .related-links > p {
      font-family: var(--font-body);
      font-size: 24px;
      font-weight: bold;
      line-height: 1.2;
      text-transform: none;
      color: var(--color-brand-secondary);
      margin-bottom: 0.75em !important;
    }

    .related-links {
      padding-top: 0;

      ul {
        font-size: 16px;

        li {
          a {
            text-decoration: underline;
            text-underline-offset: 2px;
            color: var(--color-brand-charcoal);

            &:hover {
              text-decoration: none;
              color: var(--color-brand-charcoal-shade);
            }
          }
        }
      }
    }
  }
}

/** TOUR */

.tour {
  .article-package {
    padding-top: 20px;

    @media screen and (max-width: 1280px) {
      padding-top: 12px;
    }

    @media screen and (max-width: 1024px) {
      padding-top: 8px;
    }

    .headline-section {
      margin-top: 0;
    }
  }

  #highlights {
    .package-highlight-row {
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
      gap: 16px;
      justify-items: center;

      &:before,
      &:after {
        content: none;
      }

      & > * {
        padding-inline: 0;
        width: 100%;
      }

      @media screen and (max-width: 1024px) {
        gap: 4px 24px;

        & > * {
          min-height: 60px;

          .card-tiny {
            max-width: 100%;
          }
        }
      }
    }

    .button-link {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  #itineraries {
    .clear {
      display: none;
    }

    .button-pdf,
    .button-link {
      float: none;
      display: inline-flex;
      width: auto;
      margin-top: 0;
      margin-left: 0;
      padding: 10px 20px;
      line-height: 1.2;
      font-weight: bold;
      text-transform: none;
      color: var(--color-brand-charcoal);
      background-color: var(--color-white);
      border: 1px solid var(--color-brand-charcoal);
      border-radius: 30px;
      transition: background-color 0.3s ease;

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

    .itinerary {
      padding: 0;
      margin: 0;

      li {
        --_bullet-size: 80px;
        padding-left: calc(var(--_bullet-size) * 1.25);
        padding-top: 0;

        &:before {
          font-size: calc(var(--_bullet-size) * 0.175);
          line-height: 1.2;
          font-weight: normal;
          letter-spacing: 0.5px;
          top: 13px;
          width: var(--_bullet-size);
          font-family: var(--font-body);
          color: var(--color-brand-charcoal-tint);
        }

        &:after {
          top: 0;
          padding-top: 0;
          width: var(--_bullet-size);
          height: var(--_bullet-size);
          line-height: calc(var(--_bullet-size) * 1.25);
          font-size: calc(var(--_bullet-size) * 0.5);
          font-weight: bold;
          font-family: var(--font-body);
          text-transform: none;
          color: var(--color-brand-secondary);
          border-radius: 50%;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        &:first-child {
          .itinerary-item {
            border-top: none;
          }
        }

        .itinerary-item {
          border-radius: 0;
          padding-left: 0;
          border-top: 1px solid var(--color-brand-sandstone-shade);

          &:before {
            left: calc(var(--_bullet-size) / 2);
            border-color: var(--color-brand-granite-tint);
          }

          h3,
          p,
          a {
            font-family: var(--font-body) !important;
            text-transform: none;
            color: var(--color-brand-charcoal-tint);
          }

          h3 {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.2;
            text-transform: none;
            color: var(--color-brand-secondary);
          }

          p {
            strong {
              color: var(--color-brand-charcoal);
            }
          }

          a {
            font-size: 16px;
            color: var(--color-brand-secondary);
            transition: color 0.3s ease;

            &:hover {
              color: var(--color-brand-secondary-400);
            }
          }

          .itinerary-text {
            height: auto !important;

            &:after {
              content: none;
            }
          }
        }

        @media screen and (max-width: 1024px) {
          --_bullet-size: 60px;

          .itinerary-item {
            h2 {
              font-size: 20px;
            }

            p {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  #optionals {
    & > .row,
    .mobile-horizontal-container {
      margin-bottom: var(--_section-gap);
    }

    .col-package-headline:has(+ .col-package-headline) {
      margin-bottom: 24px;

      & > p:last-child {
        margin-bottom: 0 !important;
      }
    }

    .package-optional {
      margin-bottom: 0 !important;
    }

    .card {
      .button-link {
        background-color: var(--color-brand-secondary);
        color: var(--color-white);

        &:hover {
          background-color: var(--color-brand-secondary-400);
        }
      }
    }

    .button-link {
      background-color: var(--color-white);
      color: var(--color-brand-secondary);

      &:hover {
        background-color: var(--color-brand-sandstone);
      }
    }
  }

  #map-canvas {
    border-radius: 16px;
  }

  #map-panel {
    margin: 0;

    #map-resize {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      padding: 9px 12px;
      font-size: 16px;

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  #included {
    .container-section {
      padding-top: var(--_section-padding-block);
    }

    h3 {
      margin-top: 0;
      margin-bottom: 16px;
      font-size: 24px;
      font-family: var(--font-body) !important;
      font-weight: bold;
      line-height: 1.2;
      text-transform: none;
      color: var(--color-brand-secondary);
    }

    .list-included {
      li {
        padding-left: 20px;
      }
    }

    ul {
      margin-bottom: 0;

      & + h3 {
        margin-top: 24px;
      }
    }

    li {
      font-family: var(--font-body);

      a {
        color: var(--color-brand-charcoal-tint);
        line-height: 1.4;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-shade);
        }
      }
    }

    .row {
      &:has(.box-package-info) {
        display: grid;
        grid-template-columns: auto 500px;
        gap: 48px;

        @media screen and (max-width: 1200px) {
          grid-template-columns: 1fr;
          gap: 24px;

          & > * {
            .row {
              grid-template-columns: 1fr !important;
            }
          }
        }

        & > * {
          .row {
            grid-template-columns: 1fr 1fr !important;
            gap: 24px;

            @media screen and (max-width: 768px) {
              grid-template-columns: 1fr !important;
            }
          }
        }
      }
    }

    .box-package-info {
      margin-top: 0;
    }
  }

  .col-package-headline {
    &:has(.package-headline + p) {
      &:has(+ div > p) {
        .package-headline + p {
          margin-bottom: var(--_section-gap) !important;
        }
      }
    }
  }

  .package-headline {
    &:has(+ p) {
      margin-bottom: var(--_section-gap) !important;
    }

    & ~ *,
    & ~ * p {
      margin-bottom: 0;
    }

    & + p {
      display: block;
      font-family: var(--font-serif);
      margin-inline: 0;
      text-align: left;
    }
  }

  .booking-price_side,
  .booking-form__header {
    .card-price-before {
      margin-bottom: 8px;
      font-family: var(--font-body);
      color: var(--color-brand-charcoal-tint);

      .strike {
        &:after {
          background: var(--color-brand-marigold);
        }
      }
    }

    .booking-menu-price {
      margin-bottom: 12px;

      .total-price,
      #total-price {
        font-size: 64px;
        font-weight: bold;
        font-family: var(--font-body);
        color: var(--color-brand-charcoal);

        @media screen and (max-width: 640px) {
          font-size: 48px;
        }
      }

      &.discounted {
        .total-price,
        #total-price,
        .currency-link {
          color: var(--color-brand-marigold);
        }
      }

      .currency-link {
        margin-left: 0;
        font-size: 16px;
        font-weight: 500;
        font-family: var(--font-body);

        ul {
          border: 0;
          box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          overflow: hidden;

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

            a {
              padding: 10px 16px;
              transition: color 0.3s ease;

              &:hover {
                color: var(--color-brand-marigold);
              }
            }
          }
        }
      }
    }

    h2 {
      color: var(--color-brand-charcoal-tint);
    }
  }
}

.card-tiny {
  margin: 0;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;

  @media screen and (max-width: 1024px) {
    margin: 0 auto 16px;
  }

  &:hover {
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);

    .card-tiny-text {
      h4 {
        color: var(--color-brand-secondary-400);
      }
    }
  }

  & > a:has(.image-circle) {
    height: 100%;
    display: block;
  }

  .card-tiny-text {
    padding: 12px 12px 12px 0;
    height: 100%;
  }

  h3,
  h4,
  span,
  .card-view-link {
    text-transform: none;
    font-family: var(--font-body) !important;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--color-brand-charcoal-tint);
  }

  h3,
  h4 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    margin-top: 0;
    color: var(--color-brand-secondary);
  }

  h3 {
    padding-top: 12px;
  }
}

section.sec-color-grey {
  &:has(> .breadcrumb) {
    background-color: var(--color-brand-sandstone);

    .breadcrumb {
      li {
        & + li {
          &:before {
            color: var(--color-brand-sandstone-shade);
          }
        }

        a {
          color: var(--color-brand-secondary);
        }
      }
    }
  }
}

.breadcrumb,
.submenu {
  padding-inline: 0;

  @media screen and (max-width: 1540px) {
    padding-inline: var(--_section-padding-inline);
  }
}

.breadcrumb {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  text-transform: none;
  max-width: 1500px;
  margin: 0 auto;

  li {
    & + li {
      &:before {
        color: var(--color-brand-granite-shade);
        padding: 0 7px 0 5px;
      }
    }

    a {
      color: var(--color-brand-charcoal-tint);
      text-underline-offset: 2px;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.submenu,
.submenu.dark {
  --_submenu-height: 50px;

  height: var(--_submenu-height);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-brand-charcoal);
  font-size: 12px;
  line-height: 2em;
  width: 100%;
  box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;

  ul {
    li {
      a {
        color: var(--color-brand-charcoal);
      }

      &.selected {
        background-color: var(--color-brand-secondary);
        margin-inline: -16px;

        a {
          color: var(--color-white) !important;
          padding-inline: 16px;

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

.submenu,
#sublinks {
  background-color: rgba(255, 255, 255, 0.95);
  transition: top 0.3s ease-out;

  &.sticktop {
    @media screen and (max-width: 1279px) {
      top: calc(var(--_sub-header-height) + var(--_mobile-nav-height));
    }

    @media screen and (max-width: 991px) {
      top: var(--_mobile-nav-height);
    }
  }

  .submenu-normal {
    max-width: 1500px;
    padding-inline: 0;
    margin: 0 auto;
  }

  ul {
    gap: 30px;
    max-width: 1500px;
    margin-inline: auto;

    li {
      padding-inline: 0;

      a {
        display: block;
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: var(--_submenu-height);
        text-transform: none;
        color: var(--color-brand-charcoal-tint);
        transition: color 0.3s ease;

        &:hover {
          color: var(--color-brand-secondary);

          .card-special-offer {
            background-color: var(--color-brand-citrus-tint);
          }
        }
      }

      &.more {
        ul {
          padding-bottom: 0;

          li {
            a {
              padding-inline: 20px;

              &:hover {
                color: var(--color-brand-secondary);
              }
            }

            @media (max-width: 992px) {
              &:last-child {
                a {
                  padding-right: 24px;
                }
              }

              a {
                padding-inline: 0;
              }
            }
          }
        }

        @media screen and (max-width: 1280px) {
          & > a {
            /** "More" button */
            display: none;
          }

          & > ul {
            /** "More" dropdown */
            position: static;
            display: flex;
            gap: 30px;
            background-color: transparent;
            box-shadow: none;

            li {
              height: var(--_submenu-height);

              a {
                padding-inline: 0;
              }

              &:has(> a:not(.button-link):hover) {
                &:not(:has(.card-special-offer)) {
                  border-bottom: 3px solid var(--color-brand-secondary);
                }
              }
            }
          }
        }
      }

      &.info {
        .button-link {
          background-color: var(--color-brand-primary-400);
          color: var(--color-brand-primary-800) !important;

          &:hover {
            background-color: var(--color-brand-primary);
            color: var(--color-brand-primary-800) !important;
          }
        }
      }

      .card-special-offer {
        height: 30px;
        line-height: 30px;
        margin: calc((var(--_submenu-height) - 30px) / 2) 0;
        top: 0;
        text-transform: none;
        font-family: var(--font-body);
        background-color: var(--color-brand-citrus);
        padding: 0 10px;
        border-radius: 8px;
        transition: background-color 0.3s ease;

        &:has(.fa),
        &:has(.fal),
        &:has(.far) {
          padding-left: 8px;
        }
      }
    }
  }

  & > ul {
    & > li {
      &.highlight,
      &:has(> a:not(.button-link):hover) {
        &:not(:has(.card-special-offer)) {
          border-bottom: 3px solid var(--color-brand-secondary);
        }
      }
    }
  }

  .button-link {
    font-size: 16px;
    line-height: 36px;
    color: var(--color-white) !important;
    display: flex;
    align-items: center;
    padding: 0 15px 0 9px;
    margin: calc((var(--_submenu-height) - 36px) / 2) 0;
    transition: background-color 0.3s ease;

    span {
      font-size: 1.5em;
      line-height: 1;

      &:before {
        top: 0;
      }
    }

    &:hover {
      background-color: var(--color-brand-marigold-shade);
      color: var(--color-white);
    }
  }

  @media screen and (max-width: 992px) {
    li {
      &:last-child {
        padding-right: 24px;
      }
    }
  }
}

.section-package-info,
#included {
  padding-bottom: 0;

  .container-section {
    padding-top: 32px;

    &.align-left {
      margin-left: auto;
      padding-inline: 0;

      @media screen and (max-width: 1580px) {
        padding-inline: var(--_section-padding-inline);
      }

      .row {
        margin-inline: 0;

        & > * {
          width: 100%;
          left: auto;
          right: auto;
          float: none;
          margin-inline: 0;
          padding-inline: 0;
        }
      }

      & > .row {
        & > div {
          & > .row {
            display: grid;
            grid-template-columns: auto 500px;
            gap: 48px;

            &::before,
            &::after {
              content: none;
            }

            @media screen and (max-width: 1200px) {
              grid-template-columns: 1fr;
              gap: 24px;
            }
          }
        }
      }
    }

    & > .row {
      &:before,
      &:after {
        content: none;
      }

      &:empty {
        display: none;
      }
    }
  }

  .tour-email-button {
    max-width: 100%;

    .btn {
      font-family: var(--font-body);
      font-size: var(--_min-a11y-font-size);
      padding: 10px 20px;
      line-height: 1.2;
      font-weight: bold;
      text-transform: none;
      color: var(--color-brand-charcoal);
      background-color: var(--color-white);
      border: 1px solid var(--color-brand-charcoal);
      border-radius: 30px;
      transition: background-color 0.3s ease;

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

    @media screen and (max-width: 1200px) {
      margin-top: 0;
    }
  }

  .pull-right-info {
    order: 2;
  }

  .info-icons {
    order: 1;

    & > .row {
      &:before,
      &:after {
        content: none;
      }

      display: flex;
      gap: 12px;
      align-items: start;
      justify-content: flex-start;

      .highlights {
        ul {
          list-style: none;
          padding-left: 20px;
          font-weight: normal;
          font-size: 18px;
          line-height: 1.3;
        }

        .heading-1 {
          font-family: var(--font-serif);
          text-transform: none;
          font-size: 24px;
          font-weight: 500;
          line-height: 1.2;
          color: var(--color-brand-secondary);
          margin-bottom: 16px;
        }

        li {
          &:before {
            left: 0;
          }
        }
      }

      .package-info-icon {
        &:first-child {
          margin-top: 40px;
        }

        h2 {
          font-weight: bold;
          margin-top: 2px;
        }

        h2,
        .package-info-title {
          font-family: var(--font-body) !important;
          font-size: 16px;
          line-height: 1.2;
          text-transform: none;
          color: var(--color-brand-secondary);
        }

        .package-info-title {
          font-size: 18px;
          color: var(--color-brand-charcoal-tint);
        }
      }

      @media screen and (max-width: 1024px) {
        flex-direction: column;
        gap: 24px;

        .highlights {
          margin-bottom: 0;
        }

        .package-info-icon {
          padding-left: 0;

          &:first-child {
            margin-top: 0;
          }
        }
      }
    }
  }
}

.box-package-info {
  background-color: var(--color-brand-sandstone);
  padding: 24px;
  border-radius: 16px;
  max-width: 100%;
  margin-bottom: 0 !important;

  .stars-rating,
  .stars-count,
  h2,
  .booking-price_side {
    font-family: var(--font-body) !important;
    color: var(--color-brand-charcoal-tint);
  }

  .stars {
    color: var(--color-brand-citrus);
      display: flex;
      gap: 3px;
      width: fit-content;
      align-items: center;

    .stars-rating {
      color: var(--color-brand-charcoal-shade);
    }

    .stars-count {
      a {
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--color-brand-charcoal-shade);

        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  h2 {
    font-size: 20px;
    color: var(--color-brand-charcoal-shade);
  }

  .buttons {
    padding-top: 0;
    display: flex;
    gap: 12px;
    margin-inline: 0;

    &:before,
    &:after {
      content: none;
    }

    & > * {
      padding-inline: 0;
    }

    @media screen and (max-width: 1200px) {
      & > * {
        width: auto;
        max-width: 300px;
      }
    }

    .button-link {
      flex: 1;
      padding: 13px 20px;
      text-transform: none;
      font-family: var(--font-body);

      &.green-light,
      &.dark-grey {
        background-color: var(--color-brand-primary-400);
        color: var(--color-brand-primary-800);

        span {
          line-height: 0.75;
          margin-right: 4px;
        }

        &:hover {
          background-color: var(--color-brand-primary);
        }
      }
    }

    @media (max-width: 767px) {
      flex-wrap: wrap;

      & > * {
        max-width: 100%;
      }

      & > div + div {
        margin-top: 0;
        max-width: 100%;
      }
    }
  }

  .right-info-x {
    padding-inline: 0;

    h1.sup,
    h2.sup,
    h3.sup {
      font-family: var(--font-body) !important;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.2;
      text-transform: none;
      color: var(--color-brand-secondary);
      margin: 0 0 20px;
    }

    ul {
      li {
        color: var(--color-brand-charcoal);
        font-family: var(--font-body);

        &:before {
          left: 0;
        }
      }
    }

    p {
      margin-bottom: 0;

      a,
      a.link-red {
        font-family: var(--font-body);
        font-size: 16px !important;
        font-weight: bold;
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
        color: var(--color-brand-secondary) !important;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-shade);
        }
      }
    }
  }

  .booking-price_side {
    .headline--sub {
      font-size: 16px;
      margin-bottom: 12px;
    }

    p {
      color: var(--color-brand-charcoal-shade);
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.box-package-info,
.booking-form--package {
  position: relative;

  .card-special-offer {
    font-family: var(--font-body);
    font-size: 14px;
    text-transform: none;
    padding: 0 10px;
    border-radius: 8px 0 0 8px;
    transition: background-color 0.3s ease;

    &:has(.fa),
    &:has(.fal),
    &:has(.far) {
      padding-left: 8px;
    }

    &:hover {
      background-color: var(--color-brand-citrus-tint);
    }
  }
}

.sec-travel-guide-article {
  .article-package {
    padding: var(--_section-padding-block) 0;

    @media screen and (max-width: 1540px) {
      padding: var(--_section-padding-block) var(--_section-padding-inline);
    }

    .headline-section {
      margin-top: 0;
      margin-bottom: 0.75em;
      padding-top: 0;
      padding-bottom: 0;
      font-size: 48px;
      font-weight: normal;
      line-height: 1.1;
      text-transform: none;
      color: var(--color-brand-secondary);

      @media screen and (max-width: 1024px) {
        font-size: 36px;
      }
    }

    .left-info-x {
      h1,
      h2,
      h3 {
        color: var(--color-brand-secondary);
        font-size: 36px;
        font-weight: bold;
        line-height: 1.2;
        text-transform: none;
        font-family: var(--font-body) !important;
        margin: 0 0 20px;
      }

      h2,
      h3 {
        font-size: 24px;
      }

      ul li,
      p {
        a {
          color: var(--color-brand-charcoal-shade);
          font-weight: bold;
          text-decoration: underline 2px solid;
          text-underline-offset: 3px;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  .container-fluid {
    max-width: 1500px;

    .travel-guide-article.travel-guide-accommodation {
      padding-left: 0;
    }
  }

  .button-fullscreen span,
  #map-resize span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: var(--color-brand-secondary);
    font-size: 1em;
    margin-left: 12px;
  }

  @media (max-width: 992px) {
    #map-resize {
      background-color: var(--color-white);
      padding: 10px 10px 10px 20px;
      color: var(--color-brand-secondary);
    }
  }

  .box-package-info {
    & + .place-map-image {
      margin-top: 36px;
    }
  }
}

section {
  .col-package-headline {
    .package-headline {
      display: block;
      margin-bottom: 32px;
    }

    p {
      display: block;
      margin-inline: 0;
      text-align: left;
    }
  }
}

.section-faq {
  .row {
    @media screen and (max-width: 1024px) {
      & > * {
        width: 100%;
      }
    }
  }

  .faqs {
    margin-bottom: 0;

    .faq {
      padding: 0;
      border-bottom: none;

      &:last-child {
        .panel-heading {
          border-bottom: none;
        }
      }

      &:has(+ .faq [data-toggle="collapse"]:not(.collapsed)) {
        .faq-heading {
          border-bottom: none;
        }
      }
    }

    .faq-heading {
      border-bottom: 1px solid var(--color-brand-sandstone-shade);
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 18px !important;
      line-height: 1.15;
      text-transform: none;
      color: var(--color-brand-secondary);
      text-align: left;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition:
        color 0.3s ease,
        background-color 0.3s ease;

      &:not(.collapsed) {
        background-color: var(--color-white);
        border-radius: 16px 16px 0 0;
      }

      &:hover {
        font-family: var(--font-body);
        color: var(--color-brand-charcoal);
        background-color: var(--color-white);
      }
    }

    .faq-collapse {
      padding: 16px;
      margin-bottom: 16px;
      background-color: var(--color-white);
      border-radius: 0 0 16px 16px;

      & > div:first-child {
        margin-top: 0;
      }

      p {
        margin-bottom: 1em;
        font-size: 18px;
        color: var(--color-brand-charcoal-tint);
      }

      ul {
        padding-left: 0;
        column-count: 1;

        li {
          color: var(--color-brand-charcoal-tint);
          font-size: 18px;
          padding-block: 0;
        }
      }

      a {
        color: var(--color-brand-charcoal);
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-shade);
        }
      }
    }
  }
}

#gallery {
  .container-section {
    padding-bottom: var(--_section-gap);
  }
}

.section-package-reviews {
  .client-review-paragraph {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 20px 20px 0;

    h2,
    h3,
    h4 p {
      font-family: var(--font-body) !important;
      text-transform: none;
      margin-top: 0;
      cursor: auto;
    }

    h3 {
      color: var(--color-brand-secondary);
      font-size: 18px;
      font-weight: bold;
      line-height: 1.2;
    }

    p {
      color: var(--color-brand-charcoal);
      margin-bottom: 24px;
    }

    .review-text {
      cursor: auto;

      &:after {
        text-transform: none;
        font-size: 16px;
        font-weight: bold;
        font-family: var(--font-body);
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.65),
          rgba(255, 255, 255, 1)
        );
      }
    }

    .client-review-paragraph-footer {
      background-color: var(--color-brand-sandstone);
      color: var(--color-brand-secondary);
      border-color: var(--color-brand-sandstone-shade);
      font-family: var(--font-body) !important;
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      text-transform: none;
      padding: 20px;
      border-radius: 0 0 16px 16px;

      h4 {
        font-family: var(--font-body) !important;
        font-weight: bold;
        margin-bottom: 2px;
      }

      .client-review-paragraph-img {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        background-color: var(--color-brand-primary);
        color: var(--color-brand-primary-800);
        font-size: 24px;
        line-height: 1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .client-review-paragraph-sociallarge {
          &:before {
            color: var(--color-brand-primary-800);
          }
        }
      }
    }

    .stars {
      color: var(--color-brand-citrus);
      font-size: 20px;
      margin-bottom: 4px;

      i {
        width: 20px;
        margin-right: 4px;
      }
    }
  }

  a.btn-more-reviews {
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);

    &:hover {
      background-color: var(--color-brand-primary);
    }
  }
}

.section-package-cards {
  .mobile-horizontal-container {
    margin-top: var(--_section-gap);

    @media screen and (max-width: 1200px) {
      margin-inline: -30px;
      overflow-x: auto;
    }
  }

  #accommodations {
    overflow: visible;
  }

  .mobile-accommodation-horizontal-row,
  .mobile-car-horizontal-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--_card-width), 1fr));
    gap: 24px;
    justify-items: start;
    margin-inline: 0;

    &:before,
    &:after {
      content: none;
    }

    & > * {
      float: none;
      width: 100%;
      margin-inline: 0;
      padding-inline: 0;
      height: 100%;
      max-width: 100%;
    }

    .card {
      margin-bottom: 0;
      max-width: 100%;
      height: 100%;

      &.card-small {
        min-height: 0;

        .card-bottom,
        .button-toggle {
          position: static;
          margin-top: auto;
        }
      }

      &:hover {
        transform: none;
      }
    }

    .card-front,
    .card-back {
      display: flex;
      flex-direction: column;
      background-color: var(--color-brand-sandstone);
      border-radius: 16px;
      padding: 0 0 20px;
      margin: 0;
      max-width: 100%;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;
      box-shadow: 0 6px 7px rgba(0, 0, 0, 0.25);
      transition: box-shadow 0.3s ease;

      &:hover {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

        .card-img {
          opacity: 0.8;
        }
      }

      .card-img {
        background-color: var(--color-white);
        transition: opacity 0.3s ease;
      }

      h3 {
        font-size: 24px;
        text-align: left;
        padding-inline: 20px;
        font-family: var(--font-body) !important;
        font-weight: bold;
        line-height: 1;
        text-transform: none;
        color: var(--color-brand-secondary);
        margin: 20px 0 16px;
        transition: color 0.3s ease;
      }

      p {
        margin-bottom: 20px;
      }

      .button-toggle {
        input[type="checkbox"],
        input[type="radio"] {
          & + label {
            background-color: var(--color-brand-marigold);
            margin: 0 20px 20px;
            padding: 0 14px;
            max-width: 100%;
            font-size: var(--_min-a11y-font-size);
            font-family: var(--font-body);
            font-weight: bold;
            text-transform: none;
            transition: background-color 0.3s ease;

            &:after {
              font-size: var(--_min-a11y-font-size);
              font-family: var(--font-body);
              font-weight: bold;
              text-transform: none;
            }

            &.date-selected {
              background-color: var(--color-brand-marigold-shade);

              &:hover {
                background-color: var(--color-brand-marigold);
              }
            }

            &:hover {
              background-color: var(--color-brand-marigold-shade);
            }

            @media screen and (max-width: 800px) {
              margin: 0 20px 10px;
            }
          }

          &:checked {
            & + label {
              background-color: var(--color-brand-primary-400);
              color: var(--color-brand-primary-800);

              &:before {
                color: var(--color-brand-primary-800);
                margin-right: 6px;
              }
            }
          }
        }
      }

      .card-view-link,
      .card-flip-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 8px;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: bold;
        line-height: 1;
        text-transform: none;
        color: var(--color-white) !important;
        background-color: var(--color-brand-secondary);
        border-radius: 16px;
        margin: 0 auto;
        padding: 9px 13px;
        max-width: 100%;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--color-brand-secondary-400);
        }
      }

      .card-flip-link {
        .icon {
          &:before {
            font-size: 1em;
          }
        }
      }

      ul {
        text-align: left;
      }

      .card-car-icons {
        padding-inline: 20px;

        li {
          font-size: 16px;
          line-height: 1;
          color: var(--color-brand-charcoal-tint);

          span {
            color: var(--color-brand-primary-600);

            &.icon-transmission {
              font-family: var(--font-body);
            }
          }
        }
      }
    }

    @media screen and (max-width: 1200px) {
      display: flex;
      padding: 20px 30px;
      width: max-content;

      & > * {
        width: var(--_card-width);
      }
    }

    @media screen and (max-width: 1024px) {
      margin-inline: -25px;
    }
  }
}

.section-package-reviews,
.section-package-cards {
  .container-section {
    max-width: 1500px;
  }

  @media screen and (max-width: 1024px) {
    .card {
      min-width: 240px;
    }
  }
}

section:has(.container-section-inline-form) {
  background-color: transparent;
  overflow: visible;

  .container-section-inline-form {
    padding-block: 0;

    .booking-form--package {
      --_padding-block: 30px;
      --_padding-inline: 26px;

      background-color: var(--color-brand-sandstone);
      border-radius: 16px;
      padding: var(--_padding-block) var(--_padding-inline);
      z-index: 1;

      input[type="text"],
      input[type="date"],
      input[type="number"],
      select {
        background-color: var(--color-white);
        color: var(--color-brand-charcoal);
        border: 1px solid var(--color-brand-sandstone-shade);
        border-radius: 16px;
        padding: 12px 20px;
        font-size: 18px;
        font-family: var(--font-body);
        font-weight: normal;
        text-transform: none;
        height: 48px;
      }

      label {
        color: var(--color-brand-charcoal-shade);
        font-weight: 500;
      }

      .price-before,
      p a {
        color: var(--color-brand-charcoal);
      }

      .price-before {
        margin-bottom: 8px;
      }

      .card-special-offer {
        top: calc(var(--_padding-block) + 24px);
        right: var(--_padding-inline);
      }

      .row {
        &:has(#booking_accommodation) {
          & > * {
            float: none;

            @media screen and (max-width: 1200px) {
              margin-bottom: 16px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      #booking_accommodation {
        min-width: 300px;
      }

      .booking-calendar-icon {
        top: 46px;
      }

      ul {
        padding: 0;
        background-color: var(--color-white);

        li {
          a {
            color: var(--color-brand-charcoal-tint);
            font-size: 16px;
          }
        }
      }

      @media screen and (max-width: 1400px) {
        .tour-booking-buttons {
          flex-wrap: wrap;

          & > * {
            width: 100%;
            max-width: 100%;
          }
        }
      }

      @media screen and (max-width: 1200px) {
        --_padding-block: 20px;
        --_padding-inline: 16px;

        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;

        & > * {
          float: none;
          width: auto;
        }

        .booking-form__header {
          margin-inline: auto;
          max-width: 500px;

          .row {
            margin-bottom: 0;

            & > * {
              width: 100%;
              float: none;
            }
          }
        }

        .card-special-offer {
          position: static;
          border-radius: 8px;
          font-size: 16px;
          text-align: center;
          padding: 4px 10px;
          height: auto;
        }

        .row {
          margin-bottom: 16px;
        }

        #booking-side-form {
          padding-top: 0;
        }
      }
    }

    .booking-form__header {
      background-color: var(--color-white);
      border-radius: 16px;
      padding: 20px;

      h2,
      .booking-menu-price {
        font-family: var(--font-body) !important;
        color: var(--color-brand-charcoal-tint);
      }

      p {
        color: var(--color-brand-charcoal-shade);
      }

      & > p:first-child {
        padding-top: 0;
      }

      h2 {
        font-size: 20px;
        color: var(--color-brand-charcoal-shade);
        font-weight: bold;
        margin-bottom: 20px;
      }

      p {
        color: var(--color-brand-charcoal-shade);
        margin-bottom: 8px;
        padding-bottom: 0;
        font-size: 14px;
        font-style: normal;

        &:first-child {
          padding-top: 0;
        }
      }

      .booking-menu-price {
        #per-person-price,
        .currency-link {
          color: var(--color-brand-charcoal);
        }

        #per-person-price {
          font-size: 64px;
          font-weight: bold;
          font-family: var(--font-body);
        }

        .price-before {
          & + #per-person-price,
          & ~ .currency-link {
            color: var(--color-brand-marigold);
          }
        }
      }

      .tour-booking-buttons {
        padding-top: 0;
        display: flex;
        gap: 12px;
        margin-inline: 0;

        &:before,
        &:after {
          content: none;
        }

        & > * {
          padding-inline: 0;
        }

        .button-link,
        .button-submit-form {
          flex: 1;
          padding: 13px 20px;
          text-transform: none;
          font-family: var(--font-body);
          font-size: var(--_min-a11y-font-size);
          line-height: 1;
          border-radius: 30px;
          transition: background-color 0.3s ease;
          margin-bottom: 0;

          span {
            font-size: 1em;
          }

          &.dark-grey {
            background-color: var(--color-brand-primary-400);
            color: var(--color-brand-primary-800);

            &:hover {
              background-color: var(--color-brand-primary);
            }
          }
        }
      }
    }
  }
}

#departures {
  .box-package-info {
    background-color: var(--color-white);
    padding: 24px;
    margin-top: 0;

    .booking-price_side {
      margin-bottom: 0;
    }

    .buttons {
      margin-top: 16px;
    }

    @media screen and (max-width: 991px) {
      max-width: 800px;

      &.box-package-info-departure .buttons {
        display: flex;
      }
    }
  }

  div:has(> .departures-list) {
    padding-inline: 0;

    @media screen and (max-width: 1279px) {
      width: 100%;
      left: 0;
      padding-inline: 15px;
    }
  }

  .departures-list {
    margin-top: 24px;
    background: var(--color-white);
    padding: 24px;
    border-radius: 16px;

    & :not(i):not([class^="icon-"]) {
      font-family: var(--font-body);
    }

    ul > li > .row {
      min-height: 0;
    }

    .btn-toggle-departures {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      display: block;

      span,
      i {
        display: inline-block;
      }

      i {
        margin-left: 8px;
      }

      .less {
        display: none;
      }

      &.open {
        .less {
          display: inline-block;
        }

        .more {
          display: none;
        }
      }

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }

    .green-light {
      background-color: var(--color-brand-primary-400);
      color: var(--color-brand-primary-800);

      span {
        line-height: 0.75;
        margin-right: 4px;
      }

      &:hover {
        background-color: var(--color-brand-primary);
      }
    }

    .departure-header {
      padding-top: 0;
      padding-bottom: 14px;

      & > span {
        font-size: 14px;

        & + span {
          font-size: 12px;
        }
      }
    }

    .departure-date {
      padding-block: 14px;

      .day {
        font-size: 14px;
      }

      .date {
        font-size: 16px;
      }
    }

    .departure-price {
      padding-block: 14px;

      span {
        font-size: 16px;

        &.departure-price-original {
          position: static;
        }
      }
    }

    .departure-spaces {
      padding-block: 14px;

      & > span {
        font-size: 16px;

        & + span {
          font-size: 14px;
        }
      }
    }

    .departure-book {
      padding-block: 14px;

      .button-link {
        font-size: var(--_min-a11y-font-size);
        font-weight: bold;
        background-color: var(--color-brand-marigold);
        color: var(--color-white);

        &:hover {
          background-color: var(--color-brand-marigold-shade);
        }
      }
    }

    .btn-departures-extras {
      display: flex;
      justify-content: center;
      gap: 16px;

      & > * {
        margin-block: 0;
      }
    }
  }
}

.accommodation-days {
  @media screen and (max-width: 768px) {
    padding-block: 12px;
  }

  .accommodation-day-container {
    .accommodation-day {
      border-radius: 16px;
      box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease;

      &:hover {
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    .accommodation-day-image {
      a {
        img {
          transition: opacity 0.3s ease;
        }

        &:hover {
          img {
            opacity: 0.8;
          }
        }
      }
    }

    .accommodation-day-title {
      border-radius: 0 16px 16px 0;
      padding: 0;

      a {
        padding: 16px;
        display: block;

        &:hover {
          h2 {
            color: var(--color-brand-secondary-400);
          }
        }
      }

      p,
      h2 {
        font-family: var(--font-body) !important;
      }

      p {
        color: var(--color-brand-charcoal-tint);
      }

      h2 {
        line-height: 1.1;
        margin-top: 2px;
        color: var(--color-brand-secondary);
        transition: color 0.3s ease;
      }
    }

    .accommodation-day-text {
      p {
        color: var(--color-brand-charcoal-tint);
        font-weight: normal;
      }
    }

    .accommodation-day-link {
      a {
        color: var(--color-brand-secondary);
        text-transform: none;
        font-weight: bold;
        font-family: var(--font-body);
        font-size: 14px;
        transition: color 0.3s ease;

        &:hover {
          color: var(--color-brand-secondary-400);
        }
      }
    }
  }
}

.sec-graph {
  .chart-info__item {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.2;
    font-weight: normal;
    text-transform: none;
    color: var(--color-brand-charcoal-tint);
    text-align: left;

    &:hover {
      .chart-info__bar {
        background-color: var(--color-brand-secondary-400);
      }
    }

    &:last-child .chart-info__labels {
      transform: translateX(0);
    }

    .chart-info__bar {
      border-radius: 16px 16px 0 0;

      &-horizontal {
        border-radius: 0 16px 16px 0;
      }

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  .container-section .charts {
    @media screen and (max-width: 1280px) {
    }

    .charts-container .chart-container-item .chart-year {
      font-family: var(--font-body);
      font-weight: bold;
      font-size: 48px;
      line-height: 1;
      color: var(--color-brand-secondary);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.35em;

      .btn-nav {
        display: block;
        position: static;
        margin: 0;
        transition: padding 0.3s ease;

        &.btn-right:hover {
          padding-left: 10px;
        }

        &.btn-left:hover {
          padding-right: 10px;
        }
      }
    }
  }

   .chart-info__discount {
     background-color: var(--color-brand-citrus);
     color: var(--color-brand-secondary);
     font-family: var(--font-body);
     font-size: 14px;
     font-weight: 500;
     text-transform: none;
     padding: 0 8px 0 30px;
     border-radius: 16px;
     &:before {
       font-size: 1.3em;
       color: var(--color-brand-secondary);
     }
   }

   .chart-info__bestvalue {
     background-color: var(--color-neutral-200);
     color: var(--color-brand-secondary);
     font-family: var(--font-body);
     font-size: 14px;
     font-weight: 500;
     text-transform: none;
     padding: 0 8px 0 30px;
     border-radius: 16px;
     &:before {
       font-size: 1.3em;
       color: var(--color-brand-marigold);
     }
   }
}

#sbooking-form-container {
  border-top: 0;

  .container-section > .container-section {
    padding: 0;

    &.mobile-horizontal-container {
      margin-inline: calc(0px - (var(--_section-padding-inline)));
      width: calc(100% + (var(--_section-padding-inline) * 2));
      padding-inline: var(--_section-padding-inline);
    }

    .mobile-horizontal-row {
      margin-inline: 0;
      display: flex;
      gap: 24px;

      &:before,
      &:after {
        content: none;
      }

      & > * {
        padding-inline: 0;
        float: none;
        width: 100%;
      }

      &:not(:has(> :nth-child(4))) {
        & > * {
          /** force justify start when less than 4 items */
          max-width: var(--_card-width);
        }
      }

      .card-front {
        display: flex;
        flex-direction: column;
        height: 100%;

        .card-price-container {
          margin-top: auto;
        }
      }

      @media screen and (max-width: 1240px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        justify-items: center;

        & > * {
          min-width: var(--_card-width);
          width: auto;

          &:nth-child(2n + 1) {
            justify-self: end;
          }

          &:nth-child(2n) {
            justify-self: start;
          }
        }
      }

      @media screen and (max-width: 800px) {
        display: flex;
        flex-direction: column;
        gap: 24px;

        & > * {
          margin-inline: auto;
        }
      }

      @media screen and (max-width: 480px) {
        flex-direction: row;
        padding-bottom: 16px;
        align-items: normal;
        width: max-content !important;
      }
    }
  }
}

.travel-guide-article {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 24px;

  @media screen and (max-width: 1540px) {
    grid-template-columns: auto var(--_card-width);
  }

  @media screen and (max-width: 991px) {
    grid-template-columns: 1fr;
  }

  & > :not(.button-link) {
    padding-inline: 0;
    float: none;
    width: 100%;
  }

  @media screen and (min-width: 1024px) {
    & > h2:first-child {
      margin-top: 0;
    }
  }

  .left-info-x {
    & + *:has(+ .right-info-x) {
      display: none;
    }
  }

  .right-info-x {
    background-color: var(--color-brand-sandstone);
    border-radius: 16px;
    padding: 24px;
    height: fit-content;

    .sup {
      color: var(--color-brand-charcoal);
      text-transform: none;
      font-family: var(--font-body);
      margin-left: 0;
      margin-bottom: 14px;

      &:first-child {
        margin-top: 0;
      }
    }

    h1 {
      color: var(--color-brand-secondary) !important;
      font-family: var(--font-body) !important;
      text-transform: none;
      line-height: 1.1;
      margin: 0 0 20px;

      a {
        span {
          color: var(--color-brand-secondary) !important;
        }
      }
    }

    p {
      color: var(--color-brand-charcoal-shade) !important;
    }

    ul {
      li {
        font-family: var(--font-body);
        font-weight: normal;

        &:before {
          left: 26px;
        }

        a {
          color: var(--color-brand-charcoal);
          font-weight: bold;

          &:hover {
            text-decoration: none !important;
          }
        }
      }
    }
  }
}

#tour-gallery {
  @media screen and (max-width: 980px) {
    .collage-single {
      img {
        width: 100%;
      }
    }
  }
}

.card-view-link,
.card-flip-link,
.card-view-link.accommodation-card-update {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-brand-secondary);
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: bold;
  text-transform: none !important;
   padding: 9px 18px !important;
  line-height: 1;
  margin-bottom: 0 !important;
  transition: color 0.3s ease;

  &:hover {
    color: var(--color-brand-secondary-400);
  }
}

#mobile-car-card {
  h1 {
    color: var(--color-brand-secondary);

    span {
      font-size: 14px;
    }
  }

  h3 {
        margin: 50px 0 16px;
   }

  ul {
    color: var(--color-brand-charcoal);
    padding-left: 30px;
    padding-right: 30px;
   }

  .card-bottom {
    padding-bottom: 20px;
    bottom: 0;
  }

  .card-flip-link {
    border-radius: 30px !important;
  }

}

/** CHECKOUT */

.checkout {
  .container-section {
    padding-block: 24px;
  }

  .sec-slipper {
    padding-left: calc(50vw - 760px);

    & > .container-section,
    & > .container {
      padding-block: 24px;

      @media screen and (min-width: 1580px) {
        margin-inline: 0;
      }
    }
  }

  .page-header {
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 0;
    line-height: 1.2;

    a {
      color: var(--color-brand-secondary);
      transition: color 0.3s ease;

      &:hover {
        color: var(--color-brand-secondary-400);
      }
    }

    .card-special-offer {
      background-color: var(--color-brand-citrus);
      font-family: var(--font-body);
      border-radius: 8px;
      font-weight: bold;
    }

    @media screen and (max-width: 800px) {
      font-size: 24px;

      & > a {
        &:first-child {
          display: block;
        }

        &.infobox {
          margin: 8px 0 0 0;
          display: inline-block;
        }
      }

      .card-special-offer {
        margin: 16px 0 0 0;
        font-size: 16px;
      }
    }

    @media screen and (max-width: 640px) {
      .card-special-offer {
        font-size: 14px;
      }
    }

    @media screen and (max-width: 480px) {
      font-size: 20px;

      .card-special-offer {
        margin: 0;
        position: relative;
        top: 0;
      }
    }
  }

  .lead {
    margin-inline: 0;
  }

  .booking-steps {
    display: flex;

    li {
      flex: 1;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      text-transform: none;
      color: var(--color-brand-charcoal-tint);

      @media screen and (max-width: 480px) {
        font-size: 12px;
      }
    }
  }

  #booking-form-container {
    padding-block: 36px;
    padding-left: calc(50vw - 760px);
    background-color: var(--color-brand-sandstone) !important;

    & > .container-padbtm {
      max-width: 100%;
      margin-left: 0;

      @media screen and (min-width: 801px) {
        padding-top: 0;
      }

      @media screen and (max-width: 1200px) {
        width: 100%;
      }
    }

    @media screen and (max-width: 800px) {
      padding-block: 0;
    }

    .package-headline,
    .col-md-12 > h1,
    .lead {
      color: var(--color-brand-secondary);
    }

    .package-headline,
    .col-md-12 > h1 {
      font-size: 28px;
      margin-bottom: 24px;
      margin-top: 24px;

      &:has(+ p) {
        margin-bottom: 0;
      }

      & + p {
        font-size: 18px;
        margin-inline: 0;
        text-align: left;
        margin-bottom: 18px;
        display: block;
      }
    }

    textarea,
    select,
    input[type="password"],
    input[type="file"],
    input[type="email"],
    input[type="date"],
    input[type="text"],
    input[type="tel"],
    input[type="password"]::placeholder,
    input[type="file"]::placeholder,
    input[type="email"]::placeholder,
    input[type="date"]::placeholder,
    input[type="text"]::placeholder,
    input[type="tel"]::placeholder,
    .dropdown-toggle {
      text-transform: none;
      font-size: 14px;
      font-family: var(--font-body);
      font-weight: normal;
      line-height: 1.2;
      color: var(--color-brand-granite-shade);
    }

    textarea,
    select,
    input[type="password"],
    input[type="file"],
    input[type="email"],
    input[type="date"],
    input[type="text"],
    input[type="tel"],
    .dropdown-toggle {
      color: var(--color-brand-charcoal);
      background-color: var(--color-white);
      border-radius: 16px;
      border: 1px solid var(--color-brand-sandstone-shade);
      padding: 12px;
      margin-bottom: 16px;
    }

@media (max-width: 768px) {
  textarea,
  select,
  input[type="password"],
  input[type="file"],
  input[type="email"],
  input[type="date"],
  input[type="text"],
  input[type="tel"],
  input[type="password"]::placeholder,
  input[type="file"]::placeholder,
  input[type="email"]::placeholder,
  input[type="date"]::placeholder,
  input[type="text"]::placeholder,
  input[type="tel"]::placeholder,
  .dropdown-toggle {
    font-size: 16px;
  }
}

    .req {
      color: var(--color-brand-marigold);
      margin-left: 4px;
    }

    #datepicker-arrival {
      font-size: 18px;
      padding-left: 50px;
    }

    .booking-item-container.large-input {
      margin-bottom: 32px;

      .booking-calendar-icon {
        bottom: 28px;
        left: 12px;
      }
    }

    input[type="checkbox"],
    input[type="radio"] {
      & + label,
      & + label:after {
        font-size: 14px;
      }

      &.card-selector,
      &.car-card-select {
        & + label {
          font-size: var(--_min-a11y-font-size);
          background-color: var(--color-brand-marigold);

          &:after {
            font-size: var(--_min-a11y-font-size);
            font-weight: bold;
          }
        }

        &:disabled {
          & + label {
            color: var(--color-brand-granite-tint);
            background-color: var(--color-brand-granite);
          }

          &:after {
            color: var(--color-brand-granite-tint);
          }
        }
      }
    }

    input.date + div {
      bottom: 26px;
    }

    select {
      padding-block: 0;
    }

    #frmPersonal {
      select {
        padding-block: 8px;
      }
    }

    .counter-form {
      background-color: transparent;

      ul {
        li {
          background-color: var(--color-white);
          color: var(--color-brand-charcoal);
          border-radius: 16px;
          border: 1px solid var(--color-brand-sandstone-shade);
          font-family: var(--font-body);
          font-size: 18px;
          text-transform: none;
          margin: 0 0 16px;
          padding: 16px;

          .counter-form-value {
            font-size: 24px;
          }

          .counter-form-label {
            font-size: 18px;
          }

          .counter-form-controls {
            a {
              font-family: var(--font-body);
              font-size: 18px;
              font-weight: 500;
              transition: background-color 0.3s ease;

              &:hover {
                background-color: var(--color-brand-secondary-400);
                color: var(--color-white);
              }

              @media screen and (max-width: 800px) {
                font-size: 28px;
                line-height: 43px;
              }
            }
          }

          @media screen and (max-width: 640px) {
            padding: 12px;

            .counter-form-value {
              font-size: 20px;
            }

            .counter-form-label {
              font-size: 14px;
            }
          }
        }
      }
    }

    #availability {
      z-index: 2;
      font-family: var(--font-body);
      top: -24px;
    }

    .card-accommodation {
      .card-front,
      .card-back {
        background-color: var(--color-white);
        border-radius: 16px;
        border: 1px solid var(--color-brand-sandstone-shade);

        &:hover:not(.card-large-back.flip) {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        }
      }

      .dropdown-form {
        background-color: var(--color-white);
        border-radius: 16px;
        border: 1px solid var(--color-brand-sandstone-shade);
        margin-bottom: 16px;

        &.expanded {
          border-color: var(--color-brand-marigold);
        }

        h2,
        ul li {
          font-family: var(--font-body) !important;
        }
      }

      .preferences {
        margin: 0 0 20px !important;
      }
    }

    .card-accommodation,
    .card-car {
      h1,
      p {
        font-family: var(--font-body) !important;
      }

      @media screen and (max-width: 480px) {
        h1 {
          font-size: 20px;
        }
      }

      .card-bottom {
        position: static;
        padding-block: 14px;

        .button-toggle input[type="checkbox"],
        .button-toggle input[type="radio"] {
          label {
            background-color: var(--color-brand-marigold);
            color: var(--color-white);
            padding: 9px 13px;
            line-height: 1;
            height: auto;
            transition: background-color 0.3s ease;

            &:before {
              color: var(--color-white);
            }

            &:after {
              color: var(--color-white);
              font-family: var(--font-body);
              font-size: var(--_min-a11y-font-size);
              text-transform: none;
              font-weight: bold;
              line-height: 1;
            }

            &:hover {
              background-color: var(--color-brand-marigold-shade);
              color: var(--color-white);
            }
          }

          &:checked + label,
          & + label.checked {
            background-color: var(--color-brand-primary-400) !important;
            color: var(--color-brand-primary-800) !important;

            &:before,
            &:after {
              color: var(--color-brand-primary-800) !important;
              font-weight: bold;
              font-size: var(--_min-a11y-font-size);
            }
          }
        }
      }

      .card-back {
        display: flex;
        flex-direction: column;

        .card-bottom {
          margin-top: auto;

          .card-confirm {
            background-color: var(--color-brand-marigold);
            color: var(--color-white);
            font-family: var(--font-body);
            font-size: var(--_min-a11y-font-size);
            text-transform: none;
            padding: 9px 13px;
            margin-bottom: 10px;
            line-height: 1;
            transition: background-color 0.3s ease;

            &:hover {
              background-color: var(--color-brand-marigold-shade);
              color: var(--color-white);
            }
          }
        }
      }

      &.card-large-back {
        .card-back {
          min-height: 100%;
          height: 110%;
          width: 140%;
          top: -5%;
          left: -20%;

          .card-bottom {
            padding-bottom: 0;

            .card-button-container {
              position: static;
              padding-bottom: 20px;
            }
          }

          @media screen and (max-width: 640px) {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            z-index: 1000;
            padding-top: 65px;
          }
        }
      }

      &.selected {
        .card-front,
        .card-back {
          border-color: var(--color-brand-marigold);
        }
      }
    }

    .card-car {
      .card-front {
        display: flex;
        flex-direction: column;

        .card-bottom {
          margin-top: auto;
        }
      }

      .card-back {
        h1 {
          span {
            font-size: 14px;
          }
        }

        ul {
          color: var(--color-brand-charcoal);
        }
      }

      .card-car-icons {
        li {
          font-size: 16px;
          line-height: 1;
          color: var(--color-brand-charcoal-tint);

          span {
            color: var(--color-brand-primary-600);
          }
        }
      }
    }

    .card-leftmost .card-large-back .card-back {
      left: 0 !important;
    }

    .card-extra-night {
      z-index: 0;

      .text {
        font-size: 14px;

        & > * {
          color: var(--color-brand-charcoal);
        }
      }

      .price,
      .currency-link {
        font-family: var(--font-body);
      }
    }

    #accommodations {
      .mobile-horizontal-row {
        @media (min-width: 1100px) {
          padding-block: 30px;

          &:has(> :nth-child(3):last-child) {
            & > div {
              width: 33.33% !important;
            }
          }

          .card {
            .card-front {
              display: flex;
              flex-direction: column;

              .card-bottom {
                margin-top: auto;
              }
            }
          }
        }

        @media (max-width: 1100px) {
          width: 100% !important;
          margin-inline: 0;
          padding-bottom: 30px;

          & > div {
            float: none;
            width: 100%;
            padding-inline: 0;
          }

          .card {
            --_img-size: 197px;
            --_summary-width: calc(100% - var(--_img-size));

            max-width: 100% !important;
            width: 100% !important;
            height: auto !important;
            min-height: var(--_img-size) !important;
            margin-bottom: 16px;

            .card-img {
              float: left;
              width: var(--_img-size);
              height: var(--_img-size);
            }

            .card-front {
              min-height: var(--_img-size) !important;

              h1,
              .card-summary,
              .card-selection-summary {
                float: left;
                width: var(--_summary-width);
              }

              h1 {
                text-align: left;
                margin-top: 20px;
              }

              h1,
              .card-summary p {
                padding-inline: 20px;
              }

              .card-summary p {
                margin-bottom: 0;
              }

              .card-selection-summary {
                padding-bottom: 0;
              }
            }

            .card-back {
              --_summary-width: 100%;

              display: none;
              min-height: var(--_img-size) !important;
              position: relative;
              left: 0;
              top: 0;
              margin-top: calc(0px - var(--_img-size));
              width: 100%;
              height: 100%;
              padding-bottom: 0;

              h1,
              p,
              .inner-form {
                float: left;
                width: var(--_summary-width);
              }

              .preferences {
                p {
                  float: none;
                }
              }

              .card-button-container {
                position: static;
                display: flex;
                align-items: center;
                width: max-content;
                gap: 16px;
                padding-bottom: 0;
              }
            }

            &.flip {
              .card-back {
                display: block;
              }
            }

            .card-bottom {
              float: left;
              width: var(--_summary-width);
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              padding: 20px;
              gap: 16px;

              .button-toggle input[type="checkbox"] + label,
              .button-link {
                width: max-content;
                min-width: 130px;
                margin-left: 00;
                margin-bottom: 0;
              }
            }
          }
        }

        @media screen and (max-width: 800px) {
          .card-front h1 {
            margin-bottom: 0;
          }
        }

        /** duplicate to override old styles */
        @media (max-width: 640px) {
          .card.flip {
            min-height: 70vh !important;
            height: 100vh !important;

            .card-back {
              overflow: auto;
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              max-width: 100%;
              padding-top: 65px;
              margin-top: 0;
            }
          }

          .card-bottom {
            flex-direction: column;
          }
        }

        @media (max-width: 480px) {
          .card.flip {
            min-height: 70vh !important;
          }

          .card-bottom {
            flex-direction: column;
          }
        }

        @media (max-width: 420px) {
          .card {
            .card-front {
              h1,
              .card-summary,
              .card-selection-summary,
              .card-img {
                float: none;
                width: 100%;
              }
            }
          }
        }
      }

      .card.selected .card-front .card-selection-summary .rooms {
        font-family: var(--font-body);
        color: var(--color-brand-charcoal-shade);
      }

      select.rooms-selector {
        padding-block: 10px;
      }

      .col-guided-accommodation {
        /** ONLY ONE CARD */
        @media screen and (max-width: 1024px) {
          width: 50% !important;
        }

        @media screen and (max-width: 768px) {
          width: 100% !important;
        }

        .card {
          max-width: 100% !important;

          .card-back {
            display: none;
          }

          &.flip {
            position: static;
            height: fit-content !important;
            min-height: 0;

            .card-front {
              display: none;
            }

            .card-back {
              display: block;
              position: static;
              width: 100%;
              height: fit-content;
              padding-top: 0;
              overflow: auto;
            }

            &.card-small-package {
              .card-back {
                @media (min-width: 481px) and (max-width: 800px) {
                  margin-top: 0;
                  padding-bottom: 0;
                }
              }
            }
          }
        }
      }
    }

    .card-extra-night,
    .card-services {
      background-color: var(--color-white);
      border-radius: 16px;
      box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease;

      &:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: none;
      }

      h2,
      .text p,
      .summary p,
      ul,
      li,
      a,
      [type="number"] {
        font-family: var(--font-body) !important;
        text-transform: none;
      }

      .apply,
      .num-selection button {
        font-weight: bold;
        background: var(--btn-primary-bg);
      }

      .num-selection button {
        &:hover {
          background: var(--btn-primary-hover-bg);
          color: var(--btn-primary-hover-text);
        }
      }

      &.selected .apply,
      &.selected .apply:hover {
        color: var(--color-brand-primary-800);
        background: var(--color-brand-primary-400);
      }

      /* Style for disabled extra nights buttons */
      .num-selection button:disabled,
      .num-selection button:disabled:hover,
      button.apply.grey,
      button.apply.grey:hover {
        background-color: var(--btn-gray-bg);
        color: var(--btn-gray-text);
        cursor: not-allowed;
        opacity: 0.6;
      }

      .currency-link ul {
        bottom: 30px;
        top: auto;
        border-radius: 8px;
      }
    }

    .row:has(.card-extra-night) ~ .row {
      margin-top: var(--_section-gap);
    }

    .card-services {
      padding-bottom: 20px;

      .card-footer {
        position: static;
        margin-top: 20px;
      }
    }

    .mobile-horizontal-container {
      &:has(.section-cars) {
        @media screen and (max-width: 1024px) {
          margin-inline: -30px;
        }

        @media screen and (max-width: 768px) {
          margin-inline: -20px;
        }
      }

      @media screen and (min-width: 540px) and (max-width: 800px) {
        &.day-activities {
          .mobile-horizontal-row {
            &:has(.card-tour),
            &:has(.card-optional) {
              & > * {
                width: 240px !important;
              }
            }
          }
        }
      }
    }

    .sub-anchors {
      margin-bottom: 24px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      text-transform: none;
      color: var(--color-brand-charcoal-tint);

      ul {
        padding: 0;
      }
    }

    .headline-section,
    input[type="checkbox"] + label,
    input[type="radio"] + label {
      font-family: var(--font-body) !important;
      text-transform: none;
    }

    .package-optional {
      .row-optional {
        .headline-section {
          font-size: 20px;
          font-weight: bold;
          line-height: 1;
          margin-bottom: 8px;
          color: var(--color-brand-secondary);
        }

        .itinerary-day {
          font-weight: 500;
        }
      }
    }

    .card-optional {
      margin-bottom: 40px;

      & > * {
        text-align: center;
      }

      h1,
      h2,
      p,
      a,
      label,
      .duration,
      .card-small-price,
      .card-currency,
      .dropdown-form ul li {
        font-family: var(--font-body) !important;
      }

      .card-currency {
        color: var(--color-brand-charcoal-shade);
      }

      .card-bottom {
        margin-top: auto;

        .card-cancel {
          background-color: var(--color-brand-primary-400) !important;
          color: var(--color-brand-primary-800) !important;

          &:hover {
            background-color: var(--color-brand-primary) !important;
            color: var(--color-brand-primary-800) !important;
          }
        }
      }

      .card-button-container div {
        text-align: center;
      }

      .card-front {
        h1 {
          text-align: center;
          font-weight: 500;
          color: var(--color-brand-secondary);
        }

        .card-details-link {
          color: var(--color-brand-secondary);
          text-decoration: underline;
          text-underline-offset: 2px;
          font-family: var(--font-body);
          font-size: 14px;
          font-weight: 500;
          margin: 14px auto;
          text-transform: none;
          border: 1px solid var(--color-white);
          transition: color 0.3s ease;

          &:hover {
            color: var(--color-brand-secondary-400);
          }
        }

        .quick-info {
          margin-inline: 0;
          padding-inline: 15px;
          display: flex;
          justify-content: center;
          gap: 24px;

          &:before,
          &:after {
            content: none;
          }

          & > * {
            width: fit-content;
            padding-inline: 0;
          }
        }
      }

      &.selected {
        .card-front {
          background-color: var(--color-white);
          border: 1px solid var(--color-brand-marigold);
        }
      }

      .card-back,
      .card-back * {
        text-align: center;
      }

      .dropdown-form {
        background-color: var(--color-brand-sandstone);
        border-radius: 16px;

        h2,
        ul li {
          font-family: var(--font-body) !important;
          text-align: left;
          text-transform: none;
        }
      }

      @media screen and (max-width: 767px) {
        &.flip {
          .card-back {
            padding-top: 0;
          }
        }
      }

      @media screen and (max-width: 640px) {
        &.flip {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100% !important;
          max-width: 100%;

          .card-back {
            padding-top: 65px;

            .card-button-container {
              position: static;
            }
          }

          .dropdown-form-value,
          .dropdown-form-label {
            font-size: 16px;
          }

          .dropdown-form-controls {
            width: 110px;

            .button-circle {
              width: 44px;
              height: 44px;
              font-weight: bold;
              line-height: 44px;
            }
          }
        }
      }
    }

    #frmServices {
      .row:not(:first-child) {
        .package-headline {
          margin-top: var(--_section-gap);
        }
      }

      @media screen and (min-width: 992px) {
        width: 100%;
      }
    }

    .row-optional:not(:first-child) {
      margin-top: var(--_section-gap);
    }

    .row-extras {
      @media screen and (min-width: 1201px) {
        max-width: 100%;
      }

      @media screen and (min-width: 1025px) {
        margin-inline: 0;
        padding-inline: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 24px;

        &:before,
        &:after {
          content: none;
        }

        & > * {
          padding-inline: 0;
          width: 100%;
        }
      }
      @media screen and (max-width: 1024px) {
        padding-block: 24px;
      }
    }

    @media screen and (max-width: 1280px) {
      #frmPersonal .row > * {
        width: 50%;
      }
    }

    @media screen and (max-width: 1200px) {
      #frmPersonal {
        width: 100%;
        max-width: calc(100vw - 30px);
      }
    }

    @media screen and (max-width: 991px) {
      #frmPersonal .row > * {
        width: 100%;
      }

      textarea,
      select,
      input[type="password"],
      input[type="file"],
      input[type="email"],
      input[type="date"],
      input[type="text"],
      input[type="tel"],
      .dropdown-toggle {
        max-width: 500px;
      }
    }
  }

  .button-back,
  .button-submit {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .button-back {
    &:hover {
      background-color: var(--color-brand-sandstone-shade) !important;
      color: var(--color-brand-charcoal) !important;
    }
  }

  .row
    div:has(
      > .button-back,
      > .button-submit,
      > .button-credit-card,
      > .button-multiple,
      > .button-bank
    ) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;

    @media screen and (max-width: 991px) {
      justify-content: center;
      flex-wrap: wrap;
      column-gap: 16px;
      row-gap: 0;
    }

    @media screen and (max-width: 480px) {
      flex-direction: column-reverse;
    }
  }

  .button-submit,
  .button-credit-card,
  .button-multiple,
  .button-bank {
    cursor: pointer;
    background-color: var(--color-brand-marigold);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: bold;
    text-transform: none;
    line-height: 1;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--color-brand-marigold-shade);
      color: var(--color-white);
    }
  }

  /* Style for disabled buttons */
  button.button-submit:disabled,
  button.button-submit:disabled:hover {
    background-color: var(--btn-gray-bg);
    color: var(--btn-gray-text);
    cursor: not-allowed;
    opacity: 0.6;
  }

  input[type="radio"] + .payment-select,
  .payment-select {
    border-radius: 8px;
  }

  input[type="radio"]:checked + .payment-select {
    border-color: var(--color-brand-marigold);
  }

  .booking-form {
    background-color: var(--color-white);

    &.booking-form--white,
    &.booking-form--green {
      @media screen and (max-width: 1279px) {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    }

    h2,
    .price,
    table,
    .coupon-code {
      font-family: var(--font-body) !important;
    }

    table {
      color: var(--color-brand-charcoal);
    }

    .button-link {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
    }

    .coupon-code-input {
      input {
        background-color: var(--color-brand-sandstone);
        color: var(--color-brand-charcoal);
        border-radius: 16px 0 0 16px;
        border: 1px solid var(--color-brand-sandstone-shade);
        font-family: var(--font-body);
        font-weight: normal;
        text-transform: none;
      }

      button {
        background-color: var(--color-brand-secondary);
        color: var(--color-white);
        font-family: var(--font-body);
        font-weight: bold;
        border-radius: 0 16px 16px 0;
        text-transform: none;
        line-height: 1;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--color-brand-secondary-400);
        }
      }
    }
  }

  .container-booking-sticky {
    &.sticktop .booking-form--results {
      z-index: 40;
      max-height: calc(100vh - 70px);

      @media (max-width: 1279px) {
        header {
          padding-left: var(--_section-padding-inline);

          .booking-form__mobile-toggle {
            right: var(--_section-padding-inline);
          }
        }
      }
    }

    &.package-booking {
      /** NORMAL CHECKOUT */
      border-color: var(--color-brand-sandstone-shade);
    }

    &:has(.booking-form-header-summary) {
      /** CUSTOM BOOKING */
      padding-right: 0;

      @media only screen and (max-width: 767px) {
        position: static !important;
      }

      .booking-form {
        border-radius: 16px 0 0 16px;

        .booking-form-header-summary {
          background-color: var(--color-brand-secondary);

          .price {
            margin-right: 0;
          }

          p {
            font-size: 14px;
            font-family: var(--font-body) !important;

            a {
              color: var(--color-white) !important;
            }
          }
        }
      }
    }
  }

  &:has(.container-booking-sticky) {
    &:has(.booking-form-header-summary) {
      /** CUSTOM BOOKING */
      @media only screen and (max-width: 767px) {
        #content {
          display: flex;
          flex-direction: column;

          & > * {
            width: 100%;
            max-width: 100%;

            &:first-child,
            &.container-booking-sticky {
              /** booking steps and booking form */
              order: -1;

              .booking-form {
                border-radius: 0;

                .button-link {
                  width: fit-content;
                  margin-inline: auto;
                  display: flex;
                }
              }
            }
          }
        }
      }
    }
  }

  .formError .formErrorContent {
    background-color: var(--color-brand-secondary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: normal;
    text-transform: none;
  }

  .booking-form--white header .booking-form__mobile-open,
  .booking-form--green header .booking-form__mobile-open {
    font-family: var(--font-body);
    text-transform: none;
    color: var(--color-brand-charcoal);

    &:hover {
      color: var(--color-brand-charcoal-shade);
    }
  }

  footer {
    .container {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-block: 24px 48px !important;

      @media screen and (max-width: 1580px) {
        padding-inline: 30px;
      }

      @media screen and (max-width: 1280px) {
        justify-content: space-between;
        align-items: center;

        & > *,
        & > * > * {
          text-align: center;
          margin-inline: auto;
          float: none;
        }
      }
    }
  }
}

.contact-page {
  .page-header,
  .lead {
    text-align: center !important;
    text-wrap: pretty;
  }

  .page-header {
    color: var(--color-brand-primary-600);
    line-height: 32px;
    font-size: 36px !important;
    margin-top: 0;
  }

  .lead {
    margin-bottom: 24px;
    color: var(--color-brand-charcoal);
  }

  section {
    &:has(.page-header) {
      padding-block: var(--_section-gap);

      @media screen and (max-width: 1200px) {
        & > * {
          width: 100%;
          max-width: 100%;
        }

        .sidebar {
          &:before {
            content: none;
          }
        }
      }
    }
  }

  .section-contact-form {
    @media screen and (min-width: 800px) {
      padding-left: 36px;
    }

    @media screen and (max-width: 992px) {
      div:has(> .box-chat) {
        margin-top: 24px;
      }
    }

    .dc_webcomponents_html {
      & + .dc_webcomponents_html {
        margin-top: 24px;
      }
    }

    h1 {
      font-family: var(--font-body) !important;
      text-transform: none;
      font-weight: bold;
      margin-top: 0;
      font-size: 24px;
      color: var(--color-brand-secondary);
    }

    h4 {
      font-family: var(--font-body) !important;
      text-transform: none;
      font-weight: bold;
      font-size: 18px;
      color: var(--color-brand-secondary);
    }

    form,
    .box.white {
      border-radius: 16px;

      .box-chat-right {
        padding: 24px;

        ul {
          li {
            .ctry {
              color: var(--color-brand-primary-600);
            }
          }
        }
      }

      & + h1 {
        margin-top: 24px;
      }
    }

    form {
      @media screen and (max-width: 640px) {
        padding: 24px;
      }
    }

    textarea,
    select,
    input[type="password"],
    input[type="file"],
    input[type="email"],
    input[type="date"],
    input[type="text"],
    input[type="tel"],
    input[type="password"]::placeholder,
    input[type="file"]::placeholder,
    input[type="email"]::placeholder,
    input[type="date"]::placeholder,
    input[type="text"]::placeholder,
    input[type="tel"]::placeholder,
    .dropdown-toggle {
      text-transform: none;
      font-size: 14px;
      font-family: var(--font-body) !important;
      font-weight: normal;
      line-height: 1.2;
      color: var(--color-brand-granite-shade);
    }

    textarea,
    select,
    input[type="password"],
    input[type="file"],
    input[type="email"],
    input[type="date"],
    input[type="text"],
    input[type="tel"],
    .dropdown-toggle {
      color: var(--color-brand-charcoal);
      background-color: var(--color-white);
      border-radius: 16px;
      border: 1px solid var(--color-brand-sandstone-shade);
      padding: 12px;
      margin-bottom: 16px;
    }

    .g-captcha-note {
      font-family: var(--font-body);
    }

    .box-office-locations > div:last-of-type {
      padding-bottom: 0;
    }
  }

  .submit-right,
  .button-link.green {
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);
    font-family: var(--font-body);
    font-size: var(--_min-a11y-font-size);
    font-weight: bold;
    text-transform: none;
    line-height: 1;
    transition: background-color 0.3s ease;
    padding: 13px 22px;
    border-radius: 30px;

    &:hover {
      background-color: var(--color-brand-primary);
      color: var(--color-brand-primary-800);
    }
  }

  .box-chat {
    .icon-chat {
      color: var(--color-brand-primary);
    }
  }

  .sidebar {
    &:before {
      border-color: var(--color-brand-sandstone-shade);
    }

    &.sec-color-green {
      background-color: var(--color-brand-primary-400);
      padding: 24px;

      * {
        color: var(--color-brand-primary-800);
      }

      &:before {
        border-color: var(--color-brand-primary-600);
      }
    }

    h1,
    .phone,
    p {
      font-family: var(--font-body);
    }

    h1 {
      color: var(--color-brand-charcoal);
      margin-top: 0;
      font-weight: bold;
      font-size: 24px;
      text-wrap: balance;
    }

    .phone a {
      color: var(--color-brand-primary-600);
    }

    p {
      color: var(--color-brand-charcoal-tint);
    }
  }

  .box-office-locations {
    border-radius: 16px;
    padding: 24px;

    h1 {
      color: var(--color-brand-charcoal);
      font-family: var(--font-body) !important;
    }

    ul {
      li {
        a {
          text-decoration: underline;
        }
      }
    }
  }

  .section-help {
    h5.head.headline-section,
    .lead {
      text-align: left !important;
    }

    h5.head.headline-section {
      font-weight: normal;
      font-size: 48px;
      line-height: 44px;
    }
  }

  @media (max-width: 800px) {
    .section-contact-form > .container,
    .dropdown-nav.section-contact-form > ul,
    .section-contact-form > .container-padbtm,
    .section-contact-form > .container-padtop {
      padding-inline: 30px;
      width: 100%;
      float: none;
    }
  }
}

.ui-datepicker {
  width: 400px;
  max-width: 90vw;
  border-radius: 16px;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);

  .ui-datepicker-title,
  thead,
  th,
  td span,
  td a,
  table thead tr th {
    font-family: var(--font-body);
    text-transform: none;
  }

  .ui-datepicker-title {
    font-size: 14px;
  }

  td span,
  td a {
    color: var(--color-brand-charcoal);
  }

  table thead tr th,
  table thead span {
    color: var(--color-brand-primary-600);
    font-size: 12px;
  }

  td a {
    transition:
      background-color 0.3s ease,
      color 0.3s ease;

    &.ui-state-hover {
      background-color: var(--color-brand-sandstone);
      color: var(--color-brand-charcoal);
    }

    &.ui-state-active {
      background-color: var(--color-brand-marigold);
      color: var(--color-white);

      &.ui-state-hover {
        background-color: var(--color-brand-marigold-shade);
        color: var(--color-white);
      }
    }
  }

  .ui-datepicker-prev {
    span {
      &:before {
        color: var(--color-brand-primary-600);
      }
    }
  }

  .ui-datepicker-next {
    span {
      &:after {
        color: var(--color-brand-primary-600);
      }
    }
  }

  &.ui-datepicker-multi-2 {
    &:before {
      color: var(--color-brand-secondary);
      padding-block: 18px;
      /* content: "Select your arrival date"; */
      border-radius: 16px 16px 0 0;
    }

    .ui-datepicker-title {
      padding-top: 0;
    }
  }
}

.picker {
  .picker__month,
  .picker__year {
    font-size: 14px;
    font-family: var(--font-body) !important;
    font-weight: bold;
    text-transform: none;
  }

  .picker__weekday {
    font-size: 14px;
    font-family: var(--font-body) !important;
    font-weight: 500;
    color: var(--color-brand-primary-600);
    text-transform: none;
  }

  .picker-footer {
    .picker__button--close {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      font-size: 14px;
      font-family: var(--font-body) !important;
      font-weight: bold;

      &:hover {
        background-color: var(--color-brand-secondary-400);
        color: var(--color-white);
      }
    }
  }
}

.client-review-paragraph {
  border-radius: 8px;

  h3,
  p,
  .review-subtitle > div {
    font-family: var(--font-body) !important;
    text-transform: none;
  }

  h3 {
    font-weight: bold;
  }

  .review-text {
    &:after {
      color: var(--color-brand-secondary);
      text-transform: none;
    }
  }
}

.sec-travel-guide-hero {
  &.sec-color-blue {
    .headline-section,
    .lead {
      color: var(--color-brand-primary-800);
    }
  }

  .card-mini {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .button-link {
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);

    &:hover {
      background-color: var(--color-brand-primary);
      color: var(--color-brand-primary-800);
    }
  }

  div:has(> .card-mini) {
    @media screen and (min-width: 992px) and (max-width: 1200px) {
      display: flex;
      gap: 16px;
      width: 100%;
      padding-inline: 24px;
      margin-top: var(--_section-gap);

      .card-mini {
        margin: 0;
        flex: 1;

        @media screen and (max-width: 1100px) {
          p {
            grid-column: span 2;
            margin-top: 12px;
          }
        }
      }
    }

    @media screen and (max-width: 991px) {
      .card-mini {
        max-width: var(--_card-width);
      }
    }
  }
}

#people {
  .container-padbtm {
    width: 100%;
    padding-inline: var(--_section-padding-inline);
  }

  h1:not(.headline-section),
  h2 {
    font-family: var(--font-body) !important;
    text-transform: none;
    color: var(--color-brand-secondary);
  }

  .employee-row {
    margin-top: 0;
  }

  .employee {
    width: 20%;
    margin-bottom: 16px;

    img {
      border-radius: 16px;
    }

    h1 {
      font-size: 16px;
      line-height: 20px;
      margin-bottom: 4px;
    }

    h2 {
      font-size: 14px;
    }
  }

  @media screen and (max-width: 1280px) {
    .row {
      margin-inline: 0;
    }

    .employee-row {
      h1 {
        padding-inline: 0;
      }
    }

    .employee {
      padding-inline: 6px;
    }
  }

  @media screen and (max-width: 1080px) {
    .employee {
      width: 25%;
    }
  }

  @media screen and (max-width: 768px) {
    .employee {
      width: 33.33%;
    }
  }

  @media screen and (max-width: 640px) {
    .employee {
      text-align: center;

      h2 {
        font-size: 12px;
        margin-bottom: 0;
      }

      img {
        max-height: 150px;
        width: 100%;
        object-fit: cover;
        object-position: top;
      }
    }
  }

  @media screen and (max-width: 580px) {
    .employee-row {
      h1 {
        text-align: center;
      }
    }

    .employee {
      width: 50%;

      img {
        width: 90px;
        height: 90px;
      }
    }
  }

  @media screen and (max-width: 480px) {
    .employee-row {
      h1 {
        text-align: left;
      }
    }

    .employee {
      width: 100%;
      display: grid;
      grid-template-columns: 70px 1fr;
      column-gap: 12px;
      margin-bottom: 12px;

      img {
        width: 70px;
        height: 70px;
        grid-row: span 2;
      }

      h1,
      h2 {
        grid-column: 2;
        text-align: left;
        margin: 0;
        line-height: 16px;
      }
    }
  }

  .employee-show-more {
    display: flex;
    justify-content: center;
    align-items: center;

    .button-link {
      background-color: var(--color-brand-secondary);

      &:hover {
        background-color: var(--color-brand-secondary-400);
      }
    }
  }

  .employees-row {
    @media screen and (max-width: 580px) {
      .button-link {
        font-size: 14px;
        padding: 10px 14px;
      }

      & > .employee:not(.active):nth-child(n + 5) {
        display: none !important;
      }

      & > .employee-show-more:nth-child(-n + 5) {
        /** hide show more button if there aren't enough employees */
        display: none;
      }
    }

    @media screen and (min-width: 581px) and (max-width: 768px) {
      & > .employee:not(.active):nth-child(n + 4) {
        display: none;
      }

      & > .employee-show-more:nth-child(-n + 4) {
        /** hide show more button if there aren't enough employees */
        display: none;
      }
    }

    @media screen and (min-width: 769px) and (max-width: 1080px) {
      & > .employee:not(.active):nth-child(n + 5) {
        display: none;
      }

      & > .employee-show-more:nth-child(-n + 5) {
        /** hide show more button if there aren't enough employees */
        display: none;
      }
    }

    @media screen and (min-width: 1081px) {
      & > .employee:not(.active):nth-child(n + 6) {
        display: none;
      }

      & > .employee-show-more:nth-child(-n + 6) {
        /** hide show more button if there aren't enough employees */
        display: none;
      }
    }
  }
}

#story {
  padding-bottom: 0;

  .lead {
    margin-bottom: var(--_section-gap);
  }

  article {
    font-size: 18px;
    line-height: 1.45;

    p {
      a {
        font-weight: bold;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-shade);
        }
      }
    }
  }
}

div:has(~ .section-reviews-saying) {
  .container-padbtm {
    padding-block: 0;

    .page-header {
      color: var(--color-brand-secondary);
    }
  }

  .link-more {
    text-transform: none;
    font-family: var(--font-body);
    font-size: 14px;
  }

  & ~ .search-results-filterbar {
    .container {
      padding-block: 0;
    }
  }
}

section.section-travelguide-links {
  & > .container-padbtm,
  & > .container-padbtm:last-of-type {
    width: 1500px;
    padding-inline: calc(50% - 750px);
    padding-bottom: 30px;

    &:only-of-type {
      padding-top: var(--_section-gap);
    }

    .row {
      margin-inline: 0;

      & > div:last-of-type {
        background-color: var(--color-brand-secondary);
        padding: 20px;
        margin-top: -20px;
        margin-bottom: 0;
        border-radius: 16px;

        .headline-section {
          color: var(--color-white);
          margin-top: 0;
          line-height: 1.5;
          margin-bottom: 12px;
        }

        ul {
          margin-bottom: 0;

          li {
            color: var(--color-white);
          }
        }
      }
    }
  }

  .headline-section {
    margin-bottom: 24px;
  }

  h3 {
    font-family: var(--font-body) !important;
    font-size: 20px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--color-brand-secondary);
  }

  .list-popular {
    color: var(--color-brand-charcoal);
    font-size: 20px;

    li {
      font-family: var(--font-body);

      a {
        color: var(--color-brand-charcoal);
        font-size: 18px;
        text-transform: none;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-shade);
        }
      }
    }
  }

  @media screen and (max-width: 1540px) {
    & > .container-padbtm,
    & > .container-padbtm:last-of-type {
      max-width: 100%;
      padding-inline: 30px;
    }
  }

  @media screen and (max-width: 992px) {
    & > .container-padbtm,
    & > .container-padbtm:last-of-type {
      .row {
        & > div:last-of-type {
          margin-top: 0;
        }
      }
    }
  }
}

.dc_custom_travelguidecollages {
  .headline-section {
    margin-top: 0 !important;
  }
}

.dc_custom_travelguideinfocards {
  p {
    color: var(--color-brand-charcoal) !important;
  }

  .card-mini {
    background-color: var(--color-brand-sandstone);
    border-radius: 16px;
    padding: 16px;
    transition: background-color 0.3s ease;

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

    h3.card-title {
      text-transform: none;
      font-family: var(--font-body);
      font-size: 18px;
      line-height: 1.2;
      font-weight: 500;
      color: var(--color-brand-secondary);
      margin: 0 0 8px;
    }

    p,
    .card-tiny p {
      color: var(--color-brand-charcoal);
    }
  }
}

.dc_custom_travelguidecards {
  & > .container-padbtm {
    width: 1500px;
    padding: var(--_section-padding-block) 30px;

    .headline-section,
    .lead {
      margin-bottom: var(--_section-gap);
    }

    @media screen and (max-width: 1540px) {
      width: 100%;
    }
  }
}

.dc_custom_relatedblog {
  .container-padbtm {
    padding-top: 0;
  }
}

.dc_custom_travelguide {
  .sec-travel-guide-article {
    h1.headline-section-huge {
      padding-left: 0;

      @media screen and (max-width: 1540px) {
        padding-left: 30px;
        font-size: 48px;
      }

      @media screen and (max-width: 1024px) {
        font-size: 36px;
      }
    }

    .article-package {
      padding-top: var(--_section-gap);

      @media screen and (max-width: 1024px) {
        padding-top: 0;
      }

      .travel-guide-article {
        display: block;

        .article-catchy-line,
        h2,
        table thead tr th {
          text-transform: none;
          font-family: var(--font-body) !important;
        }

        p,
        ul li {
          font-size: 20px;

          a {
            text-decoration: underline;
            text-underline-offset: 2px;
            font-weight: bold;
            color: var(--color-brand-secondary) !important;

            &:hover {
              text-decoration: none;
              color: var(--color-brand-secondary-400) !important;
            }
          }
        }

        .article-catchy-line {
          font-size: 24px !important;
          line-height: 1.2;
          font-weight: 500;
          color: var(--color-brand-secondary);
          margin-bottom: 12px;
        }

        h2 {
          font-size: 20px;
          color: var(--color-brand-secondary);
          font-weight: bold;
        }

        table thead tr {
          background-color: var(--color-brand-secondary);

          th {
            border-color: var(--color-brand-secondary-200);
            font-size: 16px;
          }
        }
      }
    }

    .container-links {
      @media screen and (min-width: 1280px) {
        width: 30%;
      }

      ul {
        text-transform: none;
        font-weight: normal;
        font-family: var(--font-body);
        font-size: 16px;

        li a {
          color: var(--color-brand-charcoal);

          &:hover {
            text-decoration: underline;
            color: var(--color-brand-charcoal-shade);
            border-left: 4px solid var(--color-brand-sandstone-shade);
          }

          &.active {
            color: var(--color-brand-secondary);
            border-left: 4px solid var(--color-brand-secondary);

            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  section > .row {
    &:has(> div > .headline-section) {
      & > div > .headline-section {
        margin-bottom: var(--_section-gap);
      }

      & + .container-section {
        padding-top: var(--_section-gap);
      }
    }
  }
}

.blog-feed {
  .blog-feed-row:not(.blog-feed-row-x) {
    &:before,
    &:after {
      content: none;
    }

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    justify-items: center;

    .blog-feed-item {
      width: 340px;

      & > a {
        height: auto;
      }
    }

    @media screen and (max-width: 991px) {
      padding-inline: 30px;
    }
  }

  .blog-feed-item {
    h2 {
      font-size: 20px;
      font-family: var(--font-body) !important;
      text-transform: none;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-brand-secondary);
      padding: 16px;
      background-color: var(--color-white);
    }

    .blog-feed__tags {
      color: var(--color-brand-charcoal);
      text-transform: none;
      padding: 0 20px 20px;
      margin-bottom: 0;

      a {
        color: var(--color-brand-secondary);
        text-decoration: none !important;

        &:hover {
          text-decoration: underline;
          color: var(--color-brand-secondary-400);
        }
      }
    }
  }

  .button-down {
    background-color: var(--color-brand-secondary);
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--color-brand-secondary-400);
    }
  }
}

.newsletter__signup {
  margin-bottom: 36px;

  label {
    font-size: 18px;
    text-wrap: pretty;
  }
}

.newsletter__input-container {
  display: block;

  input[type="email"] {
    background-color: var(--color-brand-sandstone);
    color: var(--color-brand-charcoal);
    border-radius: 30px !important;
    border: 1px solid var(--color-brand-sandstone-shade);
    padding: 12px;
    margin-bottom: 16px;
    text-transform: none;
    max-width: 500px;
    display: block;
    margin-inline: auto;
    font-size: 16px;

    &::placeholder {
      text-transform: none;
      color: var(--color-brand-charcoal);
      font-family: var(--font-body);
      font-weight: normal;
      font-size: 16px;
    }
  }

  input[type="submit"].newsletter__submit {
    background-color: var(--color-brand-peony);
    color: var(--color-brand-aubergine);
    font-family: var(--font-body);
    font-weight: bold;
    text-transform: none;
    line-height: 1;
    transition: background-color 0.3s ease;
    padding: 13px 22px;
    border-radius: 30px;
    font-size: var(--_min-a11y-font-size);
    height: auto;
    width: auto;

    &:hover {
      background-color: var(--color-brand-peony-tint);
      color: var(--color-brand-aubergine);
    }
  }
}

.blog__category {
  .container-section {
    padding-top: 0;
  }

  .blog__category-header {
    .blog__category-img {
      border-radius: 16px;
      background-position: center;
    }

    h2 {
      text-align: left;
    }

    .blog__author-short a {
      color: var(--color-brand-secondary);
    }

    .button-link {
      bottom: -60px;
      top: auto;
      background-color: var(--color-brand-secondary);
      color: var(--color-white);

      &:hover {
        background-color: var(--color-brand-secondary-400);
        color: var(--color-white);
      }
    }

    @media screen and (max-width: 1200px) {
      & > div {
        width: 50%;
      }

      .blog__category-img {
        min-height: 490px;
      }
    }

    @media screen and (max-width: 767px) {
      & > div {
        width: 100%;
      }

      .blog__category-img {
        margin-bottom: 24px;
        min-height: 300px;
      }
    }
  }
}

.blog__section {
  .container {
    padding-top: 0;
  }

  .blog__share-icons {
    background-color: var(--color-brand-aubergine);
    padding: 22px 20px;
    border-radius: 16px;
    width: 78px;
    margin-right: 10%;

    & > a {
      color: var(--color-brand-peony);
    }

    @media screen and (max-width: 991px) {
      display: flex;
      width: auto;
      gap: 24px;
      margin: 0 0 36px 15px;

      & > a {
        margin: 0;
      }

      .share-twitter {
        padding-top: 2px;
      }
    }

    @media screen and (max-width: 767px) {
      margin-right: 15px;
    }
  }

  ol {
    font-size: 0.9em;
  }

  .blog__article {
    h2,
    h3 {
      color: var(--color-brand-secondary);
    }

    h3 {
      font-size: 24px;
    }

    p {
      font-size: 20px;
    }

    p,
    li {
      a {
        font-weight: bold;
        text-decoration: underline;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-charcoal-tint);
        }
      }
    }

    .image-content {
      img {
        border-radius: 16px;
      }

      .image-content__caption {
        background-color: var(--color-brand-charcoal);
        color: var(--color-white);
        padding: 4px 9px 4px 16px;
        border-radius: 0 10px 0 16px;
      }
    }

    .blog__tags {
      a {
        font-family: var(--font-body);
        font-weight: bold;
        color: var(--color-brand-secondary);
        text-decoration: underline;
        text-transform: none;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-secondary-400);
        }
      }
    }

    .blog__share-buttons {
      padding-bottom: 0;
    }
  }

  @media only screen and (max-width: 992px) {
    .vspace-l-top {
      padding-top: 40px;
    }
  }
}

.blog__author {
  .container {
    padding-block: 0;
  }

  a {
    font-weight: bold;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
      color: var(--color-brand-secondary);
    }
  }
}

.blog__article {
  h3.blog__headline {
    color: var(--color-brand-secondary);
    font-size: 24px;
    font-weight: bold;
    text-transform: none;
    line-height: 1.2;
    font-family: var(--font-body);
  }

  .blog__lead:first-of-type:first-letter {
    float: left;
    color: var(--color-brand-primary-600);
    font-size: 72px;
    line-height: 56px;
    padding-right: 6px;
    font-weight: bold;
  }

  .blockquote--large {
    aspect-ratio: auto;
  }

  @media screen and (max-width: 991px) {
    h3.blog__headline {
      margin-top: 0;
    }

    .extend-outside,
    .image-content,
    .collage--inline,
    .video-content,
    .blockquote--large {
      width: 100%;
      margin-left: 0;
    }
  }
}

.vspace-l-top.vspace-l-bottom:has(.blog-related) {
  padding-block: 0;
}

.blog-related {
  .card__horizontal {
    border-radius: 16px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .headline--card {
        color: var(--color-brand-primary-700);
      }
    }
  }

  .card-img {
    border-radius: 16px 0 0 16px;
  }

  @media (max-width: 480px) {
    .card__horizontal .card-img {
      border-radius: 16px 16px 0 0;
    }
  }

  .subheadline--card {
    font-family: var(--font-body);
    color: var(--color-brand-charcoal-tint) !important;
    margin-bottom: 4px;
    font-weight: normal;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .headline--card {
    font-family: var(--font-body) !important;
    font-size: 24px;
    color: var(--color-brand-charcoal-shade);
    font-weight: bold;
    transition: color 0.3s ease;
    text-transform: none;
  }

  .card-price,
  .card-currency {
    font-family: var(--font-body);
    color: var(--color-brand-marigold);
  }

  .card-price {
    margin-bottom: 8px;
    font-weight: bold;
  }

  .currency-switcher {
    ul {
      background-color: var(--color-white);
      border-radius: 4px;
      width: 110px;
      padding: 8px 12px;

      li {
        color: var(--color-brand-charcoal);
        padding: 4px 0;

        &:hover {
          color: var(--color-brand-charcoal-shade);
        }
      }
    }
  }

  @media screen and (max-width: 1240px) {
    .card__horizontal-title,
    .card__horizontal-price {
      display: block;
    }

    .card__horizontal-title {
      padding-bottom: 0;
    }

    .card__horizontal-price {
      padding-block: 10px;
      display: inline-flex;
      align-items: flex-end;
      gap: 10px;
    }

    .card__horizontal-price .card-price {
      font-size: 24px;
    }
  }
}

.container:has(.blog__author-row) {
  width: 1200px;
  padding-block: 0;

  .blog__author-img {
    text-align: right;

    img {
      width: 345px;
      height: 345px;
    }
  }

  h1 {
    margin-top: 40px;
  }
}

.section-attractions {
  .travel-guide-article {
    .button-link {
      background-color: var(--color-brand-secondary);
      color: var(--color-white);
      margin-top: 30px;

      &:hover {
        background-color: var(--color-brand-secondary-400);
        color: var(--color-white);
      }
    }

    p + .button-link {
      margin-top: 0;
    }
  }
}

.card-result {
  border-radius: 16px;

  h3 {
    margin-top: 0;
    font-family: var(--font-body) !important;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-brand-secondary);
    text-transform: none;
  }

  p {
    font-size: 16px;
    color: var(--color-brand-charcoal);

    a {
      text-decoration: underline;
      text-underline-offset: 2px;
      color: var(--color-brand-charcoal-shade);

      &:hover {
        text-decoration: none;
        color: var(--color-brand-charcoal-tint);
      }
    }
  }
}

#certifications {
  padding-bottom: 0;

  .container,
  &:is(div) .headline-section {
    margin-bottom: 0 !important;
  }

  .lead {
    margin-bottom: 0;
  }

  h4 {
    color: var(--color-brand-secondary);
  }

  .row {
    &:has(> div > img) {
      @media only screen and (max-width: 992px) {
        display: flex;

        & > * {
          flex: 1;
          width: 100%;
        }
      }
    }

    div:has(.certificate-text) {
      &:after {
        content: "";
        clear: both;
        display: block;
      }

      &.row {
        margin-inline: 0;
      }
    }
  }

  article {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.45;
  }
}

.certificate-text {
  font-family: var(--font-body);
  color: var(--color-brand-secondary);
  font-size: 1em;
  padding: 8px 20px 8px 0;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  width: 100%;
  align-items: center;

  .round-icon {
    float: none;
    margin: 0;
    background-color: var(--color-brand-secondary);
  }
}

#reviews {
  section {
    margin-bottom: 0 !important;
  }

  p:not(.col-package-headline p):not(.cr-text p):not(.lead) {
    color: var(--color-brand-charcoal) !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    text-transform: none;
    margin-bottom: 24px;

    &.review-link a {
      color: var(--color-brand-secondary) !important;
    }

    a {
      text-decoration: underline;
      text-underline-offset: 2px;
      color: var(--color-brand-charcoal-shade);
      font-weight: bold;

      &:hover {
        text-decoration: none;
        color: var(--color-brand-charcoal-tint);
      }
    }
  }

  .col-package-headline {
    p {
      font-family: var(--font-serif);
      font-size: 24px;
    }
  }

  &:not(.sec-color-green) .button-link {
    background-color: var(--color-brand-secondary);
    color: var(--color-white);

    &:hover {
      background-color: var(--color-brand-secondary-400);
      color: var(--color-white);
    }
  }
}

.terms {
  section {
    padding-top: var(--_section-padding-block);

    .headline-section {
      margin-bottom: var(--_section-gap);
    }

    .container {
      padding-top: var(--_section-gap);
    }
  }
}

.dc_webcomponents_html {
  .container {
    & > .row:first-child {
      & > div:first-child {
        & > .page-header:first-child {
          margin-top: 0;
        }
      }
    }
  }

  .page-header {
    font-size: 3em;

    & ~ div {
      a {
        color: var(--color-brand-secondary) !important;
        font-weight: bold;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
          color: var(--color-brand-secondary-400) !important;
        }
      }
    }
  }

  .container {
    &:has(.section-help) {
      padding-bottom: 0;
    }

    .lead {
      margin-bottom: var(--_section-gap);
    }
  }

  .section-help {
    display: grid;
    align-items: end;
    grid-template-columns: 2fr 1fr;
    gap: var(--_section-gap);

    @media screen and (max-width: 1580px) {
      grid-template-columns: 3fr 2fr;
    }

    @media screen and (max-width: 1280px) {
      grid-template-columns: 1fr 1fr;
    }

    @media screen and (max-width: 1024px) {
      grid-template-columns: 1fr;

      & > div:has(> img) {
        text-align: center;

        img {
          max-height: 400px;
          width: auto;
          max-width: 100%;
        }
      }
    }

    & > * {
      width: 100%;
      float: none;
    }
  }
}

.lg-sub-html p {
    font-family: var(--font-body);
    font-size: 1.5rem !important;
    color: var(--color-white) !important;
}

.dc_custom_tours {
  section {
    &:has(> .headline-section) {
      padding: var(--_section-padding-block) 0;

      .headline-section {
        margin-bottom: var(--_section-gap);
      }
    }
  }
}

/* Send to inbox modal window styling */
#tour-email-modal .modal-dialog {
  max-width: 700px;
  margin: 30px auto !important;
}

/* Responsive breakpoints */
@media (max-width: 991px) {
  #tour-email-modal .modal-dialog {
    max-width: 70%;
    margin: 30px 15vw !important;
  }
}

@media (max-width: 767px) {
  #tour-email-modal .modal-dialog {
    max-width: 90%;
    max-height: 40vh;
    margin: 30px 5vw !important;
  }
}

@media (max-width: 480px) {
  #tour-email-modal .modal-dialog {
    max-width: 95%;
    margin: 30px !important;
  }
}

.cr-title h3 {
  font-size: 18px;
}

.iti__selected-flag {
  border-radius: 16px 0 0 16px;
  height: calc(100% - 16px);
}

.iti__country-list {
  max-width: 80vw;
}

.iti--allow-dropdown input,
.iti--allow-dropdown input[type="tel"],
.iti--allow-dropdown input[type="text"],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type="tel"],
.iti--separate-dial-code input[type="text"] {
  padding-left: 52px !important;
  margin-bottom: 16px !important;
}

/** HIDING LABEL ELEMENT ON DATE PICKER FOR HOTELS */
.visually-hidden-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

  .search-simple input[type="text"] {
        font-size: 18px !important;
        color: var(--color-brand-charcoal-shade);
        text-transform: none;
        border-radius: 16px;
        font-weight: normal;
        font-family: var(--font-body);
  }

.suggestions #results > p {
        font-size: 22px;
        color: var(--color-brand-dark);
        text-transform: none;
        padding: 10px;
    }

.search-simple .guide-search .suggestions a.button-link#all-results {
  background-color: var(--color-brand-secondary);
  color: var(--color-white);
  font-size: 16px;
  text-transform: none;
  padding: 8px 16px;
  transition: background-color 0.3s ease;
}

.search-simple .guide-search .suggestions a.button-link#all-results:hover {
  background-color: var(--color-brand-secondary-400);
  color: var(--color-white);
}

/** #CARDBACK: Reduced whole-card link height, to make map link clickable */
.card-tour .card-back .card-main-link {
    height: calc(10% - 150px)
}

.nv-border {
  height: 20px;
  background-color: var(--color-brand-primary);
  mask-image: url(https://www.nordicvisitor.com/files/nv-border-186.svg);
  mask-size: 93px;

  &.secondary {
    background-color: var(--color-brand-secondary);
  }

  &.aubergine {
    background-color: var(--color-brand-aubergine);
  }

  &.citrus {
    background-color: var(--color-brand-citrus);
  }

  &.sea-blue {
    background-color: var(--color-brand-sea-blue);
  }

  &.marigold {
    background-color: var(--color-brand-marigold);
  }

  &.peony {
    background-color: var(--color-brand-peony);
  }

  &.granite {
    background-color: var(--color-brand-granite);
  }

  &.charcoal {
    background-color: var(--color-brand-charcoal);
  }

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

 /** #FontAwesome SVG icon styling */
.icon {
     width: 1.4em;
     height: 1.4em;
     display: inline-block;
     vertical-align: -0.125em;
     fill: currentColor;
   }

.icon--gold { color: var(--color-brand-marigold-tint); }
.icon--teal { color: var(--color-brand-primary); }
.icon--green { color: var(--color-brand-secondary); }
.icon--pink { color: var(--color-brand-peony); }
.icon--yellow { color: var(--color-brand-citrus); }

.info-list dt {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 0.15em;
}

.info-list dd {
    margin-left: calc(1.4em + 1em); /* icon width + gap */
    margin-bottom: 1.4em;
}

#modalActivityBody .container-section.align-left {
  padding-block: 10px;
}

.modal-activities-detail img {
    width: 100%;
    border-radius: 16px;
}

/* Remove outline only for mouse/touch clicks, keep for keyboard nav */
a:focus:not(:focus-visible) {
  outline: none;
}
/* Makes View button visible on attraction cards */
 .card-tiny--square .card-view-link:last-of-type {
            padding-left: 92px !important;
        }

 /** #Riddle Quiz Embed  */
.section-riddle-content {
    background-color: var(--color-brand-sandstone) !important;
    padding: 60px 0;
  }

  .riddle-article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .riddle-row {
    display: flex;
    align-items: center;
    gap: 110px;
  }

    .riddle-heading {
      font-size: 48px;
      color: var(--color-brand-secondary);
      margin-bottom: 20px;
    }

  .riddle-col-text {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .riddle-col-embed {
    flex: 0 0 calc(45% - 48px);
    max-width: calc(45% - 48px);
    min-height: 630px;
  }

 @media (max-width: 1024px) {
    .riddle-row {
      gap: 50px;
    }
  }

  @media (max-width: 768px) {
    .riddle-row {
      flex-direction: column;
      gap: 32px;
    }

    .riddle-col-text,
    .riddle-col-embed {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .riddle-heading {
      font-size: 3rem;
    }
  }

.blockquote--large::before {
        content: '\201C';
    }

/*Included modals car grid */
.tim-cars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.tim-car-card { border: 1px solid var(--color-brand-sandstone-shade); border-radius: 8px; overflow: hidden; background-color: var(--color-neutral-100); }
.tim-car-card img { width: 100%; height: 180px; object-fit: contain; border-radius: 0px !important; background-color: var(--color-white); margin-bottom: 0px; display: block; }
.tim-car-card-body { padding: 10px 12px; }
.tim-car-name { font-weight: 600; margin: 0 0 6px; }
.tim-car-summary { font-size: 14px; color: var(--color-neutral-900); margin: 0; white-space: pre-line; }

@media (max-width: 767px) {
    .tim-cars-grid{ grid-template-columns: 1fr; }
}
/*End of Included modals car grid */

/* GROUP DEPARTURES OVERVIEW LIST */
.departures-list {
    .departure-book > a {
        text-transform: none;
        font-size: var(--_min-a11y-font-size);
        background-color: var(--color-brand-primary-400);
        color: var(--color-brand-secondary);
        font-weight: bold;
        border-radius: 30px;
        padding: 10px;

        &:hover {
            background-color: var(--color-brand-primary);
            text-decoration: none;
        }
    }

    .departure-header > span {
        color: var(--color-brand-charcoal-shade);

        & + span {
            color: var(--color-brand-charcoal-tint);
        }
    }

    .soldout {
        .departure-spaces > .qty,
        .departure-date > span {
            color: var(--color-neutral-700);
        }
    }
}
/* END OF GROUP DEPARTURES OVERVIEW LIST */

/* EMBEDDED VIMEO SECTION */
/* MediaSplit - button override on green background */
.sec-color-green.section-media-split--green .button-link {
    background-color: var(--color-brand-primary-400);
    color: var(--color-brand-primary-800);

    &:hover {
        background-color: var(--color-brand-primary);
    }
}

.section-vimeo-content .vimeo-article {
  max-width: 1280px;
  margin: 0 auto;
  padding-block: var(--_section-padding-block);
  padding-inline: var(--_section-padding-inline);
}

.section-vimeo-content .vimeo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.section-vimeo-content .vimeo-col-video {
  width: 100%;
  padding-right: 0;
  padding-bottom: 2rem;
}

.section-vimeo-content .vimeo-col-text {
  width: 100%;
  padding-left: 0;
  padding-top: 2rem;
}

.section-vimeo-content .vimeo-embed {
  border-radius: 1em;
  overflow: hidden;
}

.section-vimeo-content .vimeo-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1em;
}

.section-vimeo-content .vimeo-heading {
  font-size: 2rem;
  margin-top: 0;
}

/* sm: 768px+ */
@media (min-width: 768px) {
  .section-vimeo-content .vimeo-heading {
    font-size: 2.25rem;
  }
}

/* md: 992px+ — side by side */
@media (min-width: 992px) {
  .section-vimeo-content .vimeo-col-video {
    width: 50%;
    padding-right: 2rem;
    padding-bottom: 0;
  }

  .section-vimeo-content .vimeo-col-text {
    width: 50%;
    padding-left: 2rem;
    padding-top: 0;
  }

  .section-vimeo-content .vimeo-heading {
    font-size: 2.5rem;
  }

  /* Reversed: text left, video right */
  .section-vimeo-content--reversed .vimeo-col-video {
    order: 2;
    padding-right: 0;
    padding-left: 2rem;
  }

  .section-vimeo-content--reversed .vimeo-col-text {
    order: 1;
    padding-left: 0;
    padding-right: 2rem;
  }
}

/* lg: 1200px+ */
@media (min-width: 1200px) {
  .section-vimeo-content .vimeo-col-video {
    padding-right: 3rem;
  }

  .section-vimeo-content .vimeo-col-text {
    padding-left: 3rem;
  }

  .section-vimeo-content--reversed .vimeo-col-video {
    padding-left: 3rem;
    padding-right: 0;
  }

  .section-vimeo-content--reversed .vimeo-col-text {
    padding-right: 3rem;
    padding-left: 0;
  }

  .section-vimeo-content .vimeo-heading {
    font-size: 3rem;
  }
}
/* END OF EMBEDDED VIMEO SECTION */

@media (max-width: 768px) {
    .sp-small .sp-icon .icon--xxl {
        width: 2em;
        height: 2em;
    }
}

.tour .picker .picker__frame:before {
    display: block;
    content: 'Select your arrival date';
    color: #ffffff;
    background: var(--color-brand-secondary-400);
    padding: 10px 20px;
    margin: -40px 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 100%;
}

/* pickadate picker*/
.picker .picker__table tbody tr td {
    border-bottom: 0;
    font-size: 1em;
    padding: 0;
    line-height: 1em;
    border: 1px solid #f7f7f7 !important;
}

.picker .picker__day {
    display: block;
    height: 100% !important;
    width: 100% !important;
    margin: 0;
    line-height: 30px;
}

.picker .picker__day--selected {
    border-radius: 0px;
    background: var(--color-brand-dark);
}

.picker .picker__day--outfocus {
    display: none;
}

.picker .picker__day--disabled {
    color: #b4b3b3;
    background: #f9f9f9;
}

    .picker .picker__day--disabled:after {
        display: none;
    }

.hero-img-11 {
    background-image: url(https://www.nordicvisitor.com/resources/2015/stylesheets/images/hero11.jpg)
}

@media (width<=480px) {
    .hero-img-11 {
        background-image: url(https://www.nordicvisitor.com/resources/2015/stylesheets/images/mobile/hero11.jpg)
    }
}

/* Breadcrumb overlay on hero banner */

.breadcrumb-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.20) 60%, transparent 100%);
}

.breadcrumb-hero-overlay .breadcrumb {
    margin: 0;
    padding: 10px 16px;
    background: transparent;
    border-radius: 0;
}

/* All text and separators white */
.breadcrumb-hero-overlay .breadcrumb > li,
.breadcrumb-hero-overlay .breadcrumb > li + li::before {
    color: #ffffff;
}

/* Links white with underline on hover */
.breadcrumb-hero-overlay .breadcrumb > li a {
    color: #ffffff;
    text-decoration: none;
}

.breadcrumb-hero-overlay .breadcrumb > li a:hover,
.breadcrumb-hero-overlay .breadcrumb > li a:focus {
    text-decoration: underline;
}

/* Active (current page) — slightly dimmed white, no brand colour on images */
.breadcrumb-hero-overlay .breadcrumb > li.active span {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

/* Home icon */
.breadcrumb-hero-overlay .breadcrumb .glyphicon-home {
    color: #ffffff;
}
/* END OF Breadcrumb overlay on hero banner */

/* HERO-PROMO-BANNER — mobile fix for .hero-subpage / dc_custom_destinationhero */

@media only screen and (min-width: 481px) and (max-width: 700px) {
  .dc_custom_destinationhero .hero-promo-ticket,
  .hero-subpage .hero-promo-ticket {
    top: 16px;
  }
}

@media only screen and (max-width: 480px) {
  /* Ensure the section is the positioning context (it already is via the
     existing hero styles, but be explicit for the destination hero). */
  .dc_custom_destinationhero .hero.hero-subpage,
  .hero.hero-subpage:has(.hero-promo-ticket) {
    position: relative;
  }

  .dc_custom_destinationhero .hero-promo-ticket,
  .hero-subpage .hero-promo-ticket {
    /* Keep absolute so it doesn't push hero-text down */
    position: absolute;
    /* Sit at the very top of the section, inside the 60px padding-top */
    top: 10px;
    right: 16px;
    /* Shrink it further so it fits in the narrow top strip */
    --_border-radius: 10px;
    --_bevel-size: 6px;
  }

  .dc_custom_destinationhero .hero-promo-ticket .hero-promo-ticket__top,
  .hero-subpage .hero-promo-ticket .hero-promo-ticket__top {
    font-size: 16px;
    line-height: 1.2;
    width: auto;
    padding: var(--_bevel-size) 10px;
    padding-right: calc(var(--_bevel-size) / 2);
  }

  .dc_custom_destinationhero .hero-promo-ticket .hero-promo-ticket__bottom,
  .hero-subpage .hero-promo-ticket .hero-promo-ticket__bottom {
    padding: 6px 10px 4px 8px;
    padding-left: calc(var(--_bevel-size) / 2);
    font-size: 16px;
    line-height: 1.2;
  }

  .dc_custom_destinationhero .hero-promo-ticket .hero-promo-ticket__bottom__content,
  .hero-subpage .hero-promo-ticket .hero-promo-ticket__bottom__content {
    height: 28px;
  }

  .dc_custom_destinationhero .hero-promo-ticket .hero-promo-ticket__bottom__num,
  .hero-subpage .hero-promo-ticket .hero-promo-ticket__bottom__num {
    font-size: 22px;
    line-height: 24px;
  }

  .dc_custom_destinationhero .hero-promo-ticket .hero-promo-ticket__bottom__perc,
  .hero-subpage .hero-promo-ticket .hero-promo-ticket__bottom__perc {
    font-size: 16px;
    line-height: 16px;
    margin-right: 3px;
  }

  /* Push hero-text down enough so the ticket strip (≈44px tall) + top offset
     (10px) + a comfortable gap (8px) doesn't overlap the H1. */
  .dc_custom_destinationhero .hero.hero-subpage .hero-text,
  .hero.hero-subpage:has(.hero-promo-ticket) .hero-text {
    padding-top: 50px;
  }
}

/**
 * hero-badge
 */

.hero-badge {
  position: absolute;
  bottom: 60px;
  right: calc(50vw - 760px);
  z-index: 10;
  line-height: 0; /* collapse any inline whitespace around the img */
}

.hero-badge__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 110px;
  /* Subtle drop-shadow so light badges read on bright backgrounds */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

  .hero-badge {
    @media screen and (max-width: 1580px) {
      right: var(--_hero-padding-inline);
    }
  }

/* ── 481 px – 700 px ──────────────────────────────────────────────────────────
   Ticket is horizontal at this range; badge sits below it if both are present.
   Reduce size slightly to keep things tidy on narrower viewports.
*/
@media only screen and (min-width: 481px) and (max-width: 700px) {
  .hero-badge {
    bottom: 60px;
    right: var(--_hero-padding-inline);
  }

  .hero-badge__img {
    max-width: 120px;
    max-height: 80px;
  }
}

/* ── ≤ 480 px ─────────────────────────────────────────────────────────────────
   hero-subpage is height:auto here. Badge anchors to the bottom-right of the
   section; hero-text gets extra bottom padding so the badge doesn't overlap
   the last button (mirrors the padding-top fix done for the promo ticket).
*/
@media only screen and (max-width: 480px) {
  .hero-badge {
    bottom: 24px;
    right: 24px;
  }

  .hero-badge__img {
    max-width: 110px;
    max-height: 58px;
  }

  /* Ensure the button row doesn't slide under the badge.
     110px badge + 16px bottom offset + 8px gap = ~134px; round up to 140px. */
  .dc_custom_destinationhero .hero.hero-subpage .hero-text,
  .hero.hero-subpage:has(.hero-badge) .hero-text {
    padding-bottom: 140px;
  }
}

.hero-subpage .hero-text h1 .highlight {
  color: var(--color-brand-primary);
}
/* END OF HERO PROMO BANNER */

/* MEDIA CENTRE STYLES */

/* ============================================================
   MEDIA CENTRE - SHARED UTILITIES
   ============================================================ */

/* Shared section shell: full-width card with rounded corners */
.contact-section,
.terms-section,
.assets-section,
.hero-section,
.whoweare-section {
  border-radius: 32px;
  overflow: hidden;
  max-width: 1200px;
  width: 95%;
  margin-top: 24px;
}

/* hero-section overrides: shadow needs to bleed outside */
.hero-section { overflow: visible; }

/* contact-section specific overrides */
.contact-section {
  background-color: var(--color-brand-secondary);
  margin-top: 40px;
}

/* terms-section specific overrides */
.terms-section {
  background-color: var(--color-neutral-200);
}

/* Shared container padding */
.contact-section .container,
.terms-section .container,
.assets-section .container,
.hero-section .container,
.whoweare-section .container,
.press-section .container {
  padding: 56px 60px;
}

/* Shared serif headline pattern (terms / assets / whoweare / press) */
.terms-headline,
.assets-headline,
.whoweare-headline,
.press-headline {
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.1;
  color: var(--color-brand-secondary);
  margin: 0;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */

.contact-section .media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Both columns share the same flex column layout */
.col-left,
.col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* EYEBROW */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-neutral-600);
}

.eyebrow--dark { color: var(--color-neutral-850); }

.eyebrow-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* HEADLINE */
.headline {
  font-weight: 300;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.05;
  color: #ffffff;
  word-break: break-word;
  margin-top: 10px;
}

.headline .highlight {
  color: var(--color-brand-primary);
}

/* BODY TEXT */
.body-text {
  color: var(--color-brand-granite-tint);
  max-width: 420px;
}

/* MEDIA CARDS */
.media-card {
  background-color: var(--color-brand-secondary-600);
  border: 1px solid var(--color-brand-secondary-400);
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.media-card-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-granite-tint);
}

/* Shared serif link style used by email + generic link */
.media-card-email,
.media-card-link {
  font-family: var(--font-serif);
  font-weight: 300;
  color: #ffffff;
  text-decoration: none;
}

.media-card-email {
  font-size: clamp(16px, 4vw, 26px);
  word-break: break-all;
}

.media-card-link {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.media-card-email:hover,
.media-card-link:hover { color: var(--color-brand-primary); }

.card-meta {
  font-size: 13px;
  color: var(--color-brand-granite-shade);
}

/* ============================================================
   TERMS SECTION
   ============================================================ */

.terms-section .terms-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}

.terms-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.terms-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.terms-headline { word-break: break-word; }

.terms-lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-brand-secondary);
  opacity: 0.75;
}

.terms-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.terms-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Both block title and body share font-size + brand-secondary color */
.terms-block-title,
.terms-block-body {
  font-size: 16px;
  color: var(--color-brand-secondary);
}

.terms-block-title { font-weight: 600; }

.terms-block-body {
  line-height: 1.7;
  margin-bottom: 5px;
}

.terms-block-body a {
  color: var(--color-brand-secondary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-block-body a:hover { opacity: 0.7; }

/* ============================================================
   ASSETS SECTION
   ============================================================ */

.assets-top-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.assets-intro {
  max-width: 560px;
  margin: 0;
}

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

.asset-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.asset-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-brand-secondary);
  opacity: 0.15;
}

.asset-card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.asset-card-title {
  font-size: 36px;
  line-height: 1;
  color: var(--color-brand-secondary);
  margin: 0;
}

.asset-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 18px;
  background-color: transparent;
  border: 1px solid var(--color-brand-secondary);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-secondary);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  align-self: flex-start;
}

.asset-card-btn:hover {
  background-color: var(--color-brand-secondary);
  color: #ffffff;
}

/* ASSET CARD THEMES */

/* Fact Sheet — sandstone */
.asset-card--sandstone {
  background-color: var(--color-brand-sandstone);
  border-color: var(--color-brand-sandstone-shade);
}
.asset-card--sandstone .asset-card-image {
  background-color: var(--color-brand-sandstone-shade);
  opacity: 1;
}

/* Image Library — forest (dark bg, light text) */
.asset-card--forest {
  background-color: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary-600);
}
.asset-card--forest .asset-card-image {
  background-color: var(--color-brand-secondary-600);
  opacity: 1;
}
/* desc color set first, then title overrides to sandstone */
.asset-card--forest .asset-card-title,
.asset-card--forest .asset-card-desc {
  color: var(--color-brand-granite-tint);
}
.asset-card--forest .asset-card-title { color: var(--color-brand-sandstone); }
.asset-card--forest .asset-card-btn {
  border-color: var(--color-brand-secondary-300);
  color: var(--color-brand-sandstone);
}
.asset-card--forest .asset-card-btn:hover {
  background-color: #ffffff;
  color: var(--color-brand-secondary);
}

/* Press Quotes — aubergine */
.asset-card--aubergine {
  background-color: var(--color-brand-aubergine);
  border-color: var(--color-brand-aubergine-shade);
}
.asset-card--aubergine .asset-card-image {
  background-color: var(--color-brand-aubergine-tint);
  opacity: 1;
}
.asset-card--aubergine .asset-card-title,
.asset-card--aubergine .asset-card-desc {
  color: var(--color-brand-sandstone-shade);
}
.asset-card--aubergine .asset-card-title { color: var(--color-brand-sandstone); }
.asset-card--aubergine .asset-card-btn {
  border-color: var(--color-brand-aubergine-tint);
  color: var(--color-brand-granite-tint);
}
.asset-card--aubergine .asset-card-btn:hover {
  background-color: var(--color-brand-peony);
  border-color: var(--color-brand-peony);
  color: var(--color-brand-aubergine-shade);
}

/* Brand Pack — teal */
.asset-card--teal {
  background-color: var(--color-brand-primary-400);
  border-color: var(--color-brand-primary-500);
}
.asset-card--teal .asset-card-image {
  background-color: var(--color-brand-primary-200);
  opacity: 1;
}
.asset-card--teal .asset-card-title,
.asset-card--teal .asset-card-desc {
  color: var(--color-brand-primary-800);
}
.asset-card--teal .asset-card-btn {
  border-color: var(--color-brand-primary-700);
  color: var(--color-brand-primary-800);
}
.asset-card--teal .asset-card-btn:hover {
  background-color: var(--color-brand-primary-800);
  border-color: var(--color-brand-primary-800);
  color: #ffffff;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-content .lead {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--color-brand-secondary);
  margin: 0;
}

.hero-media {
  position: relative;
  padding: 0 16px 16px 0;
}

.hero-image-wrap {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow:
    16px 16px 0 0 var(--color-brand-marigold),
    0 8px 40px 0 rgba(0, 0, 0, 0.12);
}

.hero-media-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* ============================================================
   WHO WE ARE SECTION
   ============================================================ */

.whoweare-intro-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.whoweare-intro-text {
  color: var(--color-brand-secondary);
  margin-bottom: 0;
}

.whoweare-top-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.whoweare-headline { word-break: break-word; }

.whoweare-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-brand-secondary);
  max-width: 680px;
  margin: 0;
}

/* BENTO GRID — 12-column base */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}

.bento-cell {
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

/* Column span helpers */
.bento-col-1  { grid-column: span 1; }
.bento-col-2  { grid-column: span 2; }
.bento-col-3  { grid-column: span 3; }
.bento-col-4  { grid-column: span 4; }
.bento-col-5  { grid-column: span 5; }
.bento-col-6  { grid-column: span 6; }
.bento-col-7  { grid-column: span 7; }
.bento-col-8  { grid-column: span 8; }
.bento-col-9  { grid-column: span 9; }
.bento-col-10 { grid-column: span 10; }
.bento-col-11 { grid-column: span 11; }
.bento-col-12 { grid-column: span 12; }

.bento-row-2 { grid-row: span 2; }

.bento-office-list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 28px;
}

/* BENTO CELL THEMES */
.bento-cell--forest     { background-color: var(--color-brand-secondary); }
.bento-cell--forest-mid { background-color: var(--color-brand-secondary-600); }
.bento-cell--teal       { background-color: var(--color-brand-primary-500); }
.bento-cell--teal-light { background-color: var(--color-brand-primary-100); }
.bento-cell--teal-dark  { background-color: var(--color-brand-primary-800); }

.bento-cell--sandstone {
  background-color: var(--color-brand-sandstone);
  border: 1px solid var(--color-brand-sandstone-shade);
}

.bento-cell--aubergine { background-color: var(--color-brand-aubergine); }

.bento-cell--neutral {
  background-color: var(--color-neutral-150);
  border: 1px solid var(--color-neutral-300);
}

/* BENTO EYEBROW */
.bento-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.bento-award-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.bento-eyebrow--light { color: var(--color-brand-granite-tint); }
.bento-eyebrow--dark  { color: var(--color-brand-secondary-400); }
.bento-eyebrow--teal  { color: var(--color-brand-primary-800); }
.bento-eyebrow--peony { color: var(--color-brand-peony); }

/* BENTO STAT */
.bento-stat {
  font-family: var(--font-serif) !important;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

.bento-stat--xl { font-size: clamp(78px, 7vw, 96px); }
.bento-stat--lg { font-size: clamp(68px, 5vw, 72px); }

.bento-stat--light    { color: #ffffff; }
.bento-stat--teal     { color: var(--color-brand-primary-800); }
.bento-stat--sandstone{ color: var(--color-brand-secondary); }
.bento-stat--peony    { color: var(--color-brand-peony); }

/* BENTO TITLE */
.bento-title {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
}

.bento-title--lg { font-size: clamp(28px, 3.5vw, 42px); }
.bento-title--md { font-size: clamp(20px, 2.5vw, 28px); }
.bento-title--sm { font-size: clamp(18px, 2.5vw, 22px); }

.bento-title--light    { color: #ffffff; }
.bento-title--sandstone{ color: var(--color-brand-secondary); }
.bento-title--teal     { color: var(--color-brand-primary-800); }

/* BENTO BODY */
.bento-body {
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.bento-body--light { color: var(--color-brand-granite-tint); }
.bento-body--muted { color: var(--color-brand-secondary); }

.bento-body--teal {
  color: var(--color-brand-primary-800);
  opacity: 0.85;
}

/* BENTO QUOTE */
.bento-quote {
  font-family: var(--font-serif) !important;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
  color: var(--color-brand-primary-300);
  border-left: 2px solid var(--color-brand-primary);
  padding-left: 16px;
  margin: 8px 0 0;
}

/* BENTO TAGS */
.bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.bento-tag {
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.bento-tag--peony {
  background-color: var(--color-brand-aubergine-tint);
  color: var(--color-brand-peony-tint);
}

.bento-tag--forest {
  background-color: var(--color-brand-secondary-600);
  color: var(--color-brand-granite-tint);
  border: 1px solid var(--color-brand-secondary-400);
}

/* BENTO AWARD LIST */
.bento-award-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bento-award-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--color-brand-secondary);
  line-height: 1.4;
}

.bento-award-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--color-brand-primary);
  flex-shrink: 0;
  margin-top: 5px;
}

/* BENTO OFFICE LIST */
.bento-office-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  gap: 8px;
}

.bento-office-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-brand-granite-tint);
  border-radius: 30px;
  border: 1px solid var(--color-brand-primary);
  padding: 4px 16px 4px 12px;
}

.bento-office-list li i {
  font-size: 14px;
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

/* BENTO TCF ACCENT */
.bento-tcf-accent {
  font-size: 13px;
  color: var(--color-brand-primary-800);
  opacity: 0.8;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-brand-primary-600);
}

/* ============================================================
   PRESS RELEASES SECTION
   ============================================================ */

.press-section {
  max-width: 1200px;
  width: 95%;
  margin-top: 24px;
}

.press-top-row { margin-bottom: 18px; }

.press-headline { word-break: break-word; }

/* Shared pill-button pattern (press + asset) */
.press-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--color-brand-secondary);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
}

.press-view-all:hover {
  background-color: var(--color-brand-secondary);
  color: #ffffff;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* PRESS CARD */
.press-card {
  background-color: #fff8ee66;
  border: 1px solid var(--color-brand-sandstone-shade);
  border-radius: 20px;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.2s;
}

.press-card:hover { border-color: var(--color-brand-secondary-300); }

.press-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.press-card-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-brand-granite-shade);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* PRESS BADGE */
.press-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid;
  white-space: nowrap;
}

.press-badge--announcement {
  color: var(--color-brand-primary-700);
  border-color: var(--color-brand-primary-400);
  background-color: #eef6f2;
}

.press-badge--press-release {
  color: var(--color-brand-secondary-400);
  border-color: var(--color-brand-secondary-300);
  background-color: #ffffff;
}

.press-badge--coverage {
  color: var(--color-brand-aubergine-tint);
  border-color: var(--color-brand-aubergine-tint);
  background-color: #ffd0f278;
}

/* PRESS CARD CONTENT */
.press-card-title {
  font-family: var(--font-serif) !important;
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  color: var(--color-brand-secondary);
  margin: 0 0 10px;
}

.press-card-summary {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-brand-charcoal-tint);
  margin: 0;
  flex: 1;
}

.press-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-neutral-300);
  justify-content: flex-end;
}

/* PRESS CARD BUTTONS */
.press-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.press-card-btn--outline {
  border: 1px solid var(--color-brand-secondary);
  color: var(--color-brand-secondary);
  background-color: transparent;
}

.press-card-btn--outline:hover { border-color: var(--color-brand-secondary-400); }

.press-card-btn--solid {
  background-color: var(--color-brand-secondary);
  border: 1px solid var(--color-brand-secondary);
  color: #ffffff;
}

.press-card-btn--solid:hover {
  background-color: var(--color-brand-secondary-400);
  border-color: var(--color-brand-secondary-400);
  color: #ffffff;
}

.press-card-btn .icon-fa {
  width: 13px;
  height: 13px;
  vertical-align: -1px;
  fill: currentColor;
}

/* AS SEEN ON — logo strip */
.press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.press-logo-wrap {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.press-logo {
  max-width: 200px;
  max-height: 50px;
  width: 100%;
  height: 100%;
  opacity: 0.65;
  transition: opacity 0.2s;
  filter: brightness(0) saturate(100%);
}

.press-logo-wrap:hover .press-logo {
  opacity: 1;
  filter: brightness(1) saturate(100%);
}

#as-seen-on .press-headline { text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1150px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 970px) {
  /* Contact */
  .media-card-email { font-size: clamp(14px, 2.5vw, 20px); }
  .media-card-link  { font-size: clamp(14px, 2.5vw, 20px); }

  /* Terms */
  .terms-section .terms-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .terms-left { position: static; }

  /* Assets */
  .assets-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-media { order: -1; }
  .hero-section .container { padding: 40px 32px; }

  /* Bento */
  .bento-grid { grid-template-columns: repeat(6, 1fr); }

  .bento-col-1  { grid-column: span 1; }
  .bento-col-2  { grid-column: span 1; }
  .bento-col-3  { grid-column: span 3; }
  .bento-col-4  { grid-column: span 2; }
  .bento-col-5  { grid-column: span 3; }
  .bento-col-6  { grid-column: span 3; }
  .bento-col-7  { grid-column: span 3; }
  .bento-col-8  { grid-column: span 4; }
  .bento-col-9  { grid-column: span 4; }
  .bento-col-10 { grid-column: span 5; }
  .bento-col-11 { grid-column: span 6; }
  .bento-col-12 { grid-column: span 6; }

  .bento-row-2 { grid-row: span 1; }
  .bento-cell  { padding: 24px; }
}

@media (max-width: 900px) {
  /* Hero (own breakpoint) */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-media { order: -1; }
  .hero-section .container { padding: 40px 32px; }
}

@media (max-width: 825px) {
  /* Shared container padding reset */
  .contact-section .container,
  .terms-section .container,
  .assets-section .container,
  .whoweare-section .container,
  .press-section .container {
    padding: 32px 24px;
  }

  /* Contact */
  .contact-section .media-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .body-text   { max-width: 100%; }
  .media-card  { padding: 20px; }
  .media-card-link,
  .media-card-email { font-size: 20px; }

  /* Assets */
  .assets-top-row { margin-bottom: 6px; }
  .assets-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .asset-card-body  { padding: 32px 16px; }
  .asset-card-btn   { font-size: 16px; }
  .asset-card-title { font-size: 24px; }

  /* Bento */
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-col-1, .bento-col-2,  .bento-col-3,
  .bento-col-4, .bento-col-5,  .bento-col-6,
  .bento-col-7, .bento-col-8,  .bento-col-9,
  .bento-col-10,.bento-col-11, .bento-col-12 { grid-column: span 1; }

  /* Press */
  .press-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  /* Assets */
  .assets-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero-section .container { padding: 32px 24px; }
  .hero-image-wrap {
    box-shadow:
      10px 10px 0 0 var(--color-brand-marigold),
      0 4px 24px 0 rgba(0, 0, 0, 0.1);
  }

  /* Bento */
  .bento-grid { grid-template-columns: 1fr; }
  .bento-col-1, .bento-col-2,  .bento-col-3,
  .bento-col-4, .bento-col-5,  .bento-col-6,
  .bento-col-7, .bento-col-8,  .bento-col-9,
  .bento-col-10,.bento-col-11, .bento-col-12 { grid-column: span 1; }

  /* Press logos */
  .press-logos { gap: 24px; }
  .press-logo  { height: 38px; }
}

/* END OF MEDIA CENTRE STYLES */

/* LAZY LOADING FOOTER ICONS */
.footer-bottom {
    content-visibility: auto;
    contain-intrinsic-size: auto 297px; /* mobile first */
}

@media (min-width: 768px) {
    .footer-bottom {
        contain-intrinsic-size: auto 98px;
    }
}

.footer-main .logo-saf {
    background-position: 0px 0px;
}

.scndry-btn {
    background-color: var(--color-brand-secondary);

    &:hover {
        background-color: var(--color-brand-secondary-400);
    }
}

.img-holder img {
    max-width: 100%;
    border-radius: 16px;
}

.highlight-main-image {
    margin-bottom: 1em;
    display: block;
    max-width: 800px;
}

.blockquote--media-split {
    font-size: 18px;
    line-height: 1.5;
}

.blockquote--media-split p {
    color: var(--color-brand-primary-700);
}

.ui-datepicker-calendar .ui-state-disabled .ui-state-default {
  color: var(--color-neutral-600);
  text-decoration: line-through;
  text-decoration-color: var(--color-neutral-600);
  text-decoration-thickness: 1px;
}

.hero-img-01 {
    background-image: url(https://www.nordicvisitor.com/resources/2015/stylesheets/images/hero.jpg)
}