.vid_actual{
    object-fit: none !important;
    width: 100%;
}

.vid_actual_p{
    object-fit: none !important;
}

.texty{
    color: #99A799 !important;
}

.texty2{
    color: #316B83 !important;
}


.backy{
    background-color: #316B83 !important;
}

.backy2{
    background-color: #EBD671 !important;
}

.backy3{
    background-color: #99A799 !important;
}

.btn-icony:active,
.btn-icony:focus,
.btn-icony:hover{
	color: gray !important;
    background-color: transparent !important;
}

.about_text{
    margin-top: 13%;
    font-size: 15px !important;
  }

.opacy{
    opacity: 50%;
}





  @media (max-width: 992px){

  .about_text{
    margin-top: 5% !important;
    margin-bottom: 5% !important;
    font-size: 15px !important;
  }

}


  /* Responsive, pure-CSS marquee */
  .marquee {
    --gap: 1.5rem;         /* space between items (matches .gap-4) */
    --duration: 30s;       /* overall speed; increase for slower scroll */
    --fade: 48px;          /* width of edge fade */
    position: relative;
    overflow: hidden;
  }

  /* edge fades (works in modern browsers incl. Safari via -webkit-mask)
  .marquee {
    mask-image: linear-gradient(to right, transparent, #000 var(--fade),
                                #000 calc(100% - var(--fade)), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade),
                                #000 calc(100% - var(--fade)), transparent);
  } */

  .marquee__track {
    gap: var(--gap);
    white-space: nowrap;
    flex-wrap: nowrap;
    min-width: max-content;
    animation: marquee-scroll var(--duration) linear infinite;
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused; /* pause on hover */
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* because content is duplicated */
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
  }

  /* Example: make badges a bit larger on small screens for readability */
  @media (max-width: 576px) {
    .marquee .badge { font-size: .95rem; }
  }

    /* Responsive typography for the overlay */
  .ticket-wrap{
    --title: clamp(1.5rem, 4vw + .5rem, 2.5rem);
    --subtitle: clamp(.9rem, 1.2vw + .4rem, 1.25rem);
    --label: clamp(.75rem, .8vw + .3rem, .95rem);
    --value: clamp(1rem, 2vw + .4rem, 1.75rem);
  }
  /* If your Bootstrap doesn't include object-fit helpers */
  .object-fit-contain{ object-fit: contain; }