/*
Theme Name: Wordpress training theme
Theme URI: https://www.wordpress-test.rossoll-webdesign.dk/
Author: B-Design
Author URI: https://www.b-design.dk/
Description: A theme for training
Version: 0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl.2.0.html
*/

:root {
  /* 🌑 Primary Colors */
  --abyss-blue: #141f2b;
  --midnight-navy: #1d2a39;
  --cosmic-blue: #111228;
  --twilight-navy: #213245;
  --deep-slate: #26394d;

  /* 🌊 Secondary Backgrounds */
  --stormy-sea: #212a34;
  --dark-cerulean: #2f3c4b;
  --steel-shadow: #303c4b;
  --steel-shadow-89: #303c4be3;
  --ocean-mist: #427b91;

  /* 🌫 Neutral Tones */
  --soft-pearl: #f0f0f0;
  --frosted-sky: #c2cedb;
  --ash-gray: #707070;
  --ash-gray-56: #7070708f;

  /* 🌿 Natural & Earthy */
  --olive-shadow: #5a6656;
  --seafoam-green: #7eacad;
  --teal-current: #398a89;
  --sky-drift: #86a6be;
  --cool-surf: #599ab4;
  --desert-bark: #775b40;
  --earth-clay: #6f5338;

  /* 🔥 Accent Colors */
  --rustic-brown: #85674a;
  --blush-rose: #cb8aad;
  --ember-flame: #fb432f;

  /* 🌊 Deep Accent */
  --deep-ocean: #044a5d;

  /* Theme Text Colors */
  --snow-white: #ffffff;
  --steel-teal: #1c2a39;
  --charcoal-night: #111228;
  --slate-smoke: #616c6c;
}

