/* ==================== المتغيرات الأساسية ==================== */
:root {
   --primary-color: #91956a;
   --secondary-color: #fefbe9;
   --dark-color: #333;
   --light-color: #777;
   --white: #fff;
   --black: #000;
   --section-bg: #f9f9f9;
   --overlay: rgba(0, 0, 0, 0.6);
   --completed-color: #4CAF50;
   --pending-color: #FFC107;
   --failed-color: #F44336;
   --active-color: #4CAF50;
   --urgent-color: #f44336;
}

/* ==================== الأساسيات ==================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Cairo', Arial, sans-serif;
   color: var(--dark-color);
   line-height: 1.6;
   background-color: var(--white);
   direction: rtl;
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}


/* ==================== الأزرار العامة ==================== */
.btn {
   display: inline-block;
   padding: 12px 25px;
   border-radius: 30px;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.3s ease;
   text-align: center;
   border: none;
   cursor: pointer;
   font-family: inherit;
}


.primary-btn:hover {
   background-color: transparent;
   color: var(--primary-color);
}

.secondary-btn {
   background-color: transparent;
   color: var(--white);
   border: 2px solid var(--white);
}

.secondary-btn:hover {
   background-color: var(--white);
   color: var(--primary-color);
}

.tertiary-btn {
   background-color: var(--white);
   color: var(--primary-color);
   border: 2px solid var(--white);
}

.tertiary-btn:hover {
   background-color: transparent;
   color: var(--white);
}

button {
   padding: 10px 15px;
   font-size: 16px;
   color: var(--white);
   background-color: #998965;
   border-radius: 4px;
   border: none;
   cursor: pointer;
   font-family: inherit;
   transition: background-color 0.3s;
}

button:hover {
   background-color: #0056b3;
}

button.login-btn {
   background-color: #91956a;
}

button.login-btn:hover {
   background-color: #218838;
}

/* ==================== الهيدر الموحد ==================== */
.main-header {
   background-color: var(--white);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
}

.main-header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
}

.logo-container {
   display: flex;
   align-items: center;
}

.logo {
   width: 60px;
   height: 60px;
   margin-left: 15px;
   border-radius: 50%;
}

.main-header h1 {
   color: var(--primary-color);
   font-size: 24px;
}

.main-nav ul {
   display: flex;
   list-style: none;
}

.main-nav a {
   text-decoration: none;
   color: var(--dark-color);
   padding: 10px 15px;
   font-weight: 500;
   transition: color 0.3s;
}

.main-nav a:hover, 
.main-nav a.active {
   color: var(--primary-color);
}

/* ==================== العناوين المشتركة ==================== */
.section-title {
   text-align: center;
   color: var(--primary-color);
   margin-bottom: 40px;
   font-size: 32px;
   position: relative;
}


.section-subtitle {
   text-align: center;
   color: var(--light-color);
   margin-bottom: 40px;
   font-size: 18px;
}

/* ==================== البطاقات المشتركة ==================== */
.card {
   background-color: var(--white);
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s;
   overflow: hidden;
}

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

.card-header {
   padding: 20px;
   background-color: var(--section-bg);
   border-bottom: 1px solid #eee;
}

.card-body {
   padding: 20px;
}

.card-footer {
   padding: 15px 20px;
   background-color: var(--section-bg);
   border-top: 1px solid #eee;
}

/* ==================== النماذج المشتركة ==================== */
.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   color: var(--primary-color);
   font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
   width: 100%;
   padding: 12px 15px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-family: inherit;
   transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   border-color: var(--primary-color);
   outline: none;
   box-shadow: 0 0 5px rgba(145, 149, 106, 0.3);
}

.form-group textarea {
   min-height: 100px;
   resize: vertical;
}

.form-row {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
}

.form-row .form-group {
   flex: 1;
}

/* ==================== الجداول المشتركة ==================== */
table {
   width: 100%;
   border-collapse: collapse;
   background-color: var(--white);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

th, td {
   padding: 12px 15px;
   text-align: right;
   border-bottom: 1px solid #eee;
}

th {
   background-color: var(--section-bg);
   color: var(--primary-color);
   font-weight: 600;
}

tr:hover {
   background-color: rgba(145, 149, 106, 0.05);
}

.table-responsive {
   overflow-x: auto;
   margin-bottom: 20px;
}

/* ==================== حالات العناصر ==================== */
.status,
.badge {
   padding: 5px 12px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   display: inline-block;
}

.status.completed,
.badge.completed {
   background-color: rgba(76, 175, 80, 0.2);
   color: var(--completed-color);
}

.status.pending,
.badge.pending {
   background-color: rgba(255, 193, 7, 0.2);
   color: var(--pending-color);
}

.status.failed,
.badge.failed {
   background-color: rgba(244, 67, 54, 0.2);
   color: var(--failed-color);
}

.status.active,
.badge.active {
   background-color: rgba(76, 175, 80, 0.2);
   color: var(--active-color);
}

/* ==================== الشبكات المشتركة ==================== */
.grid {
   display: grid;
   gap: 30px;
}

.grid-2 {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ==================== أقسام الصفحة الرئيسية ==================== */
.hero-section {
   background: linear-gradient(var(--overlay), var(--overlay)), url('../website-assets/images/hero-bg.jpg');
   background-size: cover;
   background-position: center;
   color: var(--white);
   text-align: center;
   padding: 220px 20px !important;
}


.hero-section h2 {
   font-size: 42px;
   margin-bottom: 20px;
}

.hero-section p {
   font-size: 20px;
   max-width: 700px;
   margin: 0 auto 30px;
}

.hero-buttons {
   display: flex;
   justify-content: center;
   gap: 15px;
   flex-wrap: wrap;
}

.stats-section {
   background-color: var(--primary-color);
   color: var(--white);
   padding: 60px 0;
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 30px;
   text-align: center;
}

.stat-item {
   padding: 30px 20px;
}

.stat-item i {
   font-size: 40px;
   margin-bottom: 15px;
   color: var(--primary-color) !important;
}

.stat-number {
   font-size: 48px;
   font-weight: 700;
   margin-bottom: 10px;
}

.stat-label {
   font-size: 18px;
   color: #fff !important;
}

/* ==================== أقسام البرامج والخدمات ==================== */
.programs-section {
   padding: 80px 0;
   background-color: var(--section-bg);
}

.programs-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
}

.program-card {
   background-color: var(--white);
   padding: 30px 25px;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   text-align: center;
   transition: transform 0.3s;
}

.program-card:hover {
   transform: translateY(-10px);
}

.program-icon {
   width: 80px;
   height: 80px;
   background-color: var(--secondary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
}

.program-icon i {
   font-size: 30px;
   color: var(--primary-color);
}

.program-card h3 {
   color: var(--primary-color);
   margin-bottom: 15px;
   font-size: 22px;
}

.program-card p {
   color: var(--light-color);
   margin-bottom: 20px;
   font-size: 16px;
}

/* ==================== أقسام الحملات ==================== */
.campaigns-hero {
   background: linear-gradient(var(--overlay), var(--overlay)), url('../images/campaigns-bg.jpg');
   background-size: cover;
   background-position: center;
   color: var(--white);
   text-align: center;
   padding: 100px 20px;
}

.campaigns-hero h2 {
   font-size: 42px;
   margin-bottom: 20px;
}

.campaigns-hero p {
   font-size: 20px;
   max-width: 700px;
   margin: 0 auto;
}

.campaigns-filter {
   padding: 30px 0;
   background-color: var(--section-bg);
}

.filter-options {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
}

.filter-btn {
   padding: 10px 20px;
   background-color: var(--white);
   border: 2px solid var(--primary-color);
   border-radius: 30px;
   font-size: 16px;
   font-weight: 600;
   color: var(--primary-color);
   cursor: pointer;
   transition: all 0.3s;
}

.filter-btn:hover, 
.filter-btn.active {
   background-color: var(--primary-color);
   color: var(--white);
}

.campaigns-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
}

.campaign-card {
   background-color: var(--white);
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s;
}

.campaign-card:hover {
   transform: translateY(-10px);
}

.campaign-image {
   position: relative;
   height: 200px;
   overflow: hidden;
}

.campaign-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s;
}

.campaign-card:hover .campaign-image img {
   transform: scale(1.1);
}

.campaign-status {
   position: absolute;
   top: 15px;
   right: 15px;
   padding: 5px 15px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   color: var(--white);
}

.campaign-urgent {
   position: absolute;
   top: 15px;
   left: 15px;
   padding: 5px 15px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   color: var(--white);
   background-color: var(--urgent-color);
}

.campaign-content {
   padding: 20px;
}

.campaign-content h3 {
   color: var(--primary-color);
   margin-bottom: 10px;
   font-size: 22px;
}

.campaign-content p {
   color: var(--light-color);
   margin-bottom: 15px;
}

.campaign-progress {
   margin-bottom: 15px;
}

.progress-bar {
   height: 10px;
   background-color: #f1f1f1;
   border-radius: 5px;
   margin-bottom: 5px;
   overflow: hidden;
}

.progress-fill {
   height: 100%;
   border-radius: 5px;
   background-color: var(--primary-color);
   transition: width 0.3s ease;
}

.progress-info {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   color: var(--light-color);
}

/* ==================== أقسام التبرع ==================== */
.donation-type-section {
   padding: 40px 0;
   background-color: var(--section-bg);
}

.donation-type-options {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   max-width: 800px;
   margin: 0 auto;
}

.donation-type-option {
   flex: 1;
   min-width: 200px;
   padding: 25px 15px;
   background-color: var(--white);
   border: 2px solid var(--primary-color);
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   transition: all 0.3s;
}

.donation-type-option i {
   font-size: 40px;
   color: var(--primary-color);
   margin-bottom: 15px;
}

.donation-type-option span {
   font-size: 18px;
   font-weight: 600;
   color: var(--dark-color);
}

.donation-type-option:hover,
.donation-type-option.active {
   background-color: var(--primary-color);
}

.donation-type-option:hover i,
.donation-type-option:hover span,
.donation-type-option.active i,
.donation-type-option.active span {
   color: var(--white);
}

.amount-options {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 15px;
   margin-bottom: 30px;
}

.amount-option {
   padding: 15px 25px;
   background-color: var(--white);
   border: 2px solid var(--primary-color);
   border-radius: 30px;
   font-size: 18px;
   font-weight: 600;
   color: var(--primary-color);
   cursor: pointer;
   transition: all 0.3s;
}

.amount-option:hover, 
.amount-option.active {
   background-color: var(--primary-color);
   color: var(--white);
}

/* ==================== الحساب الشخصي ==================== */
.account-section {
   padding: 40px 0;
}

.account-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 40px;
   flex-wrap: wrap;
   gap: 30px;
   background-color: var(--white);
   padding: 30px;
   border-radius: 15px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.profile-info {
   display: flex;
   align-items: center;
   gap: 25px;
}

.profile-image {
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   overflow: hidden;
   border: 5px solid var(--secondary-color);
}

.profile-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.profile-details h2 {
   color: var(--primary-color);
   margin-bottom: 5px;
   font-size: 24px;
}

.member-since {
   color: var(--light-color);
   margin-bottom: 10px;
   font-size: 14px;
}

.contact-info {
   margin-top: 15px;
}

.contact-info p {
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--dark-color);
}

.contact-info i {
   color: #ffffff !important;
   width: 20px;
   text-align: center;
}

.account-actions {
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
}

.edit-btn, .logout-btn {
   padding: 12px 20px;
   border-radius: 30px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   transition: all 0.3s;
}

