@font-face {
  font-family: "Akira Expanded";
  src: url("../../assets/fonts/AkiraExpanded-SuperBold.woff2") format("woff2"),
    url("../../assets/fonts/AkiraExpanded-SuperBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Regular.woff2") format("woff2"),
    url("../../assets/fonts/Inter-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Bold.woff2") format("woff2"),
    url("../../assets/fonts/Inter-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Light.woff2") format("woff2"),
    url("../../assets/fonts/Inter-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


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

:root {
  --primary: #f7f0da;
  --secondary: #111111;
  --tertiary: #fffefa;
  --quaternary: #ff6432;
  --bg-video: #2cb8e2;
  --bg-warning: #f8ca33;
  --yellow-bg: #f7f0da;
  --light-yellow: #FFF8E3;
  --text-primary: var(--primary);
  --text-secondary: var(--secondary);
  --text-tertiary: var(--tertiary);
  --text-quaternary: var(--quaternary);

  --white: #ffffff;
  --dark: #000000;
  --light-gray: #bfbfbf;
  --gray: #808080;
  --danger: #ff6431;
  --placeholder: #999999;

  /* Font Families */
  --font-heading: "Akira Expanded", sans-serif;
  --font-body: "Inter", sans-serif;
  /* Base font size */
  --font-base: 16px;
  /* Heading Sizes - Desktop */
  --h1-size: 3rem;
  /* ~36px */
  --h2-size: 2.5rem;
  /* ~32px */
  --h3-size: 2rem;
  /* ~28px */
  --h4-size: 1.5rem;
  /* ~24px */
  --h5-size: 1.25rem;
  /* ~20px */
  --h6-size: 1.125rem;
  /* ~18px */

  /* Heading Sizes - Tablet */
  --h1-size-md: 2rem;
  --h2-size-md: 1.77rem;
  --h3-size-md: 1.54rem;
  --h4-size-md: 1.31rem;
  --h5-size-md: 1.1rem;
  --h6-size-md: 1rem;

  /* Heading Sizes - Mobile */
  --h1-size-sm: 1.75rem;
  --h2-size-sm: 1.57rem;
  --h3-size-sm: 1.39rem;
  --h4-size-sm: 1.21rem;
  --h5-size-sm: 1.075rem;
  --h6-size-sm: 1rem;

  /* Line Heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.3;
}

h1,
.h1 {
  font-size: var(--h1-size);
  line-height: var(--line-height-heading);
  font-family: var(--font-heading);
}

h2,
.h2 {
  font-size: var(--h2-size);
  line-height: var(--line-height-heading);
  font-family: var(--font-heading);
}

h3,
.h3 {
  font-size: var(--h3-size);
  line-height: var(--line-height-heading);
  font-family: var(--font-heading);
}

h4,
.h4 {
  font-size: var(--h4-size);
  line-height: var(--line-height-heading);
  font-family: var(--font-body);
}

h5,
.h5 {
  font-size: var(--h5-size);
  line-height: var(--line-height-heading);
  font-family: var(--font-body);
}

h6,
.h6 {
  font-size: var(--h6-size);
  line-height: var(--line-height-heading);
  font-family: var(--font-body);
}

.mb-4-5 {
  margin-bottom: 2rem !important;
}

/* z-index pattern */
.z-1 {
  z-index: 1;
}

.z-2 {
  position: relative;
  z-index: 2;
}

.z-9 {
  z-index: 9;
}

.z-99 {
  z-index: 99;
}

.z-1-1 {
  z-index: -1;
}

.z-2-2 {
  z-index: -2;
}

.z-9-9 {
  z-index: -9;
}

.z-99-99 {
  z-index: -99;
}

.box-quaternary {
  background-color: azure;
  /* Shadow Color: rgba(255, 100, 50, 0.62) */
  box-shadow: 0px 1px 0px 0px rgba(255, 100, 50, 0.62),
    1px 0px 0px 0px rgba(255, 100, 50, 0.62),
    1px 2px 0px 0px rgba(255, 100, 50, 0.62),
    2px 1px 0px 0px rgba(255, 100, 50, 0.62),
    2px 3px 0px 0px rgba(255, 100, 50, 0.62),
    3px 2px 0px 0px rgba(255, 100, 50, 0.62),
    3px 4px 0px 0px rgba(255, 100, 50, 0.62),
    4px 3px 0px 0px rgba(255, 100, 50, 0.62),
    4px 5px 0px 0px rgba(255, 100, 50, 0.62),
    5px 4px 0px 0px rgba(255, 100, 50, 0.62),
    5px 6px 0px 0px rgba(255, 100, 50, 0.62),
    6px 5px 0px 0px rgba(255, 100, 50, 0.62),
    6px 7px 0px 0px rgba(255, 100, 50, 0.62),
    7px 6px 0px 0px rgba(255, 100, 50, 0.62),
    7px 8px 0px 0px rgba(255, 100, 50, 0.62),
    8px 7px 0px 0px rgba(255, 100, 50, 0.62);
}

.box-bg-video {
  background-color: azure;
  /* Shadow Color: rgba(44, 184, 226, 0.62) */
  box-shadow: 0px 1px 0px 0px rgba(44, 184, 226, 0.62),
    1px 0px 0px 0px rgba(44, 184, 226, 0.62),
    1px 2px 0px 0px rgba(44, 184, 226, 0.62),
    2px 1px 0px 0px rgba(44, 184, 226, 0.62),
    2px 3px 0px 0px rgba(44, 184, 226, 0.62),
    3px 2px 0px 0px rgba(44, 184, 226, 0.62),
    3px 4px 0px 0px rgba(44, 184, 226, 0.62),
    4px 3px 0px 0px rgba(44, 184, 226, 0.62),
    4px 5px 0px 0px rgba(44, 184, 226, 0.62),
    5px 4px 0px 0px rgba(44, 184, 226, 0.62),
    5px 6px 0px 0px rgba(44, 184, 226, 0.62),
    6px 5px 0px 0px rgba(44, 184, 226, 0.62),
    6px 7px 0px 0px rgba(44, 184, 226, 0.62),
    7px 6px 0px 0px rgba(44, 184, 226, 0.62),
    7px 8px 0px 0px rgba(44, 184, 226, 0.62),
    8px 7px 0px 0px rgba(44, 184, 226, 0.62);
}

.box-bg-warning {
  box-shadow: 0px 1px 0px 0px rgba(248,202,51,0.62), 1px 0px 0px 0px rgba(248,202,51,0.62), 1px 2px 0px 0px rgba(248,202,51,0.62), 2px 1px 0px 0px rgba(248,202,51,0.62), 2px 3px 0px 0px rgba(248,202,51,0.62), 3px 2px 0px 0px rgba(248,202,51,0.62), 3px 4px 0px 0px rgba(248,202,51,0.62), 4px 3px 0px 0px rgba(248,202,51,0.62), 4px 5px 0px 0px rgba(248,202,51,0.62), 5px 4px 0px 0px rgba(248,202,51,0.62), 5px 6px 0px 0px rgba(248,202,51,0.62), 6px 5px 0px 0px rgba(248,202,51,0.62), 6px 7px 0px 0px rgba(248,202,51,0.62), 7px 6px 0px 0px rgba(248,202,51,0.62), 7px 8px 0px 0px rgba(248,202,51,0.62), 8px 7px 0px 0px rgba(248,202,51,0.62), 8px 9px 0px 0px rgba(248,202,51,0.62), 9px 8px 0px 0px rgba(248,202,51,0.62), 9px 10px 0px 0px rgba(248,202,51,0.62), 10px 9px 0px 0px rgba(248,202,51,0.62), 10px 11px 0px 0px rgba(248,202,51,0.62), 11px 10px 0px 0px rgba(248,202,51,0.62), 11px 12px 0px 0px rgba(248,202,51,0.62), 12px 11px 0px 0px rgba(248,202,51,0.62);
}

#page-loader {
  position: fixed;
  inset: 0;
  background: #f7f0da;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 3s ease;
  /* smooth fade-out */
}

#lottie-loader {
  width: 160px;
  
}

#scroll {
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  width: 40px;
  height: 46px;
  background-color: var(--primary);
  z-index: 5;
  color: #000;
  text-align: center;
  text-decoration: none;
  padding-top: 21px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  z-index: 99;
  border: 1px solid black;
}