@font-face {
  font-family: "Gotham Ultra";
  src: url("fonts/Gotham Ultra.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Black";
  src: url("fonts/Gotham Black.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Bold";
  src: url("fonts/Gotham Bold.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Book";
  src: url("fonts/Gotham Book.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}

body {
  font-family: "Gotham Book", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
}

main {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Gotham Ultra", sans-serif;
  letter-spacing: 1.5px;
}

p {
  font-size: 14px;
  line-height: 17px;
}

/* #region header */
header {
  display: flex;

  background-color: var(--charcoal-night);
}

.entry-header {
  background-color: var(--midnight-navy);
}

.entry-header h1 {
  padding: 2rem;
  margin: 0;

  word-wrap: break-word;
  overflow-wrap: break-word;
  /* hyphens: auto; */

  font-size: 40px;
  line-height: 49px;

  color: var(--snow-white);
}

/* #endregion header */

/* #region custom-home-page */

.index-header {
  position: relative;
  margin: 0;
}

.index-header__info-contianer {
  position: absolute;
  top: 6.25rem;

  margin: 1rem 2rem 0;
}

.index-header__info-contianer h1 {
  color: var(--snow-white);
  font-size: 40px;
  line-height: 50px;
}

.index-header__info-contianer > div {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 120px;
  height: 50px;

  margin-top: 1rem;

  font-family: "Gotham Ultra", sans-serif;
  color: snow;
  font-size: 14px;
  line-height: 18px;

  background-color: var(--cosmic-blue);
}

.index-header__image-button {
  position: absolute;
  right: 2rem;
  top: 2rem;
}

.book-trip__wrapper {
  display: flex;
  flex-direction: column;

  padding: 2rem;
  gap: 1rem;
}

.book-trip__button {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 225px;
  height: 50px;

  margin: auto;

  font-family: "Gotham Bold", sans-serif;
  color: var(--snow-white);
  font-size: 14px;
  line-height: 18px;
  text-align: center;

  background-color: var(--ember-flame);
  padding: 1rem;
}

.natural-news__wrapper {
  display: flex;
  flex-direction: column;

  padding: 2rem;
  gap: 1rem;

  background-color: var(--deep-ocean);
}

.natural-news__wrapper h2 {
  color: var(--snow-white);
  font-size: 35px;
  line-height: 43px;
}

.natural-news__wrapper .swiper-container {
  width: 323;
}

.natural-news__wrapper .swiper-wrapper {
  display: flex;

  gap: 1rem;
}

.natural-news__wrapper > ul li {
  margin-bottom: -55px;
}

.natural-news__wrapper .image-wrapper {
  position: relative;
}

.natural-news__wrapper .image-wrapper .sub-title {
  position: absolute;
  bottom: 1rem;
  right: 1rem;

  padding: 0.3rem 1rem;

  font-family: "Gotham Bold", sans-serif;
  color: var(--snow-white);
  font-size: 12px;
  line-height: 15px;

  border-radius: 25px;

  background-color: var(--ember-flame);
}

.natural-news__wrapper .image-wrapper img {
  display: block;

  width: 100%;
}

.natural-news__wrapper article {
  position: relative;
  z-index: 1;

  transform: translateY(-1px); /* -55px måske*/

  background-color: var(--soft-pearl);
}

.natural-news__wrapper article > div {
  position: relative;
}

.natural-news__wrapper article .price-wrapper {
  padding: 1.5rem 2rem;
}

.natural-news__wrapper article .contianer {
  padding: 2rem 2rem 1rem;
}

.natural-news__wrapper article .contianer h3 {
  font-size: 20px;
  line-height: 24px;
}

.natural-news__wrapper article .contianer p {
  font-size: 12px;
  line-height: 15px;
}

.natural-news__wrapper article .contianer > div {
  display: flex;
  justify-content: space-between;

  margin-bottom: 0.7rem;
}

.natural-news__wrapper .ticket_image {
  width: 40px;
}

.natural-news__wrapper :is(.circle-1, .circle-2) {
  position: absolute;
  z-index: 100;

  height: 37px; /* 55px */
  width: 37px;

  border-radius: 100%;

  background-color: var(--deep-ocean);
}

.natural-news__wrapper .circle-1 {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.natural-news__wrapper .circle-2 {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

.natural-news__wrapper .border {
  display: flex;
  justify-content: center;

  height: 1px;
}

.natural-news__wrapper article .price-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 2px dashed var(--ash-gray-56);
}

.natural-news__wrapper article .price-wrapper p {
  color: var(--teal-current);

  font-size: 20px;
  line-height: 24px;
  font-family: "Gotham Black", sans-serif;
}

.natural-news__wrapper article .price-wrapper img {
  display: flex;
  align-items: center;

  width: 9px;
  height: 15px;
}

.safari-guide__wrapper {
  display: flex;
  flex-direction: column;

  padding: 2rem;
  gap: 2rem;

  background-color: var(--olive-shadow);
}
.safari-guide__wrapper .swiper-container {
  width: 200px;
}

.safari-guide__wrapper .safari-guide__banner {
  height: 32px;
  width: 122px;
}

.safari-guide__wrapper h2 {
  color: var(--snow-white);
  font-size: 35px;
  line-height: 43px;
}

.safari-guide__guide-wrapper {
  gap: 2rem;
}

.safari-guide__guide-item {
  display: flex;
  flex-direction: column;

  background-color: var(--steel-teal);
}

.safari-guide__item-hero-banner {
  position: relative;
}

.safari-guide__item-hero-banner .guide-safari__image {
  display: block;
  width: 100%;
}

.safari-guide__item-hero-banner .guide-safari__icon {
  position: absolute;
  left: 1rem;
  top: 1rem;
}

.safari-guide_info-container {
  padding: 1rem;
}

.safari-guide_title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 1rem;
}

.safari-guide_title {
  color: var(--snow-white);
  font-size: 18px;
  line-height: 22px;
}

.guide-safari__icon-arrow {
  height: 14px;
  width: 14px;
}

.safari-guide__guide-item p {
  color: var(--snow-white);
  font-size: 12px;
  line-height: 15px;
}

/* #endregion custom-home-page */

/* #region custom-available-positions custom-collaborative-partners custom-plan-your-visit custom-privacy-policy */

.accordion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-bottom: 2rem;

  background-color: var(--frosted-sky);
}

.accordion--partners {
  padding: 2rem;
}

.accordion__image {
  display: block;

  width: 100%;
}

.accordion__list {
  display: flex;
  flex-direction: column;

  width: 322px;
  gap: 2rem;
}

.accordion__section-title {
  width: 322px;

  margin: 2rem 0;

  font-size: 20px;
  line-height: 26px;
}

.accordion__section-title--positions {
  margin-bottom: 1rem;

  font-size: 35px;
  line-height: 35px;
}

.accordion__section-text {
  width: 322px;

  margin-bottom: 2rem;

  font-size: 14px;
  line-height: 17px;
}

.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1rem;

  cursor: pointer;

  color: snow;

  background-color: var(--stormy-sea);
}

.accordion__title {
  font-size: 20px;
  line-height: 24px;
}

.accordion__content {
  display: flex;

  padding: 1rem;

  color: var(--snow-white);

  background-color: var(--dark-cerulean);
}

.accordion__content--closed {
  display: none;
}

.accordion__icon--rotated {
  transform: rotate(180deg);
}

.accordion__content-item {
  display: flex;
  flex-direction: column;

  gap: 1rem;
}

/* #endregion custom-available-positions custom-collaborative-partners custom-plan-your-visit custom-privacy-policy */

/* #region custom-opening-hours */
.activities-today {
  display: flex;
  flex-direction: column;

  margin: 1rem;
}

.activities-today
  .activities-today__link:not(.activities-today__link:last-of-type) {
  margin-bottom: 0.3rem;
}

.activities-today__date {
  color: var(--ember-flame);
  font-size: 25px;
  line-height: 30px;
  margin: 0 1rem;
}

.activities-today__link {
  display: flex;
  justify-content: space-between;

  padding: 0.3rem 1rem;

  font-family: "Gotham Ultra", sans-serif;
  color: var(--snow-white);
  text-decoration: none;
  font-size: 12px;
  line-height: 15px;

  border-radius: 25px;
}

.activities-today__link > p {
  font-size: 12px;
  line-height: 15px;
}

.activities-today__link--thyboroen {
  background-color: var(--deep-slate);
}

.activities-today__link--hvide-sande {
  background-color: var(--cool-surf);
}

.activities-today__link--iskunsten {
  background-color: var(--rustic-brown);
}

.activities-calendar {
  display: flex;
  flex-direction: column;

  margin: 0rem 1rem 2rem;

  color: var(--snow-white);
}

.activities-calendar .calendar-item:not(.calendar-item:last-of-type) {
  margin-bottom: 1rem;
}

.activities-calendar__year {
  margin: 0 1rem;

  color: var(--steel-teal);
  font-size: 30px;
  line-height: 37px;
}

.calendar-item {
}

.calendar-item--thyboroen {
  background-color: var(--deep-slate);
}
.calendar-item--thyboroen > div:nth-child(even) {
  background-color: var(--twilight-navy);
}

.calendar-item--hvide-sande {
  background-color: var(--rustic-brown);
}
.calendar-item--hvide-sande > div:nth-child(even) {
  background-color: var(--desert-bark);
}

.calendar-item--iskunsten {
  background-color: var(--cool-surf);
}
.calendar-item--iskunsten > div:nth-child(even) {
  background-color: var(--ocean-mist);
}

.calendar-item__header {
  position: relative;

  padding: 1rem 2rem;
}

.calendar-item__banner {
  display: block;

  width: 160px;
}

.calendar-item__location {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);

  padding: 0.3rem 0.5rem;

  border-radius: 25px;
}
.calendar-item--thyboroen .calendar-item__location {
  background: var(--abyss-blue);
}
.calendar-item--hvide-sande .calendar-item__location {
  background: var(--earth-clay);
}
.calendar-item--iskunsten .calendar-item__location {
  background: var(--ocean-mist);
}
.calendar-item__schedule {
  padding: 2rem;
}

.calendar-item__opening-hours {
  margin-bottom: 0.5rem;

  font-size: 14px;
  line-height: 15px;
}

.calendar-item__dates p {
  font-size: 12px;
  line-height: 15px;
}
/* #endregion custom-opening-hours */

/* #region custom-template-employee */
.employee__information-team {
  padding: 2rem;
  width: 100%;
  color: var(--charcoal-night);
  background-color: var(--frosted-sky);
}

.employee__information-team h2 {
  margin: 0 0 1rem 0;

  font-size: 35px;
  line-height: 43px;

  color: var(--steel-teal);
}

.article-container img {
  width: 100%;
}

.employee__list-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding: 2rem 0;

  background-color: var(--soft-pearl);
}

.employee__list-contianer {
  display: grid;

  grid-template-columns: repeat(2, 1fr);
  row-gap: 40px;
  column-gap: 20px;

  width: 322px;

  list-style: none;
}

.employee__list-contianer li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  gap: 0.4rem;
}