.edit-btn {
   background-color: var(--primary-color);
   color: var(--white);
}

.edit-btn:hover {
   background-color: #7c8156;
}

.logout-btn {
   background-color: #f1f1f1;
   color: var(--dark-color);
}

.logout-btn:hover {
   background-color: #e0e0e0;
}

/* ==================== تسجيل الدخول ==================== */
.login-section {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: calc(100vh - 150px);
   padding: 20px;
   background-color: var(--section-bg);
}

.login-container {
   background-color: var(--white);
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   padding: 40px;
   width: 100%;
   max-width: 500px;
   margin: 0 auto;
   position: relative;
}

.login-header {
   text-align: center;
   margin-bottom: 30px;
}

.login-header h2 {
   color: var(--primary-color);
   font-size: 28px;
   margin-bottom: 10px;
}

.login-header p {
   color: var(--light-color);
   font-size: 16px;
}

.login-form .form-group input {
   padding: 15px 45px 15px 15px;
}

.login-form .form-group i {
   position: absolute;
   top: 55px;
   left: 50px;
   color: var(--light-color);
}

.login-btn {
   background-color: var(--primary-color);
   color: var(--white);
   border: none;
   padding: 15px;
   border-radius: 8px;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   width: 100%;
   transition: background-color 0.3s;
   margin-bottom: 25px;
}

.login-btn:hover {
   background-color: #7c8156;
}

/* ==================== المودالات ==================== */
.modal {
   display: none;
   position: fixed;
   z-index: 2000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   overflow: auto;
}

.modal-content {
   background-color: var(--white);
   margin: 10% auto;
   padding: 30px;
   border-radius: 10px;
   max-width: 600px;
   position: relative;
   animation: modalopen 0.4s;
}

@keyframes modalopen {
   from {opacity: 0; transform: translateY(-50px)}
   to {opacity: 1; transform: translateY(0)}
}

.close-modal {
   position: absolute;
   left: 20px;
   top: 20px;
   font-size: 28px;
   font-weight: bold;
   color: var(--light-color);
   cursor: pointer;
   transition: color 0.3s;
}

.close-modal:hover {
   color: var(--dark-color);
}

/* ==================== الدفع ==================== */
.payment-section {
   padding: 40px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
}

.payment-container {
   background-color: var(--white);
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   padding: 40px;
   width: 100%;
   max-width: 600px;
   margin: 20px auto;
}

.payment-header {
   text-align: center;
   margin-bottom: 30px;
}

.payment-header h2 {
   color: var(--primary-color);
   font-size: 28px;
   margin-bottom: 10px;
}

.payment-methods {
   text-align: center;
   margin-bottom: 20px;
}

.methods {
   display: flex;
   justify-content: center;
   gap: 15px;
}

.method-btn {
   width: 50px;
   height: 35px;
   background-color: #f5f5f5;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #555;
   font-size: 20px;
   transition: all 0.3s;
}

.method-btn:hover {
   background-color: #e0e0e0;
   transform: translateY(-2px);
}

/* ==================== الشركاء ==================== */
.partners-section {
   padding: 60px 0;
   background-color: var(--section-bg);
}

.partners-slider {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 40px;
   padding: 20px 0;
}

.partner-logo {
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.partner-logo img {
   max-height: 100%;
   max-width: 180px;
   filter: grayscale(100%);
   opacity: 0.7;
   transition: all 0.3s;
}

.partner-logo:hover img {
   filter: grayscale(0%);
   opacity: 1;
}

/* ==================== الروابط الاجتماعية ==================== */
.social-links {
   display: flex;
   gap: 15px;
}

.social-links a {
   color: var(--white);
   background-color: #333;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
   text-decoration: none;
}

.social-links a:hover {
   background-color: var(--primary-color);
   transform: translateY(-3px);
}

/* ==================== الفوتر الموحد ==================== */
.main-footer {
   background-color: #222;
   color: var(--white);
   padding: 60px 0 0;
   margin-top: auto;
}

.footer-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
   margin-bottom: 40px;
}

.footer-about h3,
.footer-links h3,
.footer-contact h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
}

.footer-about p {
   color: #aaa;
   margin-bottom: 20px;
}

.footer-links ul {
   list-style: none;
}

.footer-links li {
   margin-bottom: 10px;
}

.footer-links a {
   color: #aaa;
   text-decoration: none;
   transition: color 0.3s;
}

.footer-links a:hover {
   color: var(--white);
}

.footer-contact p {
   color: #aaa;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
}

.footer-contact i {
   margin-left: 10px;
   color: var(--primary-color);
}

.footer-bottom {
   border-top: 1px solid #444;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #aaa;
   font-size: 14px;
}

.footer-legal {
   display: flex;
   gap: 20px;
}

.footer-legal a {
   color: #aaa;
   text-decoration: none;
   transition: color 0.3s;
}

.footer-legal a:hover {
   color: var(--white);
}

/* ==================== المساعدات والأدوات ==================== */
.read-more,
.view-all {
   color: var(--primary-color);
   text-decoration: none;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
}

.read-more i,
.view-all i {
   margin-right: 5px;
   transition: margin 0.3s;
}

.read-more:hover i,
.view-all:hover i {
   margin-right: 10px;
}

.image-preview {
   margin-top: 10px;
   border-radius: 8px;
   overflow: hidden;
}

.image-preview img {
   max-width: 100%;
   height: auto;
}

/* ==================== الاستجابة للشاشات ==================== */
@media (max-width: 992px) {
   .hero-section h2,
   .campaigns-hero h2 {
       font-size: 36px;
   }
   
   .hero-section p,
   .campaigns-hero p {
       font-size: 18px;
   }
   
   .container {
       padding: 0 15px;
   }
}

@media (max-width: 768px) {
   .main-header .container {
       flex-direction: column;
   }

   .logo-container {
       margin-bottom: 15px;
   }

   .main-nav ul {
       flex-wrap: wrap;
       justify-content: center;
   }

   .hero-section,
   .campaigns-hero,
   .volunteer-hero {
       padding: 80px 20px;
   }

   .hero-section h2,
   .campaigns-hero h2 {
       font-size: 30px;
   }
   
   .section-title {
       font-size: 28px;
   }
   
   .section-subtitle {
       font-size: 16px;
   }
   
   .form-row {
       flex-direction: column;
       gap: 0;
   }
   
   .stats-grid {
       grid-template-columns: repeat(2, 1fr);
   }
   
   .grid-2,
   .grid-3,
   .grid-4 {
       grid-template-columns: 1fr;
   }
   
   .campaigns-grid {
       grid-template-columns: 1fr;
   }
   
   .programs-grid {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
   
   .donation-type-options {
       flex-direction: column;
       align-items: center;
   }
   
   .donation-type-option {
       width: 100%;
       max-width: 300px;
   }
   
   .account-header {
       justify-content: center;
       text-align: center;
   }

   .profile-info {
       flex-direction: column;
       text-align: center;
   }

   .profile-details {
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   .login-container,
   .payment-container {
       padding: 30px;
   }
   
   .modal-content {
       width: 90%;
       margin: 20% auto;
       padding: 20px;
   }
   
   .amount-options {
       justify-content: center;
   }
   
   .amount-option {
       min-width: 120px;
   }
}

@media (max-width: 576px) {
   .hero-section,
   .campaigns-hero {
       padding: 60px 20px;
   }
   
   .hero-section h2,
   .campaigns-hero h2 {
       font-size: 26px;
   }
   
   .hero-section p,
   .campaigns-hero p {
       font-size: 16px;
   }
   
   .hero-buttons .btn {
       width: 100%;
       margin-bottom: 10px;
   }
   
   .section-title {
       font-size: 24px;
   }
   
   .stats-grid {
       grid-template-columns: 1fr;
   }
   
   .programs-grid,
   .campaigns-grid {
       grid-template-columns: 1fr;
   }
   
   .footer-bottom {
       flex-direction: column;
       text-align: center;
       gap: 15px;
   }
   
   .footer-legal {
       justify-content: center;
   }
   
   .login-header h2,
   .payment-header h2 {
       font-size: 24px;
   }
   
   .login-container,
   .payment-container {
       padding: 25px;
   }
   
   .donation-type-option {
       min-width: 150px;
       padding: 20px 10px;
   }

   .donation-type-option i {
       font-size: 30px;
   }

   .donation-type-option span {
       font-size: 16px;
   }
   
   .amount-option {
       padding: 12px 20px;
       font-size: 16px;
   }
   
   .profile-image {
       width: 100px;
       height: 100px;
   }
   
   .account-actions {
       width: 100%;
       justify-content: center;
   }
   
   .edit-btn,
   .logout-btn {
       flex: 1;
       justify-content: center;
   }
}

/* ==================== أنماط إضافية للتطوع ==================== */
.volunteer-hero {
   background: linear-gradient(var(--overlay), var(--overlay)), url('../images/volunteer-bg.jpg');
   background-size: cover;
   background-position: center;
   color: var(--white);
   text-align: center;
   padding: 120px 20px;
}

.volunteer-hero h2 {
   font-size: 42px;
   margin-bottom: 20px;
}

.volunteer-hero p {
   font-size: 20px;
   max-width: 700px;
   margin: 0 auto 30px;
}

.cta-btn {
   display: inline-block;
   background-color: var(--primary-color);
   color: var(--white);
   padding: 12px 30px;
   border-radius: 30px;
   text-decoration: none;
   font-weight: 600;
   font-size: 18px;
   transition: all 0.3s;
}

.cta-btn:hover {
   background-color: #7c8156;
   transform: translateY(-3px);
}

.benefits-section {
   padding: 80px 0;
   background-color: var(--section-bg);
}

.benefits-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
}

.benefit-card {
   background-color: var(--white);
   padding: 30px 25px;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   text-align: center;
   transition: transform 0.3s;
}

.benefit-card:hover {
   transform: translateY(-10px);
}

.benefit-icon {
   width: 80px;
   height: 80px;
   background-color: var(--secondary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
}

.benefit-icon i {
   font-size: 30px;
   color: var(--primary-color);
}

/* ==================== أنماط للتبويبات ==================== */
.opportunities-tabs {
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
   flex-wrap: wrap;
}

.tab-btn {
   padding: 12px 25px;
   background-color: var(--white);
   border: 2px solid var(--primary-color);
   border-radius: 30px;
   font-size: 16px;
   font-weight: 600;
   color: var(--primary-color);
   cursor: pointer;
   transition: all 0.3s;
   margin: 5px;
}

.tab-btn:hover, 
.tab-btn.active {
   background-color: var(--primary-color);
   color: var(--white);
}

.tab-content {
   display: none;
}

.tab-content.active {
   display: block;
}

/* ==================== بطاقات الحملات ==================== */
.opportunities-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
}

.opportunity-card {
   background-color: var(--white);
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 25px;
   transition: all 0.3s;
   position: relative;
   padding-bottom: 70px;
}

.opportunity-card:hover {
   border-color: var(--primary-color);
   box-shadow: 0 5px 15px rgba(145, 149, 106, 0.1);
}

.opportunity-card h3 {
   color: var(--primary-color);
   margin-bottom: 15px;
   font-size: 20px;
}

.time-commitment {
   display: flex;
   align-items: center;
   color: var(--primary-color);
   font-size: 14px;
   margin-bottom: 15px;
}

.time-commitment i {
   margin-left: 5px;
}

.apply-btn {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--primary-color);
   color: var(--white);
   border: none;
   padding: 8px 20px;
   border-radius: 20px;
   font-size: 14px;
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.3s;
   width: calc(100% - 50px);
   text-align: center;
}

