/* ==========================================================================
   KGN Foundation Kendua - Fundraising & Donation Page Pixel-Perfect Stylesheet
   ========================================================================== */

:root {
   --kgn-purple: #372994;
   --kgn-purple-dark: #201358;
   --kgn-purple-deep: #28197e;
   --kgn-purple-light: #f3f2fc;
   --kgn-purple-hover: #2d207d;
   --kgn-yellow: #f1c152;
   --kgn-yellow-hover: #e5b341;
   --kgn-dark: #1b1937;
   --kgn-gray: #6e6d82;
   --kgn-light-gray: #f8f9fd;
   --kgn-card-border: #eaebf2;
   --kgn-font: 'Rubik', sans-serif;
}

html {
   scroll-behavior: smooth;
}



/* --------------------------------------------------
   Hero Section
-------------------------------------------------- */
.fundraising-hero {
   position: relative;
   background: linear-gradient(135deg, #1d0f50 0%, #31187d 55%, #180a42 100%);
   padding: 70px 0 110px 0;
   color: #ffffff;
   overflow: hidden;
}

.fundraising-hero::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: radial-gradient(circle at 80% 30%, rgba(241, 193, 82, 0.12) 0%, transparent 60%);
   pointer-events: none;
}

.hero-pill-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 30px;
   padding: 6px 18px;
   font-size: 13px;
   font-weight: 600;
   color: #ffffff;
   margin-bottom: 24px;
}

.hero-pill-badge i {
   color: #ffffff;
   font-size: 12px;
}

.hero-title {
   font-size: 52px;
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -0.5px;
   margin-bottom: 20px;
   color: #ffffff;
}

.hero-subtitle {
   font-size: 17px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.85);
   max-width: 520px;
   margin-bottom: 32px;
   font-weight: 400;
}

.border-bottom-2 {
   border-bottom: 1px solid #dee2e6 !important;
}

.btn-hero-donate {
   background-color: var(--kgn-yellow);
   color: #1b1937;
   font-weight: 800;
   font-size: 15px;
   padding: 14px 36px;
   border-radius: 8px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: all 0.3s ease;
   box-shadow: 0 8px 20px rgba(241, 193, 82, 0.3);
   border: none;
}

.btn-hero-donate:hover {
   background-color: var(--kgn-yellow-hover);
   color: #000000;
   transform: translateY(-2px);
   box-shadow: 0 12px 25px rgba(241, 193, 82, 0.4);
}

.hero-image-wrapper {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

a {
   text-decoration: none !important;
}

.hero-image-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 20px;
}

.main-menu .navigation li a {
   color: rgb(58, 43, 153);
   font-weight: 700;
}

.connect-icons-mobile {

   font-weight: 800;
}

/* --------------------------------------------------
   Impact Stats Bar (Floating White Card)
-------------------------------------------------- */
.stats-floating-wrapper {
   position: relative;
   z-index: 10;
   margin-top: -65px;
   margin-bottom: 60px;
}

.stats-card {
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
   padding: 28px 20px;
   border: 1px solid var(--kgn-card-border);
}

.stat-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 8px 12px;
}

.stat-icon-box {
   width: 52px;
   height: 52px;
   border-radius: 12px;
   background: var(--kgn-purple-light);
   color: var(--kgn-purple);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
}

.stat-number {
   font-size: 26px;
   font-weight: 800;
   color: var(--kgn-dark);
   line-height: 1.2;
   margin: 0;
}

.stat-label {
   font-size: 13px;
   color: var(--kgn-gray);
   margin: 0;
   font-weight: 500;
   line-height: 1.3;
}

.stat-divider {
   border-right: 1px solid #eef0f5;
}

/* --------------------------------------------------
   "Your Support, Their Future" Section
-------------------------------------------------- */
.causes-section {
   padding: 40px 0 70px 0;
}

.section-header-flex {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 36px;
   flex-wrap: wrap;
   gap: 20px;
}

.section-main-title {
   font-size: 32px;
   font-weight: 800;
   color: var(--kgn-purple-dark);
   margin-bottom: 8px;
}

.section-main-desc {
   font-size: 15px;
   color: var(--kgn-gray);
   max-width: 600px;
   margin: 0;
}