.employee__list-contianer img {
  display: block;

  width: 138px;
  height: 138px;

  margin-bottom: 0.5rem;
}

.employee__list-contianer h4 {
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  font-family: "Gotham Bold", sans-serif;
}

.employee__list-contianer p {
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}

.employee__list-contianer a {
  font-size: 10px;
  line-height: 17px;
  color: var(--slate-smoke);
}

.employee__contact {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding: 4rem 0;
  gap: 2rem;

  background-color: var(--soft-pearl);
}

.employee__contact > * {
  width: 322px;
}

.employee__contact h3 {
  font-family: "Gotham Black", sans-serif;
}

.employee__contact :is(h3, p, a) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  text-decoration: none;

  color: var(--charcoal-night);
}

.employee__contact a {
  margin-top: 0.4rem;
}

.employee__contact a.small {
  width: 150px;
}

.guide {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding: 2rem 0;

  color: var(--snow-white);
  background-color: var(--olive-shadow);
}

.guide > * {
  width: 322px;
}

.guide h3 {
  font-size: 20px;
  line-height: 24px;
}

.guide .align-swiper-container {
  display: flex;
  width: 322px;
}

.guide .swiper-container {
  width: 200px;
  margin: 1rem 0;
}

.guide .swiper-wrapper {
  gap: 15px;
}

