/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =========================================================
   Base Typography + Global Mobile Defaults
   ========================================================= */
@media (max-width: 768px) {
  .elementor-slide-button,
  .elementor-button {
    width: 100%;
  }

  .home-page-slider-center p,
  .home-page-slider-center h2,
  .home-page-slider-center h1,
  .hero-slider-center p,
  .hero-slider-center h2,
  .hero-slider-center h1 {
    text-align: center;
  }
}

ul.elementor-nav-menu--dropdown a,
ul.elementor-nav-menu--dropdown a:focus,
ul.elementor-nav-menu--dropdown a:hover {
  border-left: none !important;
}

/* =========================================================
   Mobile Sliding Menu (Off-canvas Navigation)
   ========================================================= */
@media (max-width: 1024px) {
  .sliding-menu .sub-arrow {
    display: none !important;
  }

  .sliding-menu .elementor-nav-menu__container,
  .sliding-menu .elementor-nav-menu--main,
  .sliding-menu .elementor-nav-menu {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0vh !important;
    width: 100% !important;
    position: relative !important;
    display: block !important;
    background: #191919 !important;
  }

  .sliding-menu .sub-menu {
    display: none !important;
    border: none !important;
    width: 100% !important;
    background: #191919 !important;
    padding-bottom: 120px !important;
    will-change: transform;
  }

  .sliding-menu .sub-menu.js-active-layer {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10000 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .sliding-menu .sub-menu.js-submenu-prepared {
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-in-out !important;
  }

  .sliding-menu .sub-menu.js-submenu-prepared.js-active-layer {
    transform: translateX(0) !important;
    height: 100%;
  }

  .sliding-menu .menu-item.js-menu-item {
    position: static !important;
  }

  .sliding-menu .js-menu-link {
    display: flex !important;
    align-items: center !important;
    background: #191919 !important;
    color: #ffffff !important;
    font-family: "Din", sans-serif !important;
    border-top: 1px solid #484848 !important;
    border-left: 0;
  }

  .sliding-menu .js-menu-link--first {
    border-top: none !important;
  }

  .sliding-menu .js-menu-link--top {
    font-size: 24px !important;
    padding: 24px 0 !important;
  }

  .sliding-menu .js-menu-link--sub {
    font-size: 18px !important;
    padding: 16px 0 !important;
  }

  .sliding-menu .js-menu-label {
    flex-grow: 1;
    text-align: left;
    font-display: swap;
  }

  .sliding-menu .js-menu-arrow-icon {
    height: 16px;
    width: auto;
    display: block;
  }

  .sliding-menu .js-submenu-title {
    padding: 8px 0 16px;
    color: #ffffff;
    font-family: "Din", sans-serif;
    font-weight: 600;
    font-size: 24px;
  }

  .sliding-menu .js-back-button {
    background: #424242;
    padding: 16px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: "Din", sans-serif;
    font-weight: 600;
    font-size: 18px;
    border-top: 1px solid #484848;
  }

  .sliding-menu .js-back-icon {
    height: 16px;
    width: auto;
    margin-right: 12px;
  }
}

/* Hide third-party toast UI that should never render on site */
.toast-mm,
.toast-mm *,
.toast-mm-banner,
.toast-mm-menu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   Hero Slider + Pagination Dots
   ========================================================= */
.hero-pagination
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination {
  display: flex !important;
  width: 100% !important;
  left: 0 !important;
  bottom: 10px !important;
  padding: 0 25px !important;
  gap: 10px !important;
  transform: none !important;
}

.number-thumbnail p {
  margin-bottom: 0;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600 !important;
}

.hero-pagination
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination
  .swiper-pagination-bullet {
  flex: 1 !important;
  height: 6px !important;
  width: auto !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 60px !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.hero-pagination
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination
  .swiper-pagination-bullet-active {
  background: #ffffff !important;
}

.hero-slider .swiper-slide-inner {
  max-width: 1400px;
}

/* =========================================================
   Button Icon Enhancements
   ========================================================= */
/* Add right-arrow icon to Elementor buttons inside .arrow-next-btn */
.arrow-next-btn .elementor-button {
  display: inline-flex;
  align-items: center;
}

.arrow-next-btn .elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Slide widget CTA (div.elementor-button.elementor-slide-button) */
.arrow-next-btn .elementor-button.elementor-slide-button::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/ArrowRight-1.svg")
    no-repeat center / contain;
}

/* Standard Elementor button widget (a.elementor-button > .elementor-button-content-wrapper) */
.arrow-next-btn .elementor-button .elementor-button-content-wrapper::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/ArrowRight-1.svg")
    no-repeat center / contain;
}