#scroll span {
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-bottom-color: #000;
}

#scroll:hover {
  background-color: #000;
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
  color: #fff;
}

#scroll:hover span {
  border-bottom-color: #fff;
}

#scroll:hover {
  border: 1px solid #fff;
}

.bg-warning {
  background-color: var(--bg-warning) !important;
}

.bg-yellow {
  background-color: var(--yellow-bg) !important;
}

.text-warning {
  color: var(--bg-warning) !important;
}

.text-danger {
  color: var(--quaternary) !important;
}

.bg-video {
  background-color: #2eb8e2 !important;
}

.border-secondary {
  border-color: var(--secondary);
}

.border-yellow {
  border: 8px solid var(--bg-warning) !important;
}

.bg-lightyellow {
  background: var(--light-yellow) !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--placeholder);
  opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--placeholder);
  opacity: 1;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--placeholder);
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  transition: background-color 0.15s ease-in-out;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  color: var(--text-color);
  /* letter-spacing: 0.8px; */
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  
}
html{overscroll-behavior: none;}

.rounded {
  border-radius: 8px !important;
}

.rounded-2x {
  border-radius: 45px !important;
}

.rounded-2x-start {
  border-top-left-radius: 45px;
  border-bottom-left-radius: 45px;
}

img {
  border: none;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

a,
a:focus,
a:link,
a:visited,
input:focus,
textarea:focus {
  outline: 0;
  text-decoration: none;
  font-size: 16px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px dashed var(--primary);
  outline-offset: 4px;
}

p {
  font-size: var(--font-base);
  line-height: var(--line-height-body);
}

select:focus {
  outline: 0;
}

textarea {
  resize: none;
}

form:not(.content-area),
h1:not(.content-area),
h2:not(.content-area),
h3:not(.content-area),
h4:not(.content-area),
h5:not(.content-area),
h6:not(.content-area),
p:not(.content-area),
ul:not(.content-area) {
  margin: 0;
  padding: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

iframe {
  display: block;
}

p+p {
  margin-top: 1.5em;
}

article,
aside,
details,
figcaption,
figure,
footer,
topbar,
hgroup,
menu,
nav,
section,
time {
  display: block;
  margin: 0;
  padding: 0;
}

::selection {
  background: #1c1c1c;
  color: #fff;
}

::-moz-selection {
  background: #1c1c1c;
  color: #fff;
}

ul {
  list-style: none;
}

li {
  padding: 0;
  margin: 0;
}

label {
  font-weight: 400 !important;
}

@media only screen and (min-width: 1601px) {
  section>.minHeight {
    min-height: 250px;
  }
}

a {
  color: var(--secondary);
}

.underlined {
  padding-bottom: 0.75em;
  margin-bottom: 1em;
  text-align: center;
  text-transform: uppercase;
  position: relative;
}

.underlined:after {
  content: "";
  width: 150px;
  height: 5px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  background-color: var(--danger);
}

.stretched {
  letter-spacing: 1px;
}

.stretched-0 {
  letter-spacing: 0px;
}

.text-default,
.text-default:active,
.text-default:focus {
  color: var(--dark) !important;
}

.text-muted {
  color: #424143 !important;
}

.btn-muted {
  background-color: #bfbfbf !important;
}

.text-primary,
.text-primary:active,
.text-primary:focus {
  color: var(--primary) !important;
}

.text-secondary,
.text-secondary:active,
.text-secondary:focus {
  color: var(--secondary) !important;
}

.text-tertiary,
.text-tertiary:active,
.text-tertiary:focus {
  color: var(--tertiary) !important;
}

.text-quaternary,
.text-quaternary:active,
.text-quaternary:focus {
  color: var(--quaternary) !important;
}

.text-white,
.text-white:active,
.text-white:focus {
  color: var(--white);
}

.text-grey {
  color: #706f6f !important;
}

.text-blue {
  color: var(--bg-video);
}
.text-orange {
  color: #ff6432;
}
.text-yellow {
  color: #f8ca34;
}

.tooltip-inner {
  font-size: 0.875em;
}

.bg-primary {
  background: var(--primary) !important;
}

.bg-secondary {
  background: var(--secondary) !important;
}

.bg-tertiary {
  background: var(--tertiary) !important;
}

.bg-quaternary {
  background: var(--quaternary) !important;
}

.bg-white {
  background: var(--white) !important;
}

.bg-dark {
  background: var(--dark) !important;
}

.bg-darkGray {
  background: #333 !important;
}

.bg-dark-gray-news * {
  color: #fff;
}

.bg-opacity {
  background: rgba(245, 245, 245, 0.2);
}

.bg-dgray {
  background: #dedede !important;
}

.grow {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.grow:hover {
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

/* new remove uppercase */
.btn-primary {
  background-color: var(--secondary);
  font-weight: bold;
  font-family: "Inter";
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--tertiary);
  cursor: pointer;
  border: 2px solid;
  padding: 0.8rem 1.5rem;
  /* Reduced offsets for a less pronounced effect */
  box-shadow: 0px 1px 0px 0px rgba(247, 240, 218, 0.8),
    1px 2px 0px 0px rgba(247, 240, 218, 0.8),
    2px 3px 0px 0px rgba(247, 240, 218, 0.8),
    3px 4px 0px 0px rgba(247, 240, 218, 0.8),
    4px 5px 0px 0px rgba(247, 240, 218, 0.8),
    5px 6px 0px 0px rgba(247, 240, 218, 0.8);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  text-wrap: nowrap;
}

.btn-primary:hover {
  background-color: var(--primary) !important;
  color: var(--secondary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0px 1px 0px 0px rgba(44, 184, 226, 0.62),
    1px 0px 0px 0px rgba(44, 184, 226, 0.62),
    1px 2px 0px 0px rgba(44, 184, 226, 0.62),
    2px 1px 0px 0px rgba(44, 184, 226, 0.62),
    2px 3px 0px 0px rgba(44, 184, 226, 0.62),
    3px 2px 0px 0px rgba(44, 184, 226, 0.62),
    3px 4px 0px 0px rgba(44, 184, 226, 0.62),
    4px 3px 0px 0px rgba(44, 184, 226, 0.62),
    4px 5px 0px 0px rgba(44, 184, 226, 0.62),
    5px 4px 0px 0px rgba(44, 184, 226, 0.62),
    5px 6px 0px 0px rgba(44, 184, 226, 0.62),
    6px 5px 0px 0px rgba(44, 184, 226, 0.62),
    6px 7px 0px 0px rgba(44, 184, 226, 0.62),
    7px 6px 0px 0px rgba(44, 184, 226, 0.62),
    7px 8px 0px 0px rgba(44, 184, 226, 0.62),
    8px 7px 0px 0px rgba(44, 184, 226, 0.62);
}

.btn-primary:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

.btn-secondary {
  background-color: var(--tertiary);
  font-weight: bold;
  font-family: "Inter";
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--secondary);
  cursor: pointer;
  border: 2px solid;
  padding: 0.8rem 4rem;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.62),
    1px 0px 0px 0px rgba(0, 0, 0, 0.62), 1px 2px 0px 0px rgba(0, 0, 0, 0.62),
    2px 1px 0px 0px rgba(0, 0, 0, 0.62), 2px 3px 0px 0px rgba(0, 0, 0, 0.62),
    3px 2px 0px 0px rgba(0, 0, 0, 0.62), 3px 4px 0px 0px rgba(0, 0, 0, 0.62),
    4px 3px 0px 0px rgba(0, 0, 0, 0.62), 4px 5px 0px 0px rgba(0, 0, 0, 0.62),
    5px 4px 0px 0px rgba(0, 0, 0, 0.62), 5px 6px 0px 0px rgba(0, 0, 0, 0.62),
    6px 5px 0px 0px rgba(0, 0, 0, 0.62), 6px 7px 0px 0px rgba(0, 0, 0, 0.62),
    7px 6px 0px 0px rgba(0, 0, 0, 0.62), 7px 8px 0px 0px rgba(0, 0, 0, 0.62),
    8px 7px 0px 0px rgba(0, 0, 0, 0.62);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  letter-spacing: 0;
  text-wrap: nowrap;
}

.btn-secondary:active {
  top: 5px;
  left: 5px;
}

.btn-secondary:hover {
  background-color: var(--secondary) !important;
  color: var(--tertiary) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--box-bg-warning);
}

.btn-search {
  background: var(--primary) !important;
  border-color: var(--secondary) !important;
  font-weight: bold;
  font-family: "Inter";
  font-size: 16px;
  text-decoration: none;
  color: var(--secondary);
  cursor: pointer;
  border: 2px solid;
  padding: 0.8rem 5rem;
  box-shadow:
    0px 1px 0px 0px rgba(0, 0, 0, 0.62),
    1px 0px 0px 0px rgba(0, 0, 0, 0.62),
    1px 2px 0px 0px rgba(0, 0, 0, 0.62),
    2px 1px 0px 0px rgba(0, 0, 0, 0.62),
    2px 3px 0px 0px rgba(0, 0, 0, 0.62),
    3px 2px 0px 0px rgba(0, 0, 0, 0.62),
    3px 4px 0px 0px rgba(0, 0, 0, 0.62),
    4px 3px 0px 0px rgba(0, 0, 0, 0.62),
    4px 5px 0px 0px rgba(0, 0, 0, 0.62),
    5px 4px 0px 0px rgba(0, 0, 0, 0.62),
    5px 6px 0px 0px rgba(0, 0, 0, 0.62),
    6px 5px 0px 0px rgba(0, 0, 0, 0.62),
    6px 7px 0px 0px rgba(0, 0, 0, 0.62),
    7px 6px 0px 0px rgba(0, 0, 0, 0.62),
    7px 8px 0px 0px rgba(0, 0, 0, 0.62),
    8px 7px 0px 0px rgba(0, 0, 0, 0.62);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-search:hover {
  background: var(--secondary) !important;
  border-color: 0 !important;
  color: #fff;
  box-shadow: var(--box-bg-warning);
}

.btn-discover {
  margin-bottom: -70px;
}

.slider-btn {
  margin-top: -25px;
}

.btn-tertiary {
  background: var(--primary) !important;
  border-color: var(--secondary) !important;
  font-weight: bold;
  font-family: "Inter";
  font-size: 16px;
  text-decoration: none;
  color: var(--secondary);
  cursor: pointer;
  border: 2px solid;
  padding: 0.8rem 1.5rem;
  /* Reduced offsets for a less pronounced effect */
  box-shadow: 0.5px 0.5px 0px 0px, 1px 1px 0px 0px, 1.5px 1.5px 0px 0px,
    2px 2px 0px 0px, 2.5px 2.5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-tertiary:hover {
  background: var(--secondary) !important;
  border-color: var(--tertiary) !important;
  color: var(--white);
  box-shadow: 3px 3px 0px var(--secondary);
}

.btn-quaternary {
  background: var(--quaternary) !important;
  border-color: var(--quaternary) !important;
  color: var(--white);
}

.btn-light {
  background: var(--light-gray);
  border-color: var(--light-gray);
}

.btn-light:hover {
  background: transparent !important;
  border-color: var(--light-gray) !important;
  color: var(--light-gray) !important;
}

.btn-transparent {
  background: transparent !important;
  border-color: var(--white) !important;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--white);
  letter-spacing: 2px;
  line-height: 1rem;
  padding: 0.75rem 1.2rem;
}

.btn-transparent:hover {
  background: var(--gray) !important;
  color: #333;
}

.btn-shape {
  border: 0;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  padding: 0.75rem 2.2rem;
}

/*style Starting */

section {
  padding: 40px 0;
  overflow: hidden;
}

main {
  overflow-x: hidden;
}

.container-max {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 9;
}

.article-container {
  width: 90%;
  max-width: 1190px;
  margin: 0 auto;
}

.header-container {
  width: 90%;
  max-width: 1435px;
  margin: auto;
  position: relative;
  z-index: 9;
}

.container-ticket {
  position: relative;
  max-width: 1190px;
  width: 90%;
  margin: 0 auto;
}

.min-vh-70 {
  height: 70vh;
}

.min-vh-60 {
  height: 60vh;
}

.logo {
  max-width: 168px;
}

/* column grid layout 16px */
.grid-16 {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 16px;
}

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--primary);
  padding: 16px 0;
  /* Add this to ensure the height change is smooth */
  transition: padding 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}