.guide .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.5rem 1.5rem;

  cursor: pointer;

  border: 1px solid var(--snow-white);
  border-radius: 25px;
}

.guide .swiper-slide p {
  font-size: 15px;
  line-height: 19px;
  font-family: "Gotham Ultra", sans-serif;
}

.guide .swiper-slide.active {
  color: var(--charcoal-night);
  background-color: var(--snow-white);
}

.guide img {
  display: block;
  margin-bottom: 1rem;
}

.guide h2 {
  font-size: 35px;
  line-height: 43px;

  color: var(--snow-white);
}

.article-container article {
  display: none;
  flex-direction: column;
}

.article-container article.active {
  display: flex;
}

.content-wrapper.employee article p {
  font-family: "Gotham Book", sans-serif;
}
/* #endregion custom-remplate-employee */

/* #region custom-template-event-calender */
.content-wrapper {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  color: var(--charcoal-night);
  background-color: var(--frosted-sky);
}

.content-wrapper > section {
  width: 322px;
}

.content-wrapper > :first-child {
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.content-wrapper h2 {
  margin: 0 0 1rem 0;

  font-size: 35px;
  line-height: 43px;

  color: var(--steel-teal);
}

.content-wrapper.calender > section {
  width: 340px;
}

.content-wrapper.calender {
  color: var(--snow-white);
  background-color: var(--snow-white);
}

.event-calender {
  display: flex;
  flex-direction: column;

  gap: 1.5rem;
}

.event-card__image-wrapper {
  position: relative;
}

.event-card__image-wrapper .event-card__image {
  display: block;

  width: 100%;
}

.event-card__image-wrapper .event-card__location-name {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;

  padding: 0.2rem 1rem;

  font-size: 12px;
  line-height: 15px;

  border-radius: 25px;
}

.event-card__date {
  display: flex;

  height: 70px;
}

.event-card__date .event-card__date-info {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 70px;
  height: 100%;
}

.event-card__image-wrapper .event-card__location-name.Fodring,
.event-card__date .event-card__date-info.Fodring {
  background-color: var(--seafoam-green);
}

.event-card__image-wrapper .event-card__location-name.Ravsafari,
.event-card__date .event-card__date-info.Ravsafari {
  background-color: var(--rustic-brown);
}

.event-card__image-wrapper .event-card__location-name.Udstilling,
.event-card__date .event-card__date-info.Udstilling {
  background-color: var(--blush-rose);
}

.event-card__date .event-card__date-info p {
  text-align: center;

  font-family: "Gotham Bold", sans-serif;
  font-size: 11px;
  line-height: 14px;
}

.event-card__date .event-card__date-info .event-card__number {
  font-size: 26px;
  line-height: 32px;
}

.event-card__date .icon {
  width: 30px;
}

.event-card__date .arrow {
  width: 9px;
  height: 15px;
}

.event-card__date .event-card__activity > p {
  display: none;
}

.event-card__date .event-card__activity {
  width: calc(100% - 70px);

  padding: 0 1rem;
  gap: 1rem;
}

.event-card__date .event-card__activity,
.event-card__date .event-card__activity-info {
  display: flex;
  align-items: center;

  height: 100%;

  background-color: var(--stormy-sea);
}

.event-card__date .event-card__activity-info {
  justify-content: space-between;

  width: 100%;
}

.event-card__date .event-card__activity-info .event-card__activity-name {
  font-size: 20px;
  line-height: 24px;
  font-family: "Gotham Ultra", sans-serif;
}

.event-card--group > .event-card__departure {
  background-color: var(--steel-shadow);
  display: flex;
  padding: 0.7rem;
  border-top: 1px solid #56606b;
}

.event-card--group > .event-card__departure .event-card__departure-text {
  font-size: 10px;
  line-height: 15px;
}

.event-card--group > .event-card__departure span {
  font-family: "Gotham Bold", sans-serif;
}

.event-card--group > .event-card__departure img {
  width: 13px;
  margin-right: 0.7rem;
}

.event-card--group .event-card__details {
  background-color: var(--steel-shadow-89);
  border-top: 1px solid #656d78;
}

.event-card--group .event-card__details .event-card__time {
  /* border-right: 1px solid #656d78; */
  border-right: none;
}

.event-card--group .event-card__details > div {
  width: 50%;
}

.event-card--group .additional-event:nth-child(odd) {
  background-color: #5a6879;
}
.event-card--group .additional-event:nth-child(even) {
  background-color: #000;
}

.event-card--group .event-sub-dropdown {
  display: none;
  flex-direction: column;
}

.event-card--group .event-sub-dropdown.visible {
  display: flex;
}

.event-card--group .event-dropdown .event-location-dropdown {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem;
  background-color: var(--steel-shadow-89);
  border-top: 1px solid #656d78;
  font-size: 10px;
  line-height: 15px;
  font-family: "Gotham Bold", sans-serif;
}

.event-card--group .event-dropdown .event-location-dropdown > div {
  display: flex;
}

.event-card--group
  .event-dropdown
  .event-location-dropdown
  .event-card__icon-clock {
  width: 13px;
  margin-right: 0.7rem;
}

.event-card--group
  .event-dropdown
  .event-location-dropdown
  .event-card__icon-arrow {
  width: 10px;
}

.event-card--group .event-card__seats {
  background-color: transparent;
}

.rotate-180 {
  transform: rotate(180deg);
}

.event-card--single .event-card__details {
  flex-direction: column;
}

.event-card--single .event-card__details .event-card_info {
  background-color: var(--steel-shadow);
  border-top: 1px solid #56606b;
  padding: 0;
}

.event-card--single .event-card__details .event-card_info > div {
  display: flex;

  padding: 0.7rem;
}

.event-card--single
  .event-card__details
  .event-card_info
  :is(.event-card__time-text, .event-card__departure-text) {
  font-size: 10px;
  line-height: 15px;
}

.event-card--single .event-card__seats {
  border-top: 1px solid #656d78;
}

.event-card__details {
  display: flex;
}

.event-card__details > div {
  display: flex;

  padding: 0.7rem;
}

.event-card__details .event-card__time {
  border-right: 1px solid #56606b;
}

.event-card__details .event-card__time .event-card__time-text {
  font-family: "Gotham Bold", sans-serif;
}

.event-card__details
  > div
  :is(.event-card__time-text, .event-card__departure-text) {
  font-size: 10px;
  line-height: 15px;
}

.event-card__details
  > div
  .event-card__departure-text
  .event-card__departure-address {
  font-family: "Gotham Bold", sans-serif;
}

.event-card__details > div img,
.event-card__seats > img {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 13px;

  margin-right: 0.7rem;
}

.event-card__seats {
  display: flex;

  padding: 0.7rem;

  background-color: var(--steel-shadow-89);
}

.event-card__seats-left {
  font-size: 10px;
  line-height: 15px;
  font-family: "Gotham Bold", sans-serif;
}

.show-more_btn-wrapper {
  display: flex;
  justify-content: center;
}

.show-more_btn {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  width: 132px;
  height: 26px;

  margin-top: 1.5rem;

  color: var(--charcoal-night);
  font-size: 15px;
  line-height: 19px;
  font-family: "Gotham Bold", sans-serif;

  border: 1px solid var(--cosmic-blue);
  border-radius: 25px;
}

.show-more_btn .show-more_icon {
  display: block;
  height: 15px;
  width: 15px;
  margin-left: 0.4rem;
}

.show-more_btn.minus {
  display: none;
}

.select-wrapper {
  display: flex;
  justify-content: space-between;
}

.select-wrapper select {
  appearance: none;
  width: 100%;
  font-size: 1.15rem;
  padding: 0.675em 6em 0.675em 1em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
  position: relative;
}

.select-wrapper::before,
.select-wrapper::after {
  --size: 0.3rem;
  position: absolute;
  content: "";
  right: 1rem;
  pointer-events: none;
}

.select-wrapper::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.select-wrapper::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 41%;
}

