@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Moves by half the width (duplicated content) */
}
.animate-marquee {
    animation: marquee 40s linear infinite;
    display: flex;
    width: max-content;
}



@media screen and (min-width: 376px) and (max-width: 400px) {
.hero-container h1 {
  font-size: 2.2rem !important;
  margin-top: 2rem !important;
}

.hero-container p {
  font-size: 1rem !important;
  margin-top: 1rem !important;
}

 .phone-img {
  width: 90% !important;
  justify-content: center !important;
}

.phone-img img {
  width: 90% !important;
  max-width: 90% !important;
  max-height: 90vh !important;
}
} 

@media (min-width: 2000px){
  .image-on-the-right{
    width: 100% !important;
  }
  .btn-download a img{
    width: 18rem !important;
  }
  .hero-container a button{
    font-size: 2.5rem !important;
    padding: 1.5rem 3rem !important;
  }
  .hero-container p{
    font-size: 2.5rem !important;
    line-height: 3rem !important;
  }
  .hero-container h1{
    /* font-size: 6rem !important; */
  }
  #sponsor-marquee{
    font-size: 24px !important;
  }
  #slider-width{
    width: 98% !important;
  }
}

@media (max-width: 1600px) {
  .hero-container h1{
    /* font-size: 60px; */
  }
  .hero-container p:first-of-type {
    /* font-size: 24px !important; */
    /* margin-bottom: 20px; */
  }
  .hero-container p:nth-of-type(2) {
    /* font-size: 18px !important; */
    /* margin-bottom: 10px; */
  }
  /* .hero-container{
    margin-bottom: 30px !important;
  } */
  /* .hero-container a button{
    font-size: 20px;
    padding: 10px 15px !important;
  }
  .btn-download a img{
     width: 170px !important;
     margin-bottom: 40px;
  } */
  .image-on-the-right{
    /* margin-bottom: 70px !important; */
  }
}
@media (max-width: 1368px) {
  .hero-container h1{
    font-size: 50px !important;
    margin-top: 0px !important;
    margin-bottom: 5px !important;
  }
  .hero-container p:first-of-type {
    font-size: 20px !important;
    margin-bottom: 25px !important;
  }
  .hero-container p:nth-of-type(2) {
    font-size: 16px !important;
    margin-bottom: 20px !important;
  }
  .hero-container{
    margin-bottom: 0px !important;
  }
  .hero-container a button{
    font-size: 20px !important;
    padding: 8px 15px !important;
    margin-bottom: 10px !important;
  }
  .btn-download a img{
     width: 150px !important;
  }
  .image-on-the-right{
    margin-bottom: 30px !important;
  }
}
@media (max-width: 1318px) {
  .hero-container h1{
    /* font-size: 60px; */
    /* margin-top: 0px;
    margin-bottom: 15px !important; */
  }
  .hero-container p:first-of-type {
    /* font-size: 20px !important; */
    /* margin-bottom: 40px; */
  }
  .hero-container p:nth-of-type(2) {
    /* font-size: 16px !important;
    margin-bottom: 20px !important; */
  }
  .hero-container{
    /* margin-bottom: 0px !important; */
  }
  /* .hero-container a button{
    font-size: 20px;
    padding: 8px 15px !important;
    margin-bottom: 10px !important;
  }
  .btn-download a img{
     width: 150px !important;
  } */
  .image-on-the-right{
    /* width: 100% !important; */
    /* margin-bottom: 30px !important; */
  }
}
@media (max-width: 1280px) {
  .hero-container h1{
    /* font-size: 43px; */
    /* margin-top: 20px;
    margin-bottom: 5px !important; */
  }
  .hero-container p:first-of-type {
    /* font-size: 18px !important; */
    /* margin-bottom: 25px;
    line-height: 28px; */
  }
  .hero-container p:nth-of-type(2) {
    /* font-size: 15px !important;
    margin-bottom: 20px !important;
    line-height: 22px; */
  }
  .hero-container{
    /* margin-bottom: 0px !important; */
  }
  .hero-container a{
    /* margin-bottom: 5px !important; */
  }
  /* .hero-container a button{
    font-size: 16px;
    padding: 4px 10px !important;
    margin-bottom: 10px !important;
  }
  .btn-download a img{
     width: 120px !important;
  } */
  .image-on-the-right{
    /* width: 100% !important;
    margin-bottom: 30px !important; */
  }
}
@media (min-width: 1719px){
  .hero-container h1 {
    font-size: 70px !important;
  }
}
@media (min-width: 1199px){
  .hero-container h1 {
    font-size: 60px !important;
  }
}
@media (max-width: 1198px){
  .hero-container h1 {
    font-size: 40px !important;
  }
}
@media (min-width: 809px){
  .hero-container p:first-of-type {
    font-size: 24px !important;
  }
}
@media (max-width: 1024px) {
  .hero-container h1{
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 15px !important;
  }
  .hero-container p:first-of-type {
    font-size: 18px !important;
    margin-bottom: 25px;
    line-height: 26px;
  }
  .hero-container p:nth-of-type(2) {
    font-size: 15px !important;
    margin-bottom: 20px !important;
    line-height: 22px;
  }
  .hero-container{
    margin-bottom: 20px !important;
  }
  .hero-container a{
    margin-bottom: 5px !important;
  }
  .hero-container a button{
    font-size: 16px;
    padding: 4px 10px !important;
    margin-bottom: 10px !important;
  }
  .btn-download a img{
     width: 120px !important;
  }
  .image-on-the-right{
    width: 70% !important;
    margin-bottom: 30px !important;
    /* display: none; */
  }
}
@media (max-width: 800px) {
  .hero-container h1{
    font-size: 28px;
    margin-top: 20px !important;
    margin-bottom: 0px !important;
  }
  .hero-container p:first-of-type {
    font-size: 14px !important;
    margin-bottom: 20px;
    line-height: 20px;
  }
  .hero-container p:nth-of-type(2) {
    font-size: 13px !important;
    margin-bottom: 20px !important;
    line-height: 20px;
  }
  .hero-container{
    margin-bottom: 0px !important;
  }
  .hero-container a{
    margin-bottom: 0px !important;
  }
  .hero-container a button{
    font-size: 12px;
    padding: 2px 8px !important;
    margin-bottom: 10px !important;
  }
  .btn-download a img{
     width: 100px !important;
  }
  .image-on-the-right{
    width: 80% !important;
    align-items: start;
    margin-bottom: 80px !important;
    /* display: none; */
  }
  .games-marquee{
    bottom: -45px !important;
  }
}
@media (max-width: 450px) {
  .image-on-the-right{
    width: 63% !important;
    display: flex;
    align-items: start;
    margin-bottom: 80px !important;
  }
}
@media (max-width: 380px) {
  .image-on-the-right{
    width: 90% !important;
    display: flex;
    align-items: start;
    margin-bottom: 80px !important;
  }
}
@media screen and (max-height: 600px) and (max-width:800px){
  .image-on-the-right{
    display: none;
  }
}