.apply-btn:hover {
   background-color: #7c8156;
}

/* ==================== الشهادات ==================== */
.testimonials-section {
   padding: 80px 0;
   background-color: var(--section-bg);
}

.testimonials-slider {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 30px;
}

.testimonial-card {
   background-color: var(--white);
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.testimonial-content {
   padding: 30px;
   background-color: var(--secondary-color);
   font-size: 18px;
   font-style: italic;
   color: var(--dark-color);
}

.testimonial-author {
   padding: 20px;
   display: flex;
   align-items: center;
}

.testimonial-author img {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   object-fit: cover;
   margin-left: 15px;
   border: 3px solid var(--primary-color);
}

.testimonial-author h4 {
   color: var(--primary-color);
   margin-bottom: 5px;
}

.testimonial-author span {
   color: var(--light-color);
   font-size: 14px;
}

/* ==================== قسم النماذج المتقدمة ==================== */
.volunteer-form-section {
   padding: 80px 0;
   background-color: var(--primary-color);
   color: var(--white);
}

.volunteer-form-section .section-title {
   color: var(--white);
}
 
.form-container {
   max-width: 800px;
   margin: 0 auto;
}

.form-description {
   text-align: center;
   margin-bottom: 40px;
   font-size: 18px;
}

.volunteer-form {
   background-color: var(--white);
   padding: 40px;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   color: var(--dark-color);
}

.form-group select[multiple] {
   height: auto;
   min-height: 120px;
}

.terms-check {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 25px;
   cursor: pointer;
   color: var(--dark-color);
}

.terms-check input {
   margin-left: 10px;
}

.terms-check a {
   color: var(--primary-color);
   text-decoration: none;
}

.submit-btn {
   background-color: var(--primary-color);
   color: var(--white);
   border: none;
   padding: 15px 40px;
   border-radius: 30px;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.3s;
}

.submit-btn:hover {
   background-color: #7c8156;
}

/* ==================== نقاط المكافآت ==================== */
.reward-card {
   background-color: var(--white);
   border-radius: 15px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   padding: 25px;
   margin-bottom: 30px;
}

.reward-card h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.points-display {
   display: flex;
   align-items: center;
   gap: 30px;
   margin-bottom: 20px;
   flex-wrap: wrap;
}

.points-circle {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   background-color: var(--secondary-color);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 10px solid var(--primary-color);
}

.points-value {
   font-size: 32px;
   font-weight: 700;
   color: var(--primary-color);
}

.points-label {
   font-size: 16px;
   color: var(--light-color);
}

.points-details {
   flex: 1;
   min-width: 250px;
}

.points-progress {
   margin-bottom: 15px;
}

.points-progress span {
   font-size: 14px;
   color: var(--light-color);
}

.points-info {
   color: var(--light-color);
   font-size: 15px;
}

.points-info strong {
   color: var(--primary-color);
}

.rewards-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 15px;
   margin-top: 20px;
}

.reward-item {
   background-color: var(--secondary-color);
   padding: 15px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.reward-item i {
   color: var(--primary-color);
   font-size: 18px;
}

/* ==================== الأيقونات والإحصائيات ==================== */
.stat-card {
   background-color: var(--section-bg);
   border-radius: 10px;
   padding: 20px;
   display: flex;
   align-items: center;
   gap: 15px;
}

.stat-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
}

.stat-icon.total-donations {
   background-color: rgba(145, 149, 106, 0.2);
   color: var(--primary-color);
}

.stat-icon.total-amount {
   background-color: rgba(76, 175, 80, 0.2);
   color: #4CAF50;
}

.stat-icon.families-helped {
   background-color: rgba(33, 150, 243, 0.2);
   color: #2196F3;
}

.stat-icon.last-donation {
   background-color: rgba(255, 193, 7, 0.2);
   color: #FFC107;
}

.stat-info {
   display: flex;
   flex-direction: column;
}

.stat-value {
   font-size: 20px;
   font-weight: 700;
   color: var(--dark-color);
}

.stat-label {
   font-size: 14px;
   color : var(--primary-color) !important;
}

/* ==================== طرق التسليم والدفع ==================== */
.delivery-method {
   margin: 30px 0;
   border: 1px solid #eee;
   border-radius: 10px;
   padding: 20px;
}

.delivery-method h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   text-align: center;
}

.method-option {
   margin-bottom: 15px;
}

.method-option input {
   display: none;
}

.method-option label {
   display: flex;
   align-items: center;
   padding: 15px;
   background-color: #f9f9f9;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s;
}

.method-option label:hover {
   background-color: #f0f0f0;
}

.method-option input:checked + label {
   background-color: var(--secondary-color);
   border-right: 3px solid var(--primary-color);
}

.method-option i {
   margin-left: 10px;
   color: var(--primary-color);
   font-size: 20px;
}

.method-details {
   display: none;
   padding: 15px;
   background-color: #f9f9f9;
   border-radius: 8px;
   margin-top: 10px;
}

.method-details.active {
   display: block;
}

.method-details p {
   margin-bottom: 10px;
   color: var(--light-color);
}

/* ==================== الأدوات المساعدة ==================== */
.text-center {
   text-align: center;
}

.text-left {
   text-align: left;
}

.text-right {
   text-align: right;
}

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.border-radius { border-radius: 8px; }
.border-radius-sm { border-radius: 4px; }
.border-radius-lg { border-radius: 12px; }

.shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }

/* ==================== الحالات التفاعلية ==================== */
.hover-scale:hover {
   transform: scale(1.05);
   transition: transform 0.3s ease;
}

.hover-shadow:hover {
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   transition: box-shadow 0.3s ease;
}

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

@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

.slide-up {
   animation: slideUp 0.5s ease-out;
}

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

/* ==================== التمهيد للطباعة ==================== */
@media print {
   .main-header,
   .main-footer,
   .btn,
   button {
       display: none;
   }
   
   body {
       background: white;
       color: black;
   }
   
   .container {
       max-width: none;
       padding: 0;
   }
}


/* الأساسيات */
:root {
   --primary-color: #91956a;
   --secondary-color: #fefbe9;
   --text-color: #333;
   --light-text: #777;
   --background-color: #fff;
   --section-bg: #f9f9f9;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Cairo', sans-serif;
   color: var(--text-color);
   background-color: var(--background-color);
   line-height: 1.6;
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

/* الهيدر */
.main-header {
   background-color: var(--background-color);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
}

.main-header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
}

.logo-container {
   display: flex;
   align-items: center;
}

.logo {
   width: 60px;
   height: 60px;
   margin-left: 15px;
}

.main-header h1 {
   color: var(--primary-color);
   font-size: 24px;
}

.main-nav ul {
   display: flex;
   list-style: none;
}

.main-nav a {
   text-decoration: none;
   color: var(--text-color);
   padding: 10px 15px;
   font-weight: 500;
   transition: color 0.3s;
}

.main-nav a:hover, .main-nav a.active {
   color: var(--primary-color);
}

/* قسم البطل */
.hero-section {
   background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../website-assets/images/hero-bg.jpg');
   background-size: cover;
   background-position: center;
   color: white;
   text-align: center;
   padding: 228px 20px;
}

.hero-section h2 {
   font-size: 36px;
   margin-bottom: 20px;
}

.hero-section p {
   font-size: 20px;
   max-width: 700px;
   margin: 0 auto;
}

/* المحتوى الرئيسي */
.main-content {
   padding: 60px 0;
}

.section-title {
   text-align: center;
   color: var(--primary-color);
   margin-bottom: 40px;
   font-size: 32px;
   position: relative;
}

 
/* قسم عن المؤسسة */
.about-content {
   display: flex;
   align-items: center;
   gap: 40px;
   margin-bottom: 60px;
}

.about-text {
   flex: 1;
}

.about-text p {
   margin-bottom: 20px;
   font-size: 18px;
   line-height: 1.8;
}

.about-image {
   flex: 1;
}

.about-image img {
   width: 100%;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* الرؤية والرسالة والقيم */
.vision-mission {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin-bottom: 60px;
}

.vision, .mission, .values {
   background-color: var(--section-bg);
   padding: 30px;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.vision h3, .mission h3, .values h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
   display: flex;
   align-items: center;
}

.vision h3 i, .mission h3 i, .values h3 i {
   margin-left: 10px;
}

.values ul {
   list-style-position: inside;
}

.values li {
   margin-bottom: 10px;
}

/* الإنجازات */
.stats-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 30px;
   text-align: center;
   margin-bottom: 60px;
}

.stat-item {
   background-color: #ffffff;
   padding: 30px 20px;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
   border: 1px solid #676a46;
}

.stat-number {
   font-size: 48px;
   font-weight: 700;
   color: var(--primary-color);
   margin-bottom: 10px;
}

.stat-label {
   font-size: 18px;
   color: var(--light-text);
}

/* فريق العمل */
.team-members {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
   margin-bottom: 60px;
}

.member {
   background-color: var(--section-bg);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
   text-align: center;
}

.member img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 20px;
   border: 5px solid var(--primary-color);
}

.member h4 {
   color: var(--primary-color);
   margin-bottom: 5px;
}

.member p {
   color: var(--light-text);
}

/* الشركاء */
.partners-logos {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 40px;
   margin-bottom: 60px;
}

.partners-logos img {
   height: 80px;
   filter: grayscale(100%);
   opacity: 0.7;
   transition: all 0.3s;
}

.partners-logos img:hover {
   filter: grayscale(0%);
   opacity: 1;
}

/* الفوتر */
.main-footer {
   background-color: #222;
   color: white;
   padding: 60px 0 0;
}

.footer-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
   margin-bottom: 40px;
}

.footer-about h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
}

.footer-about p {
   color: #aaa;
}

.footer-links h3, .footer-contact h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
}

.footer-links ul {
   list-style: none;
}

.footer-links li {
   margin-bottom: 10px;
}

.footer-links a {
   color: #aaa;
   text-decoration: none;
   transition: color 0.3s;
}

.footer-links a:hover {
   color: white;
}

.footer-contact p {
   color: #aaa;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
}

.footer-contact i {
   margin-left: 10px;
   color: var(--primary-color);
}

.footer-bottom {
   border-top: 1px solid #444;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #aaa;
}

.social-icons a {
   color: white;
   background-color: #333;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
   transition: all 0.3s;
   text-decoration: none;

}

.social-icons a:hover {
   background-color: var(--primary-color);
   transform: translateY(-3px);
}

/* التكيف مع الشاشات الصغيرة */
@media (max-width: 768px) {
   .main-header .container {
       flex-direction: column;
   }

   .logo-container {
       margin-bottom: 15px;
   }

   .main-nav ul {
       flex-wrap: wrap;
       justify-content: center;
   }

   .hero-section {
       padding: 60px 20px;
   }

   .hero-section h2 {
       font-size: 28px;
   }

   .hero-section p {
       font-size: 16px;
   }

   .about-content {
       flex-direction: column;
   }

   .section-title {
       font-size: 26px;
   }
}

@media (max-width: 480px) {
   .stats-container {
       grid-template-columns: 1fr;
   }

   .team-members {
       grid-template-columns: 1fr;
   }

   .footer-bottom {
       flex-direction: column;
       text-align: center;
   }

   .social-icons {
       margin-top: 15px;
   }
}