.select-wrapper option {
  cursor: pointer;
}

/* #endregion custom-template-event-calender */

/* #region extra-menu */

.extra-menu {
  position: fixed;
  right: 0;
  top: 40rem;
  z-index: 999;
  transform: translateX(calc(330px - 60px));

  display: flex;
  align-items: center;

  width: 330px;
  height: 50px;

  gap: 1rem;
  transition: 1s;

  border-radius: 25px;

  background-color: var(--ember-flame);
}

.extra-menu__item-image {
  position: absolute;
  left: 30px;
  transform: translateX(0%);
  transition: 1s;
}

.extra-menu__item {
  display: none;
  align-items: center;
  flex-direction: column;
}

.extra-menu__item img {
  height: 15px;
  width: 15px;
}

.extra-menu__item a {
  color: var(--snow-white);
  font-size: 10px;
  line-height: 13px;
}

.extra-menu__animation-1 {
  right: 50%;
  transform: translateX(50%);

  justify-content: center;
}

.extra-menu__animation-1 .extra-menu__item-image {
  display: none;
}

.extra-menu__animation-1 .extra-menu__item {
  display: flex;
}

/* #endregion extra-menu */

/* #region ticket */

/*? I need to use # othervise it dosent work on event-calender.php */
#billet {
  width: 100%;

  padding: 2rem;

  background-color: var(--sky-drift);
}