/* =========================================================
   Carousel Arrow Styling (Enabled vs Disabled States)
   ========================================================= */
.elementor-widget-loop-carousel
  .elementor-swiper-button.elementor-swiper-button-next
  svg,
.elementor-widget-loop-carousel
  .elementor-swiper-button.elementor-swiper-button-prev
  svg,
.elementor-widget-loop-carousel
  .elementor-swiper-button.elementor-swiper-button-prev:hover
  svg,
.elementor-widget-loop-carousel
  .elementor-swiper-button.elementor-swiper-button-next:hover
  svg,
.elementor-widget-loop-carousel
  .elementor-swiper-button.elementor-swiper-button-prev:hover
  svg {
  fill: none;
}

.elementor-swiper-button-prev svg path,
.elementor-swiper-button-next svg path {
  stroke: #ffffff;
  transition: stroke 0.2s ease;
}

.elementor-swiper-button-prev:not(.swiper-button-disabled) svg path,
.elementor-swiper-button-next:not(.swiper-button-disabled) svg path,
.elementor-swiper-button-prev:not(.swiper-button-disabled):hover svg path,
.elementor-swiper-button-next:not(.swiper-button-disabled):hover svg path,
.elementor-swiper-button-prev:not(.swiper-button-disabled):focus svg path,
.elementor-swiper-button-next:not(.swiper-button-disabled):focus svg path {
  stroke: #ffffff !important;
}

.elementor-swiper-button-prev.swiper-button-disabled,
.elementor-swiper-button-next.swiper-button-disabled {
  border-radius: 6px !important;
  background: var(--Light-Light-Grey, #f5f5f5) !important;
  opacity: 1 !important;
  pointer-events: none;
}

.elementor-swiper-button-prev.swiper-button-disabled svg path,
.elementor-swiper-button-next.swiper-button-disabled svg path {
  stroke: #b8b9b8 !important;
}

.elementor-swiper-button-prev.swiper-button-disabled:hover,
.elementor-swiper-button-next.swiper-button-disabled:hover,
.elementor-swiper-button-prev.swiper-button-disabled:focus,
.elementor-swiper-button-next.swiper-button-disabled:focus {
  background: var(--Light-Light-Grey, #f5f5f5) !important;
}

.elementor-swiper-button-prev.swiper-button-disabled:hover svg path,
.elementor-swiper-button-next.swiper-button-disabled:hover svg path,
.elementor-swiper-button-prev.swiper-button-disabled:focus svg path,
.elementor-swiper-button-next.swiper-button-disabled:focus svg path {
  stroke: #b8b9b8 !important;
}

/* =========================================================
   Event / Hero Banner Media + Overlay Layers
   ========================================================= */
.event-banner p {
  max-width: 800px;
}

p {
  font-weight: 350 !important;
}

.event-image-carousel-banner
  .elementor-widget-image-carousel
  .swiper
  .swiper-slide
  figure {
  line-height: inherit;
  height: 90vh !important;
}

.event-image-carousel-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #03050580;
  z-index: 2;
  pointer-events: none;
}

.event-image-carousel-banner .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-carousel-banner
  .elementor-widget-image-carousel
  .swiper
  .swiper-slide
  figure {
  line-height: inherit;
  height: 100vh !important;
}

.image-carousel-banner .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 1025px) {
  .home .image-carousel-banner .swiper-slide-image {
    height: 100vh !important;
    height: 100dvh !important;
  }
}