/* When scrolled, apply fixed position */
.main-header.scrolled {
position: fixed;
  padding: 8px 0; /* The shrink effect */
  background-color: var(--secondary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* The slide-down animation makes the 'sticky' appearance feel organic */
  animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown {
  from { transform: translateY(-20%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.navbar-nav .nav-link {
  font-weight: 600;
  margin: 0 1.3rem;
  font-size: 0.8rem;
  letter-spacing: 0;
}

.navbar-nav .nav-link.active {
  color: var(--bg-video) !important;
}

/* Banner Section */
.banner-section {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Background layers */
.banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1s ease;
  z-index: -1;
}

.banner-bg.active {
  opacity: 1;
  transform: scale(1);
}

/* Overlay for text */
.banner-overlay {
  text-align: center;
  z-index: 2;
  padding: 1rem;
}

/* Main Heading */
#banner-text {
  font-weight: 800;
  color: white;
  letter-spacing: 0;
  word-wrap: break-word;
  line-height: 0.8em;
  font-size: clamp(3rem, 10vw, 12rem);
}

/* Each Letter */
/* --- Letter Colors --- */
#banner-text span {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
  font-family: "Akira Expanded";
  line-height: 0.8em;
  color: #fff;
  display:inline;
}

/*#banner-text span.active {
  transform: scale(1.2);
}*/

/* Different hover colors (cycling through brand colors) */
#banner-text span:nth-child(4n + 1):hover {
  color: var(--bg-warning);
}

/* yellow */
#banner-text span:nth-child(4n + 2):hover {
  color: var(--bg-video);
}

/* orange */
#banner-text span:nth-child(4n + 3):hover {
  color: var(--quaternary);
}