.entrance-section > * {
  width: 322px;
}

.entrance-section_title {
  color: var(--snow-white);
}

.entrance-section .entrance-slider {
  margin-bottom: -33px;
}

.entrance-section .entrance-slider__list {
  display: flex;

  gap: 1rem;
}

.entrance-section .entrance-slider__item {
  /* margin-bottom: -55px; */
}

.offer-card__title {
  color: var(--cosmic-blue);
  font-family: "Gotham Bold", sans-serif;
}

.offer-card__description {
  color: var(--slate-smoke);

  font-size: 12px;
  line-height: 15px;
}

.offer-card__image-wrapper {
  display: flex;
  justify-content: center;

  height: 192px;
}

.offer-card__body {
  position: relative;
  z-index: 1;

  transform: translateY(-33px); /* -55px måske*/

  background-color: var(--soft-pearl);
}

.offer-card__body > div {
  position: relative;
}

.offer-card__body .offer-card__footer {
  padding: 2rem;
}

.offer-card__body .offer-card__content {
  height: 131px;

  padding: 2rem 2rem 0;
}

.offer-card__body .offer-card__content > div {
  display: flex;
  justify-content: space-between;

  height: 40px;
}

.offer-card__icon {
  width: 40px;

  transform: translateY(-25%);
}