.package-image-carousel.elementor-widget-image-carousel,
.package-image-carousel.elementor-widget-image-carousel
  .elementor-image-carousel-wrapper,
.package-image-carousel.elementor-widget-image-carousel
  .elementor-image-carousel,
.package-image-carousel.elementor-widget-image-carousel .swiper-wrapper,
.package-image-carousel.elementor-widget-image-carousel .swiper-slide,
.package-image-carousel.elementor-widget-image-carousel .swiper-slide-inner,
.package-image-carousel.elementor-widget-image-carousel
  .swiper-slide-inner
  > figure {
  height: 100vh !important;
}

.package-image-carousel.elementor-widget-image-carousel
  .swiper-slide-inner
  > figure {
  line-height: inherit;
}

.package-image-carousel.elementor-widget-image-carousel .swiper-slide-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Parent wrapper for slider + overlay content */
.elementor-element.elementor-element-4314fa7a {
  position: relative;
}

.image-carousel-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #03050580;
  z-index: 2;
  pointer-events: none;
}

/* Repeated .event-banner-content declarations intentionally stack
   to override Elementor inline positioning in different templates. */
.event-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1400px;
  z-index: 3;
  text-align: left;
  padding: 0 25px;
  box-sizing: border-box;
}

.event-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.event-banner-content .e-con-inner {
  align-items: flex-start;
  text-align: left;
}

.event-banner-content p {
  max-width: 800px;
}

/* Strong override for this specific Elementor container instance */
.event-banner-content {
  left: 50% !important;
}

.event-banner-content {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  --position: absolute;
  --justify-content: center;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* =========================================================
   Shared Carousel Controls + Media Carousel Layout
   ========================================================= */
.media-carousel img.swiper-slide-image {
  height: 500px;
  object-fit: cover;
  object-position: center;
}

:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
  background-color: var(--e-global-color-primary);
  border-radius: 10px;
  padding: 12px;
  transition-duration: 0.25s;
  z-index: 2;
}

.elementor-swiper-button-prev:not(.swiper-button-disabled),
.elementor-swiper-button-next:not(.swiper-button-disabled),
.elementor-swiper-button-prev:not(.swiper-button-disabled):hover,
.elementor-swiper-button-next:not(.swiper-button-disabled):hover,
.elementor-swiper-button-prev:not(.swiper-button-disabled):focus,
.elementor-swiper-button-next:not(.swiper-button-disabled):focus {
  background-color: var(--Gold, #a69162) !important;
  color: #ffffff !important;
}

@media (min-width: 768px) {
  .elementor-swiper-button-prev,
  .elementor-swiper-button-next {
    display: none;
  }

  .team-member-slider .elementor-swiper-button-prev,
  .team-member-slider .elementor-swiper-button-next {
    display: flex !important;
  }

  .testimonial-carousel .elementor-swiper-button-prev,
  .testimonial-carousel .elementor-swiper-button-next {
    display: flex !important;
  }
}

/* Container for the pagination dots */
.media-carousel .swiper-pagination {
  background: #f5f5f5;
  padding: 8px 16px;
  border-radius: 50px;
  display: inline-flex;
  width: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: -30px !important;
  align-items: center;
  gap: 8px;
}

/* Individual dots (bullets) */
.media-carousel .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #b0b0b0;
  opacity: 1;
  margin: 0 !important;
}

/* The active dot */
.media-carousel .swiper-pagination-bullet-active {
  background: #555555;
}