/* الأساسيات */
:root {
   --primary-color: #91956a;
   --secondary-color: #fefbe9;
   --text-color: #333;
   --light-text: #777;
   --background-color: #fff;
   --section-bg: #f9f9f9;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
   font-family: 'Cairo', sans-serif;
   color: var(--text-color);
   background-color: var(--background-color);
   line-height: 1.6;
 }
 
 .container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }
 
 /* الهيدر */
 .main-header {
   background-color: var(--background-color);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
 .main-header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
 }
 
 .logo-container {
   display: flex;
   align-items: center;
 }
 
 .logo {
   width: 60px;
   height: 60px;
   margin-left: 15px;
 }
 
 .main-header h1 {
   color: var(--primary-color);
   font-size: 24px;
 }
 
 .main-nav ul {
   display: flex;
   list-style: none;
 }
 
 .main-nav a {
   text-decoration: none;
   color: var(--text-color);
   padding: 10px 15px;
   font-weight: 500;
   transition: color 0.3s;
 }
 
 .main-nav a:hover, .main-nav a.active {
   color: var(--primary-color);
 }
 
 /* قسم البطل */
 .hero-section {
   background: linear-gradient(var(--overlay), var(--overlay)), url('../website-assets/images/hero-bg.jpg');
   background-size: cover;
   background-position: center;
   color: white;
   text-align: center;
   padding: 228px 20px;
 }
 
 .hero-section h2 {
   font-size: 36px;
   margin-bottom: 20px;
 }
 
 .hero-section p {
   font-size: 20px;
   max-width: 700px;
   margin: 0 auto;
 }
 
 /* المحتوى الرئيسي */
 .main-content {
   padding: 60px 0;
 }
 
 .section-title {
   text-align: center;
   color: var(--primary-color);
   margin-bottom: 40px;
   font-size: 32px;
   position: relative;
 }
 
 
 /* قسم تواصل معنا */
 .contact-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 40px;
   margin-bottom: 60px;
 }
 
 .contact-info {
   background-color: var(--section-bg);
   padding: 30px;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
 }
 
 .contact-info h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
   display: flex;
   align-items: center;
 }
 
 .contact-info h3 i {
   margin-left: 10px;
 }
 
 .contact-details {
   margin-bottom: 30px;
 }
 
 .contact-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 20px;
 }
 
 .contact-icon {
   background-color: var(--primary-color);
   color: white;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 15px;
   flex-shrink: 0;
 }
 
 .contact-text h4 {
   margin-bottom: 5px;
   color: var(--text-color);
 }
 
 .contact-text p, .contact-text a {
   color: var(--light-text);
   text-decoration: none;
   transition: color 0.3s;
 }
 
 .contact-text a:hover {
   color: var(--primary-color);
 }
 
 .social-media {
   display: flex;
   gap: 15px;
   margin-top: 20px;
 }
 
 .social-media a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background-color: var(--primary-color);
   color: white;
   border-radius: 50%;
   transition: all 0.3s;
 }
 
 .social-media a:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 /* نموذج التواصل */
 .contact-form {
   background-color: var(--section-bg);
   padding: 30px;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
 }
 
 .form-group {
   margin-bottom: 20px;
 }
 
 .form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 600;
   color: var(--text-color);
 }
 
 .form-control {
   width: 100%;
   padding: 12px 15px;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-family: 'Cairo', sans-serif;
   font-size: 16px;
   transition: border-color 0.3s;
 }
 
 .form-control:focus {
   outline: none;
   border-color: var(--primary-color);
 }
 
 textarea.form-control {
   min-height: 150px;
   resize: vertical;
 }
 
 .submit-btn {
   background-color: var(--primary-color);
   color: white;
   border: none;
   padding: 12px 30px;
   font-size: 16px;
   font-weight: 600;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s;
   font-family: 'Cairo', sans-serif;
 }
 
 .submit-btn:hover {
   background-color: #7a7e58;
   transform: translateY(-2px);
 }
 
 /* خريطة العنوان */
 .map-container {
   margin-bottom: 60px;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .map-container iframe {
   width: 100%;
   height: 400px;
   border: none;
 }
 
 /* الفوتر */
 .main-footer {
   background-color: #222;
   color: white;
   padding: 60px 0 0;
 }
 
 .footer-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
   margin-bottom: 40px;
 }
 
 .footer-about h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
 }
 
 .footer-about p {
   color: #aaa;
   margin-bottom: 20px;
 
 }
 
 .footer-links h3, .footer-contact h3 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 22px;
 }
 
 .footer-links ul {
   list-style: none;
 }
 
 .footer-links li {
   margin-bottom: 10px;
 }
 
 .footer-links a {
   color: #aaa;
   text-decoration: none;
   transition: color 0.3s;
 }
 
 .footer-links a:hover {
   color: white;
 }
 
 .footer-contact p {
   color: #aaa;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
 }
 
 .footer-contact i {
   margin-left: 10px;
   color: var(--primary-color);
 }
 
 .footer-bottom {
   border-top: 1px solid #444;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #aaa;
 }
 
 .social-icons a {
   color: white;
   background-color: #333;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
   transition: all 0.3s;
 }
 
 .social-icons a:hover {
   background-color: var(--primary-color);
   transform: translateY(-3px);
 }
 
 .social-links {
   display: flex;
   gap: 15px;
 }
 
 .social-links a {
   color: var(--white);
   background-color: #333;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
   text-decoration: none;
 
 }
 
 .social-links a:hover {
   background-color: var(--primary-color);
   transform: translateY(-3px);
 }
 
 /* التكيف مع الشاشات الصغيرة */
 @media (max-width: 768px) {
   .main-header .container {
       flex-direction: column;
   }
 
   .logo-container {
       margin-bottom: 15px;
   }
 
   .main-nav ul {
       flex-wrap: wrap;
       justify-content: center;
   }
 
   .hero-section {
       padding: 60px 20px;
   }
 
   .hero-section h2 {
       font-size: 28px;
   }
 
   .hero-section p {
       font-size: 16px;
   }
 
   .section-title {
       font-size: 26px;
   }
 }
 
 @media (max-width: 480px) {
   .footer-bottom {
       flex-direction: column;
       text-align: center;
   }
 
   .social-icons {
       margin-top: 15px;
   }
 }
 .donation-content {
   display: none;
}
.donation-content.active {
   display: block;
}


.campaign-card {
   border: none;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0,0,0,0.08);
   transition: all 0.3s ease;
}

.campaign-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}



.campaign-image,
.campaign-image-placeholder {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f8f9fa;
}

.campaign-badge {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(44, 95, 45, 0.9);
   color: white;
   padding: 0.25rem 0.75rem;
   border-radius: 15px;
   font-size: 0.8rem;
}

.campaign-card-body {
   padding: 1.5rem;
}

.campaign-card-title {
   color: #91956a;
   font-weight: 600;
   margin-bottom: 1rem;
}

.campaign-card-text {
   color: #666;
   font-size: 0.9rem;
   line-height: 1.5;
}

#monetary-donation .payment-methods {
   padding: 40px 0;
   background: transparent;
}

#monetary-donation .payment-methods .section-title {
   margin-bottom: 2rem;
}

#in-kind-donation .payment-methods,
#service-donation .payment-methods {
   display: none;
}
.donation-hero {
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   padding: 80px 0;
   text-align: center;
}

.donation-hero h2 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   font-weight: 600;
}

.donation-hero p {
   font-size: 1.2rem;
   opacity: 0.9;
}

.donation-type-section {
   padding: 60px 0;
   background: #f8f9fa;
}

.section-title {
   text-align: center;
   font-size: 2rem;
   color: #91956a;
   margin-bottom: 3rem;
   font-weight: 600;
}

.donation-type-options {
   display: flex;
   justify-content: center;
   gap: 2rem;
   flex-wrap: wrap;
}

.donation-type-option {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 15px;
   padding: 2rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
   min-width: 200px;
}

.donation-type-option:hover,
.donation-type-option.active {
   border-color: #91956a;
   background: #91956a;
   color: white;
   transform: translateY(-5px);
}

.donation-type-option i {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   display: block;
}

.donation-type-option span {
   font-size: 1.1rem;
   font-weight: 500;
}

.donation-content {
   display: none;
}

.donation-content.active {
   display: block;
}

.donation-amount {
   padding: 60px 0;
}

.amount-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 1rem;
   margin-bottom: 2rem;
}

.amount-option {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   padding: 1.5rem;
   font-size: 1.1rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
}

.amount-option:hover,
.amount-option.active {
   border-color: #91956a;
   background: #91956a;
   color: white;
}

.custom-amount {
   text-align: center;
   margin-top: 2rem;
}

.custom-amount input {
   width: 100%;
   max-width: 400px;
   padding: 1rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   font-size: 1.1rem;
   text-align: center;
   display: none;
}

.donor-info {
   padding: 60px 0;
   background: #f8f9fa;
}

.donor-form {
   max-width: 600px;
   margin: 0 auto;
}

.form-group {
   margin-bottom: 2rem;
}

.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
   color: #91956a;
}

.form-group input,
.form-group select,
.form-group textarea {
   width: 100%;
   padding: 1rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   font-size: 1rem;
   transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: #91956a;
}

.payment-methods {
   padding: 60px 0;
}

.methods-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
}

.method-card {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 15px;
   padding: 2rem;
   text-align: center;
   text-decoration: none;
   color: inherit;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative;
}

.method-card:hover {
   border-color: #91956a;
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(44, 95, 45, 0.1);
   text-decoration: none;
   color: inherit;
}

.method-card.active {
   border-color: #91956a;
   background: #f3f8f4;
}

.method-icon {
   font-size: 3rem;
   color: #91956a;
   margin-bottom: 1rem;
}

.method-card h3 {
   font-size: 1.3rem;
   margin-bottom: 0.5rem;
   color: #91956a;
}

.method-card p {
   color: #666;
   line-height: 1.5;
}

.delivery-method {
   margin: 2rem 0;
}

.delivery-method h3 {
   color: #91956a;
   margin-bottom: 1.5rem;
}

.method-option {
   margin-bottom: 1.5rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   overflow: hidden;
}

.method-option label {
   display: block;
   padding: 1rem;
   cursor: pointer;
   background: #f8f9fa;
   transition: background-color 0.3s ease;
}

.method-option label:hover {
   background: #e9ecef;
}

.method-option input[type="radio"] {
   margin-left: 0.5rem;
}

.method-option i {
   margin-left: 0.5rem;
   color: #91956a;
}

.method-details {
   padding: 0 1rem;
   max-height: 0;
   overflow: hidden;
   transition: all 0.3s ease;
   background: white;
}

.method-details.active {
   max-height: 1000px !important;
   padding: 1rem;
}

.payment-terms {
   margin-top: 3rem;
   text-align: center;
}

.terms-check {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
   gap: 0.5rem;
}

.terms-check input[type="checkbox"] {
   width: auto;
}

.terms-check a {
   color: #91956a;
   text-decoration: none;
}

.terms-check a:hover {
   text-decoration: underline;
}

.donate-btn {
   background: #91956a;
   color: white;
   border: none;
   padding: 1rem 3rem;
   border-radius: 50px;
   font-size: 1.1rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
}

.donate-btn:hover {
   background: #1e4220;
   transform: translateY(-2px);
}

.modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
}

.modal-content {
   background-color: white;
   margin: 15% auto;
   padding: 2rem;
   border-radius: 15px;
   width: 90%;
   max-width: 500px;
   position: relative;
}

.close-modal {
   position: absolute;
   top: 1rem;
   left: 1rem;
   font-size: 2rem;
   cursor: pointer;
   color: #999;
}

.close-modal:hover {
   color: #333;
}

.payment-info p {
   margin: 1rem 0;
   padding: 0.5rem;
   background: #f8f9fa;
   border-radius: 5px;
}

