/* Attractive styling for Google Translate */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}
#google_translate_element { 
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
.goog-te-gadget { color: transparent !important; font-size: 0 !important; }
.goog-te-gadget .goog-te-combo { 
    background-color: #f0fdf4 !important; 
    border: 2px solid #22c55e !important; 
    border-radius: 12px !important; 
    padding: 6px 10px !important; 
    font-size: 13px !important; 
    font-weight: 600 !important;
    color: #166534 !important; 
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
/* Hide the default "Select Language" option from the dropdown */
.goog-te-combo option:first-child {
    display: none;
}
.goog-te-gadget .goog-te-combo:hover {
    border-color: #ef4444 !important;
    background-color: white !important;
}
.goog-te-banner-frame.skiptranslate, .goog-te-gadget span { display: none !important; }
body { top: 0px !important; }

/* Social Media Wave Animation */
@keyframes waveFloating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.social-wave { animation: waveFloating 2.5s ease-in-out infinite; }
.social-wave:nth-child(2) { animation-delay: 0.2s; }
.social-wave:nth-child(3) { animation-delay: 0.4s; }
.social-wave:nth-child(4) { animation-delay: 0.6s; }

/* Pulse Wave Animation for Contact Buttons */
@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}
.pulse-wave-btn .pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    pointer-events: none;
}

/* Hero Slider Content Animation */
@keyframes slide-up-hero {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-slide-up-hero {
    animation: slide-up-hero 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.text-shadow, .text-shadow-lg { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
/* Creative Navigation Underline */
.nav-link-custom {
    position: relative;
}
@media (min-width: 1024px) {
    .nav-link-custom::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0;
        height: 3px;
        background: #ef4444; /* red-500 */
        transition: all 0.3s ease;
        transform: translateX(-50%);
        border-radius: 2px;
    }
    .nav-link-custom:hover::after {
        width: 70%;
    }
}

/* Sidebar Action Buttons */
.sidebar-action-button {
    @apply relative flex items-center gap-4 bg-white border border-gray-100 rounded-2xl p-4 shadow-md transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] overflow-hidden;
}
.sidebar-action-button::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent -translate-x-full transition-transform duration-700 ease-in-out z-20;
}
.sidebar-action-button:hover {
    @apply -translate-y-1.5 shadow-2xl border-transparent scale-[1.02];
}
.sidebar-action-button:hover::before {
    @apply translate-x-full;
}
.sidebar-action-button .icon-wrapper {
    @apply w-14 h-14 rounded-2xl flex items-center justify-center text-white text-2xl shadow-lg transition-all duration-500 relative z-10;
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1), inset 0 2px 4px 0 rgba(255, 255, 255, 0.3);
}
.sidebar-action-button:hover .icon-wrapper {
    @apply rotate-[360deg] scale-110 rounded-full shadow-inner;
}
.sidebar-action-button .text-content {
    @apply font-black text-gray-800 text-lg transition-all duration-300 relative z-10;
}
.sidebar-action-button:hover .text-content {
    @apply translate-x-2;
}

