/* prayer times fade up animation */
/* Fade-up from bottom + pop */
.fade-up {
  opacity: 0;
  transform: translateY(30px) scale(0.9); /* start slightly below + smaller */
  transition: all 0.6s ease-out;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0) scale(1); /* final position + full size */
}


/* Prayer Times Slide Animations */

/* Slide left for prayer boxes */
.slide-left-pt {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease-out;
}

.slide-left-pt.show {
  opacity: 1;
  transform: translateX(0);
}

/* Slide right for prayer boxes */
.slide-right-pt {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
}

.slide-right-pt.show {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from top for prayer boxes */
.slide-top-pt {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.6s ease-out;
}

.slide-top-pt.show {
  opacity: 1;
  transform: translateY(0);
}


/* community section Zoom & Rotate Fade Animation for Community Section */
.zoom-rotate-fade {
  opacity: 0;
  transform: scale(0.8) rotate(-10deg);
  transition: all 0.8s ease-out;
}

.zoom-rotate-fade.show {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}


/* about us section Slide Up + Rotate + Fade Animation */
.slide-up-rotate {
    opacity: 0;
    transform: translateY(50px) scale(0.9) rotate(-5deg);
    transition: all 0.8s ease-out;
}

.slide-up-rotate.show {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}


/* Donate & Quran Animation */
.donate-info, .quran-info {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.8s ease-out;
}

.donate-info.show, .quran-info.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Floating effect on hover */
.donate-info:hover, .quran-info:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Optional: Add a slight rotate effect */
.donate-info.show {
    animation: floatUp 1s ease forwards;
}

.quran-info.show {
    animation: floatUp 1s ease forwards;
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95) rotate(-2deg);
    }
    50% {
        transform: translateY(-5px) scale(1.02) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}
/* ===================================== */
/* SLIDE ANIMATION */
.slide-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideLeft 1.2s ease forwards;
}

.slide-right {
    opacity: 0;
    transform: translateX(50px);
    animation: slideRight 1.2s ease forwards;
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}