.modal-close-btn {
   background: #91956a;
   color: white;
   border: none;
   padding: 0.5rem 2rem;
   border-radius: 25px;
   cursor: pointer;
   margin-top: 1rem;
}

/* Success Screen Styles */
.success-container {
   min-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   text-align: center;
   padding: 2rem 0;
   position: relative;
}

.success-content {
   max-width: 900px;
   padding: 3rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.success-icon {
   font-size: 5rem;
   color: #4CAF50;
   margin-bottom: 2rem;
   animation: checkmark 0.8s ease-in-out;
}

@keyframes checkmark {
   0% { transform: scale(0); opacity: 0; }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); opacity: 1; }
}

.success-title {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.success-message {
   font-size: 1.2rem;
   margin-bottom: 2rem;
   line-height: 1.6;
   opacity: 0.9;
}

.donation-details {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 15px;
   padding: 2rem;
   margin: 2rem 0;
   text-align: right;
}

.donation-details h3 {
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
   color: #fff;
   text-align: center;
}

.detail-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
   font-weight: 600;
   color: rgba(255, 255, 255, 0.8);
}

.detail-value {
   font-weight: 700;
   color: #fff;
}

.amount-highlight {
   background: linear-gradient(45deg, #FFD700, #FFA500);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: 1.2em;
}

.action-buttons {
   margin-top: 3rem;
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
}

.btn {
   padding: 1rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
   border: 2px solid;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
   font-size: 1rem;
}


.btn-primary:hover {
   background: transparent;
   color: #fff;
   transform: translateY(-2px);
   text-decoration: none;
}

.btn-secondary {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: #fff;
   transform: translateY(-2px);
   text-decoration: none;
   color: #fff;
}

.social-share {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.social-share h4 {
   margin-bottom: 1rem;
   font-size: 1.1rem;
   opacity: 0.8;
}

.social-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
}

.social-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: all 0.3s ease;
   font-size: 1.2rem;
}

.social-btn.facebook { background: #3b5998; color: white; }
.social-btn.twitter  { background: #1da1f2; color: white; }
.social-btn.whatsapp { background: #25d366; color: white; }

.social-btn:hover {
   transform: translateY(-3px) scale(1.1);
   text-decoration: none;
   color: white;
}

.floating-hearts {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: hidden;
}

.heart {
   position: absolute;
   color: rgba(255, 255, 255, 0.3);
   font-size: 1.5rem;
   animation: float-up 4s linear infinite;
}

@keyframes float-up {
   0% { transform: translateY(100vh) rotate(0deg); opacity: 1; }
   100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.reference-number {
   background: linear-gradient(45deg, #FFD700, #FFA500);
   color: #91956a;
   padding: 1rem;
   border-radius: 10px;
   margin: 1rem 0;
   font-family: 'Courier New', monospace;
   font-weight: bold;
   letter-spacing: 2px;
}

/* Error Messages */
.error-message {
   color: #dc3545;
   font-size: 0.875rem;
   margin-top: 0.25rem;
   display: block;
}

/* Success Messages */
.alert {
   padding: 1rem;
   margin-bottom: 2rem;
   border-radius: 10px;
   border: 1px solid transparent;
}

.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger  { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }

/* Responsive Design */
@media (max-width: 768px) {
   .donation-type-options { flex-direction: column; align-items: center; }
   .methods-grid { grid-template-columns: 1fr; }
   .amount-options { grid-template-columns: repeat(2, 1fr); }
   .donation-hero h2 { font-size: 2rem; }
   .section-title { font-size: 1.5rem; }
   .success-content { margin: 1rem; padding: 2rem; }
   .success-title { font-size: 2rem; }
   .success-message { font-size: 1.1rem; }
   .action-buttons { flex-direction: column; align-items: center; }
   .btn { width: 100%; max-width: 250px; justify-content: center; }
   .detail-row { flex-direction: column; text-align: center; gap: 0.5rem; }
}
</style>
<style>
/* Donation Page Styles */
.donation-hero {
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   padding: 80px 0;
   text-align: center;
}

.donation-hero h2 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   font-weight: 600;
}

.donation-hero p {
   font-size: 1.2rem;
   opacity: 0.9;
}

.donation-type-section {
   padding: 60px 0;
   background: #f8f9fa;
}

.section-title {
   text-align: center;
   font-size: 2rem;
   color: #91956a;
   margin-bottom: 3rem;
   font-weight: 600;
}

.donation-type-options {
   display: flex;
   justify-content: center;
   gap: 2rem;
   flex-wrap: wrap;
}

.donation-type-option {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 15px;
   padding: 2rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
   min-width: 200px;
}

.donation-type-option:hover,
.donation-type-option.active {
   border-color: #91956a;
   background: #91956a;
   color: white;
   transform: translateY(-5px);
}

.donation-type-option.disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background: #f8f9fa;
   color: #6c757d;
}

.donation-type-option.disabled:hover {
   transform: none;
   border-color: #e9ecef;
   background: #f8f9fa;
   color: #6c757d;
}

.donation-type-option i {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   display: block;
}

.donation-type-option span {
   font-size: 1.1rem;
   font-weight: 500;
}

.donation-content {
   display: none;
}

.donation-content.active {
   display: block;
}

.donation-amount {
   padding: 60px 0;
}

.amount-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 1rem;
   margin-bottom: 2rem;
}

.amount-option {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   padding: 1.5rem;
   font-size: 1.1rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
}

.amount-option:hover,
.amount-option.active {
   border-color: #91956a;
   background: #91956a;
   color: white;
}

.amount-option.disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.custom-amount {
   text-align: center;
   margin-top: 2rem;
}

.custom-amount input {
   width: 100%;
   max-width: 400px;
   padding: 1rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   font-size: 1.1rem;
   text-align: center;
   display: none;
}

.donor-info {
   padding: 60px 0;
   background: #f8f9fa;
}

.donor-form {
   max-width: 600px;
   margin: 0 auto;
}

.form-group {
   margin-bottom: 2rem;
}

.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
   color: #91956a;
}

.form-group input,
.form-group select,
.form-group textarea {
   width: 100%;
   padding: 1rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   font-size: 1rem;
   transition: border-color 0.3s ease;
   font-family: 'Cairo', sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: #91956a;
}

.form-hint {
   display: block;
   color: #6c757d;
   font-size: 0.85rem;
   margin-top: 0.5rem;
   font-style: italic;
}

.payment-methods {
   padding: 60px 0;
}

.methods-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
}

.method-card {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 15px;
   padding: 2rem;
   text-align: center;
   text-decoration: none;
   color: inherit;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative;
}

.method-card:hover {
   border-color: #91956a;
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(44, 95, 45, 0.1);
   text-decoration: none;
   color: inherit;
}

.method-card.active {
   border-color: #91956a;
   background: #f3f8f4;
}

.method-icon {
   font-size: 3rem;
   color: #91956a;
   margin-bottom: 1rem;
}

.method-card h3 {
   font-size: 1.3rem;
   margin-bottom: 0.5rem;
   color: #91956a;
}

.method-card p {
   color: #666;
   line-height: 1.5;
}

.delivery-method {
   margin: 2rem 0;
}

.delivery-method h3 {
   color: #91956a;
   margin-bottom: 1.5rem;
}

.method-option {
   margin-bottom: 1.5rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   overflow: hidden;
}

.method-option label {
   display: block;
   padding: 1rem;
   cursor: pointer;
   background: #f8f9fa;
   transition: background-color 0.3s ease;
}

.method-option label:hover {
   background: #e9ecef;
}

.method-option input[type="radio"] {
   margin-left: 0.5rem;
}

.method-option i {
   margin-left: 0.5rem;
   color: #91956a;
}

.method-details {
   padding: 0 1rem;
   max-height: 0;
   overflow: hidden;
   transition: all 0.3s ease;
   background: white;
}

.method-details.active {
   max-height: 1000px;
   padding: 1rem;
}

.payment-terms {
   margin-top: 3rem;
   text-align: center;
}

.terms-check {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
   gap: 0.5rem;
}

.terms-check input[type="checkbox"] {
   width: auto;
}

.terms-check a {
   color: #91956a;
   text-decoration: none;
}

.terms-check a:hover {
   text-decoration: underline;
}

.donate-btn {
   background: #91956a;
   color: white;
   border: none;
   padding: 1rem 3rem;
   border-radius: 50px;
   font-size: 1.1rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: 'Cairo', sans-serif;
}

.donate-btn:hover {
   background: #1e4220;
   transform: translateY(-2px);
}

.donate-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

.modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
}

.modal-content {
   background-color: white;
   margin: 15% auto;
   padding: 2rem;
   border-radius: 15px;
   width: 90%;
   max-width: 500px;
   position: relative;
}

.close-modal {
   position: absolute;
   top: 1rem;
   left: 1rem;
   font-size: 2rem;
   cursor: pointer;
   color: #999;
}

.close-modal:hover {
   color: #333;
}

.payment-info p {
   margin: 1rem 0;
   padding: 0.5rem;
   background: #f8f9fa;
   border-radius: 5px;
}

.modal-close-btn {
   background: #91956a;
   color: white;
   border: none;
   padding: 0.5rem 2rem;
   border-radius: 25px;
   cursor: pointer;
   margin-top: 1rem;
}

/* Authentication Required Styles */
.login-required {
   text-align: center;
   padding: 4rem 2rem;
}

.login-prompt {
   max-width: 500px;
   margin: 0 auto;
}

.login-icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, #91956a, #4a7c59);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 2rem;
   box-shadow: 0 10px 30px rgba(44, 95, 45, 0.3);
}

.login-icon i {
   font-size: 2rem;
   color: white;
}

.login-prompt h3 {
   font-size: 1.75rem;
   color: #91956a;
   margin-bottom: 1rem;
   font-weight: 600;
}

.login-prompt p {
   color: #666;
   font-size: 1.1rem;
   margin-bottom: 2rem;
   line-height: 1.6;
}

.auth-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin-bottom: 3rem;
   flex-wrap: wrap;
}

.btn-auth {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1rem;
   transition: all 0.3s ease;
   border: 2px solid;
   min-width: 180px;
   justify-content: center;
}

.btn-login {
   background: #91956a;
   color: white;
   border-color: #91956a;
}

.btn-login:hover {
   background: #1e4220;
   border-color: #1e4220;
   color: white;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(44, 95, 45, 0.3);
}

.btn-register {
   background: transparent;
   color: #91956a;
   border-color: #91956a;
}

.btn-register:hover {
   background: #91956a;
   color: white;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(44, 95, 45, 0.3);
}

.benefits-list {
   background: #f8f9fa;
   border-radius: 15px;
   padding: 2rem;
   border: 1px solid #e9ecef;
   text-align: right;
}

.benefits-list h4 {
   color: #91956a;
   font-size: 1.25rem;
   margin-bottom: 1.5rem;
   font-weight: 600;
   text-align: center;
}

.benefits-list ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.benefits-list li {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   color: #666;
   margin-bottom: 1rem;
   font-size: 0.95rem;
}

.benefits-list li:last-child {
   margin-bottom: 0;
}

.benefits-list li i {
   color: #91956a;
   font-size: 0.875rem;
   flex-shrink: 0;
}

/* User Info Display Styles */
.user-info-display {
   margin-bottom: 2rem;
}

