/* Zakat Al Fitr Start*/
:root {
    --ramadan-warm: #fbf7f4;
    --ramadan-primary: #DA2738;
    --ramadan-secondary: #feeced;
}

.bg-warm {
    background-color: var(--ramadan-warm);
}

.bg-secondary {
    background-color: var(--ramadan-secondary);
}

.text-primary {
    color: var(--ramadan-primary);
}

.bg-primary {
    background-color: var(--ramadan-primary);
}

.min-h-\[80vh\] {
    min-height: 80vh;
}

@media (max-width: 767px) {
    .zakat-policy-badge {
        flex-wrap: wrap;
    }

    .zakat-policy-badge .single-zakat-policy-badge {
        flex-grow: 1;
        justify-content: center;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Zakat Al Fitr End*/



.gn-content-wrapper .gn-text-para p {
    margin-bottom: 15px;
}

/* Global CSS Fix Start */
.swiper-slide {
    height: auto !important;
}

.impact-card {
    height: 100%;
}

/* Default (desktop first) */
.campaign-feature-img-desktop {
    display: block;
}

.campaign-feature-img-mobile {
    display: none;
}

.sec-heading {
    font-size: 35px !important;
}

.gn-counter-card {
    height: 100%;
}

@media (max-width: 1440px) {
    .appeal-form-wrapper {
        background: none !important;
        padding: 0 !important;
        overflow: visible !important;

    }

    .mobile-appeal-form-wrapper {
        display: block !important;
        height: 620px;
        border-radius: 10px;
        background-position: left;
    }

    .appeal-form-wrapper {
        justify-content: center;
        margin-top: 40px;
    }
}

/* When screen is 1080px or smaller */
@media (max-width: 1080px) {
    .campaign-feature-img-desktop {
        display: none;
    }

    .campaign-feature-img-mobile {
        display: block;
    }
}

@media (min-width: 768px) {
    .gn-donation-form-box {
        width: 432px !important;
        padding: 30px !important;
    }
}

/* @media (max-width: 409px) {
	.header-quick-donate-button {
		display: none
	}
}
@media (max-width: 410px) {
	.header-quick-donate-button {
		transform: scale(0.7);
	}
} */
@media (max-width: 768px) {
    .custom-logo-link .custom-logo {
        width: 250px !important;
    }

    .header-btn {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* 	.header-quick-donate-button {
		position: relative;
		left: -230px;
		width: 0;
	} */
    .mobile-appeal-form-wrapper {
        display: block !important;
        height: 220px;
        border-radius: 10px;
    }

    .gn-donation-form-box {
        text-align: center;
        margin: 0 auto;
        width: 100%;
        padding: 25px 10px !important;
    }

    #donation-form-section {
        margin-top: 35px;
    }


}

.custom-select {
    background-color: #03196E !important;
}

.gn-counter-swiper .swiper-slide {
    padding: 15px 5px 15px 5px;
}

.swiper-pagination {
    position: relative !important;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #03196E;
    opacity: 0.1;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.campaign-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.campaign-card .impack {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}

.faq-item .faq-question-text,
.faq-item.active .faq-question .faq-question-text,
.faq-item.active .faq-question .icon-container {
    color: #03196E !important;
}

.faq-item.active .faq-question {
    background-color: #03196e1a;
    margin-bottom: 20px;
}

/* Global CSS Fix End */

/* Custom styles for our Vanilla JS Slider */
.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 0 0 100%;
    width: 100%;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #D1D5DB;
    /* brand-border */
    opacity: 1;
    transition: background-color 0.3s;
    cursor: pointer;
    border: none;
}

.pagination-dot.active {
    background-color: #0D9488;
    /* brand-teal-dark */
}



/* faq-section -- REBUILT FOR SMOOTH TOGGLE */
/* .faq-item .faq-question { cursor: pointer; }
        .faq-item .faq-question-text.active { color: #14B8A6; }
        .faq-item .faq-minus-icon { display: none; }
        .faq-item.active .faq-minus-icon { display: inline-block; }
        .faq-item.active .faq-plus-icon { display: none; }
        /* Hide answer by default */
/* .faq-answer-content { display: none; } */


/* Campaign */
.appeal-form-wrapper {
    min-height: 600px;
    border-radius: 10px;
    overflow: hidden;
    padding: 40px 70px;
    display: flex;
    align-items: center;
}

.mobile-appeal-form-wrapper {
    display: none;
}

.campaign-tab {
    border-radius: 10px;
    background-color: #F7F6F4 !important;
}

.campaign-tab button {
    padding: 13px 30px;
    font-size: 18px;
}

.campaign-form .gn-custom-amount button {
    border: 1px solid #E0DFDC;
    border-radius: 10px;
    background-color: #F7F6F4;
    padding: 12px 0;
    line-height: initial;
}

.campaign-form .gn-custom-amount button.selected,
.campaign-form .gn-custom-amount button:hover {
    background: #03196E;
    color: white;
    border-color: #03196E;
}

.custom-donate-field {
    border: 1px solid #E0DFDC;
    border-radius: 10px;
    width: 100%;
    padding: 10px 25px;
    color: #1F2937;
    background-color: #F7F6F4;
}

.custom-donate-field::placeholder {
    color: #1F2937;
}

.gn-submit-button,
.custom-url-btn {
    display: inline-block;
    background-color: #03196E;
    font-size: 16px;
    text-transform: uppercase;
}

/* RTL fix (c85edb5): .custom-url-btn is a plain inline-block anchor with no
 * width of its own, so it just sits wherever its parent's inline content
 * naturally starts -- left in the plain description column (layout-one.php's
 * "Left side content"), still left even inside .text-content.impact despite
 * that container's own text-align: center (a parent's text-align positions
 * inline-level children uniformly; it can't put the title/price/description
 * in the center while pushing just the button off to a side). Switching
 * the button itself to a right-margined block sidesteps that: it moves
 * to the right regardless of which of those two contexts it's in, without
 * touching the centered text above it in the impact-card case. */
.custom-url-btn {
    display: block;
    width: fit-content;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* RTL fix (3129f7e): default-layout.php (grownex-charity-plugin-main) is the
 * only template that pairs .custom-url-btn with Tailwind's .w-full on the
 * same element (product "Donate Now" links with a custom URL). Because the
 * tailwind stylesheet (main.css) is enqueued AFTER this file, its .w-full
 * { width: 100% } wins the cascade over the fit-content rule above at equal
 * specificity, silently undoing the right-alignment fix and stretching the
 * button back across the full card width. !important restores the intended
 * fit-content sizing regardless of stylesheet load order. */
a.custom-url-btn.w-full {
    width: fit-content !important;
}

.gn-submit-button:hover,
.custom-url-btn:hover {
    background-color: #DA2738;
}



.gn-content-wrapper {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 60px;
}

.gn-img-content {
    overflow: hidden;
    height: 570px;
    border-radius: 10px;
}

.gn-img-content img {
    height: 100%;
    object-fit: cover;
}

.gn-text-para {
    color: #4B5563;
}

.gn-text-heading {
    color: #4B5563
}

.gn-yt-btn {
    height: 100px;
    width: 134px;
    background-color: #C80001;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.yt-wrapper,
.yt-wrapper .yt-bg-img {
    border-radius: 15px;
}

.gn-yt-btn img {
    height: 50px;
    width: 50px;
}

.yt-img {
    position: relative;
}

.yt-img::before {
    position: absolute;
    content: "";
    background-color: black;
    opacity: 30%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.yt-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

@media (max-width: 1080px) {
    .gn-content-wrapper {
        flex-direction: column;
    }
}


@media (max-width: 768px) {
    .gn-donation-form-box .gn-fund-title {
        font-size: 12px;
    }

    .gn-donation-form-box .gn-fund-desc {
        font-size: 28px;
    }

    .gn-yt-btn {
        border-radius: 10px;
        height: 47px;
        width: 67px;
    }

    .gn-yt-btn img {
        height: 24px;
        width: 24px;
    }

    .gn-img-content {
        height: 280px;
    }
}

/* @media (max-width: 575px) {


    .gn-donation-form-box {
        left: 34px;
        top: 20px;
        width: 80%;
    }
} */

/* Impact section */
.text-content .gn-text-heading {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 10px;
    min-height: calc(34px * 2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.impact-card-feature-img img,
.campaign-card-feature-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    background-position: center center;
}

.impact-card-feature-img,
.campaign-card-feature-img {
    height: 250px;
    overflow: hidden;
    position: relative;
    object-fit: contain;
}

.impact .amount {
    font-size: 20px;
    font-weight: 500;
    padding: 10px 35px;
    border: 1px solid #E0DFDC;
    border-radius: 10px;
    margin-bottom: 13px;
    display: inline-block;
    background-color: #F7F6F4;
}

/* RTL fix (8819436): this card's ancestor `.text-content.impact` sets
 * text-align: center, intending the title/amount/description all centered
 * -- but that's inherited, and the base RTL rule's plain `p { text-align:
 * right }` (main.css) is a rule on this element itself, not an inherited
 * value, so it wins regardless of what the ancestor wants. Title (h3) and
 * amount (inline-block span) still end up centered because neither is
 * a plain <p>, so only this description paragraph was silently forced
 * right instead of center -- scoped override restores the intended
 * centered look, matching .gn-counter-card h3 elsewhere on this page. */
.impct-desc {
    font-size: 18px;
    line-height: 28px;
    color: #4B5563;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
}

.swiper-button-prev,
.swiper-button-next {
    background: #03196E;
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    width: 40px !important;
    border-radius: 100%;
    transition: all .3s ease-in-out;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #03186e5b;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px !important;
    color: white;
}

.gn-swiper-cards {
    padding-top: 80px;
    padding-bottom: 100px;
}


.gn-swiper-cards .swiper-button-prev {
    left: -38px;
}

.gn-swiper-cards .swiper-button-next {
    right: -38px;
}

.impact-card {
    overflow: hidden;
}

.impact-card img {
    width: 100%;
}

.impact-card {
    overflow: hidden;
    border: 1px solid #E0DFDC;
    border-radius: 10px;
    height: auto;
}

.text-content.impact {
    text-align: center;
    padding: 20px 20px 35px 20px;
}

/* ============================================================
   Ticket: Align Campaign & Donation Card Height and Button Placement
   ------------------------------------------------------------
   Popular Campaign Slider cards previously grew/shrank per card
   based on how long each campaign's description was, so the
   "Learn More" button landed at a different height on every
   card. Give the card a fixed height and let the text area
   scroll internally instead of stretching the card, so every
   card (and its button) lines up the same regardless of text
   length. Scoped to .popular-campaign-swiper only so other
   card/slider components on the site are unaffected.
   ============================================================ */
.popular-campaign-swiper .impact-card {
    display: flex;
    flex-direction: column;
    height: 560px;
}

.popular-campaign-swiper .text-content.impact {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Reserve the same height for the title whether it wraps to 1 or 2
   lines, so the description area starts at the same spot on every
   card and isn't squeezed differently by longer titles. */
.popular-campaign-swiper .impact-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
}

.popular-campaign-swiper .content-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
}

/* Make the scroll affordance visible instead of an invisible cutoff */
.popular-campaign-swiper .content-wrapper::-webkit-scrollbar {
    width: 4px;
}

.popular-campaign-swiper .content-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.popular-campaign-swiper .button-wrapper {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .popular-campaign-swiper .impact-card {
        height: 500px;
    }
}

@media (max-width:1368px) {

    .gn-swiper-cards .swiper-button-prev,
    .gn-swiper-cards .swiper-button-next {
        display: none;
    }
}

/* Counter */
/* Counter Styles */
.gn-counter-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.gn-counter-card {
    box-shadow: 0px 3px 6px #00000029;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    background: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gn-counter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px #00000020;
}

.gn-counter-icon {
    height: 100px;
    width: 100px;
    background: #E5E8F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2.5rem;
    color: #03196E;
}

.gn-counter-title {
    font-size: 50px;
    font-weight: 600;
    color: #03196E;
    margin: 10px 0;
    line-height: 1;
}

.gn-counter-desc {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 15px;
}

.gn-text-heading {
    color: #03196E;
    font-weight: 700;
}

/* Container and Section Styles */
.bg-white {
    background-color: white;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.gn-swiper-cards {
    padding: 80px 0;
}

.gn-swiper-cards-v2 {
    padding: 0;
    padding-bottom: 80px;
}

/* Responsive Design */
@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .gn-counter-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/* Mobile optimizations */
@media (max-width: 639px) {
    .gn-counter-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gn-counter-card {
        padding: 25px;
    }

    .gn-counter-title {
        font-size: 40px;
    }

    .gn-counter-icon {
        height: 80px;
        width: 80px;
        font-size: 2rem;
    }

    .gn-swiper-cards {
        padding: 60px 0;
    }
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
    .gn-counter-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .gn-counter-wrapper {
        gap: 15px;
    }

    .gn-counter-card {
        padding: 20px;
    }

    .gn-counter-title {
        font-size: 36px;
    }
}

/* Animation for counters */
.odometer {
    display: inline-block;
    transition: all 0.3s ease;
}

/* Helping Section */
.helping-card img {
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
}

/* CSS for slide width (add to your stylesheet) */
.helping-swiper .swiper-slide {
    width: 300px;
    /* Adjust based on your card size */
    /* or use percentage: width: 80%; */
}

/* Optional: Add some styling for inactive slides */
.helping-swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.7;
    /* transform: scale(0.9); */
    transition: all 0.3s ease;
}

.gn-center-slide {
    padding-bottom: 40px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 30px;
}

.gn-center-slide .swiper-button-prev {
    left: 40px;
}

.gn-center-slide .swiper-button-next {
    right: 40px;
}

.gn-center-slide .swiper-button-prev,
.gn-center-slide .swiper-button-next {
    top: 50%;
    transform: translatey(-50%);
}


@media (max-width: 768px) {
    .helping-card img {
        height: 205px;
    }

    .gn-center-slide {
        box-shadow: none;
        padding: 0 20px;
    }

    .gn-swiper-cards {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .gn-swiper-cards-v2 {
        padding: 0;
        padding-bottom: 60px;
    }
}