/* 3. Larger mobile (401-430px) */
@media screen and (min-width: 401px) and (max-width: 430px) {

.hero-container h1 {
  font-size: 2.5rem !important;
}

.hero-container p {
  font-size: 1.2rem !important;
  margin-top: 1rem !important;
}

.phone-img {
  width: 100% !important;
  justify-content: center !important;
}

.phone-img img {
  width: 90% !important;
  max-width: 90% !important;
  max-height: 55vh !important;
}
} 


@media (max-width: 640px) {
  .hero-container h1{
    font-size: 40px !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    line-height: 40px;
  }
  .hero-container p:first-of-type {
    font-size: 18px !important;
    line-height: 27px;
    /* margin-bottom: 20px;
    line-height: 20px; */
  }
  .btn-download a img{
    width: 95% !important;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
  }
  .image-on-the-right{
    width: 100% !important;
    margin-bottom: 0px !important;
  }
}

@media (max-width: 639px){
  .games-marquee{
    right: -27px !important;
  }
}

@media (max-width: 400px) {
  .hero-container p:first-of-type {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 25px;
    font-size: 15px !important;
  }
  .btn-download a img{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .image-on-the-right{
    width: 75% !important;
    margin-bottom: 0px !important;
  }
}

/* @media screen and (max-width: 1299px) {
.animate-marquee {
  animation: marquee 15s linear infinite;
}
} */

@media screen and (max-width: 1199px) {
@keyframes slideIn {
  0% { transform: translateX(59vw); }
  100% { transform: translateX(0); }
}
@keyframes slideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(59vw); }
}
}

@media screen and (max-width: 850px) {
@keyframes slideIn {
  0% { transform: translateX(45vw); }
  100% { transform: translateX(0); }
}
@keyframes slideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(45vw); }
}
}