.entrance-section :is(.offer-card__decor--1, .offer-card__decor--2) {
  position: absolute;
  z-index: 100;

  height: 37px; /* 55px */
  width: 37px;

  border-radius: 100%;

  background-color: var(--sky-drift);
}

.entrance-section .offer-card__decor--1 {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.entrance-section .offer-card__decor--2 {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

.offer-card__body .offer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 2px dashed var(--ash-gray-56);
}

.offer-card__body .offer-card__footer .offer-card__price {
  color: var(--teal-current);

  font-size: 20px;
  line-height: 24px;
  font-family: "Gotham Black", sans-serif;
}

.offer-card__body .offer-card__footer .offer-card__arrow {
  display: flex;
  align-items: center;

  width: 9px;
  height: 15px;
}

/* #endregion ticket */

/* #region sea-floor */

/*? I need to use # othervise it dosent work on event-calender.php */
#billet + .sea-floor {
  position: relative;

  display: flex;
  align-items: flex-end;

  width: 100%;
  height: 240px;

  margin-bottom: 0;

  background-color: var(--sky-drift);
}

.sea-floor__image {
  display: block;

  width: 100%;
}

/* #endregion sea-floor */

/* #region banner */

.site-header__banner,
.site-footer__banner {
  overflow: hidden;

  position: relative;

  width: 100%;
  height: 65px;

  margin-inline: auto;

  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0)
  );

  background-color: var(--steel-teal);
}

.site-header__banner-item,
.site-footer__banner-item {
  --duration: 30s;
  --item-length: 0; /* Default value for js */
  --item-width: 200px;

  position: absolute;
  top: 50%;

  width: var(--item-width);
  height: 37px;
}

.site-header__banner-item img,
.site-footer__banner-item img {
  height: 100%;
}

.site-header__banner-item.left-carousel,
.site-footer__banner-item.left-carousel {
  transform: translate(calc(var(--item-width) * var(--item-length)), -50%);
  animation: scrollleft var(--duration) linear infinite;
}

@keyframes scrollleft {
  from {
    transform: translate(calc(var(--item-width) * var(--item-length)), -50%);
  }
  to {
    transform: translate(-100%, -50%);
  }
}

/* #endregion banner */

/* #region .site-footer */
.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 500px;

  color: var(--snow-white);
  background-color: var(--cosmic-blue);
}

.site-footer h3 {
  padding: 0;
  margin: 0 0 0.7rem 0;

  font-size: 18px;
  font-weight: 100;
  /* letter-spacing: 1.5px; */
}

.site-footer__content {
  display: flex;
  flex-direction: column;

  gap: 4rem;
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
}

.site-footer__info .site-footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.7rem;
}

.site-footer__info .site-footer__container div {
  position: relative;

  display: flex;
}

.site-footer__info .site-footer__container img {
  position: absolute;
  left: calc(-13px - 0.7rem);
  top: 50%;
  transform: translateY(-50%);

  width: 13px;
  height: 13px;

  margin-right: 0.7rem;
}

.site-footer__info .site-footer__container a {
  display: flex;

  padding: 0;
  margin: 0;

  font-size: 15px;
  line-height: 15px;
  text-decoration: none;

  color: var(--snow-white);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
}

.site-footer__contact .site-footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.7rem;
}

.site-footer__contact .site-footer__container div {
  position: relative;
}

.site-footer__contact .site-footer__container img {
  position: absolute;
  top: 50%;
  left: calc(-13px - 0.7rem);
  transform: translateY(-50%);

  width: 13px;
  height: 13px;

  margin-right: 0.7rem;
}

.site-footer__contact .site-footer__container a {
  display: flex;

  padding: 0;
  margin: 0;

  font-size: 15px;
  line-height: 15px;
  text-decoration: none;

  color: var(--snow-white);
}

.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 0.7rem 0;

  gap: 0.7rem;

  background-color: var(--steel-teal);
}

.site-footer__social-icon[class*="youtube"] img {
  height: 18px;
}

.site-footer__social-icon--youtube img {
  width: 24px;
  height: 30px;
}
/* #endregion .site-footer */