@media (max-width: 768px) {
  .media-carousel .elementor-image-carousel-wrapper {
    position: relative;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
  }

  .media-carousel img.swiper-slide-image {
    height: 300px;
  }

  .media-carousel .swiper-pagination {
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    transform: none !important;
    width: auto !important;
  }
}

.e-n-accordion-item:not([open]) summary {
  border-radius: 12px !important;
}

.mediagallery-section {
  overflow: hidden;
}

/* Apply these styles only to tablet and desktop (768px and above) */
@media (min-width: 769px) {
  .mediagallery-section {
    overflow-x: clip;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 120px,
      black calc(100% - 120px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 120px,
      black calc(100% - 120px),
      transparent 100%
    );
  }

  /* Allow slides to peek outside the widget container */
  .mediagallery-section .elementor-main-swiper {
    overflow: visible !important;
  }

  .media-carousel .elementor-image-carousel-wrapper {
    overflow: visible;
  }
}

/* Per-carousel arrow offsets */
.media-carousel .swiper .elementor-swiper-button-prev {
  top: -45px !important;
}

.media-carousel .swiper .elementor-swiper-button-next {
  left: 60px !important;
  top: -45px !important;
}

.hero-slider p {
  font-size: 18px !important;
  max: width 400px !important;
}

/* Center the active slide manually */
.media-carousel .swiper-wrapper {
  transform: translate3d(calc(-50% + 25%), 0, 0);
}

/* =========================================================
   Section Containers + Swiper Overflow Behavior
   ========================================================= */
@media (max-width: 768px) {
  body.single-package
    header.elementor-location-header
    .elementor-element-7134cc2 {
    background: #191919 !important;
  }

  .hero-slider p {
    font-size: 16px !important;
  }
}

.elementor-icon-wrapper {
  align-items: center;
  justify-content: center;
  display: flex;
}

.team-member-slider .swiper,
.testimonials-section .swiper,
.experiences-carousel-section .swiper {
  overflow: visible;
  position: relative;
  z-index: 1;
}

.team-member-section,
.testimonials-section,
.experiences-carousel-section {
  overflow-x: clip;
}

@media (min-width: 769px) {
  .testimonial-carousel,
  .elementor-element-c878a67 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: visible !important;
  }

  .testimonial-carousel .swiper,
  .testimonial-carousel .swiper-wrapper,
  .elementor-element-c878a67 .swiper,
  .elementor-element-c878a67 .swiper-wrapper {
    overflow: visible !important;
  }

  .testimonial-carousel .swiper-slide,
  .elementor-element-c878a67 .swiper-slide {
    width: 700px !important;
    margin-right: 15px !important;
    transform: none !important;
    opacity: 1;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
  }

  .testimonial-carousel .swiper-slide > .e-con-boxed.e-parent,
  .elementor-element-c878a67 .swiper-slide > .e-con-boxed.e-parent {
    padding: 55px !important;
  }

  .testimonial-carousel .swiper-slide .elementor-element-dc4f2eb,
  .elementor-element-c878a67 .swiper-slide .elementor-element-dc4f2eb {
    margin-top: auto;
  }
}

/* =========================================================
   Gravity Forms UI Theme
   ========================================================= */
.gform_wrapper .toggle-segmented .ginput_container_radio .gfield_radio {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  border: none;
}

.gform_wrapper .toggle-segmented .gchoice {
  flex: 1 1 0%;
  margin: 0;
  padding: 0;
  display: flex;
}

.gform_wrapper .toggle-segmented input.gfield-choice-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gform_wrapper .toggle-segmented .gchoice label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 12px 5px;
  cursor: pointer;
  border-radius: 8px;
  background-color: transparent;
  font-weight: 600;
  margin: 0;
  text-align: center;
  width: 100%;
  transition: background-color 0.2s ease;
}

.gform_wrapper .toggle-segmented input.gfield-choice-input:checked + label {
  background-color: #a69162;
  color: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
}

.gform_wrapper .toggle-segmented legend.gfield_label {
  display: none;
}