/* green */
#banner-text span:nth-child(4n + 4):hover {
  color: var(--bg-warning);
}

/* Location Button */
.location-btn {
  background-color: #000;
  /* keep black background */
  font-weight: bold;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  border: 2px solid #f8ca33;
  /* initial border color */
  padding: 0.6rem 1.5rem;
  box-shadow: 4px 4px 0px 0px #f8ca33, 1px 1px 0px 0px #f8ca33,
    1.5px 1.5px 0px 0px #f8ca33, 3px 3px 0px 0px #f8ca33,
    3px 3px 0px 0px #f8ca33;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  text-wrap: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  /* add this update */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* add this css */
.show-btn {
  opacity: 1;
  visibility: visible;
}

.location-btn:hover {
  border-color: #fff;
  box-shadow: 4px 4px 0px 0px #fff, 1px 1px 0px 0px #fff,
    1.5px 1.5px 0px 0px #fff, 3px 3px 0px 0px #fff, 3px 3px 0px 0px #fff;
}

.location-btn:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

/* Small spacing for icon */
.location-btn i {
  margin-right: 8px;
}

/* inspiration tab */

.inspiration-text {
  margin-top: 10px;
}

.inspiration-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  font-family: "Akira Expanded", sans-serif;
}

.inspiration-text p {
  font-weight: 700;
}

.navbar-toggler-icon {
  background-image: url(../../assets/images/hamburg.svg);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.inspiration-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 30px !important;
  white-space: nowrap;
  /* scroll-snap-type: x mandatory; */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /*for Firefox */
}

.inspiration-tabs::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.inspiration-tabs .nav-item {
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0 16px;
}

.inspiration-tabs-wrapper {
  overflow-x: auto;
  margin: 0 -30px !important;
  padding-bottom: 10px;
}

.inspiration-tabs::-webkit-scrollbar {
  display: none;
}

.inspiration-tabs .nav-link {
  position: relative;
  background-color: transparent;
  border: 2px solid transparent;
  /* padding: 0.5rem 0.6rem; */
  border-radius: 30px;
  font-weight: 500;
  color: #222;
  transition: all 0.3s ease;
  font-size: 0.73rem;
  /* new */
  display: inline-block;
  min-width: 80px;
  /* Set a stable base width */
  text-align: center;
}

/* Active tab styling */
.inspiration-tabs .nav-link.active {
  font-weight: 700;
  color: #000;
  border: 2px solid #ff5e2e;
  font-size: 0.8rem;
}

/* Brackets on both sides */
.inspiration-tabs .nav-link.active::before,
.inspiration-tabs .nav-link.active::after {
  content: "(";
  color: #ff5e2e;
  font-weight: bold;
  font-size: 0.8rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.inspiration-tabs .nav-link.active::before {
  left: -0.6rem;
}

.inspiration-tabs .nav-link.active::after {
  content: ")";
  right: -0.6rem;
}

/* Fix Slick container overflow */
.inspiration-slider-wrapper {
  overflow: hidden;
  position: relative;
}

.inspiration-slider .slick-slide {
  padding: 5px 10px;
  box-sizing: border-box;
}

.inspiration-slider img {
  width: 100%;
  border-radius: 8px;
}

.inspiration-bg-wrapper {
  position: relative;
  z-index: 1;
  padding-top: 40px;
  padding-bottom: 60px;
}

.inspiration-bg-shape {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  max-width: 1300px;
  height: 40%;
  background-color: #faf3d1;
  border-radius: 240px;
  z-index: -1;
  bottom: 30px;
}

/* Single Image - centered */
.inspiration-slider.single-image {
  display: flex;
  justify-content: start;
  max-width: 230px;
  /* margin: 0 auto; */
}

.inspiration-slider.single-image img {
  width: 100%;
  height: auto;
}

/* Two Images - centered with spacing */
.inspiration-slider.two-images {
  display: flex;
  justify-content: start;
  gap: 20px;
  max-width: 460px;
  /* margin: 0 auto; */
}

.inspiration-slider.two-images img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* Three Images - centered with gap */
.inspiration-slider.three-images {
  display: flex;
  justify-content: start;
  gap: 20px;
  max-width: 92 0px;
  /* margin: 0 auto; */
}

.inspiration-slider.three-images img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.tab-content>.tab-pane {
  overflow: hidden;
}

/* Slider Background */
.slider-background {
  position: relative;
  padding: 1rem 0 4rem 0;
}

.slider-background::before {
  content: "";
  position: absolute;
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 55%;
  background-color: #f9f3e3;
  border-radius: 10rem;
  z-index: 0;
}

/* Decorative SVGs */
.svg-section {
  margin: -150px 0% -60px 0;
  pointer-events: none;
  right: 130px;
  z-index: -1;
}

/* new */
.svg-section-2 {
  margin: 0px 0% -100px 0;
  left: 0;
  top: 0;
  pointer-events: none;
}

#fallingSvg {
  position: relative;
  z-index: 9;
}

.svg-transition {
  margin: -80px 0 -80px 60%;
  position: relative;
  z-index: 1;
}

.svg-transition img {
  max-width: 300px;
  height: auto;
}

/* Drawer Base */
.custom-drawer {
  background-color: #0d0d0d;
  color: #fff;
  width: 280px;
}

/* Logo inside drawer */
.drawer-logo {
  height: 28px;
}

/* Drawer Menu Links */
.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

/* Right Arrow */
.drawer-link span {
  font-size: 1.2rem;
  opacity: 0.7;
}

.main-image-wrapper h3 {
  bottom: 20%;
  z-index: 9;
  color: #fff;
  left: 5%;
  width: 80%;
  text-align: left;
}

.main-image-wrapper p {
  bottom: 5%;
  z-index: 9;
  color: #fff;
  left: 5%;
  text-align: left;
  width: 70%;
}

/* Keep image rounded & responsive */
.inspiration-slider img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.slider-card {
  position: relative;
  overflow: visible;
  border-radius: 8px;
}

