.elementor-17 .elementor-element.elementor-element-4cd13ea{--display:flex;--position:fixed;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;top:0px;}body:not(.rtl) .elementor-17 .elementor-element.elementor-element-4cd13ea{left:0px;}body.rtl .elementor-17 .elementor-element.elementor-element-4cd13ea{right:0px;}.elementor-17 .elementor-element.elementor-element-dd63639{width:100%;max-width:100%;top:0px;}body:not(.rtl) .elementor-17 .elementor-element.elementor-element-dd63639{left:0px;}body.rtl .elementor-17 .elementor-element.elementor-element-dd63639{right:0px;}.elementor-17 .elementor-element.elementor-element-aaca14f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-e8be43d{--display:flex;--min-height:132px;--overflow:auto;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-e8be43d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-17 .elementor-element.elementor-element-be79476{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-17 .elementor-element.elementor-element-9dca638{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 48px) 0px;text-align:center;}.elementor-17 .elementor-element.elementor-element-9dca638 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:50px;font-weight:800;text-transform:uppercase;line-height:77px;letter-spacing:-0.6px;word-spacing:13px;color:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-9dca638 .elementor-heading-title a{transition-duration:0s;}.elementor-17 .elementor-element.elementor-element-55f4a93{margin:-24px 0px calc(var(--kit-widget-spacing, 0px) + 48px) 0px;text-align:center;}.elementor-17 .elementor-element.elementor-element-55f4a93 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:27px;font-weight:400;font-style:normal;line-height:1px;letter-spacing:-0.9px;color:#B6B6B6;}.elementor-17 .elementor-element.elementor-element-55f4a93 .elementor-heading-title a{transition-duration:0s;}.elementor-17 .elementor-element.elementor-element-296fa41{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button{background-color:#FF007C47;font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:800;text-transform:uppercase;fill:#FFFFFF;color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-style:solid;border-color:#FF319499;border-radius:150px 150px 150px 150px;padding:010px 0100px 010px 0100px;}.elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button:hover, .elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button:focus{background-color:#FF248D96;color:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-4afb268{margin:-26px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-17 .elementor-element.elementor-element-4afb268.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button:hover svg, .elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-758f856{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:73px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-13d0c9f.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:50px;}.elementor-17 .elementor-element.elementor-element-13d0c9f{width:100%;max-width:100%;z-index:0;}.elementor-17 .elementor-element.elementor-element-13d0c9f .elementor-main-swiper{height:70px;width:100%;}.elementor-17 .elementor-element.elementor-element-13d0c9f .elementor-main-swiper .swiper-slide{border-radius:0px;}.elementor-17 .elementor-element.elementor-element-13d0c9f .elementor-swiper-button{font-size:20px;}.elementor-17 .elementor-element.elementor-element-13d0c9f .elementor-main-swiper:not(.elementor-thumbnails-swiper) .elementor-carousel-image{background-size:contain;}#elementor-lightbox-slideshow-13d0c9f .elementor-video-container{width:50%;}.elementor-17 .elementor-element.elementor-element-fc902d1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:0300px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-7bb911e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-efbb26f .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-17 .elementor-element.elementor-element-cfc4f32{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-c65bdc1 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-17 .elementor-element.elementor-element-446ccfd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-1d09fc6 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-17 .elementor-element.elementor-element-1269339{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:179px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-53fcc07{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-d57caec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-d57caec.e-con{--e-con-transform-scale:1.2;}.elementor-17 .elementor-element.elementor-element-ceea29c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-229662b{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-17 .elementor-element.elementor-element-229662b .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:500;font-style:normal;line-height:1px;letter-spacing:1px;color:#B6B6B6;}.elementor-17 .elementor-element.elementor-element-229662b .elementor-heading-title a{transition-duration:0s;}.elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button{background-color:#FF007C47;font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:800;text-transform:uppercase;fill:#FFFFFF;color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-style:solid;border-color:#FF319499;border-radius:150px 150px 150px 150px;padding:010px 0100px 010px 0100px;}.elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button:hover, .elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button:focus{background-color:#FF248D96;color:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-f71dcc7{margin:11px 11px calc(var(--kit-widget-spacing, 0px) + 11px) 11px;}.elementor-17 .elementor-element.elementor-element-f71dcc7.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button:hover svg, .elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-a517766{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-33bf0ff.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-bdf57f6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.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-17 .elementor-element.elementor-element-3d3e4f7{margin:0px -9px calc(var(--kit-widget-spacing, 0px) + -18px) 0px;}.elementor-17 .elementor-element.elementor-element-3d3e4f7.elementor-element{--align-self:flex-end;}.elementor-17 .elementor-element.elementor-element-3d3e4f7 img{width:57%;border-style:none;}.elementor-17 .elementor-element.elementor-element-7f467c0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-26d7b8c{margin:0px 76px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:end;}.elementor-17 .elementor-element.elementor-element-26d7b8c .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:80px;font-weight:600;line-height:40px;letter-spacing:1.5px;word-spacing:0px;}.elementor-17 .elementor-element.elementor-element-258bdc6{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-17 .elementor-element.elementor-element-df91a0e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-8c99080{width:100%;max-width:100%;}.elementor-17 .elementor-element.elementor-element-a6b3e1b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-3fbb56b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-ca46f31{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-e8be43d{--width:97.098%;}.elementor-17 .elementor-element.elementor-element-7bb911e{--width:100%;}.elementor-17 .elementor-element.elementor-element-cfc4f32{--width:50%;}.elementor-17 .elementor-element.elementor-element-446ccfd{--width:50%;}}@media(max-width:1024px){.elementor-17 .elementor-element.elementor-element-13d0c9f.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-17 .elementor-element.elementor-element-258bdc6{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-13d0c9f.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-17 .elementor-element.elementor-element-258bdc6{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for button, class: .elementor-element-4afb268 */.elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button {
    /* Your exact button color */
    --my-button-color: #ff248d; 
    
    box-shadow: 
        /* The Outer Glow */
        0 0 18px 0px var(--my-button-color), 
        
        /* The Inner Glow (Using your exact color, slightly transparent) */
        inset 0 0 15px 0px rgba(255, 36, 141, 0.6); 
        
    transition: box-shadow 0.3s ease-in-out;
}