.user-info-display .alert {
   padding: 1rem 1.5rem;
   border-radius: 12px;
   border: none;
   margin-bottom: 1.5rem;
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.user-info-display .alert-info {
   background: linear-gradient(135deg, #cce7ff 0%, #b8daff 100%);
   color: #004085;
   border-left: 4px solid #998965;
}

.user-info-display .alert-warning {
   background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
   color: #856404;
   border-left: 4px solid #ffc107;
}

.user-info-display .alert i {
   font-size: 1.1rem;
}

.user-info-display .alert a {
   color: inherit;
   font-weight: 600;
   text-decoration: underline;
}

.user-details {
   background: #f8f9fa;
   border-radius: 12px;
   padding: 1.5rem;
   border: 1px solid #e9ecef;
}

.detail-item {
   margin-bottom: 0.75rem;
   font-size: 0.95rem;
   color: #495057;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.detail-item:last-child {
   margin-bottom: 0;
}

.detail-item strong {
   color: #91956a;
   font-weight: 600;
   min-width: 120px;
}

/* Success Screen Styles */
.success-container {
   min-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   text-align: center;
   padding: 2rem 0;
   position: relative;
}

.success-content {
   max-width: 900px;
   padding: 3rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.success-icon {
   font-size: 5rem;
   color: #4CAF50;
   margin-bottom: 2rem;
   animation: checkmark 0.8s ease-in-out;
}

@keyframes checkmark {
   0% { transform: scale(0); opacity: 0; }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); opacity: 1; }
}

.success-title {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.success-message {
   font-size: 1.2rem;
   margin-bottom: 2rem;
   line-height: 1.6;
   opacity: 0.9;
}

.donation-details {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 15px;
   padding: 2rem;
   margin: 2rem 0;
   text-align: right;
}

.donation-details h3 {
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
   color: #fff;
   text-align: center;
}

.detail-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.detail-row:last-child { 
   border-bottom: none; 
}

.detail-label {
   font-weight: 600;
   color: rgba(255, 255, 255, 0.8);
}

.detail-value {
   font-weight: 700;
   color: #fff;
}

.amount-highlight {
   background: linear-gradient(45deg, #FFD700, #FFA500);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: 1.2em;
}

.action-buttons {
   margin-top: 3rem;
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
}

.btn {
   padding: 1rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
   border: 2px solid;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
   font-size: 1rem;
}



.btn-primary:hover {
   background: transparent;
   color: #fff;
   transform: translateY(-2px);
   text-decoration: none;
}

.btn-secondary {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
   border-color: #fff;
   transform: translateY(-2px);
   text-decoration: none;
   color: #fff;
}

.social-share {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.social-share h4 {
   margin-bottom: 1rem;
   font-size: 1.1rem;
   opacity: 0.8;
}

.social-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
}

.social-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: all 0.3s ease;
   font-size: 1.2rem;
}

.social-btn.facebook { background: #3b5998; color: white; }
.social-btn.twitter  { background: #1da1f2; color: white; }
.social-btn.whatsapp { background: #25d366; color: white; }

.social-btn:hover {
   transform: translateY(-3px) scale(1.1);
   text-decoration: none;
   color: white;
}

.floating-hearts {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: hidden;
}

.heart {
   position: absolute;
   color: rgba(255, 255, 255, 0.3);
   font-size: 1.5rem;
   animation: float-up 4s linear infinite;
}

@keyframes float-up {
   0% { transform: translateY(100vh) rotate(0deg); opacity: 1; }
   100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.reference-number {
   background: linear-gradient(45deg, #FFD700, #FFA500);
   color: #91956a;
   padding: 1rem;
   border-radius: 10px;
   margin: 1rem 0;
   font-family: 'Courier New', monospace;
   font-weight: bold;
   letter-spacing: 2px;
}

/* Error Messages */
.error-message {
   color: #dc3545;
   font-size: 0.875rem;
   margin-top: 0.25rem;
   display: block;
}

/* Success Messages */
.alert {
   padding: 1rem;
   margin-bottom: 2rem;
   border-radius: 10px;
   border: 1px solid transparent;
}

.alert-success { 
   color: #155724; 
   background-color: #d4edda; 
   border-color: #c3e6cb; 
}

.alert-danger  { 
   color: #721c24; 
   background-color: #f8d7da; 
   border-color: #f5c6cb; 
}

/* Responsive Design */
@media (max-width: 768px) {
   .donation-type-options { 
       flex-direction: column; 
       align-items: center; 
   }
   
   .methods-grid { 
       grid-template-columns: 1fr; 
   }
   
   .amount-options { 
       grid-template-columns: repeat(2, 1fr); 
   }
   
   .donation-hero h2 { 
       font-size: 2rem; 
   }
   
   .section-title { 
       font-size: 1.5rem; 
   }
   
   .success-content { 
       margin: 1rem; 
       padding: 2rem; 
   }
   
   .success-title { 
       font-size: 2rem; 
   }
   
   .success-message { 
       font-size: 1.1rem; 
   }
   
   .action-buttons { 
       flex-direction: column; 
       align-items: center; 
   }
   
   .btn { 
       width: 100%; 
       max-width: 250px; 
       justify-content: center; 
   }
   
   .detail-row { 
       flex-direction: column; 
       text-align: center; 
       gap: 0.5rem; 
   }
   
   .login-required {
       padding: 2rem 1rem;
   }
   
   .login-prompt h3 {
       font-size: 1.5rem;
   }
   
   .login-prompt p {
       font-size: 1rem;
   }
   
   .auth-buttons {
       flex-direction: column;
       align-items: center;
   }
   
   .btn-auth {
       width: 100%;
       max-width: 280px;
   }
   
   .benefits-list {
       padding: 1.5rem;
       text-align: center;
   }
   
   .benefits-list li {
       justify-content: center;
   }
   
   .user-details {
       padding: 1rem;
   }
   
   .detail-item {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.25rem;
   }
   
   .detail-item strong {
       min-width: auto;
   }
}


.volunteer-hero {
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   padding: 100px 0;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.volunteer-hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0" stop-color="%23FFF" stop-opacity="0.1"/><stop offset="100%" stop-color="%23FFF" stop-opacity="0"/></radialGradient></defs><circle fill="url(%23a)" cx="10" cy="10" r="10"/></svg>') repeat;
   opacity: 0.1;
}

.volunteer-hero h2 {
   font-size: 3rem;
   margin-bottom: 1.5rem;
   font-weight: 700;
   position: relative;
   z-index: 2;
}

.volunteer-hero p {
   font-size: 1.3rem;
   margin-bottom: 2rem;
   opacity: 0.9;
   position: relative;
   z-index: 2;
}

.cta-btn {
   display: inline-block;
   background: #fff;
   color: #91956a;
   padding: 1rem 2.5rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1.1rem;
   transition: all 0.3s ease;
   position: relative;
   z-index: 2;
}

.cta-btn:hover {
   background: rgba(255, 255, 255, 0.9);
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   text-decoration: none;
   color: #91956a;
}

.benefits-section {
   padding: 80px 0;
   background: #f8f9fa;
}

.section-title {
   text-align: center;
   font-size: 2.5rem;
   color: #91956a;
   margin-bottom: 3rem;
   font-weight: 600;
}

.benefits-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
   margin-top: 3rem;
}

.benefit-card {
   background: white;
   border-radius: 15px;
   padding: 2.5rem;
   text-align: center;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.benefit-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 40px rgba(44, 95, 45, 0.15);
   border-color: #91956a;
}

.benefit-icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, #91956a, #808f66);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   font-size: 2rem;
   color: white;
}

.benefit-card h3 {
   font-size: 1.5rem;
   color: #91956a;
   margin-bottom: 1rem;
   font-weight: 600;
}

.benefit-card p {
   color: #666;
   line-height: 1.6;
}

.opportunities-section {
   padding: 80px 0;
}

.opportunities-tabs {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 3rem;
   flex-wrap: wrap;
}

.tab-btn {
   background: transparent;
   border: 2px solid #91956a;
   color: #91956a;
   padding: 1rem 2rem;
   border-radius: 50px;
   cursor: pointer;
   font-weight: 500;
   transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
   background: #91956a;
   color: white;
}

.tab-content {
   display: none;
}

.tab-content.active {
   display: block;
}

.opportunities-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
}

.opportunity-card {
   background: white;
   border-radius: 15px;
   padding: 2rem;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
   border-top: 4px solid #91956a;
}

.opportunity-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 40px rgba(44, 95, 45, 0.15);
}

.opportunity-card h3 {
   color: #91956a;
   font-size: 1.3rem;
   margin-bottom: 1rem;
   font-weight: 600;
}

.opportunity-card p {
   color: #666;
   line-height: 1.6;
   margin-bottom: 1rem;
}

.time-commitment {
   display: block;
   color: #888;
   font-size: 0.9rem;
   margin-bottom: 1.5rem;
}

.time-commitment i {
   margin-left: 0.5rem;
   color: #91956a;
}

.apply-btn {
   background: #91956a;
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 25px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
   display: inline-block;
}

.apply-btn:hover {
   background: #1e4220;
   text-decoration: none;
   color: white;
}

.volunteer-form-section {
   padding: 80px 0;
   background: #f8f9fa;
}

.form-container {
   max-width: 800px;
   margin: 0 auto;
   background: white;
   border-radius: 20px;
   padding: 3rem;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.form-description {
   text-align: center;
   color: #666;
   margin-bottom: 3rem;
   font-size: 1.1rem;
}

.volunteer-form {
   display: grid;
   gap: 2rem;
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
}

.form-group {
   display: flex;
   flex-direction: column;
}

.form-group label {
   font-weight: 600;
   color: #91956a;
   margin-bottom: 0.5rem;
   font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
   padding: 1rem;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   font-size: 1rem;
   transition: all 0.3s ease;
   font-family: 'Cairo', sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: #91956a;
   box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1);
}

.form-group textarea {
   resize: vertical;
   min-height: 120px;
}

.form-group select[multiple] {
   min-height: 120px;
}

.form-actions {
   text-align: center;
   margin-top: 2rem;
}

.terms-check {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
   gap: 0.5rem;
}

.terms-check input[type="checkbox"] {
   width: auto;
}

.terms-check a {
   color: #91956a;
   text-decoration: none;
}

.terms-check a:hover {
   text-decoration: underline;
}

.submit-btn {
   background: linear-gradient(135deg, #555838, #889168);
   color: white;
   border: none;
   padding: 1.2rem 3rem;
   border-radius: 50px;
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: 'Cairo', sans-serif;
}

.submit-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(44, 95, 45, 0.3);
}

/* Success Screen Styles */
.success-container {
   min-height: 70vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   text-align: center;
   padding: 4rem 0;
   position: relative;
   margin: 2rem 0;
   border-radius: 20px;
}

.success-content {
   max-width: 900px;
   padding: 3rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.success-icon {
   font-size: 4rem;
   color: #4CAF50;
   margin-bottom: 2rem;
   animation: checkmark 0.8s ease-in-out;
}

@keyframes checkmark {
   0% {
       transform: scale(0);
       opacity: 0;
   }
   50% {
       transform: scale(1.2);
   }
   100% {
       transform: scale(1);
       opacity: 1;
   }
}

.success-title {
   font-size: 2.2rem;
   font-weight: 700;
   margin-bottom: 1rem;
}

.success-message {
   font-size: 1.1rem;
   margin-bottom: 2rem;
   line-height: 1.6;
   opacity: 0.9;
}

.btn {
   padding: 1rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
   border: 2px solid;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
   font-size: 1rem;
   margin: 0.5rem;
}

.btn-primary {
   background: #fff;
   color: #91956a;
   border-color: #fff;
}

.btn-primary:hover {
   background: transparent;
   color: #fff;
   text-decoration: none;
}

/* Error Messages */
.error-message {
   color: #dc3545;
   font-size: 0.875rem;
   margin-top: 0.25rem;
   display: block;
}

.alert {
   padding: 1rem;
   margin-bottom: 2rem;
   border-radius: 10px;
   border: 1px solid transparent;
}

.alert-success {
   color: #155724;
   background-color: #d4edda;
   border-color: #c3e6cb;
}

.alert-danger {
   color: #721c24;
   background-color: #f8d7da;
   border-color: #f5c6cb;
}

/* Responsive Design */
@media (max-width: 768px) {
   .volunteer-hero h2 {
       font-size: 2.2rem;
   }
   
   .section-title {
       font-size: 2rem;
   }
   
   .benefits-grid {
       grid-template-columns: 1fr;
   }
   
   .opportunities-tabs {
       flex-direction: column;
       align-items: center;
   }
   
   .tab-btn {
       width: 80%;
       max-width: 300px;
   }
   
   .opportunities-grid {
       grid-template-columns: 1fr;
   }
   
   .form-container {
       margin: 1rem;
       padding: 2rem;
   }
   
   .form-row {
       grid-template-columns: 1fr;
       gap: 1rem;
   }
   
   .success-content {
       margin: 1rem;
       padding: 2rem;
   }
   
   .success-title {
       font-size: 1.8rem;
   }
}
</style>
<style>
/* Additional CSS for User Info Display */
.user-info-display {
   margin-bottom: 2rem;
}

.user-info-display .alert {
   padding: 1rem 1.5rem;
   border-radius: 10px;
   border: none;
   margin-bottom: 1.5rem;
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.user-info-display .alert-info {
   background: linear-gradient(135deg, #cce7ff 0%, #b8daff 100%);
   color: #004085;
   border-left: 4px solid #998965;
}

.user-info-display .alert-warning {
   background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
   color: #856404;
   border-left: 4px solid #ffc107;
}

.user-info-display .alert i {
   font-size: 1.1rem;
}

.user-info-display .alert a {
   color: inherit;
   font-weight: 600;
   text-decoration: underline;
}

.user-details {
   background: #f8f9fa;
   border-radius: 10px;
   padding: 1.5rem;
   border: 1px solid #e9ecef;
}

.detail-item {
   margin-bottom: 0.75rem;
   font-size: 0.95rem;
   color: #495057;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.detail-item:last-child {
   margin-bottom: 0;
}

.detail-item strong {
   color: #91956a;
   font-weight: 600;
   min-width: 120px;
}

/* Mobile responsive for user info */
@media (max-width: 768px) {
   .user-details {
       padding: 1rem;
   }
   
   .detail-item {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.25rem;
   }
   
   .detail-item strong {
       min-width: auto;
   }
}
</style>
<style>
/* Login Required Styles */
.login-required {
   text-align: center;
   padding: 3rem 2rem;
}

.login-prompt {
   max-width: 500px;
   margin: 0 auto;
}

.login-icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, #91956a, #4a7c59);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 2rem;
   box-shadow: 0 10px 30px rgba(44, 95, 45, 0.3);
}

.login-icon i {
   font-size: 2rem;
   color: white;
}

.login-prompt h3 {
   font-size: 1.75rem;
   color: #91956a;
   margin-bottom: 1rem;
   font-weight: 600;
}

.login-prompt p {
   color: #666;
   font-size: 1.1rem;
   margin-bottom: 2rem;
   line-height: 1.6;
}

.auth-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin-bottom: 3rem;
   flex-wrap: wrap;
}

.btn-auth {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1rem;
   transition: all 0.3s ease;
   border: 2px solid;
   min-width: 180px;
   justify-content: center;
}

.btn-login {
   background: #91956a;
   color: white;
   border-color: #91956a;
}

.btn-login:hover {
   background: #1e4220;
   border-color: #1e4220;
   color: white;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(44, 95, 45, 0.3);
}

.btn-register {
   background: transparent;
   color: #91956a;
   border-color: #91956a;
}

.btn-register:hover {
   background: #91956a;
   color: white;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(44, 95, 45, 0.3);
}

.benefits-list {
   background: #f8f9fa;
   border-radius: 15px;
   padding: 2rem;
   border: 1px solid #e9ecef;
   text-align: right;
}

.benefits-list h4 {
   color: #91956a;
   font-size: 1.25rem;
   margin-bottom: 1.5rem;
   font-weight: 600;
   text-align: center;
}

.benefits-list ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.benefits-list li {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   color: #666;
   margin-bottom: 1rem;
   font-size: 0.95rem;
}

.benefits-list li:last-child {
   margin-bottom: 0;
}

.benefits-list li i {
   color: #91956a;
   font-size: 0.875rem;
   flex-shrink: 0;
}

/* User Info Display Styles */
.user-info-display {
   margin-bottom: 2rem;
}

.user-info-display .alert {
   padding: 1rem 1.5rem;
   border-radius: 10px;
   border: none;
   margin-bottom: 1.5rem;
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.user-info-display .alert-info {
   background: linear-gradient(135deg, #cce7ff 0%, #b8daff 100%);
   color: #004085;
   border-left: 4px solid #998965;
}

.user-info-display .alert-warning {
   background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
   color: #856404;
   border-left: 4px solid #ffc107;
}

.user-info-display .alert i {
   font-size: 1.1rem;
}

.user-info-display .alert a {
   color: inherit;
   font-weight: 600;
   text-decoration: underline;
}

.user-details {
   background: #f8f9fa;
   border-radius: 10px;
   padding: 1.5rem;
   border: 1px solid #e9ecef;
}

.detail-item {
   margin-bottom: 0.75rem;
   font-size: 0.95rem;
   color: #495057;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.detail-item:last-child {
   margin-bottom: 0;
}

.detail-item strong {
   color: #91956a;
   font-weight: 600;
   min-width: 120px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
   .login-required {
       padding: 2rem 1rem;
   }
   
   .login-prompt h3 {
       font-size: 1.5rem;
   }
   
   .login-prompt p {
       font-size: 1rem;
   }
   
   .auth-buttons {
       flex-direction: column;
       align-items: center;
   }
   
   .btn-auth {
       width: 100%;
       max-width: 280px;
   }
   
   .benefits-list {
       padding: 1.5rem;
       text-align: center;
   }
   
   .benefits-list li {
       justify-content: center;
   }
   
   .user-details {
       padding: 1rem;
   }
   
   .detail-item {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.25rem;
   }
   
   .detail-item strong {
       min-width: auto;
   }
}

.campaigns-hero {
   background: linear-gradient(135deg, #91956a 0%, #8f8245 100%);
   color: white;
   padding: 80px 0;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.campaigns-hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0" stop-color="%23FFF" stop-opacity="0.1"/><stop offset="100%" stop-color="%23FFF" stop-opacity="0"/></radialGradient></defs><circle fill="url(%23a)" cx="10" cy="10" r="10"/></svg>') repeat;
   opacity: 0.1;
}

.campaigns-hero h2 {
   font-size: 3rem;
   margin-bottom: 1rem;
   font-weight: 700;
   position: relative;
   z-index: 2;
}

.campaigns-hero p {
   font-size: 1.3rem;
   opacity: 0.9;
   position: relative;
   z-index: 2;
}

.stats-section {
   background: #ffffff;
   padding: 60px 0;
}

.stat-card {
   background: white;
   border-radius: 20px;
   padding: 2.5rem;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0,0,0,0.1);
   transition: transform 0.3s ease;
   border-top: 5px solid #91956a;
   margin-bottom: 2rem;
}

.stat-card:hover {
   transform: translateY(-10px);
}

.stat-number {
   font-size: 2.8rem;
   font-weight: 700;
   color: #91956a;
   margin-bottom: 0.5rem;
}

.stat-label {
   color: #666;
   font-size: 1.2rem;
   font-weight: 500;
}

.campaigns-section {
   padding: 80px 0;
}

.section-title {
   text-align: center;
   font-size: 2.8rem;
   color: #91956a;
   margin-bottom: 3rem;
   font-weight: 700;
   position: relative;
}


.campaign-card {
   background: white;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 15px 35px rgba(0,0,0,0.1);
   transition: all 0.4s ease;
   margin-bottom: 3rem;
   position: relative;
}

.campaign-card:hover {
   transform: translateY(-15px);
   box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.campaign-image {
   height: 280px;
   width: 100%;
   object-fit: cover;
   position: relative;
}

.campaign-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.campaign-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background: linear-gradient(45deg, #91956a, #b48b1e);
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 30px;
   font-size: 0.9rem;
   font-weight: 600;
   box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.campaign-content {
   padding: 2.5rem;
}

.campaign-title {
   font-size: 1.8rem;
   font-weight: 700;
   color: #91956a;
   margin-bottom: 1rem;
   line-height: 1.3;
}

.campaign-description {
   color: #666;
   line-height: 1.7;
   margin-bottom: 2rem;
   font-size: 1rem;
}

.progress-section {
   margin-bottom: 2rem;
}

.progress-stats {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1rem;
}

.amount-raised {
   font-size: 1.6rem;
   font-weight: 700;
   color: #91956a;
}

.amount-target {
   font-size: 1.2rem;
   color: #666;
}

.progress-bar-container {
   height: 12px;
   background: #f1f1f1;
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 1rem;
}

.progress-bar-fill {
   height: 100%;
   background: linear-gradient(90deg, #91956a, #20c997);
   border-radius: 10px;
   transition: width 1s ease;
   position: relative;
}

.progress-bar-fill::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
   animation: shimmer 2s infinite;
}

@keyframes shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
}

.progress-info {
   display: flex;
   justify-content: space-between;
   font-size: 0.95rem;
   color: #666;
}

.campaign-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
   padding: 1rem;
   background: #f8f9fa;
   border-radius: 10px;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
   color: #666;
}

.meta-item i {
   color: #91956a;
}

.campaign-actions {
   display: flex;
   gap: 1rem;
}

.btn-donate, .btn-view {
   flex: 1;
   padding: 1rem 1.5rem;
   border-radius: 30px;
   font-weight: 600;
   text-decoration: none;
   text-align: center;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
   font-size: 1rem;
}

.btn-donate {
   background: linear-gradient(45deg, #91956a, #91956a);
   color: white;
   box-shadow: 0 4px 15px rgb(190 190 190);
}

.btn-donate:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px #91956a;
   color: white;
   text-decoration: none;
}

.btn-view {
   background: transparent;
   color: #909569;
   border: 2px solid #91956a;
}

.btn-view:hover {
   background: #91956a;
   color: white;
   text-decoration: none;
}

.filter-section {
   background: white;
   padding: 2rem;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0,0,0,0.08);
   margin-bottom: 3rem;
}

.filter-tabs {
   display: flex;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.filter-tab {
   padding: 0.75rem 1.5rem;
   background: transparent;
   border: 2px solid #e9ecef;
   color: #666;
   border-radius: 30px;
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 500;
   font-size: 0.95rem;
}

.filter-tab:hover,
.filter-tab.active {
   border-color: #91956a;
   background: #91956a;
   color: white;
}

.no-campaigns {
   text-align: center;
   padding: 4rem 2rem;
}

.no-campaigns i {
   font-size: 4rem;
   color: #ccc;
   margin-bottom: 2rem;
}

.no-campaigns h4 {
   color: #666;
   margin-bottom: 1rem;
}

@media (max-width: 768px) {
   .campaigns-hero h2 { font-size: 2.2rem; }
   .section-title { font-size: 2.2rem; }
   .campaign-actions { flex-direction: column; }
   .filter-tabs { flex-direction: column; align-items: center; }
   .filter-tab { width: 100%; max-width: 300px; text-align: center; }
   .progress-stats { flex-direction: column; gap: 0.5rem; }
   .campaign-meta { flex-direction: column; gap: 1rem; align-items: flex-start; }
}

.opportunities-hero {
   background: linear-gradient(135deg, #a5985c 0%, #91956a 100%);
   color: white;
   padding: 120px 0 80px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.opportunities-hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0" stop-color="%23FFF" stop-opacity="0.1"/><stop offset="100%" stop-color="%23FFF" stop-opacity="0"/></radialGradient></defs><circle fill="url(%23a)" cx="10" cy="10" r="10"/></svg>') repeat;
   opacity: 0.1;
}

.opportunities-hero h1 {
   font-size: 3rem;
   margin-bottom: 1.5rem;
   font-weight: 700;
   position: relative;
   z-index: 2;
}

.opportunities-hero p {
   font-size: 1.3rem;
   margin-bottom: 2rem;
   opacity: 0.95;
   position: relative;
   z-index: 2;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

/* Statistics Bar */
.stats-bar {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 2rem 0;
   margin-top: 3rem;
   border-radius: 15px;
   position: relative;
   z-index: 2;
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem;
}

.stat-item {
   text-align: center;
}

.stat-number {
   font-size: 2.5rem;
   font-weight: 700;
   display: block;
   margin-bottom: 0.5rem;
}

.stat-label {
   font-size: 1rem;
   opacity: 0.9;
}

/* Filter Section */
.filter-section {
   background: #f8f9fa;
   padding: 2rem 0;
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filter-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
}

.filter-tabs {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
   flex: 1;
}

.tab-btn {
   background: white;
   border: 2px solid #e0e0e0;
   color: #555;
   padding: 0.75rem 1.5rem;
   border-radius: 50px;
   cursor: pointer;
   font-weight: 500;
   transition: all 0.3s ease;
   font-size: 0.95rem;
}

.tab-btn:hover {
   border-color: #91956a;
   color: #91956a;
   transform: translateY(-2px);
}

.tab-btn.active {
   background: #91956a;
   color: white;
   border-color: #91956a;
}

.search-box {
   display: flex;
   align-items: center;
   background: white;
   border-radius: 50px;
   padding: 0.5rem 1rem;
   border: 2px solid #e0e0e0;
   min-width: 280px;
}

.search-box input {
   border: none;
   outline: none;
   padding: 0.5rem;
   font-size: 1rem;
   flex: 1;
   font-family: 'Cairo', sans-serif;
}

.search-box button {
   background: none;
   border: none;
   color: #91956a;
   cursor: pointer;
   font-size: 1.2rem;
}

/* Main Content Section */
.opportunities-content {
   padding: 60px 0;
   background: white;
}

.results-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
   padding-bottom: 1rem;
   border-bottom: 2px solid #f0f0f0;
}

.results-count {
   font-size: 1.1rem;
   color: #666;
}

.sort-dropdown {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.sort-dropdown select {
   padding: 0.5rem 1rem;
   border: 2px solid #e0e0e0;
   border-radius: 10px;
   outline: none;
   cursor: pointer;
   font-family: 'Cairo', sans-serif;
}

/* Opportunities Grid */
.opportunities-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 2rem;
   margin-bottom: 3rem;
}

.opportunity-card {
   background: white;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
   border: 2px solid transparent;
   display: flex;
   flex-direction: column;
}

.opportunity-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 40px rgba(44, 95, 45, 0.15);
   border-color: #91956a;
}

.opportunity-image {
   width: 100%;
   height: 200px;
   background: linear-gradient(135deg, #91956a, #4a7c59);
   position: relative;
   overflow: hidden;
}

.opportunity-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.category-badge {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: rgba(255, 255, 255, 0.95);
   color: #91956a;
   padding: 0.5rem 1rem;
   border-radius: 25px;
   font-size: 0.85rem;
   font-weight: 600;
   backdrop-filter: blur(10px);
}

.status-badge {
   position: absolute;
   top: 1rem;
   left: 1rem;
   padding: 0.5rem 1rem;
   border-radius: 25px;
   font-size: 0.85rem;
   font-weight: 600;
}

.status-badge.urgent {
   background: #ff4444;
   color: white;
}

.status-badge.new {
   background: #4CAF50;
   color: white;
}

.opportunity-content {
   padding: 1.5rem;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.opportunity-content h3 {
   color: #91956a;
   font-size: 1.4rem;
   margin-bottom: 1rem;
   font-weight: 600;
   line-height: 1.3;
}

.opportunity-content p {
   color: #666;
   line-height: 1.6;
   margin-bottom: 1.5rem;
   flex: 1;
}

.opportunity-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 1.5rem;
   padding-top: 1rem;
   border-top: 1px solid #f0f0f0;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: #888;
   font-size: 0.9rem;
}

.meta-item i {
   color: #91956a;
   font-size: 0.85rem;
}

.progress-section {
   margin-bottom: 1.5rem;
}

.progress-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
   color: #666;
}

.progress-bar {
   width: 100%;
   height: 8px;
   background: #e0e0e0;
   border-radius: 10px;
   overflow: hidden;
}

.progress-fill {
   height: 100%;
   background: linear-gradient(135deg, #91956a, #4CAF50);
   border-radius: 10px;
   transition: width 0.3s ease;
}

.requirements {
   background: #f8f9fa;
   padding: 1rem;
   border-radius: 10px;
   margin-bottom: 1.5rem;
}

.requirements h4 {
   color: #91956a;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
   font-weight: 600;
}

.requirements ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.requirements li {
   padding-right: 1.5rem;
   position: relative;
   margin-bottom: 0.3rem;
   color: #666;
   font-size: 0.9rem;
}

.requirements li::before {
   content: '✓';
   position: absolute;
   right: 0;
   color: #4CAF50;
   font-weight: bold;
}

.opportunity-actions {
   display: flex;
   gap: 1rem;
   margin-top: auto;
}

.btn {
   padding: 0.75rem 1.5rem;
   border-radius: 25px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
   text-align: center;
   cursor: pointer;
   border: 2px solid;
   flex: 1;
   font-size: 0.95rem;
}

.btn-primary {
   background: #91956a;
   color: white;
   border-color: #91956a;
}

.btn-primary:hover {
   background: #1e4220;
   border-color: #1e4220;
   transform: translateY(-2px);
   text-decoration: none;
   color: white;
}

.btn-outline {
   background: transparent;
   color: #91956a;
   border-color: #91956a;
}

.btn-outline:hover {
   background: #91956a;
   color: white;
   text-decoration: none;
}

.full-badge {
   background: #dc3545;
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 25px;
   text-align: center;
   font-weight: 500;
   width: 100%;
   display: block;
}

/* No Results */
.no-opportunities {
   text-align: center;
   padding: 4rem 2rem;
   background: #f8f9fa;
   border-radius: 15px;
   grid-column: 1 / -1;
}

.no-opportunities-icon {
   font-size: 4rem;
   color: #ccc;
   margin-bottom: 1.5rem;
}

.no-opportunities h3 {
   color: #666;
   font-size: 1.5rem;
   margin-bottom: 1rem;
}

.no-opportunities p {
   color: #888;
   font-size: 1.1rem;
}

/* Pagination */
.pagination-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
   margin-top: 3rem;
}

.pagination-btn {
   padding: 0.5rem 1rem;
   border: 2px solid #e0e0e0;
   background: white;
   color: #666;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
}

.pagination-btn:hover {
   border-color: #91956a;
   color: #91956a;
}

.pagination-btn.active {
   background: #91956a;
   color: white;
   border-color: #91956a;
}

.pagination-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* Loading Spinner */
.loading-spinner {
   display: none;
   text-align: center;
   padding: 3rem;
   grid-column: 1 / -1;
}

.loading-spinner.active {
   display: block;
}

.spinner {
   border: 4px solid #f3f3f3;
   border-top: 4px solid #91956a;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
   margin: 0 auto;
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 992px) {
   .opportunities-grid {
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   }
}

@media (max-width: 768px) {
   .opportunities-hero h1 {
       font-size: 2.2rem;
   }
   
   .opportunities-hero p {
       font-size: 1.1rem;
   }
   
   .stats-grid {
       grid-template-columns: repeat(2, 1fr);
   }
   
   .filter-container {
       flex-direction: column;
       gap: 1.5rem;
   }
   
   .filter-tabs {
       width: 100%;
       justify-content: center;
   }
   
   .search-box {
       width: 100%;
   }
   
   .results-header {
       flex-direction: column;
       gap: 1rem;
       align-items: flex-start;
   }
   
   .opportunities-grid {
       grid-template-columns: 1fr;
       gap: 1.5rem;
   }
   
   .opportunity-actions {
       flex-direction: column;
   }
}

@media (max-width: 480px) {
   .opportunities-hero {
       padding: 80px 0 60px;
   }
   
   .opportunities-hero h1 {
       font-size: 1.8rem;
   }
   
   .stat-number {
       font-size: 2rem;
   }
   
   .tab-btn {
       padding: 0.6rem 1.2rem;
       font-size: 0.9rem;
   }
}



.dashboard-card {
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.08);
   transition: all 0.3s ease;
   height: 100%;
}
.dashboard-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}
.stat-card {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border-radius: 12px;
   padding: 25px;
   position: relative;
   overflow: hidden;
}
.stat-card.success {
   background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.stat-card.warning {
   background: linear-gradient(135deg, #F2994A 0%, #F2C94C 100%);
}
.stat-card.danger {
   background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}
.stat-card.info {
   background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
}
.stat-icon {
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 3rem;
   opacity: 0.3;
}
.stat-number {
   font-size: 2.5rem;
   font-weight: bold;
   margin-bottom: 5px;
}
.stat-label {
   font-size: 1rem;
   opacity: 0.9;
}
.chart-container {
   position: relative;
   height: 300px;
}
.activity-item {
   padding: 15px;
   border-bottom: 1px solid #f0f0f0;
   transition: background 0.2s;
}
.activity-item:hover {
   background: #f8f9fa;
}
.activity-item:last-child {
   border-bottom: none;
}
.activity-badge {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 0.75rem;
   font-weight: 500;
}
.badge-assistance {
   background: #e3f2fd;
   color: #1976d2;
}
.badge-volunteer {
   background: #f3e5f5;
   color: #7b1fa2;
}
.badge-employee {
   background: #e8f5e9;
   color: #388e3c;
}
.progress-bar-custom {
   height: 8px;
   border-radius: 4px;
   background: #e0e0e0;
   margin-top: 10px;
}
.progress-fill {
   height: 100%;
   border-radius: 4px;
   transition: width 0.6s ease;
}
.welcome-section {
   background: #2d5a05;
   color: white;
   border-radius: 12px;
   padding: 30px;
   margin-bottom: 25px;
}
.quick-actions {
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
   margin-top: 20px;
}
.quick-action-btn {
   background: rgba(255,255,255,0.2);
   border: 1px solid rgba(255,255,255,0.3);
   color: white;
   padding: 10px 20px;
   border-radius: 8px;
   text-decoration: none;
   transition: all 0.3s;
}
.quick-action-btn:hover {
   background: rgba(255,255,255,0.3);
   color: white;
   transform: translateY(-2px);
}
section.stats-section {
    background: #91956a !important;
}

.campaign-image-container {
    position: relative;
    height: 269px !important;
}



.method-details.active {
   max-height: 1000px !important;
   padding: 1rem;
}
input#preferred-pickup-time {
    display: inline-block !important;
}