.gform_wrapper .gfield--type-text,
.gform_wrapper .gfield--type-email,
.gform_wrapper .gfield--type-phone,
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  align-self: stretch;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #b8b9b8;
  background: #f5f5f5;
}

.gform-footer.gform_footer.top_label {
  margin-top: 15px;
}

.gform_wrapper .gfield_label {
  color: #363636;
  font-family: "Din", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}

.gform_wrapper .ginput_container {
  width: 100%;
}

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  box-shadow: none;
  outline: none;
  font-family: "Din", sans-serif;
  font-size: 15px;
  block-size: initial;
  line-height: initial;
  color: #363636;
}

.gform_wrapper .gfield select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/CaretDown.svg");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
  color: #ababab;
  font-family: "Din", Sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.3px;
  opacity: 1;
}

.gform_wrapper .gfield .gfield_description {
  display: none;
}

.gform-theme--foundation .gform_fields {
  /* column-gap: 10px !important; */
  gap: 15px;
}

.gform_button.button {
  border-radius: 12px !important;
  background: var(--Gold, #a69162) !important;
  width: 100% !important;
  padding: 16px !important;
  color: var(--White, #fff) !important;
  font-family: "Din" !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: -0.3px !important;
}

.gform_wrapper .gform_heading .gform_title,
.gform_wrapper .gform_heading .gform_description {
  display: none !important;
}

/* =========================================================
   Post Content + Rich Text Styling
   ========================================================= */
.elementor-post-info__terms-list {
  color: white;
}

.white-background-before {
  position: relative;
}

.white-background-before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 2;
}

.white-background-before > * {
  position: relative;
  z-index: 3;
}

.single-post .post-content h2 {
  color: var(--950, #363636);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.64px;
  margin-bottom: 45px;
}

.single-post .post-content p {
  color: var(--Grey, #484848);
  font-size: 18px;
  font-style: normal;
  font-weight: 350;
  line-height: 26px;
  letter-spacing: -0.36px;
  margin-bottom: 45px;
  margin-top: 0;
}

.single-post .post-content figure {
  margin-bottom: 45px;
}

.single-post .post-content .wp-block-quote {
  padding: 16px;
  border-left: 2px solid #a69162;
  margin: 0;
}

/* =========================================================
   Utility Classes
   ========================================================= */
.two-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.four-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-800 {
  max-width: 800px !important;
}

.w-400 {
  max-width: 400px !important;
}

.angled-overlay {
  position: relative;
  overflow: hidden;
}

.angled-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 200px;
  height: 200px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    #d1c7b1 0%,
    #d1c7b1 25%,
    rgba(209, 199, 177, 0) 95%
  );
  clip-path: polygon(
    25% 0%,
    100% 0%,
    100% 75%,
    85% 90%,
    85% 15%,
    15% 15%,
    10% 15%
  );
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  transform-origin: top right;
}

.angled-overlay-sm {
  position: relative;
  overflow: hidden;
}

.angled-overlay-sm::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 150px;
  height: 150px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    #d1c7b1 0%,
    #d1c7b1 25%,
    rgba(209, 199, 177, 0) 95%
  );
  clip-path: polygon(
    25% 0%,
    100% 0%,
    100% 75%,
    85% 90%,
    85% 15%,
    15% 15%,
    10% 15%
  );
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  transform-origin: top right;
}