/* Full dark overlay on hover */
.card-title-overlay {
  position: absolute;
  inset: 0;
  /* cover full area */
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 60%,
      /* top is transparent */
      rgba(0, 0, 0, 0.6) 100%
      /* bottom darker */
    );
  color: #fff;
  display: flex;
  justify-content: start;
  align-items: flex-end;
  /* push text to bottom */
  font-size: var(--font-base);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  padding-bottom: 8px;
  /* spacing from bottom (8px = base unit) */
}

.slider-card .card-title-overlay {
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 60%,
      /* top is transparent */
      rgba(0, 0, 0, 0.6) 100%
      /* bottom darker */
    );
  color: #fff;
  padding: 16px;
}

/* Hover effect */
.slider-card:hover .card-title-overlay {
  opacity: 1;
  box-shadow: 8px 8px 0px 0px #ff5722, 4px 4px 0px 0px #ff5722, 3px 3px 0px 0px #ff5722, 2px 2px 0px 0px #ff5722, 6px 6px 0px 0px #ff5722;
}

/* trip box*/
/* new changes */
.trip-ideas-section {
  margin-top: 0;
  padding-top: 300px;
  padding-bottom: 80px;
  position: relative;
}

.trip-image-main .trip-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.trip-box {
  background-color: #f6f0d8;
  border: 3px solid #111;
  border-radius: 30px;
  padding: 20px;
  /* max-width: 1000px; */
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.trip-image {
  width: 100%;
  height: auto;
}

/* Specific overrides */
.trip-slider .slick-dots li button::before,
.slider .slick-dots li button::before {
  font-size: 20px;
  color: var(--quaternary);
}

.trip-slider .slick-track {
  display: flex !important;
  gap: 16px;
  /* spacing between slides */
}

.trip-slider .slick-list .slick-slide {
  padding: 5px 0;
}

.trip-slider .trip-image-main {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.trip-slider .trip-image {
  width: 100%;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.trip-slider .trip-image-main:hover .trip-image {
  transform: scale(1.05);
}

/* Overlay style */
.trip-slider .card-title-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  text-align: start;
  padding: 16px;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.6) 100%);
  color: #fff;
  font-weight: 600;
  font-size: var(--font-base);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trip-slider .trip-image-main:hover {
   box-shadow: 8px 8px 0px 0px #ff5722, 4px 4px 0px 0px #ff5722, 3px 3px 0px 0px #ff5722, 2px 2px 0px 0px #ff5722, 6px 6px 0px 0px #ff5722;
}

.trip-slider .trip-image-main:hover .card-title-overlay {
  opacity: 1;

}

/* Slick dots */
.trip-slider .slick-dots {
  bottom: -30px;
}

.trip-slider .slick-dots li button::before {
  font-size: 20px;
  color: var(--quaternary);

  opacity: 0.4;
}

.trip-slider .slick-dots li.slick-active button::before {
  color: var(--quaternary);
  font-size: 20px;
  opacity: 1;
}

footer p {
  font-size: 14px;
}

footer a {
  font-size: 14px !important;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  /* same width & height -> perfect circle */
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  /* similar to fs-5 */
  transition: background 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  background: #fff;
  color: #000;
}

/* subscribe button */
.wpcf7 form .wpcf7-response-output {
  margin: unset !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450;
  position: absolute;
  bottom: 60px;
  padding: 10px;
}

/* yellow 3D-style box shadow */
.main-image-wrapper {
  display: inline-block;
  position: relative;
  background-color: #f9c933;
  padding: 10px;
  clip-path: inset(12px 0px 1px 11px);
}

/* Smooth fade effect for image */
#mainImage {
  transition: opacity 0.6s ease-in-out;
}

/* Smooth text transition */
.overlay-text h3,
.overlay-text p {
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.main-image {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #f9c933;
  box-shadow: 10px 10px 0 #f9c933;
  position: relative;
  z-index: 1;
}

/* Top-right and bottom-left cut corners */
.main-image-wrapper::before,
.main-image-wrapper::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  /* page background color */
  z-index: 2;
}

.main-image-wrapper::before {
  top: 0;
  right: 0;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.main-image-wrapper::after {
  bottom: 0;
  left: 0;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}

/* Thumbnail styles */
.thumbnail-wrapper .thumb-item {
  position: relative;
  text-align: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.thumb-img {
  width: 70px;
  height: 40px;
  object-fit: cover;
  border-radius: 30px;
  border: 1px solid transparent;
  transition: 0.3s ease-in-out;
}

.thumb-item.active .thumb-img {
  border-color: #f9c933;
  box-shadow: 0 0 0 3px #f9c933;
}

.thumb-scroll {
  flex-wrap: nowrap;
}

/* Dark overlay */
.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Text overlay */
.overlay-text {
  position: absolute;
  bottom: 10%;
  left: 5%;
  right: 20px;
  z-index: 3;
}

.overlay-text h3 {
  font-weight: bold;
  font-size: 1.5rem;
}

.overlay-text p {
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* pill section */
/* new */
.pill-section {
  position: relative;
  background-color: #f6f0d8;
  border: 3px solid #222;
  border-radius: 224px;
  /* Closest multiple of 8 */
  padding: 40px 64px;
  /* 40px (5×8) and 64px (8×8) */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1184px;
  /* 148×8 = 1184 (closest multiple of 8) */
  margin: 80px auto;
  /* 80px = 10×8 */
  overflow: visible;
  box-shadow: 4px 4px 0 #222;
  height: 480px;
  /* already multiple of 8 (60×8) */
}

.pill-content {
  display: flex;
  align-items: center;
  gap: 64px;
  /* 64px = 8×8 */
  z-index: 1;
}

.image-container {
  max-width: 576px;
  /* 72×8 = 576 */
  height: 384px;
  /* 48×8 = 384 */
  border: 3px solid #222;
  border-radius: 176px;
  /* Closest multiple of 8 */
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 4px 4px 0 #222;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-content {
  max-width: 460px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  font-family: "Akira Expanded", sans-serif;
  margin-bottom: 1rem;
}

.text-content p {
  font-size: var(--font-base);
  line-height: var(--line-height-body);
  color: var(--secondary);
  margin-bottom: 1.5rem;
  letter-spacing: 0;
}

.ribbons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 2;
}

.ribbons.left {
  left: -20px;
}

.ribbons.right {
  right: -20px;
}

.ribbons img {
  width: 50px;
}

.walking-animation {
  animation: bobbing 1.2s infinite ease-in-out;
}

@keyframes bobbing {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Video Banner */
.video-banner {
  position: relative;
  width: 100%;
  height: 92vh;
  overflow: hidden;
}

.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* new change size */
.top-illustration {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 400px;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.illustration-container {
  position: relative;
  z-index: 3;
  margin-top: -60px;
}

.btn-load-more {
  background-color: transparent;
  border: none;
  color: #111;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-load-more:hover {
  color: #e14d2a;
}

.btn-load-more .icon {
  font-size: 1.1rem;
}

.btn-load-more .text {
  flex: 1;
  text-align: left;
}

.fs-drop-down {
  font-size: 0.7rem !important;
  padding: 3px 12px !important;
}

.dropdown-toggle::after {
  display: none;
}

/* Booking Form Styling */
.travel-booking-section .booking-form {
  overflow-x: auto;
  padding: 1rem 0;
}

.booking-field {
  background-color: #fffefa;
  /* min-width: 320px; */
  max-width: 320px;
  border: 2px solid var(--secondary);
}

.booking-field input[type="text"],
.booking-field input[type="date"] {
  font-size: 0.9rem;
  width: 100%;
  text-overflow: ellipsis;
}

.booking-field .form-label {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: var(--secondary);
}

.booking-field input::placeholder {
  font-size: 0.8rem;
  color: #222222;
}

#newsletter a {
  font-size: 0.8rem;
}

/* Newsletter Section Base Styling */
#newsletter {
  padding: 3rem 0;
}

#newsletter .inspiration-text h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  font-family: "Akira Expanded", sans-serif;
}

#newsletter .booking-field input[type="text"] {
  font-size: 1rem;
  width: 100%;
}

