.elementor-5721 .elementor-element.elementor-element-9aee17a{--display:flex;--position:fixed;top:0px;--z-index:9999;}body:not(.rtl) .elementor-5721 .elementor-element.elementor-element-9aee17a{left:0px;}body.rtl .elementor-5721 .elementor-element.elementor-element-9aee17a{right:0px;}.elementor-5721 .elementor-element.elementor-element-f5d2ce9{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(0, 1fr);--grid-auto-flow:row;}.elementor-5721 .elementor-element.elementor-element-6b3c9d9{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5721 .elementor-element.elementor-element-c7c59f7 img{border-radius:0px 0px 0px 0px;}.elementor-5721 .elementor-element.elementor-element-0bd55c2 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-5721 .elementor-element.elementor-element-b7e9851{--display:flex;--min-height:1000px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;}.elementor-5721 .elementor-element.elementor-element-b98d518{--display:flex;--min-height:800px;}.elementor-5721 .elementor-element.elementor-element-b98d518:not(.elementor-motion-effects-element-type-background), .elementor-5721 .elementor-element.elementor-element-b98d518 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-5721 .elementor-element.elementor-element-b98d518.e-con{--e-con-transform-translateY:-5px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5721 .elementor-element.elementor-element-695a7d6{--e-transform-translateY:-8px;--e-transform-scale:0.98;column-gap:0px;text-align:left;}.elementor-5721 .elementor-element.elementor-element-695a7d6 p{margin-block-end:10px;}.elementor-5721 .elementor-element.elementor-element-bf8bf4b{--e-transform-translateY:-41px;}.elementor-5721 .elementor-element.elementor-element-d11f655{--display:flex;}.elementor-5721 .elementor-element.elementor-element-5c7545d{--display:flex;--position:fixed;--min-height:100px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;top:0px;}.elementor-5721 .elementor-element.elementor-element-5c7545d.e-con{--e-con-transform-translateY:335px;}body:not(.rtl) .elementor-5721 .elementor-element.elementor-element-5c7545d{left:0px;}body.rtl .elementor-5721 .elementor-element.elementor-element-5c7545d{right:0px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-5721 .elementor-element.elementor-element-84c0fbf{--e-transform-translateX:-808px;--e-transform-translateY:0px;}.elementor-5721 .elementor-element.elementor-element-84c0fbf .elementor-icon-wrapper{text-align:left;}.elementor-5721 .elementor-element.elementor-element-84c0fbf.elementor-view-stacked .elementor-icon{background-color:#FFFFFF7D;}.elementor-5721 .elementor-element.elementor-element-84c0fbf.elementor-view-framed .elementor-icon, .elementor-5721 .elementor-element.elementor-element-84c0fbf.elementor-view-default .elementor-icon{color:#FFFFFF7D;border-color:#FFFFFF7D;}.elementor-5721 .elementor-element.elementor-element-84c0fbf.elementor-view-framed .elementor-icon, .elementor-5721 .elementor-element.elementor-element-84c0fbf.elementor-view-default .elementor-icon svg{fill:#FFFFFF7D;}.elementor-5721 .elementor-element.elementor-element-84c0fbf .elementor-icon{font-size:30px;}.elementor-5721 .elementor-element.elementor-element-84c0fbf .elementor-icon svg{height:30px;}.elementor-5721 .elementor-element.elementor-element-e636016{--e-transform-translateX:424px;--e-transform-translateY:-64px;}.elementor-5721 .elementor-element.elementor-element-e636016 .elementor-icon-wrapper{text-align:right;}.elementor-5721 .elementor-element.elementor-element-e636016.elementor-view-stacked .elementor-icon{background-color:#FFFFFF7D;}.elementor-5721 .elementor-element.elementor-element-e636016.elementor-view-framed .elementor-icon, .elementor-5721 .elementor-element.elementor-element-e636016.elementor-view-default .elementor-icon{color:#FFFFFF7D;border-color:#FFFFFF7D;}.elementor-5721 .elementor-element.elementor-element-e636016.elementor-view-framed .elementor-icon, .elementor-5721 .elementor-element.elementor-element-e636016.elementor-view-default .elementor-icon svg{fill:#FFFFFF7D;}.elementor-5721 .elementor-element.elementor-element-e636016 .elementor-icon{font-size:30px;}.elementor-5721 .elementor-element.elementor-element-e636016 .elementor-icon svg{height:30px;}.elementor-5721 .elementor-element.elementor-element-be4748b > .elementor-widget-container{margin:21px 0px 1px 0px;}.elementor-5721 .elementor-element.elementor-element-be4748b .section-title{text-align:center;}.elementor-5721 .elementor-element.elementor-element-be4748b .section-title span{background-color:var( --e-global-color-accent );}.elementor-5721 .elementor-element.elementor-element-be4748b .section-title h2{color:#FFFFFF;}.elementor-5721 .elementor-element.elementor-element-be4748b .section-title h2 span{color:var( --e-global-color-accent );}.elementor-5721 .elementor-element.elementor-element-bc92098{--e-image-carousel-slides-to-show:3;}.elementor-5721 .elementor-element.elementor-element-bc92098 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-5721 .elementor-element.elementor-element-bc92098 .elementor-swiper-button.elementor-swiper-button-next{font-size:50px;}.elementor-5721 .elementor-element.elementor-element-bc92098 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;}.elementor-5721 .elementor-element.elementor-element-bc92098 .elementor-image-carousel-caption{text-align:center;}@media(min-width:768px){.elementor-5721 .elementor-element.elementor-element-b7e9851{--width:120%;}}@media(max-width:1024px){.elementor-5721 .elementor-element.elementor-element-f5d2ce9{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-5721 .elementor-element.elementor-element-f5d2ce9.e-con{--e-con-transform-translateY:49px;}.elementor-5721 .elementor-element.elementor-element-f5d2ce9{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-9aee17a *//* This targets THIS container only */
.elementor-5721 .elementor-element.elementor-element-9aee17a{
  position: fixed;      /* pin the host to the viewport */
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  z-index: 2147483647;  /* practically max; above themes/headers/popups */
  pointer-events: none; /* the host never blocks clicks on page content */
}

/* Re-enable clicks for the interactive children */
.elementor-5721 .elementor-element.elementor-element-9aee17a .gg-burger,
.elementor-5721 .elementor-element.elementor-element-9aee17a .gg-drawer,
.elementor-5721 .elementor-element.elementor-element-9aee17a .gg-overlay{
  pointer-events: auto;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b3c9d9 *//* === CANVAS (left column) — FIXED ARROWS + SCROLL FADE + MEDIA NORMALIZE === */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9{
  /* Page-local variables */
  --page-max: 1600px;                 /* total content max width of the boxed shell */
  --canvas-w: min(1100px, 70vw);      /* canvas column width */
  --canvas-pad: 0px;                  /* inner L/R padding inside the canvas container */
  --arrow-gap: 12px;                  /* distance from canvas edge to arrow */
  --hit: 44px;                        /* clickable box size for arrow container */
  --icon: 22px;                       /* visual icon size */
  --icon-color: #ff2a2a;              /* arrow color */

  --radius: 12px;                     /* media corner radius */
  --v-gap: 24px;                      /* vertical gap between media */

  position: relative;
  min-width: 0;
  overflow: visible;
  isolation: isolate;

  /* scroll-linked animation timeline */
  view-timeline-name: --canvas;
  view-timeline-axis: block;
}

/* ---------------- MEDIA NORMALIZATION ---------------- */
/* NOTE: We REMOVE iframe here (critical) */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 img,
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 video{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--v-gap) 0;
  border-radius: var(--radius);
}

.elementor-5721 .elementor-element.elementor-element-6b3c9d9 video{
  object-fit: cover;
}

/* ---------------- RESTORE ELEMENTOR VIDEO PROPER SIZING ---------------- */
.elementor-widget-video .elementor-wrapper{
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100% !important;
  height: auto !important;
  overflow: hidden;
  border-radius: var(--radius); /* keep your rounded corners */
}

.elementor-widget-video .elementor-wrapper iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* ---------------- FIXED ARROWS (Elementor Icon widgets) ---------------- */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow{
  position: fixed !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  width: var(--hit);
  height: var(--hit);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease;
  animation: arrow-fade linear both;
  animation-timeline: --canvas;
  animation-range: entry 8% to exit 80%;
  will-change: opacity, transform;
}

/* Remove Elementor defaults */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow .elementor-widget-container,
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow .elementor-icon{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow .elementor-icon,
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow .elementor-icon i,
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow .elementor-icon svg{
  width: var(--icon);
  height: var(--icon);
  display: block;
  color: var(--icon-color);
  fill: currentColor;
  stroke: currentColor;
}

/* LEFT arrow — outside left edge */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow.left{
  left: calc(
    (100vw - min(var(--page-max), 100vw)) / 2
    - var(--arrow-gap)
    - var(--hit)
  );
}

/* RIGHT arrow — outside right edge */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow.right{
  left: calc(
    (100vw - min(var(--page-max), 100vw)) / 2
    + var(--canvas-w)
    + var(--arrow-gap)
  );
}

/* Hover effect */
.elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow:hover{
  transform: translateY(-50%) scale(1.08);
}

/* ---------------- FADE ANIMATION ---------------- */
@keyframes arrow-fade{
  0%   { opacity: 0; transform: translateY(-50%) scale(.92); }
  10%  { opacity: 1; transform: translateY(-50%) scale(1);   }
  80%  { opacity: 1; transform: translateY(-50%) scale(1);   }
  100% { opacity: 0; transform: translateY(-50%) scale(.92); }
}

/* Hide arrows on small screens */
@media (max-width: 1024px){
  .elementor-5721 .elementor-element.elementor-element-6b3c9d9 .arrow{ display: none; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b98d518 *//* === Rounded container background === */
.elementor-5721 .elementor-element.elementor-element-b98d518 {
  border-radius: 12px;      /* same value as your image radius */
  overflow: hidden;         /* clips inner background/image to match curve */
  background-color: #fff;   /* optional — adjust as needed */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* optional subtle depth */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b7e9851 *//* === FIXED-WITHIN-GRID SIDEBAR (stops at parent bottom) === */
.elementor-5721 .elementor-element.elementor-element-b7e9851{
  --header-h: 80px;            /* height of fixed header */
  --col-gap: 32px;             /* gap between canvas & sidebar */
  --page-max: 1600px;          /* boxed layout max width */
  --canvas-w: min(1100px, 70vw);
  --sidebar-w: 360px;

  position: sticky;
  top: var(--header-h);        /* sticks below header */
  align-self: start;

  /* scroll area inside parent grid only */
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* sidebar placement in grid */
  margin-left: var(--col-gap);
  width: var(--sidebar-w);
}

/* handle mobile layout */
@media (max-width: 1024px){
  .elementor-5721 .elementor-element.elementor-element-b7e9851{
    position: static;
    margin-left: 0;
    width: 100%;
    max-height: none;
    overflow: visible;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5d2ce9 *//* GRID PARENT — two columns like ArtStation */
.elementor-5721 .elementor-element.elementor-element-f5d2ce9{
  /* page-scoped variables (only for THIS container/page) */
  --header-h: 80px;   /* ← change to your fixed header height */
  --col-gap: 32px;
  --sidebar-w: 360px;

  display: grid;
  grid-template-columns: minmax(0, min(1920px, 70vw)) var(--sidebar-w);
  column-gap: var(--col-gap);

  width: 100%;
  max-width: 1600px;        /* optional page max */
  margin-inline: auto;

  /* keep everything below your fixed header */
  padding-top: var(--header-h);
  align-items: start;
  overflow: visible;        /* needed for sticky/absolute children */
}

@media (max-width: 1280px){
  .elementor-5721 .elementor-element.elementor-element-f5d2ce9{
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  }
}

@media (max-width: 1024px){
  .elementor-5721 .elementor-element.elementor-element-f5d2ce9{
    grid-template-columns: 1fr;    /* stack on tablet/mobile */
    row-gap: var(--col-gap);
    padding-top: 0;                /* usually not needed when stacked */
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5c7545d *//* Hidden by default */
.elementor-5721 .elementor-element.elementor-element-5c7545d .arrow{
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  will-change: opacity;
}

/* Visible when page scroll is between 20%–80% */
.elementor-5721 .elementor-element.elementor-element-5c7545d.is-active .arrow{
  opacity: 1;
  pointer-events: auto;
}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-bc92098 *//* ───────────────
   CARD BASE STYLE
   ─────────────── */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* Image hover animation */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide:hover img {
  transform: scale(1.05);
}

/* Red gradient overlay */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide::after {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 0, 0, 0.85), rgba(255, 0, 0, 0) 50%);
  opacity: 0;
  transition: all 0.6s ease;
  z-index: 1;
}
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide:hover::after {
  bottom: 0;
  opacity: 1;
}

/* Title (from image caption) */
.elementor-5721 .elementor-element.elementor-element-bc92098 .elementor-image-carousel-caption {
  position: absolute;
  bottom: 25px;
  left: 20px;
  right: 20px;
  color: #fff;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  z-index: 2;
}
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide:hover .elementor-image-carousel-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Category label — now per-card via data-title */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide::before {
  content: attr(data-title);        /* <-- pulls per-slide title */
  position: absolute;
  bottom: 100px;
  left: 20px;
  padding: 4px 10px;
  background: rgba(255, 0, 0, 0.9);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #fff;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  z-index: 3;
}
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* ───────────────
   HOVER ARROW PNG
   ─────────────── */

/* Position context for the arrow */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide > figure,
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide > a {
  position: relative;
}

/* The arrow itself (use your PNG file) */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide > figure::after,
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide > a::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px; /* size of arrow box */
  height: 44px;
  background: url('http://geargolem.com/wp-content/uploads/2025/10/Arrow_01.png')
              center / contain no-repeat;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  pointer-events: none;
  z-index: 4; /* above overlay & caption */
}

/* Show on hover */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide:hover > figure::after,
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide:hover > a::after {
  opacity: 1;
  transform: translateY(0);
  filter: drop-shadow(0 0 20px rgba(255,255,255,.25));
}

/* ------------------------------------------------------
   PER-CARD RED LABEL TEXT (NO JS)
   Target each slide by its Swiper index and set the label.
   Replace the example texts with your own.
   ------------------------------------------------------ */

/* Perrito */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide[data-swiper-slide-index="0"]::before {
  content: "Perrito";
}

/* Fps */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide[data-swiper-slide-index="1"]::before {
  content: "Unicycle Man";
}

/* Factory */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide[data-swiper-slide-index="2"]::before {
  content: "Exofactory";
}

/* Anime */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide[data-swiper-slide-index="3"]::before {
  content: "Frog Power";
}

/* Mobile_RPG */
.elementor-5721 .elementor-element.elementor-element-bc92098 .swiper-slide[data-swiper-slide-index="4"]::before {
  content: "Racing Game";
}

/* …add more as needed following the same pattern *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-87f2861 */<script>
/* Scope to this widget so it won't touch other carousels */
(function(){
  const root = document.currentScript.closest('.elementor-widget');

  function applyTitles() {
    const slides = root.querySelectorAll('.swiper-slide');
    slides.forEach(slide => {
      const img = slide.querySelector('img');
      if (!img) return;

      // Priority: data-title (if you add it to the image), else ALT text, else title attr
      const t = img.getAttribute('data-title') || img.getAttribute('alt') || img.getAttribute('title') || '';
      if (t) slide.setAttribute('data-title', t);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', applyTitles);
  } else {
    applyTitles();
  }

  // Re-apply if Elementor/Swiper updates slides dynamically
  new MutationObserver(applyTitles).observe(root, {childList:true, subtree:true});
})();
</script>

<style>
/* ------------------------------
   CARD BASE STYLE
------------------------------ */
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* ------------------------------
   IMAGE HOVER ANIMATION
------------------------------ */
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide:hover img {
  transform: scale(1.05);
}

/* ------------------------------
   RED GRADIENT OVERLAY
------------------------------ */
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide::after {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 0, 0, 0.85), rgba(255, 0, 0, 0) 50%);
  opacity: 0;
  transition: all 0.6s ease;
  z-index: 1;
}
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide:hover::after {
  bottom: 0;
  opacity: 1;
}

/* ------------------------------
   TITLE INSIDE RED BOX (PER SLIDE)
   The content is pulled from data-title that the script sets
------------------------------ */
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide::before {
  content: attr(data-title);   /* <-- per-slide value injected by the script */
  position: absolute;
  bottom: 100px;
  left: 20px;
  padding: 6px 12px;
  background: rgba(255, 0, 0, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #fff;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  z-index: 3;
}
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   CAPTION TEXT (DESCRIPTION)
------------------------------ */
.elementor-5721 .elementor-element.elementor-element-87f2861 .elementor-image-carousel-caption {
  position: absolute;
  bottom: 25px;
  left: 20px;
  right: 20px;
  color: #fff;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  font-size: 13px;   /* smaller text */
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  z-index: 2;
}
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide:hover .elementor-image-carousel-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   TOP-RIGHT ARROW ICON
------------------------------ */
.elementor-5721 .elementor-element.elementor-element-87f2861 .hover-arrow {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M16 32 L32 16" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M24 16h8v8" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>')
    center/22px 22px no-repeat;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease;
  pointer-events: none;
  z-index: 4;
}
.elementor-5721 .elementor-element.elementor-element-87f2861 .swiper-slide:hover .hover-arrow {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.25);
}
</style>/* End custom CSS */