@media (max-width: 768px) {
  .angled-overlay::before {
    width: 180px;
    height: 180px;
  }

  .angled-overlay-sm::before {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================
   Header Layout Overrides (Desktop)
   ========================================================= */
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  display: none !important;
}

.elementor-button {
  text-align: center !important;
  align-items: center;
  justify-content: center;
}

@media (min-width: 769px) {
  .event-banner-content {
    padding-top: 120px;
  }

  .hide-mb {
    display: none !important;
  }

}

/* =========================================================
   Events Filter Bar + States
   ========================================================= */
.eventFilters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.eventFilters select,
.eventFilters input {
  display: flex;
  width: 250px !important;
  padding: 12px !important;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 6px !important;
  border: 1px solid var(--Light-Grey, #b8b9b8) !important;
  background: var(--Light-Light-Grey, #f5f5f5) !important;
  color: var(--Grey, #484848) !important;
  font-family: "" Din "" !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: -0.3px !important;
  min-width: 250px !important;
  box-shadow: none;
}

.eventFilters .event-filter-field {
  display: none;
}

.eventFilters .event-filter-field.is-active {
  display: block;
}

.eventFilters select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  color: #191919 !important;
  background-image: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/CaretDown.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}

.eventFilters input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  padding-right: 12px !important;
  line-height: 1.2 !important;
}

.eventFilters input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.eventFilters select:focus,
.eventFilters input:focus {
  outline: none;
  border-color: var(--Light-Grey, #b8b9b8);
}

.eventFilters-emptyState {
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #b8b9b8;
  border-radius: 6px;
  background: #f5f5f5;
}

.eventFilters-emptyState p {
  margin: 0;
  color: #191919;
  font-family: "Din", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.eventFilters-clear {
  margin-top: 0;
  background-color: var(--e-global-color-primary) !important;
  font-family: "Din", Sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  border-style: none !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.eventFilters-clear:hover {
  background-color: var(--e-global-color-primary) !important;
  color: #ffffff !important;
  text-decoration: none;
}

.eventFilters .eventFilters-clearInline:hover,
.eventFilters .eventFilters-clearInline:focus,
.eventFilters .eventFilters-clearInline:active {
  background-color: var(--e-global-color-primary) !important;
  font-family: "Din", Sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  border-style: none !important;
  border-radius: 8px !important;
  padding: 0 32px !important;
  max-height: 41px !important;
  height: 41px !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
}

.eventFilters-clearInline {
  align-self: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eventFilters-clear:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

/* =========================================================
   Header Nav Interactions
   ========================================================= */
.elementor-nav-menu .sub-arrow {
  padding: 5px;
}

.elementor-nav-menu .menu-item-has-children > .elementor-item .sub-arrow svg {
  transition: transform 0.25s ease;
  transform-origin: 50% 50%;
}

.elementor-nav-menu
  .menu-item-has-children:hover
  > .elementor-item
  .sub-arrow
  svg,
.elementor-nav-menu
  .menu-item-has-children
  > .elementor-item[aria-expanded="true"]
  .sub-arrow
  svg {
  transform: rotate(180deg);
}

@media (min-width: 1025px) {
  header.elementor-location-header
    .elementor-element-34e91d9
    .elementor-nav-menu
    > .menu-item
    > .elementor-item {
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  header.elementor-location-header
    .elementor-element-34e91d9
    .elementor-nav-menu:hover
    > .menu-item:not(:hover):not(.current-menu-item):not(
      :has(> .elementor-item[aria-expanded="true"])
    ):not(:has(> .elementor-item.highlighted)):not(
      :has(> .elementor-item.elementor-item-active)
    ):not(:has(> .sub-menu:hover)):not(
      :has(> .sub-menu[aria-expanded="true"])
    ):not(:has(> .sub-menu[aria-hidden="false"]))
    > .elementor-item {
    opacity: 0.5;
  }
}

.eventFilters.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* =========================================================
   Loop Grid Pagination + Card Interaction States
   ========================================================= */
.page-numbers {
  margin: 0 !important;
}

.elementor-widget-loop-grid .elementor-pagination {
  display: flex;
  gap: 32px;
  padding-top: 32px;
  align-items: center;
  justify-content: center;
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers {
  font-family: "Din", Sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.32px;
  color: var(--Light-Grey, #b8b9b8);
  text-decoration: none;
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.current {
  color: var(--Black, #191919);
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev,
.elementor-widget-loop-grid .elementor-pagination .page-numbers.next {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev[href],
.elementor-widget-loop-grid .elementor-pagination .page-numbers.next[href] {
  background: var(--Gold, #a69162);
  color: #ffffff;
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/ArrowLeft-2.svg");
  mask-image: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/ArrowLeft-2.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.next::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/ArrowRight-1.svg");
  mask-image: url("https://sportstravelhospitality.com/staging/wp-content/uploads/sites/12/2026/02/ArrowRight-1.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.elementor-widget-loop-grid
  .elementor-pagination
  .page-numbers.prev:not([href]),
.elementor-widget-loop-grid
  .elementor-pagination
  .page-numbers.next:not([href]) {
  background: var(--Light-Light-Grey, #f5f5f5);
  color: #b8b9b8;
  border-radius: 6px;
}

/* Location loop: 3 cols desktop, center final row if it has 2 cards */
.location-grid .elementor-loop-container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.location-grid .e-loop-item {
  flex: 0 1 calc((100% - 60px) / 3);
  min-width: 300px;
}

/* Subtle interactive states for cards and buttons */
.elementor-widget-loop-grid .e-loop-item {
  transition: box-shadow 0.2s ease;
}

.elementor-widget-loop-grid .e-loop-item:hover,
.elementor-widget-loop-grid .e-loop-item:focus-within {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

:is(
  a.elementor-button,
  button.elementor-button,
  .gform_button.button,
  .eventFilters-clear,
  .eventFilters .eventFilters-clearInline
) {
  transition: opacity 0.2s ease;
}

:is(
    a.elementor-button,
    button.elementor-button,
    .gform_button.button,
    .eventFilters-clear,
    .eventFilters .eventFilters-clearInline
  ):is(:hover, :focus-visible) {
  opacity: 0.75;
}

/* =========================================================
   Responsive Layout Tweaks
   ========================================================= */
@media (max-width: 1024px) {
  .location-grid .elementor-loop-container {
    gap: 20px;
  }

  .location-grid .e-loop-item {
    flex: 0 1 calc((100% - 20px) / 2);
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .location-grid .elementor-loop-container {
    gap: 15px;
  }

  .location-grid .e-loop-item {
    flex: 0 1 100%;
  }
}

@media (max-width: 768px) {
  body.package-single-post
    header.elementor-location-header
    .elementor-element-7134cc2 {
    background: var(--Black, #191919);
    position: relative !important;
    --position: relative;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .default-mobile {
    position: relative !important;
    --position: relative;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .eventFilters {
    flex-direction: column;
    width: 100%;
  }

  .eventFilters select,
  .eventFilters input,
  .eventFilters .event-filter-field,
  .eventFilters .eventFilters-clearInline {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Add `carousel-mobile-arrows` to any carousel widget/container for shared mobile arrow layout */
  .carousel-mobile-arrows .swiper,
  .carousel-mobile-arrows .e-n-carousel,
  .carousel-mobile-arrows .elementor-image-carousel-wrapper {
    position: relative;
    overflow: visible;
    padding-bottom: 0 !important;
  }

  .carousel-mobile-arrows .elementor-swiper-button-prev,
  .carousel-mobile-arrows .elementor-swiper-button-next {
    top: 0 !important;
    margin-top: 0 !important;
    z-index: 5;
    display: flex !important;
  }

  .carousel-mobile-arrows .elementor-swiper-button-prev {
    left: 0 !important;
    right: auto !important;
  }

  .testimonial-carousel .swiper-pagination {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    transform: none !important;
    width: auto !important;
  }

  .overflow-section {
    overflow: hidden;
  }
}

/* Desktop-only arrow visibility control utility */
/* Add `carousel-hide-arrows-desktop` to hide arrows on tablet/desktop */
@media (min-width: 768px) {
  .carousel-hide-arrows-desktop .elementor-swiper-button-prev,
  .carousel-hide-arrows-desktop .elementor-swiper-button-next {
    display: none !important;
  }

  .testimonial-carousel.carousel-hide-arrows-desktop
    .elementor-swiper-button-prev,
  .testimonial-carousel.carousel-hide-arrows-desktop
    .elementor-swiper-button-next {
    display: flex !important;
  }
}

/* =========================================================
   Miscellaneous Template/Widget Overrides
   ========================================================= */
.post-type-archive-job .cta-footer {
  display: none;
}

.job-categories span.elementor-post-info__terms-list-item {
  color: var(--Black, #191919);
  leading-trim: both;
  text-edge: cap;
  /* font-family: Din; */
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.28px;
  border-radius: 49px;
  background: #d1d1d1;
  padding: 8px 12px;
}

.elementor-button {
  border: none !important;
}

.e-loop-nothing-found-message {
  display: none;
}

.elementor-button-icon {
  order: 0;
}

.single-package .hide-single-package {
  display: none !important;
}

footer .elementor-nav-menu .menu-item a {
  font-weight: 350 !important;
}

@font-face {
  font-display: swap;
}

@media( min-width: 768px ) {
    .post-type-archive-job .elementor-342 .elementor-element.elementor-element-711e7eb,
    .post-type-archive-job .elementor-342 .elementor-element.elementor-element-38f1318 {
        --content-width: 1100px;
    }
}

/* =========================================================
   Sticky Header: Fixed Position + Scroll State
   ========================================================= */
/* Fixed header + dark fill on scroll */
header.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

header.elementor-location-header .elementor-element-7134cc2 {
  background: transparent;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Keep this broad because Elementor duplicates/stacks inner wrappers
   when sticky mode is active; this ensures all layers go dark on scroll. */
body.sth-header-scrolled header > div {
  background: #191919 !important;
}

/* Single package templates: force white nav text/icons on dark scrolled header */
.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .elementor-item,
.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .elementor-sub-item,
.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .elementor-item:focus,
.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .elementor-item:hover,
.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .elementor-item.elementor-item-active {
  color: #ffffff !important;
}

.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .sub-arrow
  svg,
.sth-header-scrolled:is(.single-package, .package-single-post)
  header.elementor-location-header
  .elementor-element-34e91d9
  .sub-arrow
  svg
  path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* =========================================================
   Adobe Fonts: Bahnschrift Typography
   ========================================================= */
:root {
  --sth-font-bahnschrift: "bahnschrift", sans-serif;
  --sth-font-bahnschrift-condensed: "bahnschrift-condensed", sans-serif;
  --sth-font-bahnschrift-semicondensed: "bahnschrift-semicondensed", sans-serif;
}

body,
body p,
body li,
body input,
body textarea,
body select,
body label,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-icon-box-description,
.elementor-post__excerpt,
.gform_wrapper,
.gform_wrapper .gfield_label,
.gform_wrapper .gchoice label,
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper button,
footer .elementor-nav-menu .menu-item a {
  font-family: var(--sth-font-bahnschrift) !important;
  font-weight: 400;
  font-style: normal;
}

b,
strong,
.elementor-widget-text-editor b,
.elementor-widget-text-editor strong,
.elementor-icon-box-description b,
.elementor-icon-box-description strong {
  font-family: var(--sth-font-bahnschrift) !important;
  font-weight: 700 !important;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.elementor-slide-heading,
.elementor-icon-box-title,
.elementor-post__title,
.elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--sth-font-bahnschrift) !important;
  font-style: normal;
}

.elementor-button,
.elementor-button .elementor-button-text,
.elementor-slide-button,
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .elementor-sub-item,
.js-menu-link,
.js-submenu-title,
.js-back-button,
.gform_wrapper .gform_button,
.job-categories span.elementor-post-info__terms-list-item {
  font-family: var(--sth-font-bahnschrift) !important;
  font-weight: 700 !important;
  font-style: normal;
}