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

@layer utilities {
  .center {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
  }
  .sectionPadding {
    @apply pt-20;
  }
  .dir-rtl {
    direction: rtl;
  }

  .dir-ltr {
    direction: ltr;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input#upload-photo {
  display: none;
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

/* Define the animation */
@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

/* Apply the animation to your element */
.loader {
  animation: scaleAnimation infinite;
}

/* i add animation but this make bage scroll right and left fix this */
body {
  overflow-x: hidden;
}