#newsletter .d-flex {
  align-items: stretch;
  /* allows children to grow equally */
}

#newsletter .booking-field {
  height: 100%;
}

#newsletter .booking-field input {
  padding: 0.6rem 1rem !important;
}

/* Optional enhancements */
#newsletter .booking-field input[type="text"] {
  font-size: 1rem;
}

/* General dot styles */
.slick-dots li button::before {
  font-size: 10px;
  color: var(--quaternary);
  opacity: 0.35;
}

/* Active dot for all sliders */
.slick-dots li.slick-active button::before {
  color: var(--quaternary);
  opacity: unset;
}

.inspiration-slider .slick-dots li button::before {
  font-size: 20px;
}

/* dot style for yellow dot */
.mobile-slider .slick-dots li button:before {
  font-size: 20px;
  color: var(--bg-warning);
  opacity: 0.35;
}

.mobile-slider .slick-dots li.slick-active button:before {
  color: var(--bg-warning);
  opacity: 1;
  font-size: 20px;
}

/* catagory page */
.star-element {
  left: 16.5%;
  top: -50px;
  z-index: -1;
}
.star-element-video {
  left: 21%;
  top: -52px;
  z-index: -1;
}

.mic-element {
  left: 15%;
  top: -50px;
  z-index: -1;
}

/* Default (desktop) - Keep as is */
.carousel-item img {
  border-radius: 10rem;
  object-fit: cover;
  max-width: 90%;
  min-height: 400px;
}

/* Mobile view - make image oval vertical shape */
@media (max-width: 767.98px) {
  .scores .quiz_three_men{max-width:100%;}
  .videos .video-bg-cloud{bottom: -75px;}
  .carousel-item img {
    width: 80%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 7rem;
    min-height: 280px;
  }
  
}

#carouselExample {
  background: var(--bg-warning);
}

.carousel-control-next-icon {
  background-image: url("../../assets/images/eat-drink/right-arrow.svg");
}

.carousel-control-prev-icon {
  background-image: url("../../assets/images/eat-drink/left-arrow.svg");
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 12rem;
  height: 12rem;
}

.carousel-control-next {
  right: -15px;
}

.carousel-control-prev {
  left: -15px;
}

.custom-card-hover {
  box-sizing: content-box;
  /* Fixes the border collapsing */
}

.carousel-inner {
  text-align: center;
  /* ensures h4 is centered */
}

/* Ensure text appears above overlay */
.para {
  z-index: 2;
  position: relative;
}

.bg-unset {
  background: unset;
}

.eat-drink-card {
  background: unset;
}

.cloud-1 {
  z-index: 1;
  top: 55%;
  width: 100%;
  height:100vh;
}
.podcast-cloud-1 {
  z-index: 1;
  top: 40%;
  width: 100%;
  height: 100vh;
}
.before-cloud-2-3 {
  z-index: 1;
  width: 100%;
  height: 220vh;
  top: 150%;
}

.cloud-2 {
  z-index: 1;
  width: 100%;
  height: 100vh;
}

.cloud-2-3 {
  z-index: 1;
  width: 100%;
 height: 100vh;
  top: 220%;
}

.cloud-4 {
  z-index: 1;
  width: 100%;
  height: 220vh;
}

.cloud-bg-2 {
  background: url('../../assets/images/eat-drink/cloud-2.svg');
  background-position: top;
  background-repeat: no-repeat;
}

.cloud-404 {
  z-index: 1;
  /* top: 40%; */
  width: 100%;
}

/* more cards */
.eat-drink-card {
  display: none;
}

.eat-drink-card.visible {
  display: block;
}

.category-card {
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  border-right: 8px solid var(--quaternary);
  border-bottom: 8px solid var(--quaternary);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.category-card:hover .card-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.category-card .card-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: 1px;
  margin: 0;
  padding: 0 20px;
}

/* category list */
.article-list-1 {
  width: 280px;
  height: 200px;
  object-fit: cover;
}

/* location page */
.pin {
  left: 20%;
  top: -50px;
  z-index: -1;
}

.people {
  max-width: 480px;
}

/* plan your trip */
.arrow-spin {
  /*left: 18%;
  top: -10px;
  z-index: -1;*/
  padding-top: 50px;
}

.article-link:hover h4 {
  text-decoration: underline;
}

/* article page */
.layout-8:hover h4 {
  text-decoration: underline;
}

/* blog */
.blog-social-images {
  max-width: 40px;
}

/* podcast page */
.podcast-card {
  border-radius: 20px !important;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
  border: 0px solid transparent;
  min-height: 540px;
}

.podcast-card .card-header-custom {
  position: relative;
  padding: 30px 20px;
  color: #fff;
  font-weight: bold;
  border-bottom: none;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  z-index: 1;
}

.podcast-card .card-header-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-color, rgba(0, 0, 0, 0.5));
  opacity: 0.85;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.podcast-card .card-header-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: -2;
  transition: opacity 0.3s ease;
}

.podcast-card .card-header-custom h5 {
  font-size: 14px;
  margin-bottom: 10px;
}

.podcast-card .card-header-custom h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
}

.podcast-card .card-body {
  padding: 20px;
}

.podcast-card .card-body h6 {
  font-weight: 700;
  margin-bottom: 10px;
  min-height: 50px;
}

.podcast-card .card-footer {
  border-top: none;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  background: #fff;
}

.podcast-card .card-footer a {
  font-size: 10px;
}

.podcast-card .card-footer i {
  margin-right: 5px;
}

/* Theme variations (color + background image) */
.bg-blue {
  --overlay-color: #2cb8e2;
  --hover-color: #1eb6e9;
}

.bg-yellow-podcast {
  --overlay-color: #f8ca33;
  --hover-color: #f5c443;
}

.bg-orange {
  --overlay-color: #ff6432;
  --hover-color: #ff5722;
}

.bg-blue .card-header-custom::after {
  background-image: url("../../assets/images/podcast-page/slider-1.png");
}

.bg-yellow-podcast .card-header-custom::after {
  background-image: url("../../assets/images/podcast-page/slider-1.png");
}

