#user-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 300px;
    width: 90%;
    background-color: #222;
    color: white;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, transform 0.5s;
    z-index: 9999;
    font-family: sans-serif;
    line-height: 1.3em;
    word-wrap: break-word;
    font-size: 14px;
  }

  #user-notification.show {
    opacity: 1;
    transform: translateY(0);
  }

  #user-location {
    margin-top: 5px;
    font-size: 0.85em;
    color: #bbb;
  }

  @media (max-width: 600px) {
    #user-notification {
      right: 10px;
      left: auto;
      top: 10px;
      padding: 10px 14px;
    }
  }

 body{height: auto;;background: url(https://sportplay.vercel.app/img/fondo-web.png) !important} @keyframes olympus{ from{ transform: translate(0)} to{ transform: translateY(10px)}} p{ font-family: "Poppins", sans-serif; font-size: 25px;} .link-a-ws{ padding: 1.3rem; color: white; border: 3px solid; width: 100% !important; display: flex; border-radius: 5px; justify-content: center; font-weight: bold; font-size: 18px !important; transition: .3s all ease-in;} .link-a-ws:hover{ border: 3px solid rgba(228, 227, 227, 0.541); color: white; transform: translateX(4px);} .buton{ color: #FFFFFF; padding: 2rem !important; letter-spacing: 3px; border-radius: 30px; font-size: 26px; font-weight: bold; font-family: 'Poppins'; text-transform: uppercase !important; transition: .3s all ease-in-out;} .olympus{animation: olympus alternate infinite 2s ease-in-out;}
.transform:hover{ transform: scale(1.1) !important;} .my-6{ margin-bottom: 6rem; margin-top: 6rem;} img{ width: 100%;} .buton:hover{ transform: scale(1.1);} @media screen and (max-width: 767px){ p{ font-size: 20px;} h1{ font-size: 60px !important;} .buton{ font-size: 15px; width: 100%;} .row-icons{ flex-direction: column !important;}}
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}
 .container2{ background: rgba(0,0,0,0.6); padding: 40px 5px 40px 5px; border-radius: 20px; text-align: center; color: #fff; width: auto; box-shadow: 0 0 20px rgba(0,0,0,0.7);} .container2 h1{ font-size: 22px; margin-bottom: 20px;} .container2 h2{ font-size: 18px; color: #c43cf3; margin-bottom: 20px;} input{ width: 100%; padding: 12px; margin-bottom: 20px; border: none; border-radius: 12px; font-size: 16px; text-align: center; outline: none;} .btn2{ background: linear-gradient(113.27deg, #0d6efd 15.04%, #198754 84.96%); color: #ffffff; font-family: "Bungee", sans-serif; font-size: 18px; border: none; border-radius: 16px; display: inline-flex
; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 0 18px rgba(19, 240, 46, 0.25), 0 0 10px rgba(22, 65, 26, 0.4) inset; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; animation: pulse 1s infinite ease-in-out; position: relative; overflow: hidden; text-align: center;} .btn2::before{ content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); transform: skewX(-20deg); animation: shine 2s infinite;} @keyframes pulse{ 0%, 100%{ transform: scale(1);}
50%{ transform: scale(1.09);}} @keyframes shine{ 0%{ left: -75%;}
100%{ left: 125%;}} .splide__progress__bar{ height: 3px; background: #ccc;}