.btn-see-programs {
   background-color: var(--kgn-purple);
   color: #ffffff !important;
   font-weight: 700;
   font-size: 13px;
   padding: 12px 24px;
   border-radius: 8px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: all 0.3s ease;
}

.btn-see-programs:hover {
   background-color: var(--kgn-purple-hover);
   transform: translateY(-2px);
}

.cause-card {
   background: #ffffff;
   border-radius: 16px;
   border: 1px solid var(--kgn-card-border);
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
   transition: all 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.cause-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.cause-img-box {
   position: relative;
   height: 190px;
   overflow: hidden;
}

.cause-img-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.cause-card:hover .cause-img-box img {
   transform: scale(1.05);
}

.cause-badge-icon {
   position: absolute;
   bottom: -18px;
   left: 20px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   font-size: 18px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: 3px solid #ffffff;
   z-index: 2;
}

.badge-marriage {
   background: #e5a720;
}

.badge-medical {
   background: #28a745;
}

.badge-ration {
   background: #fd7e14;
}

.badge-education {
   background: #6f42c1;
}

.cause-content {
   padding: 28px 20px 20px 20px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.cause-card-title {
   font-size: 19px;
   font-weight: 700;
   color: var(--kgn-dark);
   margin-bottom: 8px;
}

.cause-card-text {
   font-size: 14px;
   color: var(--kgn-gray);
   line-height: 1.5;
   margin-bottom: 20px;
   flex-grow: 1;
}

.cause-link {
   color: var(--kgn-purple);
   font-weight: 700;
   font-size: 14px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap 0.2s ease;
}

.cause-link:hover {
   color: var(--kgn-purple-hover);
   gap: 10px;
}

/* --------------------------------------------------
   "Make a Donation" Interactive Section
-------------------------------------------------- */
.donation-main-section {
   background-color: var(--kgn-light-gray);
   padding: 60px 0;
}

.donation-outer-card {
   background: #ffffff;
   border-radius: 20px;
   border: 1px solid var(--kgn-card-border);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
   padding: 36px;
}

/* Left Form Box */
.donation-form-title {
   font-size: 26px;
   font-weight: 800;
   color: var(--kgn-purple-dark);
   margin-bottom: 6px;
}

.donation-form-sub {
   font-size: 14px;
   color: var(--kgn-gray);
   margin-bottom: 24px;
}

.toggle-pill-wrapper {
   display: inline-flex;
   background: #f1f2f7;
   padding: 4px;
   border-radius: 10px;
   margin-bottom: 24px;
   width: 100%;
}

.toggle-pill-btn {
   flex: 1;
   border: none;
   background: transparent;
   padding: 10px 16px;
   border-radius: 8px;
   font-weight: 700;
   font-size: 14px;
   color: var(--kgn-gray);
   cursor: pointer;
   transition: all 0.3s ease;
}

.toggle-pill-btn.active {
   background: var(--kgn-purple);
   color: #ffffff;
   box-shadow: 0 4px 10px rgba(55, 41, 148, 0.2);
}

.amount-label {
   font-size: 14px;
   font-weight: 700;
   color: var(--kgn-dark);
   margin-bottom: 12px;
   display: block;
}

.amount-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-bottom: 20px;
}

.amount-btn-card {
   background: #ffffff;
   border: 1.5px solid #e2e4ed;
   border-radius: 10px;
   padding: 12px 8px;
   font-weight: 700;
   font-size: 15px;
   color: var(--kgn-dark);
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
}

.amount-btn-card:hover {
   border-color: var(--kgn-purple);
   color: var(--kgn-purple);
}

.amount-btn-card.active {
   background: var(--kgn-purple);
   border-color: var(--kgn-purple);
   color: #ffffff;
   box-shadow: 0 4px 12px rgba(55, 41, 148, 0.25);
}

.dedicate-check-wrapper {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 24px;
}

.dedicate-check-wrapper label {
   font-size: 14px;
   color: var(--kgn-gray);
   font-weight: 500;
   cursor: pointer;
   margin: 0;
}

.btn-donation-submit {
   background-color: var(--kgn-yellow);
   color: #1b1937;
   font-weight: 800;
   font-size: 16px;
   padding: 14px;
   border-radius: 10px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   width: 100%;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   box-shadow: 0 6px 18px rgba(241, 193, 82, 0.3);
}

.btn-donation-submit:hover {
   background-color: var(--kgn-yellow-hover);
   color: #000000;
   transform: translateY(-2px);
   box-shadow: 0 8px 22px rgba(241, 193, 82, 0.4);
}

.secure-badge {
   font-size: 13px;
   color: var(--kgn-gray);
   text-align: center;
   margin-top: 14px;
   font-weight: 500;
}

/* Right Ways to Contribute Box */
.ways-title {
   font-size: 20px;
   font-weight: 800;
   color: var(--kgn-purple-dark);
   margin-bottom: 20px;
}

.way-item-card {
   background: var(--kgn-purple-light);
   border-radius: 12px;
   padding: 16px 20px;
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   transition: all 0.2s ease;
}

.way-item-card:hover {
   background: #ebe9f9;
}

.way-left {
   display: flex;
   align-items: center;
   gap: 16px;
}

.way-icon-box {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: #ffffff;
   color: var(--kgn-purple);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.way-name {
   font-size: 15px;
   font-weight: 700;
   color: var(--kgn-dark);
   margin-bottom: 2px;
}

.way-info {
   font-size: 12px;
   color: var(--kgn-gray);
   margin: 0;
   line-height: 1.4;
}

.way-qr-thumb {
   width: 50px;
   height: 50px;
   object-fit: contain;
   border-radius: 6px;
   background: #ffffff;
   padding: 2px;
   border: 1px solid #e0e0e0;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.way-qr-thumb:hover {
   transform: scale(1.08);
   box-shadow: 0 4px 12px rgba(55, 41, 148, 0.25);
}

.upi-copy-badge {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(55, 41, 148, 0.08);
   color: #372994;
   padding: 2px 8px;
   border-radius: 6px;
   font-weight: 700;
   transition: all 0.2s ease;
   user-select: all;
}

.upi-copy-badge:hover {
   background: rgba(55, 41, 148, 0.16);
   color: #251675;
   transform: translateY(-1px);
}

.upi-copy-badge:active {
   transform: translateY(0);
}

.way-arrow {
   color: var(--kgn-purple);
   font-size: 16px;
   font-weight: 700;
}

/* --------------------------------------------------
   Prophet Quote Banner
-------------------------------------------------- */
.quote-banner {
   background: linear-gradient(135deg, #251675 0%, #3b25a3 100%);
   color: #ffffff;
   padding: 44px 20px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.quote-icon-top {
   font-size: 48px;
   color: rgba(255, 255, 255, 0.2);
   line-height: 1;
   margin-bottom: -10px;
}

.quote-text {
   font-size: 22px;
   font-weight: 500;
   font-style: italic;
   max-width: 850px;
   margin: 0 auto 12px auto;
   line-height: 1.4;
   letter-spacing: 0.2px;
}

.quote-author {
   font-size: 15px;
   font-weight: 700;
   color: var(--kgn-yellow);
   letter-spacing: 0.5px;
   margin: 0;
}

/* --------------------------------------------------
   Call to Action Banner
-------------------------------------------------- */
.cta-banner {
   background-color: var(--kgn-yellow);
   padding: 28px 0;
}

.cta-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 20px;
}

.cta-left {
   display: flex;
   align-items: center;
   gap: 16px;
}

.cta-icon {
   font-size: 36px;
   color: var(--kgn-purple);
}

.cta-title {
   font-size: 20px;
   font-weight: 800;
   color: #1b1937;
   margin-bottom: 2px;
}

.cta-desc {
   font-size: 14px;
   color: #4a4520;
   margin: 0;
   font-weight: 500;
}

.btn-cta-purple {
   background-color: var(--kgn-purple);
   color: #ffffff !important;
   font-weight: 800;
   font-size: 14px;
   padding: 12px 30px;
   border-radius: 8px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: all 0.3s ease;
}

.btn-cta-purple:hover {
   background-color: var(--kgn-purple-hover);
   transform: translateY(-2px);
}

/* --------------------------------------------------
   Footer Overrides
-------------------------------------------------- */
.main-footer-redesign {
   background-color: var(--kgn-purple-deep);
   color: #ffffff;
   padding: 60px 0 0 0;
}

.footer-brand-title {
   font-size: 18px;
   font-weight: 800;
   color: #ffffff;
   margin-top: 16px;
   margin-bottom: 4px;
}

.footer-widget-title {
   font-size: 16px;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 20px;
   position: relative;
}

.footer-links-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

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

.footer-links-list a {
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   font-size: 13px;
   transition: color 0.2s ease;
}

.footer-links-list a:hover {
   color: var(--kgn-yellow);
}

.footer-bottom-bar {
   background-color: var(--kgn-yellow);
   padding: 14px 0;
   color: #1b1937;
   font-weight: 600;
   font-size: 13px;
   margin-top: 50px;
}

/* Modal Form Custom Styles */
.modal-content-custom {
   border-radius: 16px;
   border: none;
   overflow: hidden;
}

.modal-header-custom {
   background: var(--kgn-purple);
   color: #ffffff;
   padding: 20px 24px;
}

.modal-header-custom .modal-title {
   font-weight: 800;
   font-size: 20px;
}

/* ==================================================
   CAMPAIGN DETAILS PAGE & SIDEBAR CARD STYLES
================================================== */
.campaign-author-badge {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1px;
   color: #8888a0;
   text-transform: uppercase;
}

.campaign-author-name {
   color: var(--kgn-purple);
   font-weight: 800;
}

.text-purple-dark {
   color: #241869;
}

.text-purple {
   color: var(--kgn-purple);
}

.bg-purple-light {
   background-color: #f3f0ff;
}

.badge-verified {
   background-color: #e6f7ed;
   color: #10b981;
   font-weight: 700;
   font-size: 12px;
   padding: 6px 12px;
   border-radius: 30px;
   border: 1px solid #a7f3d0;
   display: inline-flex;
   align-items: center;
}

.badge-zakat {
   background-color: #eff6ff;
   color: #3b82f6;
   font-weight: 700;
   font-size: 12px;
   padding: 6px 12px;
   border-radius: 30px;
   border: 1px solid #bfdbfe;
   display: inline-flex;
   align-items: center;
}

/* Social Share Pills */
.share-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 700;
   text-decoration: none;
   transition: all 0.25s ease;
   color: #ffffff !important;
}

.share-pill:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.share-fb {
   background-color: #1877f2;
}

.share-tw {
   background-color: #000000;
}

.share-li {
   background-color: #0a66c2;
}

.share-wa {
   background-color: #25d366;
}

.share-em {
   background-color: #ea4335;
}

/* Campaign Gallery */
.campaign-main-img {
   width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   border: 1px solid #e9ecef;
   transition: all 0.3s ease;
   display: block;
   margin: 0 auto;
}

.campaign-thumbs-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
   gap: 12px;
   margin-top: 12px;
}

.campaign-thumb-img {
   width: 100%;
   height: 90px;
   object-fit: cover;
   border-radius: 10px;
   cursor: pointer;
   border: 3px solid transparent;
   opacity: 0.75;
   transition: all 0.25s ease;
}

.campaign-thumb-img:hover {
   opacity: 1;
   transform: translateY(-2px);
}

.campaign-thumb-img.active {
   border-color: var(--kgn-yellow);
   opacity: 1;
   box-shadow: 0 4px 12px rgba(241, 193, 82, 0.4);
}

/* Campaign Story & Tabs */
.campaign-nav-tabs {
   border-bottom: 2px solid #e9ecef;
   gap: 16px;
}

.campaign-nav-tabs .nav-link {
   border: none;
   font-weight: 800;
   font-size: 14px;
   letter-spacing: 0.5px;
   color: #6b7280;
   padding: 12px 18px;
   border-bottom: 3px solid transparent;
   transition: all 0.25s ease;
}

.campaign-nav-tabs .nav-link:hover {
   color: var(--kgn-purple);
}

.campaign-nav-tabs .nav-link.active {
   color: var(--kgn-purple);
   border-bottom-color: var(--kgn-purple);
   background: transparent;
}

.campaign-story-highlight {
   background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
   border-left: 4px solid #0284c7;
   color: #0369a1;
   font-weight: 700;
   font-size: 16px;
   padding: 16px 20px;
   border-radius: 0 12px 12px 0;
   margin-bottom: 20px;
}

.campaign-story-green-hl {
   background-color: #dcfce7;
   color: #15803d;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 4px;
}

.campaign-story-cyan-hl {
   color: #0284c7;
}

/* Sidebar Campaign Progress Card (KGN Theme) */
.campaign-sidebar-card {
   background: linear-gradient(145deg, var(--kgn-purple) 0%, #20165c 100%);
   border-radius: 20px;
   padding: 28px 24px;
   color: #ffffff;
   box-shadow: 0 15px 35px rgba(55, 41, 148, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.campaign-sidebar-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   text-align: center;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   padding: 16px 8px;
   margin-bottom: 20px;
   border: 1px solid rgba(255, 255, 255, 0.12);
}

.campaign-stat-num {
   font-size: 20px;
   font-weight: 800;
   color: var(--kgn-yellow);
   line-height: 1.2;
}

.campaign-stat-lbl {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: rgba(255, 255, 255, 0.75);
   margin-top: 4px;
   font-weight: 600;
}

.campaign-raised-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 700;
   font-size: 14px;
   margin-bottom: 10px;
   color: #ffffff;
}

.campaign-raised-pct {
   background: var(--kgn-yellow);
   color: #1b1937;
   font-weight: 800;
   font-size: 12px;
   padding: 4px 10px;
   border-radius: 20px;
}

.campaign-progress-bar-bg {
   background: rgb(217 216 216 / 96%);
   height: 12px;
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 12px;
}

.campaign-progress-bar-fill {
   /* background: linear-gradient(90deg, #f1c152 0%, #ffd700 100%); */
   height: 100%;
   border-radius: 10px;
   transition: width 0.8s ease-in-out;
}

.campaign-offline-box {
   background: rgba(255, 255, 255, 0.06);
   border: 1px dashed rgba(255, 255, 255, 0.25);
   border-radius: 10px;
   padding: 12px 16px;
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 16px;
}

.border-white-20 {
   border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Big Vibrant Sidebar Donate Button */
.btn-sidebar-donate {
   width: 100%;
   background: linear-gradient(135deg, #d9232d 0%, #b8141d 100%);
   color: #ffffff;
   border: none;
   padding: 16px 24px;
   border-radius: 12px;
   font-weight: 800;
   font-size: 18px;
   letter-spacing: 0.5px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   box-shadow: 0 8px 20px rgba(217, 35, 45, 0.4);
   transition: all 0.3s ease;
   cursor: pointer;
}

.btn-sidebar-donate:hover {
   background: linear-gradient(135deg, #e62b35 0%, #ca1721 100%);
   transform: translateY(-3px);
   box-shadow: 0 12px 25px rgba(217, 35, 45, 0.5);
   color: #ffffff;
}

/* --------------------------------------------------
   Responsive Breakpoints for Pixel Perfection
-------------------------------------------------- */
@media only screen and (max-width: 1200px) {

   .sticky-header,
   .main-header .header-upper {
      display: none;
   }
}

@media (min-width: 1200px) {
   .desk-none {
      display: none !important;
   }
}


@media (max-width: 991px) {
   .hero-title {
      font-size: 40px;
   }

   .hero-subtitle {
      font-size: 15px;
   }

   .hero-image-wrapper img {
      height: 300px;
   }

   .stats-card {
      padding: 20px 10px;
   }

   .stat-number {
      font-size: 16px;
   }

   .stat-label {
      font-size: 12px;
   }

   .quote-text {
      font-size: 18px;
   }
}

@media (max-width: 767px) {
   .fundraising-hero {
      padding: 40px 0 80px 0;
      text-align: center;
   }

   .hero-pill-badge {
      margin: 0 auto 16px auto;
   }

   .hero-title {
      font-size: 32px;
   }

   .hero-subtitle {
      margin-left: auto;
      margin-right: auto;
   }

   .btn-hero-donate {
      width: 100%;
      justify-content: center;
   }

   .hero-image-wrapper {
      margin-top: 30px;
   }

   .hero-image-wrapper img {
      height: 240px;
   }

   .stats-floating-wrapper {
      margin-top: -40px;
   }

   .stat-divider {
      border-right: none;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 12px;
      margin-bottom: 12px;
   }

   .stat-item {
      padding: 4px 0;
   }

   .section-header-flex {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .donation-outer-card {
      padding: 20px 16px;
   }

   .amount-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
   }

   .amount-btn-card {
      padding: 10px 4px;
   }

   .cta-left {
      flex-direction: column;
      gap: 8px;
   }

   .btn-cta-purple {
      width: 100%;
      justify-content: center;
   }

   .footer-bottom-bar .container {
      flex-direction: column;
      gap: 6px;
      text-align: center;
   }

   /* Campaign Details Optimized Mobile Layout Rules (max-width: 768px) */
   .campaign-badge-section {
      padding-top: 8px !important;
      padding-bottom: 8px !important;
   }

   .campaign-details-section {
      padding-top: 14px !important;
      padding-bottom: 24px !important;
   }

   .campaign-title-strip {
      padding-top: 8px !important;
      padding-bottom: 10px !important;
      margin-bottom: 0 !important;
      gap: 8px !important;
   }

   .campaign-title-strip h1#campTitle {
      font-size: 20px !important;
      line-height: 1.35 !important;
      margin-bottom: 0 !important;
   }

   .campaign-title-strip .share-pill {
      padding: 4px 10px !important;
      font-size: 11px !important;
   }

   .campaign-gallery-wrapper {
      margin-bottom: 12px !important;
   }

   .campaign-main-img {
      height: auto !important;
      max-height: none !important;
      aspect-ratio: auto !important;
      object-fit: contain !important;
      border-radius: 12px !important;
      margin-bottom: 0 !important;
   }

   .campaign-thumbs-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 6px !important;
      margin-top: 8px !important;
   }

   .campaign-thumb-img {
      height: 54px !important;
      border-radius: 8px !important;
   }

   .campaign-meta-strip {
      margin-bottom: 12px !important;
      padding-bottom: 8px !important;
      gap: 6px 12px !important;
      font-size: 12px !important;
      flex-wrap: wrap !important;
      border-bottom: 1px solid #eef0f5 !important;
   }

   .campaign-tab-content .tab-pane p {
      line-height: 1.55 !important;
      margin-bottom: 10px !important;
      font-size: 14.5px !important;
      color: #374151 !important;
   }

   .campaign-tab-content .tab-pane p.fs-5 {
      font-size: 15.5px !important;
      margin-bottom: 8px !important;
      line-height: 1.4 !important;
   }

   .campaign-bottom-cta {
      margin-top: 18px !important;
      padding-top: 14px !important;
      gap: 10px !important;
   }

   .campaign-bottom-cta .btn-danger {
      width: 100% !important;
      padding: 12px 20px !important;
      font-size: 15px !important;
      justify-content: center;
   }

   .campaign-sidebar-card {
      padding: 18px 16px !important;
      margin-top: 18px !important;
      border-radius: 16px !important;
   }

   .campaign-sidebar-stats {
      padding: 12px 6px !important;
      margin-bottom: 12px !important;
      gap: 4px !important;
   }

   .campaign-stat-num {
      font-size: 17px !important;
   }

   .campaign-stat-lbl {
      font-size: 10px !important;
   }
}

/* ==========================================================================
   New Mockup-Inspired Campaign Details Redesign Styles (KGN Theme Palette)
   ========================================================================== */
.bg-light-body {
   background-color: #f6f7fb;
}

.campaign-page-title {
   font-size: 32px;
   font-weight: 800;
   color: var(--kgn-purple-dark);
   letter-spacing: -0.5px;
}

.tax-benefit-badge {

   font-size: 8px;
   font-weight: 800;
   letter-spacing: 0.5px;
   box-shadow: 0 4px 10px rgba(217, 35, 45, 0.3);
   background: #0d8a56;
   color: #fff;
   border-radius: 10px 0 15px 0;
   position: absolute;
   border: 1px solid #0d8a56;
   font-size: 12px;
   padding: 4px 12px 2px 12px;
   font-weight: 700;
   z-index: 99;
   display: none;
}

.accordion-card {
   background: #ffffff;
   border-radius: 8px;
   border: 1px solid #eef0f5;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
   overflow: hidden;
   margin-bottom: 24px;
}

.accordion-card-header {
   padding: 20px 24px;
   background: #ffffff;
   border-bottom: 1px solid #f0f2f7;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
}

.accordion-card-title {
   font-size: 18px;
   font-weight: 800;
   color: var(--kgn-dark);
   margin: 0;
}

.payment-methods-grid {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 14px;
   padding: 16px 0;
}

.payment-icon-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #ffffff;
   border: 1px solid #e2e4ed;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
   padding: 6px;
   transition: all 0.2s ease;
}

.payment-icon-pill:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
   border-color: var(--kgn-purple);
}

.payment-icon-pill img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.supporters-card {
   background: #ffffff;
   border-radius: 16px;
   border: 1px solid #eef0f5;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
   overflow: hidden;
}

.supporters-header {
   padding: 16px 20px;
   background: #ffffff;
   border-bottom: 1px solid #f0f2f7;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.supporters-list {
   max-height: 280px;
   overflow-y: auto;
}

.supporter-item {
   padding: 12px 20px;
   border-bottom: 1px solid #f8f9fc;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
}

.supporter-item:last-child {
   border-bottom: none;
}

.supporter-name {
   font-weight: 600;
   color: #374151;
}

.supporter-amount {
   font-weight: 700;
   color: var(--kgn-purple);
}

.bottom-similar-section {
   background: #ffffff;
   padding: 40px 24px;
   margin-top: 50px;
   box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
   border: 1px solid #eef0f5;
}

.similar-card {
   background: #ffffff;
   border-radius: 16px;
   border: 1px solid #eef0f5;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
   transition: all 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.similar-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}


/* ==================================================
   STICKY SIDEBAR FIX FOR DESKTOP
================================================== */
.page-wrapper,
.campaign-details-section,
.campaign-details-section .auto-container,
.campaign-details-section .container,
.campaign-details-section .row {
   overflow: visible !important;
}

@media (min-width: 992px) {

   .col-lg-4.sticky-sidebar,
   .sticky-sidebar {
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 90px !important;
      align-self: flex-start !important;
      height: auto !important;
      overflow: visible !important;
      z-index: 90 !important;
   }

   .sticky-sidebar-inner {
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 90px !important;
      height: auto !important;
   }

}

@media (max-width: 991px) {
   .mobile-none {
      display: none;
   }

   .bottom-similar-section {
      margin-top: 0px;
   }

   .campaign-page-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--kgn-purple-dark);
      letter-spacing: -0.5px;
   }
}

