html{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


body{
    overflow-x: hidden;
    font-family: "Poppins", sans-serif;
    /* background:white; */
}


/* contact */

.contact{
  background-attachment: fixed;
  padding: 5% 5%;
  /* background-image: url("https://images.pexels.com/photos/7261835/pexels-photo-7261835.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); */
  background-image: url("./images/contact.jpg");
  background-size: cover;
  background-position: center;
  /* animation: form-img;
  animation-duration: 15s;
  animation-iteration-count: 2; */
}


.plan{
  background-attachment: fixed;
  padding: 5% 5%;
  /* background-image: url("https://images.pexels.com/photos/1552252/pexels-photo-1552252.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); */
  background-image: url("./images/plans.jpg");

  background-size: cover;
  background-position: center;
  /* animation: form-img;
  animation-duration: 15s;
  animation-iteration-count: 2; */
}


.trainer{
  background-attachment: fixed;
  padding: 5% 5%;
  background-image: url("./images/trainers.jpg");
  background-size: cover;
  background-position: center;
  /* animation: form-img;
  animation-duration: 15s;
  animation-iteration-count: 2; */
}


.review{
  background-attachment: fixed;
  padding: 5% 5%;
  background-image: url("./images/reviews.jpg");
  background-size: cover;
  background-position: center;
  /* animation: form-img;
  animation-duration: 15s;
  animation-iteration-count: 2; */
}




/* heading animation */



.animate-heading{
    animation-name: animate;
    animation-duration: 20s; 
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;
}

@keyframes animate {
    0%{
      --tw-text-opacity: 1;
      color: rgb(96 165 250 / var(--tw-text-opacity));
  
    }

    25%{
      color: lightgreen;
    }

    50%{
      color: lightblue;
    }
    
    75%{
      color:yellow;
    }

    100%{
      --tw-text-opacity: 1;
      color: rgb(96 165 250 / var(--tw-text-opacity));

    }


}



/* img animation */

.animate-img{
  animation-name: animate-img;
  animation-duration: 20s; 
  animation-iteration-count: 1;
  animation-timing-function:ease-in-out;
}

@keyframes animate-img {
  0%{
    transform: scale(1);
  }
  
  50%{
    
    transform:scale(1.1);
  }

  100%{
    transform:scale(1);
  }



}


@tailwind base;
@tailwind components;
@tailwind utilities;




@media (max-width: 520px){
    .heading{
      font-size: 3.2rem;
    }
  }

  @media (max-width: 380px){
    .heading{
      font-size: 2.5rem;
    }
  }

  
  @media (max-width: 300px){
    .heading{
      font-size: 2.2rem;
    }

    .btn{
        padding: 1px 8px;
    }
  }



/* review css */

.review-card {
  /* background: linear-gradient(145deg, #1e1e2f, #282c36); */
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 10px 10px 20px #0b0b17, -10px -10px 20px #3a3d45;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease forwards;
}

/* h2 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
} */



@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease forwards;
}
