@import "../css/theme.css";
@import "../css/header.css";
@import "../css/hero.css";
@import "../css/landing.css";
@import "../css/profile.css";
@import "../css/predictions.css";
@import "../css/footer.css";
@import "../css/modal.css";
@import "../css/common-pages.css";

#main {
  overflow: hidden;
  padding-top: 92px;
}

/* @media (min-width: 1439px) {
  .container-xl {
    max-width: 1320px;
  }
}

@media (min-width: 1200px) {
  .container-xl {
    max-width: 1180px;
  }
} */

@media (max-width: 1200px) {
  .title_h2 {
    margin-bottom: 30px;
  }
}

@media (min-width: 1200px) {
  .title_h2 {
    margin-bottom: 40px;
  }
}

/* css edted 5-jan-2024 */
.warning-box {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 11111;
  max-width: 460px;
  width: calc(100% - 20px);
}

.home-modal.warning-box {
  left: 0;
  right: 0;
  margin: auto;
}

.warning-box.profile-modal {
  position: static;
  width: 100%;
}

.warning-box svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.warning-box .btn-close {
  margin-left: auto;
}

.message-container span {
  line-height: 18px;
  display: inline-block;
}

.warning-box.alert-success svg path {
  fill: #19a119;
}

.profile-modal.alert-warning svg path {
  fill: #f5a40f;
}

.profile-modal.alert-warning.alert-danger svg path {
  fill: #d73838;
}

@media (max-width:767px) {
  .message-container span {
    font-size: 14px;
  }
}

/* Football Animation */
:root {
  --height: 244px;
  --bounce-speed: .75s;
  --bounce-speed-large: .55s;
}
.ball_animation {width: 252px; height: 350px; right: 30px; }
.footballs {height: 350px; }
.ball {
  height: 244px;
  width: 242px;
  position: absolute;
  left: -30px;
  top: 0;
  /* Bouncing animation */
  animation: bounce var(--bounce-speed-large) ease-in infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
  z-index: 3;
}
.shadow {
  border-radius: 100%;
  position: absolute;
  /* left: calc(40% - 200px / 2); */
  bottom: -114px;
  background-color: rgba(0, 0, 0, 0.2);
  filter: blur(4px);
  width: 200px;
  height: 15px;
  transform-origin: center;
  animation: shadow var(--bounce-speed) ease-in infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
  z-index: 2;
  /* shadow is below ball */
}
.shadow1 {
  border-radius: 100%;
  position: absolute;
  left: 10px;
  bottom: -120px;
  background-color: rgba(0, 0, 0, 0.2);
  filter: blur(4px);
  width: 100px;
  height: 10px;
  transform-origin: center;
  animation: shadow1 var(--bounce-speed) ease-in infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
  /* animation-delay: 1s; */
  z-index: 2;
  /* shadow is below ball */
}
.shadow2 {
  border-radius: 100%;
  position: absolute;
  left: 20px;
  bottom: -170px;
  background-color: rgba(0, 0, 0, 0.2);
  filter: blur(4px);
  width: 120px;
  height: 10px;
  transform-origin: center;
  animation: shadow1 var(--bounce-speed) ease-in infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 1s;
  z-index: 2;
  /* shadow is below ball */
}

.ball1 {
  height: 137px;
  width: 136px;
  position: absolute;
  left: 0;
  top: 0;
  animation: bounce1 var(--bounce-speed) ease-in infinite;
  /* animation-delay: 1s; */
  animation-fill-mode: both;
  animation-direction: alternate;
}
.ball2 {
  width: 175px;
  height: 174px;
  position: absolute;
  left: 0;
  top: -20px;
  animation: bounce1 var(--bounce-speed) ease-in infinite;
  animation-delay: 1s;
  animation-fill-mode: both;
  animation-direction: alternate;
}

@media (max-width:1200px) and (min-width:767.99px){
  .football_group {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
}
@media (max-width:991px){
  .ball {left: 0;}
  .shadow { width: 150px; left: calc(50% - 150px / 2); bottom: -120px; }
  .footballs {left: 30px; width: 160px;}
}

@media (max-width:575px){
  .ball_animation {right:auto; left: 0; width: 162px;}
  .shadow { bottom: -40px; }
  .ball {height: 160px; width: 160px; left: 0px;}
  .ball1 {height: 100px; width: 100px;}
  .ball2 {height: 130px; width: 130px;}

  .shadow1 {bottom: -105px;}
  .shadow2 {bottom: -130px;}
}

@keyframes bounce {
  90% {
    transform: scaleX(100%) scaleY(100%);
  }
  100% {
    transform: scaleX(100%) scaleY(90%);
    top: calc(100% - 244px/2)
  }
}

@keyframes bounce1 {
  90% {
    transform: scaleX(100%) scaleY(100%);
  }
  100% {
    transform: scaleX(100%) scaleY(90%);
    top: 100%;
  }
}

@keyframes shadow {
  from {
    opacity: 1;
    transform: scale(50%);
  }
  to {
    opacity: 0.6;
    transform: scale(80%);
  }
}

@keyframes shadow1 {
  from {
    opacity: 0;
    transform: scale(50%);
  }
  to {
    opacity: 0.6;
    transform: scale(80%);
  }
}