/* Adjust scroll padding for sticky header to prevent content from being hidden */
html { scroll-padding-top: 100px; }
/* Set default font to Hind Siliguri for all text */
body { font-family: 'Hind Siliguri', sans-serif; overflow-x: hidden; }

/* Custom color definitions based on Bangladesh flag colors (adjusted for a modern feel) */
.bg-aixfly-green { background-color: #10B981; } /* Tailwind green-500 */
.text-aixfly-green { color: #10B981; }
.border-aixfly-green { border-color: #10B981; }
.hover\:bg-aixfly-green-dark:hover { background-color: #059669; } /* Tailwind green-600 */
.focus\:ring-aixfly-green:focus { --tw-ring-color: #10B981; }

.bg-aixfly-red { background-color: #EF4444; } /* Tailwind red-500 */
.text-aixfly-red { color: #EF4444; }
.hover\:bg-aixfly-red-dark:hover { background-color: #DC2626; } /* Tailwind red-600 */
.focus\:ring-aixfly-red:focus { --tw-ring-color: #EF4444; }

/* Custom CSS for the falling leaf background effect */
.leaf-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through elements behind it */
    overflow: hidden; /* Hide leaves that fall outside the container */
    z-index: 0; /* Position behind other content */
}

.leaf {
    position: absolute;
    background-color: #34D399; /* Lighter green for leaves */
    border-radius: 50%; /* Make leaves circular */
    opacity: 0; /* Start hidden, fade in during animation */
    animation: fall linear infinite; /* Apply the falling animation */
}

/* Keyframes for the falling leaves animation */
@keyframes fall {
    0% {
        transform: translateY(-10%) rotate(0deg); /* Start slightly above the viewport */
        opacity: 0;
    }
    10% {
        opacity: 0.8; /* Fade in */
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg); /* Fall to the bottom of the viewport */
        opacity: 0; /* Fade out */
    }
}



/* Apply fade-in up animation to hero elements */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Scroll to top button styling */
#scrollToTopBtn {
    display: flex; /* Use flex to center content */
    position: fixed;
    bottom: 90px; /* Positioned above the chat widget */
    right: 16px; /* 1rem */
    overflow: hidden; /* Hide smoke trail initially */
    z-index: 999;
    background-color: rgba(16, 185, 129, 0.8); /* Aixfly green with transparency */
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;  /* Slightly smaller for mobile */
    height: 44px; /* Slightly smaller for mobile */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    pointer-events: none;
}
/* Rocket launch animation */
#scrollToTopBtn.launched #rocket-icon {
    animation: launch-rocket 0.5s cubic-bezier(0.5, 0, 1, 1) forwards;
}
@keyframes launch-rocket {
    to {
        transform: translateY(-150px) scale(1.5);
        opacity: 0;
    }
}

/* Smoke trail elements */
.smoke-trail {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-50%);
}

/* Smoke trail animation on launch */
#scrollToTopBtn.launched .smoke-trail {
    animation: smoke-puff 0.8s ease-out forwards;
}
#scrollToTopBtn.launched .smoke-trail:nth-child(2) { animation-delay: 0.1s; }
#scrollToTopBtn.launched .smoke-trail:nth-child(3) { animation-delay: 0.2s; }

@keyframes smoke-puff {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0.8; }
    100% { transform: translate(-50%, 40px) scale(2.5); opacity: 0; }
}

/* Larger size and different position for desktop */
@media (min-width: 768px) {
    #scrollToTopBtn {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}

#scrollToTopBtn.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto; /* Make it clickable only when visible */
}

#scrollToTopBtn:hover {
    background-color: rgba(5, 150, 105, 0.9); /* Darker green on hover */
    transform: scale(1) translateY(-3px);
}

/* Announcement Scroller */
.announcement-scroller {
    display: flex;
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-rtl 40s linear infinite;
}
@keyframes marquee-rtl {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}
.announcement-container:hover .announcement-scroller,
.announcement-container:focus-within .announcement-scroller {
    animation-play-state: paused;
}
/* News Scrollers */
.news-scroller-wrapper {
    overflow: hidden;
    padding: 0.5rem 0;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* Mask to fade out content at edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.news-scroller {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}
.news-scroller:hover { animation-play-state: paused; }
.news-scroller.rtl { animation: marquee-rtl 60s linear infinite; }
.news-scroller.ltr { animation: marquee-rtl 80s linear infinite reverse; } /* Slower and reversed for left-to-right */

/* Scroll reveal animation for sections */
.reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
.is-visible { opacity: 1; transform: translateY(0); }