.background{
    margin-top: 0%;
    background-image: url('https://trendy-salon.myshopify.com/cdn/shop/files/bg.jpg?v=1620018936');

}
.about{
    background-image: url(	'https://muhil.myshopify.com/cdn/shop/files/img5_970X.jpg?v=1614722548');
    background-repeat: no-repeat;
}

 
  
  
 
  @keyframes slideFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .card-fade-left {
    animation: slideFromLeft 0.6s ease-out forwards;
    opacity: 0; /* Start invisible */
  }
  @keyframes cardFadeRight {
    0% {
      opacity: 0;
      transform: translateX(80px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .card-fade-right {
    opacity: 0; /* initial state */
    animation: cardFadeRight 0.6s ease-out forwards;
  }
  
  .card-fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease-out forwards;
  }
  
  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .card-fade-down {
    opacity: 0;
    transform: translateY(-40px);
    animation: fadeDown 0.8s ease-out forwards;
  }
  
  @keyframes fadeDown {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes wiggleHang {
    0%, 100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(3deg);
    }
    75% {
      transform: rotate(-3deg);
    }
  }
  
  .wiggle-hang {
    animation: wiggleHang 0.6s ease-in-out infinite;
    transform-origin: top center;
  }
  @keyframes zoomInUp {
    0% {
      opacity: 0;
      transform: scale(0.8) translateY(40px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  .zoom-in-up {
    animation: zoomInUp 0.8s ease-out forwards;
  }
  @keyframes zoomInLeft {
    0% {
      opacity: 0;
      transform: scale(0.8) translateX(-40px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateX(0);
    }
  }
  
  .zoom-in-left {
    animation: zoomInLeft 0.8s ease-out forwards;
  }
  .icon{
    color: #285AEB;
  }
  .icon1{
    color: skyblue;
  }
  


html {
  scroll-behavior: smooth;
}
.clip-reveal {
  transform: translateY(100%);
  animation: revealUp 1s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes revealUp {
  to {
    transform: translateY(0);
  }
}




@media (max-width: 768px) {
  .floating-btn {
    top: 50%;  
    right: 20px;
    width: 60px;
    height: 60px;
    font-size: 40px; 
  }

  .floating-btn.phone {
    top: 60%; 
  }
}