@font-face {
  font-family: Poppins; /* set name */
  src: url('assets/poppins.regular.ttf');
}
@font-face {
  font-family: Quicksand; /* set name */
  src: url('assets/Quicksand_Book.otf'); 
}


:root {
    --soft-orange: #fec89a;
    --warm-yellow: #ffe8d6;
    --gentle-brown: #ddbea9;
    --muted-green: #a5a58d;
    --deep-brown: #6d6875;
    --warm-cream: #fef9f4;
    --autumn-orange: #ffb347;
    --autumn-red: #ff6b6b;
    --autumn-yellow: #ffd166;
    --autumn-brown: #a68a64;
	
	--soft-orange: #F6A872;   
	--warm-yellow: #F7D77A;   
	--gentle-brown: #C9A776;  
	--muted-green: #93B89A;   
	--deep-brown: #6F4A2B;    
	
	--black: #000000;
	
	--warm-cream: #FFF3E6;
	--autumn-orange: #E58A3B;
	--autumn-red: #C8573A;
	--autumn-yellow: #E6B84A;
	--autumn-brown: #8F5E3A;
}

/* Base Styles */
body {
    font-family: 'Quicksand', sans-serif;
    background-color: var(--warm-cream);
    color: var(--deep-brown);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--deep-brown);
}

/* Color Classes */
.pastel-orange { background-color: var(--soft-orange); }
.pastel-yellow { background-color: var(--warm-yellow); }
.pastel-brown { background-color: var(--gentle-brown); }
.pastel-green { background-color: var(--muted-green); }
.text-pastel-orange { color: var(--soft-orange); }
.text-pastel-brown { color: var(--deep-brown); }
.text-deep-brown { color: var(--deep-brown); }
.text-black { color: var(--black); }
.border-pastel-orange { border-color: var(--soft-orange); }
.border-pastel-brown { border-color: var(--gentle-brown); }

/* Warm Background Classes */
.bg-warm-cream { background-color: var(--warm-cream); }
.bg-warm-yellow { background-color: var(--warm-yellow); }
.bg-warm-brown { background-color: var(--gentle-brown); }
.bg-autumn-orange { background-color: var(--autumn-orange); }
.bg-autumn-red { background-color: var(--autumn-red); }
.bg-autumn-yellow { background-color: var(--autumn-yellow); }
.bg-autumn-brown { background-color: var(--autumn-brown); }

/* Replace white backgrounds */
.bg-white {
    background-color: #ffffff !important;
}

.bg-white\/90 {
    background-color: rgba(254, 249, 244, 0.9) !important;
}

.bg-white\/80 {
    background-color: rgba(254, 249, 244, 0.8) !important;
}

/* Button Styles */
.btn-primary {
    background-color: var(--soft-orange);
    color: var(--deep-brown);
    transition: all 0.3s ease;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--gentle-brown);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Meeting Time Highlight */
.meeting-time {
    background: linear-gradient(135deg, var(--soft-orange), var(--warm-yellow));
    border-left: 5px solid var(--muted-green);
    border-radius: 0.75rem;
}

/* Hero Image */
.hero-image {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images/hero_image.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-image-donate {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images/hero_donate.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-image-about {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images/hero_about.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Card Hover Effects */
.news-card, .event-card, .value-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--warm-cream);
    border: 1px solid var(--gentle-brown);
}

.news-card:hover, .event-card:hover, .value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Navigation */
header {
    background-color: rgba(254, 249, 244, 0.95) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gentle-brown);
}

/* Footer */
footer {
    background-color: var(--deep-brown) !important;
    color: white;
}

/* Form Styles */
input, textarea, select {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--gentle-brown) !important;
    color: var(--deep-brown) !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    ring: 2px solid var(--soft-orange) !important;
    border-color: var(--soft-orange) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--warm-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--gentle-brown);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--soft-orange);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(45deg, var(--autumn-orange), var(--autumn-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Autumn Leaves Background */
.autumn-bg {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 179, 71, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 209, 102, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(221, 190, 169, 0.1) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-image {
        background-attachment: scroll;
    }
}

/* Loading Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* Card Shadows */
.shadow-warm {
    box-shadow: 0 4px 20px rgba(254, 200, 154, 0.2);
}

.shadow-deep {
    box-shadow: 0 10px 30px rgba(109, 104, 117, 0.1);
}

/* Border Radius */
.rounded-warm {
    border-radius: 1rem;
}

.rounded-warm-lg {
    border-radius: 1.5rem;
}


/* full-size overlay covering container */
.overlaybroke {
  position: absolute;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.5); /* gray/black at 50% opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;             /* ensure it's above .content */
}

/* modal box above the overlay (higher z-index optional) */
.modalbroke {
  background: #fff;
  padding: 1.25rem;
  border-radius: 8px;
  z-index: 11;
  max-width: 90%;
}