/* ==========================================================
   Simple Horizontal Scroll for Elementor
   ----------------------------------------------------------
   HOW TO USE IN ELEMENTOR
   1) Add a Section or Container that will hold the horizontal
      area. Open its "Advanced" tab -> "CSS Classes" and type:
        horizontal-scroll-wrapper

   2) Inside it, add ONE Container (or Section) that will hold
      the "slides" as direct children. In ITS "Advanced" tab ->
      "CSS Classes" type:
        horizontal-scroll-track

   3) Inside the track, add one Container/Section PER slide.
      You do not need to add any class to the slides themselves,
      the CSS below targets them automatically.

   Works best with Elementor's newer "Container" element.
   A fallback selector is included for the legacy
   Section > .elementor-container > Column structure.
   ========================================================== */

.horizontal-scroll-wrapper {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

/* --- New Elementor Container element --- */
.horizontal-scroll-wrapper .horizontal-scroll-track {
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;

	/* hide scrollbar visually, scroll still works via JS/touch */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.horizontal-scroll-wrapper .horizontal-scroll-track::-webkit-scrollbar {
	display: none;
}
.horizontal-scroll-wrapper .horizontal-scroll-track > * {
	flex: 0 0 100vw;
	max-width: 100vw;
	height: 100%;
}

/* --- Legacy Section/Column fallback ---
   If "horizontal-scroll-track" ends up on an old-style Section,
   Elementor inserts a .elementor-container div between the
   section and the columns. This mirrors the same flex rules
   onto that inner container instead. */
.horizontal-scroll-wrapper .horizontal-scroll-track.elementor-section > .elementor-container {
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.horizontal-scroll-wrapper .horizontal-scroll-track.elementor-section > .elementor-container::-webkit-scrollbar {
	display: none;
}
.horizontal-scroll-wrapper .horizontal-scroll-track.elementor-section > .elementor-container > * {
	flex: 0 0 100vw;
	max-width: 100vw;
	height: 100%;
}