/* Makes the glow slightly brighter and wider when you hover over it */
.elementor-17 .elementor-element.elementor-element-4afb268 .elementor-button:hover {
    box-shadow: 
        0 0 25px 4px var(--my-button-color), 
        inset 0 0 10px 1px rgba(255, 36, 141, 0.9);
}/* End custom CSS */
/* Start custom CSS for media-carousel, class: .elementor-element-13d0c9f */.elementor-widget-media-carousel .swiper-wrapper {
    transition-timing-function: linear !important;
}/* End custom CSS */
/* Start custom CSS for video, class: .elementor-element-efbb26f */<style>
  /* --- WRAPPER & LAYOUT --- */
  .infinite-video-gallery {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust how tall you want the section to be */
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 30px; /* Space between columns */
    padding: 50px 0;
    
    /* Creates the fade-out effect at the top and bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }

  /* --- THE SCROLLING COLUMNS --- */
  .scrolling-column {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between cards vertically */
    /* 30s is the speed. Lower number = faster scroll */
    animation: scrollVertical 30s linear infinite; 
  }

  /* Stagger the middle column so they don't look perfectly lined up */
  .col-middle {
    margin-top: -150px; 
  }

  /* Pause ALL columns when you hover over the gallery area */
  .infinite-video-gallery:hover .scrolling-column {
    animation-play-state: paused;
  }

  @keyframes scrollVertical {
    0% { transform: translateY(0); }
    /* Moves the column up exactly halfway, creating a seamless loop */
    100% { transform: translateY(-50%); } 
  }

  /* --- THE VIDEO CARDS --- */
  .v-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Card Sizes */
  .card-vertical { width: 260px; height: 460px; }
  .card-landscape { width: 380px; height: 220px; }

  /* Initial Tilts */
  .tilt-left { transform: rotate(-4deg); }
  .tilt-right { transform: rotate(4deg); }

  /* Hover State: Straighten, Scale, and Glow */
  .v-card:hover {
    transform: scale(1.08) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 15px 40px rgba(255, 36, 141, 0.3), 0 0 15px rgba(255, 36, 141, 0.5); /* Pink glow */
    border-color: rgba(255, 36, 141, 0.8);
  }

  /* The Image inside the card */
  .v-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  /* --- OVERLAY ELEMENTS (Play Button & Icon) --- */
  .play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 36, 141, 0.85); /* Your pink color */
    backdrop-filter: blur(4px);
    width: 65px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* The little white triangle */
  .play-btn-overlay::after {
    content: '';
    display: block;
    border-left: 14px solid white;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px; /* Centers triangle visually */
  }

  .v-card:hover .play-btn-overlay {
    background-color: rgba(255, 36, 141, 1);
    transform: translate(-50%, -50%) scale(1.1);
  }

  /* Top Right Floating Icon (like the SVG in your video) */
  .floating-icon {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Just a placeholder icon shape */
  .floating-icon::before {
    content: 'S'; /* Replace with your actual SVG or text later */
    font-weight: bold;
    color: black;
  }
</style>

<div class="infinite-video-gallery">

  <div class="scrolling-column col-left">
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1616423640778-28d1b53229bd?auto=format&fit=crop&w=400&q=80" alt="Video 1">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1596704017254-9b121068fb31?auto=format&fit=crop&w=400&q=80" alt="Video 2">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=400&q=80" alt="Video 3">
      <div class="play-btn-overlay"></div>
    </div>

    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1616423640778-28d1b53229bd?auto=format&fit=crop&w=400&q=80" alt="Video 1">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1596704017254-9b121068fb31?auto=format&fit=crop&w=400&q=80" alt="Video 2">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=400&q=80" alt="Video 3">
      <div class="play-btn-overlay"></div>
    </div>
  </div>

  <div class="scrolling-column col-middle">
    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1533130061792-64b345e4a833?auto=format&fit=crop&w=800&q=80" alt="Video 4">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-left">
      <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=80" alt="Video 5">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?auto=format&fit=crop&w=800&q=80" alt="Video 6">
      <div class="play-btn-overlay"></div>
    </div>

    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1533130061792-64b345e4a833?auto=format&fit=crop&w=800&q=80" alt="Video 4">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-left">
      <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=80" alt="Video 5">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?auto=format&fit=crop&w=800&q=80" alt="Video 6">
      <div class="play-btn-overlay"></div>
    </div>
  </div>

  <div class="scrolling-column col-right">
    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?auto=format&fit=crop&w=400&q=80" alt="Video 7">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1516280440502-61f53a1a5b48?auto=format&fit=crop&w=400&q=80" alt="Video 8">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=400&q=80" alt="Video 9">
      <div class="play-btn-overlay"></div>
    </div>

    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?auto=format&fit=crop&w=400&q=80" alt="Video 7">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1516280440502-61f53a1a5b48?auto=format&fit=crop&w=400&q=80" alt="Video 8">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=400&q=80" alt="Video 9">
      <div class="play-btn-overlay"></div>
    </div>
  </div>

</div>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc902d1 */<style>
  /* --- WRAPPER & LAYOUT --- */
  .infinite-video-gallery {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust how tall you want the section to be */
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 30px; /* Space between columns */
    padding: 50px 0;
    
    /* Creates the fade-out effect at the top and bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }

  /* --- THE SCROLLING COLUMNS --- */
  .scrolling-column {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between cards vertically */
    /* 30s is the speed. Lower number = faster scroll */
    animation: scrollVertical 30s linear infinite; 
  }

  /* Stagger the middle column so they don't look perfectly lined up */
  .col-middle {
    margin-top: -150px; 
  }

  /* Pause ALL columns when you hover over the gallery area */
  .infinite-video-gallery:hover .scrolling-column {
    animation-play-state: paused;
  }

  @keyframes scrollVertical {
    0% { transform: translateY(0); }
    /* Moves the column up exactly halfway, creating a seamless loop */
    100% { transform: translateY(-50%); } 
  }

  /* --- THE VIDEO CARDS --- */
  .v-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Card Sizes */
  .card-vertical { width: 260px; height: 460px; }
  .card-landscape { width: 380px; height: 220px; }

  /* Initial Tilts */
  .tilt-left { transform: rotate(-4deg); }
  .tilt-right { transform: rotate(4deg); }

  /* Hover State: Straighten, Scale, and Glow */
  .v-card:hover {
    transform: scale(1.08) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 15px 40px rgba(255, 36, 141, 0.3), 0 0 15px rgba(255, 36, 141, 0.5); /* Pink glow */
    border-color: rgba(255, 36, 141, 0.8);
  }

  /* The Image inside the card */
  .v-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  /* --- OVERLAY ELEMENTS (Play Button & Icon) --- */
  .play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 36, 141, 0.85); /* Your pink color */
    backdrop-filter: blur(4px);
    width: 65px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* The little white triangle */
  .play-btn-overlay::after {
    content: '';
    display: block;
    border-left: 14px solid white;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px; /* Centers triangle visually */
  }

  .v-card:hover .play-btn-overlay {
    background-color: rgba(255, 36, 141, 1);
    transform: translate(-50%, -50%) scale(1.1);
  }

  /* Top Right Floating Icon (like the SVG in your video) */
  .floating-icon {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Just a placeholder icon shape */
  .floating-icon::before {
    content: 'S'; /* Replace with your actual SVG or text later */
    font-weight: bold;
    color: black;
  }
</style>

<div class="infinite-video-gallery">

  <div class="scrolling-column col-left">
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1616423640778-28d1b53229bd?auto=format&fit=crop&w=400&q=80" alt="Video 1">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1596704017254-9b121068fb31?auto=format&fit=crop&w=400&q=80" alt="Video 2">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=400&q=80" alt="Video 3">
      <div class="play-btn-overlay"></div>
    </div>

    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1616423640778-28d1b53229bd?auto=format&fit=crop&w=400&q=80" alt="Video 1">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1596704017254-9b121068fb31?auto=format&fit=crop&w=400&q=80" alt="Video 2">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=400&q=80" alt="Video 3">
      <div class="play-btn-overlay"></div>
    </div>
  </div>

  <div class="scrolling-column col-middle">
    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1533130061792-64b345e4a833?auto=format&fit=crop&w=800&q=80" alt="Video 4">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-left">
      <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=80" alt="Video 5">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?auto=format&fit=crop&w=800&q=80" alt="Video 6">
      <div class="play-btn-overlay"></div>
    </div>

    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1533130061792-64b345e4a833?auto=format&fit=crop&w=800&q=80" alt="Video 4">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-left">
      <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=80" alt="Video 5">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-landscape tilt-right">
      <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?auto=format&fit=crop&w=800&q=80" alt="Video 6">
      <div class="play-btn-overlay"></div>
    </div>
  </div>

  <div class="scrolling-column col-right">
    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?auto=format&fit=crop&w=400&q=80" alt="Video 7">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1516280440502-61f53a1a5b48?auto=format&fit=crop&w=400&q=80" alt="Video 8">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=400&q=80" alt="Video 9">
      <div class="play-btn-overlay"></div>
    </div>

    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?auto=format&fit=crop&w=400&q=80" alt="Video 7">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-left">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1516280440502-61f53a1a5b48?auto=format&fit=crop&w=400&q=80" alt="Video 8">
      <div class="play-btn-overlay"></div>
    </div>
    <div class="v-card card-vertical tilt-right">
      <div class="floating-icon"></div>
      <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=400&q=80" alt="Video 9">
      <div class="play-btn-overlay"></div>
    </div>
  </div>

</div>/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f71dcc7 */.elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button {
    /* Your exact button color */
    --my-button-color: #ff248d; 
    
    box-shadow: 
        /* The Outer Glow */
        0 0 18px 0px var(--my-button-color), 
        
        /* The Inner Glow (Using your exact color, slightly transparent) */
        inset 0 0 15px 0px rgba(255, 36, 141, 0.6); 
        
    transition: box-shadow 0.3s ease-in-out;
}

/* Makes the glow slightly brighter and wider when you hover over it */
.elementor-17 .elementor-element.elementor-element-f71dcc7 .elementor-button:hover {
    box-shadow: 
        0 0 25px 4px var(--my-button-color), 
        inset 0 0 10px 1px rgba(255, 36, 141, 0.9);
}/* End custom CSS */