.bg-orange .card-header-custom::after {
  background-image: url("../../assets/images/podcast-page/slider-1.png");
}

/* Hover Effects */
.podcast-card:hover {
  border-right: 8px solid var(--hover-color);
  border-bottom: 8px solid var(--hover-color);
  transform: translateY(-5px);
}

.podcast-card:hover .card-header-custom::after {
  opacity: 1;
}

/* Swiper Pagination Styles - target swiper directly */
.mySwiper .swiper-pagination-bullet {
  background: #888;
  opacity: 1;
}

.mySwiper .swiper-pagination-bullet-active {
  background: #333;
}

.mySwiper .swiper-pagination {
  position: relative !important;
  margin-top: 20px;
  text-align: center;
}

.swiper-backface-hidden .swiper-slide {
  padding: 30px 0;
}

.hover-card {
  border-radius: 12px;
  overflow: hidden;
  /* background: #fff; */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* border: 2px solid transparent; */
}

.hover-card-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 87, 34, 0.3);
  color: #fff;
  border-radius: 50%;
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.hover-card-body {
  border-top: transparent;
  border-left: transparent;
  border-radius: 0 0 12px 12px;
  background: #fff;
}

/* .hover-card:hover {
  transform: translateY(-6px);
  box-shadow: 8px 8px 0px 0px #ff5722,
    1px 1px 0px 0px #ff5722,
    1.5px 1.5px 0px 0px #ff5722,
    3px 3px 0px 0px #ff5722,
    3px 3px 0px 0px #ff5722;
} */

.hover-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 87, 34, 0.6);
}

/* video card */
.video-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 450px;
}

.video-page-overlay {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.external-video-title {
  display: none;
}

.outer-frame:hover .external-video-title {
  position: absolute;
  bottom: 50px;
  right: 16px;
  color: white !important;
  font-size: 16px;
  text-align: right;
  font-weight: 500;
  border-radius: 8px;
  line-height: 1.4;
  padding: 8px;
  background: var(--secondary);
  display: block;
}

.custom-player-container:fullscreen .external-video-title {
  display: none !important;
}

.custom-player-container:fullscreen .hd-badge {
  display: none !important;

}

.episode-card img {
  border-radius: 8px 8px 0 0;
}

.video-card .card-body {
  background: #fff;
  border-radius: 0 0 8px 8px;
}

.video-card:hover .play-btn {
  background: rgba(255, 87, 34, 0.4);
}

.hover-card .hover-card-body h6 {
  min-height: 62px;
}

/* video section */
/* Outer border frame */
.outer-frame {
  border: 2px solid var(--quaternary);
  padding: 8px;
  background: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  /* prevents any bleed */
}

.custom-player-container {
  position: relative;
  width: 100%;
  /* max-width: 850px; */
  background: white;
  border: 8px solid var(--quaternary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* ✅ keeps border inside width */
}

/* Video section */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 2.5;
  background: #000;
   /*min-height: 250px;
      max-height: 540px; */
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-js {
  width: 100% !important;
  height: 100% !important;
}

.video-js .vjs-tech {
  object-fit: cover !important;
}

/* Hide default video.js controls */
.video-js .vjs-control-bar {
  display: none !important;
}

/* Big play button (YouTube style) */
.vjs-big-play-button {
  background: #ff2a00 !important;
  border-radius: 50%;
  width: 120px !important;
  height: 120px !important;
  border: none !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.vjs-big-play-button:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.vjs-big-play-button .vjs-icon-placeholder:before {
  font-size: 60px !important;
  color: white;
}

/* Video title */
.video-title {
  position: absolute;
  bottom: 50px;
  left: 51.5%;
  transform: translateX(-50%);
  color: white;
  font-size: 22px;
  text-align: left;
  font-weight: 500;
  width: 90%;
  line-height: 1.4;
}

/* Control Bar */
.custom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #e0e0e0;
  gap: 10px;
}

.control-left,
.control-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.custom-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.custom-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  transition: 0.3s ease;
}

progress {
  width: 100%;
  height: 6px;
  border-radius: 5px;
  overflow: hidden;
  background: #ddd;
  appearance: none;
}

progress::-webkit-progress-bar {
  background-color: #f1eae0;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, #ff6f3d, #ff9169);
}

progress::-moz-progress-bar {
  background: linear-gradient(90deg, #ff6f3d, #ff9169);
}

/* HD badge */
.hd-badge {
  background: red;
  color: white;
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 2px;
  position: absolute;
  bottom: 35px;
  right: 8px;
}

.overlay-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  width: 120px;
  height: 120px;
}

.circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: #FE0000;
  margin: auto;
  transform: scale(1);
}

.circle.pulse {
  animation-timing-function: ease;
  animation: pulse 2s infinite;
  background-color: rgba(255, 87, 34, 0.6);
}

.wrapper svg {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 5;
  transition: all 0.3s;
  width: 100px;
  height: 100px;
  transform: scale(1.2);
}

.wrapper svg:hover {
  cursor: pointer;
  fill: #ffffff;
  stroke: #ffffff;
  transform: scale(1.4);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.fullscreen-hint {
  position: fixed;
  bottom: 40px;
  right: 50%;
  transform: translateX(50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  padding: 16px 32px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

.fullscreen-hint.show {
  opacity: 1;
}


/* video sliders */
.video-slider .slick-slide {
  display: block;
  padding: 16px;
}

.video-slider.d-lg-none.slick-initialized.slick-slider.slick-dotted {
  margin: 0 -16px;
  padding: 16px 0;
}

.videos-all .slick-slide {
  display: block;
  padding: 16px;
}

.videos-all.d-lg-none.slick-initialized.slick-slider.slick-dotted {
  margin-bottom: 30px;
  margin: 0 -16px;
  padding: 16px 0;
}

/* cookies */
#gdpr {
  padding: 20px;
  background: #0e0000;
  color: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 999
}

#gdpr p {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 0;
  text-align: center;
  width: 65%;
}

#gdpr p a {
  color: #fff
}

#gdpr .btn-primary {
  color: #5F2836;
  border: 1px solid transparent;
  display: inline-block;
  background: #fff;
  padding: 2px 5px 2px 5px;
  /*font-size: 17px;*/
}


/* widget */
.video-slider .slick-dots li button::before {font-size: 20px;}
.videos-all .slick-dots li button::before {font-size: 20px;}
 
 .quiz_three_men {
  position: relative;
  top: 22px;
  max-width: 420px;
}
.quiz_three_men_loc {
      position: relative;
      top: 12px;
}
.opacity-1{opacity: 1;}
.podcast-social-media:first-child a{margin-left:16px;}


body {
  padding-top: 96px;
}

.link_underline:hover{text-decoration: underline;}
.featured_first img, .featured_second img{max-height: 240px;}
.featured_third img{max-height: 260px;}
.container-max-v1 {
  width: 90%;
  max-width: 840px;
  margin: 0 auto;
  position: relative;
  z-index: 9;
}
.figure-h{max-width: 860px;}

.dropdown-submenu {
  position: relative;
}
 
.dropdown-menu {
  padding: 0;
  border-radius: 0;
}
 