/* Color schemes for specific buttons */
.sidebar-action-button.member-apply { @apply hover:bg-red-50/50; }
.sidebar-action-button.member-apply:hover { @apply shadow-red-500/20; }
.sidebar-action-button.member-apply .icon-wrapper { 
    background: linear-gradient(135deg, #ef4444, #b91c1c); 
}
.sidebar-action-button.member-apply:hover .text-content { @apply text-red-700; }

.sidebar-action-button.donate-us { @apply hover:bg-green-50/50; }
.sidebar-action-button.donate-us:hover { @apply shadow-green-500/20; }
.sidebar-action-button.donate-us .icon-wrapper { 
    background: linear-gradient(135deg, #22c55e, #15803d); 
}
.sidebar-action-button.donate-us:hover .text-content { @apply text-green-700; }

.sidebar-action-button.id-card { @apply hover:bg-blue-50/50; }
.sidebar-action-button.id-card:hover { @apply shadow-blue-500/20; }
.sidebar-action-button.id-card .icon-wrapper { 
    background: linear-gradient(135deg, #3b82f6, #1d4ed8); 
}
.sidebar-action-button.id-card:hover .text-content { @apply text-blue-700; }

.sidebar-action-button.crowdfunding { @apply hover:bg-amber-50/50; }
.sidebar-action-button.crowdfunding:hover { @apply shadow-amber-500/20; }
.sidebar-action-button.crowdfunding .icon-wrapper { 
    background: linear-gradient(135deg, #f59e0b, #d97706); 
}
.sidebar-action-button.crowdfunding:hover .text-content { @apply text-amber-700; }

/* Vertical Marquee for Latest News */
@keyframes marquee-vertical {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-50%); } /* Scrolls half the content height */
}

.news-marquee-content {
    animation: marquee-vertical 15s linear infinite; /* Adjust duration as needed */
}

.news-marquee-content:hover {
    animation-play-state: paused;
}

/* Member/Management Card Styling */
.member-management-card {
    @apply bg-green-600 rounded-md p-4 shadow-lg relative overflow-hidden;
}
.member-management-card .image-container {
    @apply relative w-full aspect-square rounded-lg border-4 border-white shadow-md overflow-hidden;
}
.member-management-card .image-container img {
    @apply w-full h-full object-cover transition-transform duration-300 ease-in-out;
}
.member-management-card:hover .image-container img {
    @apply scale-105;
}
.member-management-card .nav-button {
    @apply absolute top-1/2 -translate-y-1/2 w-10 h-10 bg-black/30 hover:bg-black/50 text-white flex items-center justify-center rounded-full text-xl transition-all duration-300;
}
.member-management-card .nav-button.left { @apply left-2; }
.member-management-card .nav-button.right { @apply right-2; }
.member-management-card .info-box {
    @apply bg-green-700 mt-4 text-center text-white p-3 rounded-md;
}
.member-management-card .info-box h4 {
    @apply font-bold text-lg;
}
.member-management-card .info-box p {
    @apply text-sm opacity-90;
}

/* Latest Activity Card Enhancements */
.latest-activity-card {
    @apply bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 transition-all duration-500 hover:shadow-2xl hover:-translate-y-1;
}

.video-play-button {
    @apply absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/40 transition-all duration-500 cursor-pointer;
}

.video-play-button button {
    @apply w-20 h-20 bg-red-600 text-white rounded-full flex items-center justify-center text-3xl shadow-2xl transition-all duration-500 hover:scale-110 hover:bg-red-700;
}

.read-more-button {
    @apply mt-6 inline-flex items-center gap-2 px-6 py-2.5 bg-white border-2 border-red-600 text-red-600 font-bold rounded-xl transition-all duration-300 hover:bg-red-600 hover:text-white hover:shadow-lg hover:shadow-red-200 active:scale-95;
}

/* Latest News Marquee Item */
.marquee-news-item {
    @apply bg-white rounded-xl p-4 text-center text-red-600 text-sm font-semibold leading-relaxed mb-4 border border-red-50 shadow-sm transition-all duration-300 hover:border-red-200 hover:shadow-md;
}

/* Section Headers */
.section-header-red {
    @apply border-2 border-red-500 rounded-2xl text-center py-3 bg-white text-red-600 font-black uppercase tracking-widest text-sm mb-6 shadow-sm;
}

/* Custom Background for Main Section */
.main-activity-section {
    @apply bg-gradient-to-b from-slate-50 to-slate-100 min-h-screen py-10;
}

/* Consolidated Animations */
.marquee {
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

.news-scroll {
    animation: scrollNews 15s linear infinite;
}

.news-container:hover .news-scroll {
    animation-play-state: paused;
}

@keyframes scrollNews {
    from { transform: translateY(100%); }
    to { transform: translateY(-100%); }
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }