/* Custom CSS for Chandransh Foundation */
:root {
    --teal: #0f766e;
    --teal-dark: #115e59;
    --coral: #f97316;
    --coral-dark: #c2410c;
    --beige: #f5f5f4;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

/* Tailwind Overrides and Custom Classes */
.bg-teal { background-color: var(--teal); }
.text-teal { color: var(--teal); }
.bg-teal-dark { background-color: var(--teal-dark); }
.bg-coral { background-color: var(--coral); }
.text-coral { color: var(--coral); }
.bg-coral-dark { background-color: var(--coral-dark); }
.bg-beige { background-color: var(--beige); }
.bg-teal\/10 { background-color: rgba(15, 118, 110, 0.1); }

/* Headings */
.section-heading {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: var(--teal) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Buttons */
.btn {
    position: relative;
    transition: all 0.3s ease;
    transform: scale(1);
}

.btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: inherit;
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% { border-color: rgba(249, 115, 22, 0.5); opacity: 0.5; transform: scale(1); }
    50% { border-color: rgba(249, 115, 22, 0.8); opacity: 0.8; transform: scale(1.05); }
    100% { border-color: rgba(249, 115, 22, 0.5); opacity: 0.5; transform: scale(1); }
}

/* Desktop Submenu */
#causes-dropdown {
    min-width: 320px !important;
}

#causes-dropdown a {
    white-space: nowrap;
    font-size: 0.95rem;
}

/* Animations */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
    animation: slide-up 1s ease-out;
}

@keyframes slide-full {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-full {
    animation: slide-full 1.5s ease-in-out;
}

@keyframes overlayFade {
    from { opacity: 0.3; }
    to { opacity: 0.6; }
}

.animate-overlay {
    animation: overlayFade 2s ease-in-out infinite alternate;
}

/* Section Divider */
.section-divider {
    position: relative;
    margin-bottom: 2rem;
}

.section-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: var(--coral);
    border-radius: 2px;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}