.dropdown-item {
  background: none;
  color: #fff;
  white-space: normal;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;  
  font-weight: 600;
  /* padding: 4px 8px; */

}
 
.dropdown-item:last-child {
  border-bottom: none;
}
 
.dropdown-item:hover {
  background: none;
  color: #2cb8e2;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;  
  font-weight: 600;
  /* padding: 4px 8px; */
}
 
.drawer-menu li {
  border-bottom: none;
}
 

 
.arrow-trigger {
  cursor: pointer;
  font-size: 1.2em;
  transition: transform 0.2s ease;
}
 
.arrow-trigger.rotate-down {
  transform: rotate(90deg);
}
 

 
@media (min-width: 1200px) {
 
  /* Show first-level dropdown */
  .dining-hover:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }
 
  /* Submenu hover */
  .dropdown-submenu:hover > .submenu {
    display: block;
    background-color: #000;
    border: 2px solid #fff;
    animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  }
 
  .submenu {
    display: none;
    position: static;
    width: 100%;
    padding-left: 20px;
    background: #000;
    border: none;
    box-shadow: none;
  }
 
  .dropdown-menu {
    transition: all 0.2s ease;
  }
}
 

 
@media (max-width: 1199px) {
 
  .dropdown-menu.show {
    width: 100%;
    position: relative;
    border: none;
    background-color: var(--secondary) !important;
  }
 
  .dropdown-menu .submenu {
    display: none;
    padding-left: 20px;
    background: #f9f9f9;
    border: none;
    box-shadow: none;
    width: 100%;
  }
 
  .dropdown-menu .submenu.show {
    display: block;
  }
}
 

 
.submenu .dropdown-item:hover,
.submenu .dropdown-item.active {
  color: #2cb8e2;
  background-color: transparent;
}
 

 
@keyframes shadow-pop-br {
  0% {
    box-shadow: 0 0 #ffffff;
    transform: translate(0, 0);
  }
  100% {
    box-shadow:
      1px 1px #ffffff,
      2px 2px #ffffff,
      3px 3px #ffffff,
      4px 4px #ffffff,
      5px 5px #ffffff;
    transform: translate(-5px, -5px);
  }
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #000;
}
/* 1. Default state for the first card when the page loads */
.inspiration-slider .first-card .card-title-overlay {opacity: 1;box-shadow: 8px 8px 0px 0px #ff5722;}
 
/* 2. Hide the first card's active state ONLY when the parent slider is hovered */
.inspiration-slider:hover .first-card .card-title-overlay {opacity: 0;box-shadow: none;}
 
/* 3. Apply active state to ANY card (including the first one) when specifically hovered */
.inspiration-slider .slider-card:hover .card-title-overlay {opacity: 1 !important; /* !important ensures it overrides the rule above */
  box-shadow: 8px 8px 0px 0px #ff5722 !important;
}
 
/* Ensure other cards are hidden by default */
.inspiration-slider .slider-card:not(.first-card) .card-title-overlay {opacity: 0;}
/* Active & Hover States locations*/
.trip-slider .trip-image-main.active-default,.trip-slider .trip-image-main:hover {box-shadow: 8px 8px 0px 0px #ff5722 !important;}.trip-slider .trip-image-main.active-default .card-title-overlay,
.trip-slider .trip-image-main:hover .card-title-overlay {opacity: 1 !important;}
.trip-slider .trip-image-main.active-default .trip-image,.trip-slider .trip-image-main:hover .trip-image {transform: scale(1.05) !important;}.trip-slider:hover .trip-image-main.active-default:not(:hover) {box-shadow: none !important;}
.trip-slider:hover .trip-image-main.active-default:not(:hover) .card-title-overlay {opacity: 0 !important;}
.trip-slider:hover .trip-image-main.active-default:not(:hover) .trip-image {transform: scale(1) !important;}
.fs-7 {font-size: 0.8rem;}
.instagram_media:hover{color:rgb(44, 184, 226);}
.youtube_media:hover{color:rgb(248, 202, 52);}
.spotify_media:hover{color:rgb(255, 100, 50);}
.text-copyright{color:#878376 !important;--bs-text-opacity: 1;}
.content_trim p {
   line-height: 1.5;
}
.you-go-cloud{top: -10%;}
.cloud-podcasts{top: 330px;}
.video-cloud{top: 350px;}
.video-bg-cloud{bottom: -450px;}
.single-cloud{top: 150px;}
.banner-bg {backface-visibility: hidden;will-change: opacity, transform;}




 .custom-drawer {
    --cyan: #00bcd4;
    --border: rgba(255,255,255,0.07);
    --text-sub: rgba(255,255,255,0.55);
    --text-indent: rgba(255,255,255,0.82);
    background: #0e0e0e !important;
    font-family: 'Inter', sans-serif;
    max-width: 100%;
    width: 100% !important;
  }

  .custom-drawer .offcanvas-header {
    height: 52px;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #0e0e0e;
    position: relative;
    z-index: 10;
  }

  .custom-drawer .drawer-logo {
    height: 28px;
    width: auto;
  }

  /* Viewport + track */
  .custom-drawer .offcanvas-body {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  .mb-slider-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .mb-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
  }

  .mb-panel {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    background: #000;
    display: flex;
    flex-direction: column;
  }
  .mb-panel::-webkit-scrollbar { display: none; }

  /* ── Panel 1: main items ── */
  .hamburger-mob .nav-item {
    list-style: none;
  }

  .hamburger-mob .nav-item > a.drawer-link,
  .hamburger-mob .nav-item > a.drawer-link:hover { background: #000; }
  .hamburger-mob .nav-item > a.drawer-link:active { background: #000; }
  .hamburger-mob .nav-item > a.drawer-link.active { color: var(--cyan); }

  /* Items with children get cyan trigger styling */
  /*.hamburger-mob .nav-item.dropdown-submenu > a.drawer-link {
    font-weight: 500;
    color: var(--cyan);
  }*/
  .hamburger-mob .nav-item.dropdown-submenu > a.drawer-link .arrow-trigger {
    font-size: 20px;
    color: var(--cyan);
    line-height: 1;
    transition: transform 0.2s;
  }

  /* hide default fa icon, replaced below */
  .hamburger-mob .drawer-link .fa-angle-right::before { content: "›"; font-family: inherit; font-style: normal; font-size: 20px; }

  /* ── Panel 2: sub-items ── */
  .mb-panel2-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
  }
  .mb-panel2-header:hover { background: rgba(255,255,255,0.03); }

  .mb-back-arrow {
    color: var(--cyan);
  }

  .mb-panel2-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--cyan);
  }

  .mb-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
  }
  .mb-sub-list::-webkit-scrollbar { display: none; }
  .mb-sub-list { scrollbar-width: none; }

  .mb-sub-list .dropdown-item {
    padding: 0 !important;
    background: transparent !important;
  }

  .mb-sub-list .dropdown-item a.dropdown-link,
  .mb-sub-list li > a.dropdown-link {
    display: flex;
    align-items: center;
    padding: 14px 20px 14px 34px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-indent);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, padding-left 0.2s;
    position: relative;
  }