/* ==================================================
   CAMPAIGN STORY READ MORE / READ LESS TOGGLE
================================================== */
/* ==================================================
   CAMPAIGN STORY READ MORE / READ LESS
================================================== */

.story-collapse {
    position: relative;
    max-height: 180px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* Fade only when collapsed */
.story-collapse:not(.expanded)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.95) 80%,
        #ffffff 100%
    );

    pointer-events: none;
}

/* Expanded */
.story-collapse.expanded {
    overflow: hidden !important;
}

/* Remove fade when expanded */
.story-collapse.expanded::after {
    display: none !important;
}

/* Read More button */
.btn-read-more-story {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: transparent;
    color: #372994;

    font-weight: 700;
    font-size: 15px;

    border: none;
    padding: 8px 0 0 0;

    cursor: pointer;
}

.btn-read-more-story:hover {
    color: #0d8a56;
    text-decoration: underline;
}


/* Floating Fixed Donate Button & WhatsApp Button */
.donate-sticky-btn {
   position: fixed;
   top: 50%;
   right: 0px;
   z-index: 1050;
   padding: 10px 14px;
   border-radius: 16px;
   max-width: 60px;
   width: 100%;
   transform: rotate(180deg);
   writing-mode: vertical-rl;
}

.img-box {
   width: 140px;
   height: 160px;
   object-fit: cover;
   border-radius: 8px;
}

@media (max-width: 425px) {
   .img-box {
      width: 116px;
      height: 150px;
      object-fit: cover;
      border-radius: 8px;
   }

}