/* full screen scrollbar */
.scroll_down {
    overflow: auto;
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.scroll_down::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.scroll_down {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* impact container */
.impact_container {
    background: #FFCE0A no-repeat center center;
    background-size: cover;
    padding: 3rem;
}

.impact_container_mobile {
    padding: 1rem;
}

.impact_calculator {
    padding: 0 5rem;
}

.impact_container_mobile .impact_calculator {
    padding: 0;
}

.impact_calculator h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
    font-family: var(--secondary-font);
    font-weight: 700;
    text-transform: uppercase;
}

.impact_container_mobile .impact_calculator h2 {
    font-size: 2rem;
}

.impact_calculator p {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 2rem;
    font-family: var(--inter-font);
    font-weight: 300;
}

.impact_container_mobile .impact_calculator p {
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.impact_form .amount_title {
    margin-bottom: 2rem;
    font-size: 3rem;
    font-family: var(--secondary-font);
    font-weight: 700;
    text-transform: uppercase;
}

.impact_container_mobile .impact_form .amount_title {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 0rem;
}

.impact_form .amount_result {
    font-size: 1.5rem;
    text-align: center;
}

.impact_container_mobile .impact_form .amount_result {
    font-size: 1.2rem;
}

.amount_title input {
    width: auto;
    border: none;
    text-align: center;
    background: var(--green-color);
    color: #fff;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    font-weight: 900;
}

.impact_container_mobile .amount_title input {
    margin: 0.5rem 0;
    display: block;
}

.amount_result .input {
    display: inline-block;
    width: auto;
    min-width: 80px;
    border: none;
    text-align: center;
    background: var(--green-color);
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.impact_container_mobile .amount_result .input {
    margin: 0.5rem 0;
}

.impact_form input::placeholder {
    color: #fff;
    font-weight: 700;
}

.impact_calculator button {
    margin: 1rem 0;
    border-radius: 0;
    padding: 0.5rem 1.5rem;
    box-shadow: 5px 4px 0px rgba(0, 153, 73, 0.6);
}

.impact_container_mobile .impact_calculator button {
    margin: 0rem;
}

.impact_calculator button:hover {
    background: var(--black-color) !important;
    color: #fff !important;
    box-shadow: 3px 2px 0px rgba(0, 153, 73, 0.6);
}

.impact_calculator button i {
    font-size: 1.5rem;
}

.content:has(.impact_container) {
    padding: 0 !important;
}

/* dark theme */
.dark-theme .impact_container {
    background: var(--black-color) no-repeat center center;
}

.dark-theme .impact_calculator h2,
.dark-theme .impact_form .amount_result,
.dark-theme .impact_form .amount_title {
    color: #ddd;
}

.dark-theme .impact_calculator p {
    color: #ccc;
}

.dark-theme .amount_title input {
    background: var(--yellow-color);
    color: #000;
}

.dark-theme .amount_result .input {
    background: var(--yellow-color);
    color: #000;
}

.dark-theme .impact_form input::placeholder {
    color: #000;
}

.dark-theme .impact_calculator button {
    border: 2px solid #fff;
}

/* app install cta */
.sticky_install_app {
    background-color: #eee;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.install_app_cta {
    width: 100%;
    height: auto;
    padding: 1rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.install_app_cta .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.install_app_cta .content p {
    font-size: 0.8rem;
}

.install_app_cta .bi-star-fill {
    color: #f09800;
    font-size: 0.7rem;
}

.install_app_cta .reviews {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500
}

.install_app_cta .get_app_button a {
    padding: 0.3rem 1rem;
}

.install_app_cta .bold-stroke {
    color: gray;
    -webkit-text-stroke: 1px;
}

/* new footer campaigns */
.footer_components .campaigns .campaign {
    transition: all 0.3s;
}

.footer_components_mobile .campaigns .campaign {
    margin-left: 0.2rem !important;
    padding-left: 0rem !important;
}

.footer_components .campaigns .campaign:hover {
    transform: translateY(-5px);
}

.footer_components .campaigns .campaign:hover .card {
    border: 2px solid var(--green-color) !important;
}

.footer_components .campaigns .campaign .card-body {
    font-family: var(--inter-font);
}

.footer_components .campaigns .campaign .card-body h4{
    font-size: 1.25rem !important;
}

.footer_components .campaigns .campaign p {
    font-size: 1rem !important;
    color: #4b5563 !important;
}

.footer_components .account-details .card {
    border: 2px solid #eee; 
    box-shadow: none !important;
    border-radius: 8px; 
    padding: 20px;
    margin-top: 1rem !important;
    transition: all 0.3s;
}

.footer_components .account-details .card:hover {
    transform: translateY(-5px);
    border: 2px solid var(--green-color) !important;
}

.footer_components .account-details .card .icon {
    font-size: 1.3rem; 
    background: #28a745; 
    color: #fff; 
    border-radius: 50%;
    height: 45px; 
    width: 45px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.footer_components .account-details .card .icon-yellow {
    background: #ffc107 !important;
    color: #000 !important;
}

.footer_components .account-details .card-body .card-title {
    font-size: 1.25rem !important;
}

.footer_components .account-details .card-body .card-sub-title {
    color: hsl(215.4 16.3% 46.9%) !important;
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
    font-weight: 500 !important;
}

.footer_components .account-details .card-body p {
    font-family: var(--inter-font);
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: rgb(55 65 81) !important;
}

.footer_components .account-details .card-body .phone_number {
    font-family: var(--inter-font);
    font-size: 1.8rem !important;
    color: #333 !important;
}

.footer_components .account-details .details {
    line-height: 2rem;
}

nav.navbar.fixed-top {
    display: flex !important;
} 

nav.mobile-navbar {
    display: none !important;
}
/* .upsells .upsell.in_cart .icon::before {
    top: 15px !important;
    width: 15px;
    height: 15px;
} */
#goToTopBtn {
    display: none; /* Initially hide the button */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    padding: 10px 20px;
    background-color: #007bff; /* Button background color */
    color: #fff; /* Button text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.blockquote {
    background: white;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    margin-top: 1.5rem;
    min-height: 3rem;
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.1), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.1);
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}

.blockquote .icon {
    background: linear-gradient(135deg, #F6E620 0%, #FF7900 100%);
    border-radius: 1rem 1rem 0 1rem;
    content: "";
    height: 3rem;
    left: -1rem;
    overflow: hidden;
    position: absolute;
    top: -1rem;
    width: 3rem
}

.blockquote .icon i {
    color: #005353;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.5rem;
}

.zakat-applicable img {
    width: 20px !important;     
    height: 20px !important;
}

.home_banners .carousel-caption h1 span.top_span {
    margin-bottom: -30px;
}

.home_banners_mobile .carousel-caption h1 span.top_span {
    margin-bottom: -10px;
}

/* description gallery */
.desc_gallery {
  padding: 10px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense; 
}

/* Stretch image vertically */
.v-stretch {
  grid-row: span 2;
}

/* Stretch image horizontally */
.h-stretch {
  grid-column: span 2;
}

/* Stretch image vertically and horizontally */
.big-stretch {
  grid-column: span 2;
  grid-row: span 2;
}

.desc_gallery div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  object-position: center;
}

/* Make the gallery items all matchy matchy on smaller screen sizes */
@media screen and (max-width: 515px) {
  .v-stretch {
    grid-row: span 1;
  }

  .h-stretch {
    grid-column: span 1;
  }

  .big-stretch {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (min-width: 1024px) and (min-height: 560px) and (max-height: 768px) {
    .page-container .category-page .hero {
       height: 120vh !important;
    }
}
@media screen and (max-width: 350px) {
    .amounts_qd .btn-group label:last-child {
        display: none !important;
    }
    .amounts_qd .btn-group label:nth-last-child(2) {
        border-radius: 0 0.375rem 0.375rem 0 !important; 
    }
    .menu-icon {
        margin-right: 0 !important;;
    }
}
@media screen and (max-width: 480px) {
    .video-button-mobile a {
        font-size: 1.4rem;
    }
    .home_banners_mobile .banners .carousel-item img {
        height: 100%;
    }
    label.btn,
    label.btn:hover, 
    label.btn:focus, 
    label.btn:active, 
    .btn-check+.btn:hover {
        height: 6vh;
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .video-button-mobile a {
        font-size: 1.4rem;
    }
    .home_banners_mobile .banners .carousel-item img {
        height: 100%;
    }
    .navbar .right-header {
        overflow-x: auto;
        justify-content: start !important;
    }
    .navbar .right-header::-webkit-scrollbar {
        display: none;
    }
    label.btn,
    label.btn:hover, 
    label.btn:focus, 
    label.btn:active, 
    .btn-check+.btn:hover {
        height: 6vh;
    }
    .home_projects_container .slider_container {
        justify-content: center;
    }
}

.small-screen {
    display: none !important;
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {    
    .step h2 {
        font-size: 3rem !important;
    }

    .page-container .hero .hero-content h1 {
        width: 48vw !important;
        font-size: calc(3vw + 3vh + 3vmin) !important;
        line-height: 12vh !important;
    }

    #quick-donate, #donate-form {
        width: 40vw !important;
    }

    .general-page .hero::before, 
    .checkout-page .hero::before, 
    .summary-page .hero::before, 
    .member-page .hero::before,
    .jobs-page .hero::before,
    .job-page .hero::before,
    .fundraisers-page .hero::before,
    .general-page .hero::after, 
    .checkout-page .hero::after, 
    .summary-page .hero::after, 
    .member-page .hero::after,
    .jobs-page .hero::after,
    .job-page .hero::after,
    .fundraisers-page .hero::after {
        width: 30% !important;
    }
    .general-page .hero .page-title, 
    .checkout-page .hero .page-title, 
    .summary-page .hero .page-title, 
    .member-page .hero .page-title,
    .jobs-page .hero .page-title,
    .job-page .hero .page-title,
    .fundraisers-page .hero .page-title {
        font-size: 2.8rem !important;
    }

    .project .fixed-project .input input, .project .fixed-project .input input:focus-visible {
        width: 70px !important;
    }

    .cart {
        width: 60% !important;
    }

    .amounts_qd .btn-group {
        flex-wrap: wrap;
    }

    .amounts_qd .btn-group label.btn {
        font-size: 1.2rem !important;
    }

    .amounts_qd .btn-group .donation_amount {
        width: 100% !important;
        flex-grow: 1 !important;
        margin-top: 0.5rem !important;
        height: 55px;
        font-size: 1.2rem !important;
    }

    .amounts_qd .btn-group label:first-child {
        border-radius: 0.375rem 0.375rem 0 0 !important;
    }

    .logo img {
        width: 130px !important;
    }

    .footer_components .large-info .text {
        padding-left: 3rem !important;
    }

    .footer_components .large-info h2 {
        font-size: 2.8rem !important;
    }

    .footer_components .large-info .text .d-flex {
        gap: 0.5rem !important;
    }

    .footer_components .large-info .text li {
        font-size: 21px !important;
    } 
    .footer_components .footer_container {
        padding: 3rem 4rem 2rem !important;
    }

    .donation-history .col-md-9 {
        width: 70% !important;
    }
    
    .general-page .content, 
    #contact-form,
    #contact-form .row,
    .impact_container,
    .impact_calculator {
        padding: 1rem !important;
    }
    .general-page .contact_us .description {
        font-size: 1.5rem !important;
    }
    .general-page .impact_container h2,
    .faq-container .title {
        font-size: 2.5rem !important;
    }
    .impact_form .amount_title {
        font-size: 1.8rem !important;
    }
    .impact_form .amount_title input {
        width: 310px !important;
    }
    .impact_form .btn {
        height: auto !important;
    }
    .container,
    .zakat-calculator .container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .calculator {
        width: 58% !important;
    }
    .calculator h4 {
        font-size: 1.4rem !important;
    }

    .form-field h3 {
        font-size: 1.2rem !important;
    }

    .calc_sidebar h2 {
        font-size: 1.5rem !important;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .project .custom_amount {
        height: 60px !important;
        font-size: 1.2rem !important;
    }

    .project .fixed-project .fixed-amount,
    .project .fixed-project .input input {
        font-size: 1.5rem !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1100px) {
    .projects_container .projects .col-md-4 {
        width: 50% !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    .step h2,
    #fund-form .amount_raised {
        font-size: 2.5rem !important;
    }

    #quick-donate,
    #donate-form {
        width: 40vw !important;
    }

    .amounts_qd .btn-group {
        flex-wrap: wrap;
    }

    label.btn,
    .amount_message {
        font-size: 1rem !important;
    }

    .project .fixed-project .input input, .project .fixed-project .input input:focus-visible {
        width: 45px !important;
    }

    .page-container .hero .hero-content h1,
    .page-container .single-fundraiser-page .hero .hero-content h1 {
        width: 48vw !important;
        font-size: 5rem !important;
        line-height: 10vh !important;
    }

    .general-page .hero::before, 
    .checkout-page .hero::before, 
    .summary-page .hero::before, 
    .member-page .hero::before,
    .jobs-page .hero::before,
    .job-page .hero::before,
    .fundraisers-page .hero::before,
    .general-page .hero::after, 
    .checkout-page .hero::after, 
    .summary-page .hero::after, 
    .member-page .hero::after,
    .jobs-page .hero::after,
    .job-page .hero::after,
    .fundraisers-page .hero::after {
        width: 25% !important;
    }
    .general-page .hero .page-title, 
    .checkout-page .hero .page-title, 
    .summary-page .hero .page-title, 
    .member-page .hero .page-title,
    .jobs-page .hero .page-title,
    .job-page .hero .page-title,
    .fundraisers-page .hero .page-title {
        font-size: 2.5rem !important;
    }

    .amounts_qd .btn-group .donation_amount {
        width: 100% !important;
        flex-grow: 1 !important;
        margin-top: 0.5rem !important;
    }

    .amounts_qd .btn-group .custom_amount {
        height: 40px !important;
        font-size: 1rem !important;
    }

    .amounts_qd .btn-group label:first-child {
        border-radius: 0.375rem 0.375rem 0 0 !important;
    }

    .btn {
        height: 45px !important;
        font-size: 1.1rem !important;
    }

    .cart .cart-item .remove button {
        font-size: 0.8rem !important;
    }

    .donation-history .col-md-9 {
        width: auto !important;
    }

    .donation-history .btn,
    .member-page #auth-tabs button {
        height: auto !important;
        font-size: 1rem !important;
    }

    .logo img {
        width: 100px !important;
    }

    .header .menu {
        margin-right: 0rem !important;
    }

    .header .menu-icon {
        margin-right: 0 !important;
    }

    .header li a {
        font-size: 13px !important;
    }

    .scroll_down {
        padding-bottom: 3rem !important;
    }

    .project .card-title {
        font-size: 1.3rem !important;
    }

    .project .custom_amount {
        height: 45px !important;
        font-size: 1rem !important;
    }

    .project .fixed-project .fixed-amount,
    .project .fixed-project .input input {
        font-size: 1.5rem !important;
    }

    #donate-form .fixed-project .input input, 
    #donate-form-mobile .fixed-project .input input {
        width: 60px !important;
        font-size: 2rem !important;
    }

    .cart {
        width: 70% !important;
    }

    .checkout-page .checkout-auth form,
    .checkout-page .payment-form {
        padding: 1.5rem 1rem !important;
    }

    .summary-page .summary {
        padding: 5rem 2rem !important;
    }

    .footer_components .large-info .text {
        padding-left: 2rem !important;
    }

    .footer_components .large-info .image img {
        width: 100% !important;
    }

    .footer_components .large-info h2 {
        font-size: 2.5rem !important;
    }

    .footer_components .large-info .text li {
        font-size: 1.3rem !important;
    } 

    .footer_components .footer_container {
        padding: 3rem 4rem 2rem !important;
    }

    .member-page #auth-tabs {
        gap: 0.5rem !important;
    }
    .general-page .content, 
    #contact-form,
    #contact-form .row,
    .impact_container,
    .impact_calculator {
        padding: 1rem !important;
    }
    .general-page .contact_us .description {
        font-size: 1.5rem !important;
    }
    .general-page .impact_container h2,
    .faq-container .title {
        font-size: 2.5rem !important;
    }
    .impact_form .amount_title {
        font-size: 1.8rem !important;
    }
    .impact_form .amount_title input {
        width: 310px !important;
    }
    .impact_form .btn {
        height: auto !important;
    }
    .types .type {
        padding: 0 2rem !important;
    }
    .container,
    .zakat-calculator .container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .calculator {
        width: 58% !important;
    }
    .calculator h4 {
        font-size: 1.4rem !important;
    }

    .form-field h3 {
        font-size: 1.2rem !important;
    }

    .calc_sidebar h2 {
        font-size: 1.5rem !important;
    }

    #fund-form .fundraiser-detail .user_end_date,
    #fund-form .fundraiser-detail .target_supporters {
        font-size: 1rem !important;
    }

    .member-page .donations-breakdown .project_types {
        margin-right: 3rem !important;
    }
    .member-page .donations-breakdown .extra_details {
        margin-left: 3rem !important;
    }
    .member-page .fundraisers .donor-fundraiser .card-body,
    .member-page .fundraisers .edit-fundraiser {
        padding: 0 !important;
    }
    .member-page .fundraisers .donor-fundraiser {
        padding-right: 1rem !important;
    }
    /* fullscreen menu */    
    .fs-menu-container-mobile > .row {
        height: 100vh !important;
    }
    .fs-menu-container-mobile .fs-menu-left {
        display: flex !important;
        background-size: cover !important;
        background-position: center !important; 
    }
    .fs-menu-container .fs-menu-left .left-content {
        width: 90%;
    }
    .fs-menu-container .fs-menu-right .menus {
        padding: 6rem 1rem 0 1rem !important;
        height: auto !important;
    }
    .fs-menu-container .fs-menu-left .title {
        font-size: 3rem !important;
    }
    .fs-menu-container .fs-menu-left .desc,
    .fs-menu-container .close-button {
        font-size: 1.5rem !important;
    }
    .fs-menu-container .fs-menu-right .section .title {
        font-size: 1.8rem !important;
    }
    .fs-menu-container .fs-menu-right .section .links ul a {
        font-size: 1.5rem !important;
        line-height: 3rem !important;
    }
    .fs-menu-container .fs-menu-right .section:last-child {
        padding-top: 2.5rem !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    nav.navbar.fixed-top {
        display: none !important;
    } 
    nav.mobile-navbar {
        display: flex !important;
    }
    .btn {
        height: 45px !important;
        font-size: 1rem !important;
    }
    .related_projects .btn {
        font-size: 0.9rem !important;
    }
    .header .menu {
        margin-right: 0rem !important;
        width: 68%;
        overflow: hidden;
    }
    .header .menu-icon {
        margin-right: 0 !important;
    }
    .header li a {
        font-size: 13px !important;
    }
    .logo img {
        width: 140px !important;
    }
    .projects_container .projects .col-md-4 {
        width: 50% !important;
    }
    .video-button-mobile a {
        font-size: 1.4rem;
    }
    .header li.nav-item {
        margin-left: 0rem !important;
    }
    label.btn,
    label.btn:hover, 
    label.btn:focus, 
    label.btn:active, 
    .btn-check+.btn:hover {
        height: 5vh;  
        font-size: 1.1rem !important;
    }
    .carousel-caption {
        left: 2rem !important;
    }
    .home_banners .banners .carousel-item img,
    .home_banners_mobile .banners .carousel-item img {
        height: 100%;
        object-position: top;
    }
    .home_banners .banners .carousel-item .carousel-caption h1,
    .home_banners_mobile .banners .carousel-item .carousel-caption h1,
    .page-container .hero .hero-content h1,
    .page-container .single-fundraiser-page .hero .hero-content h1 {
        line-height: 6vh !important;
        font-size: 2.8rem !important;
        width: 30vh !important;
    }
    .home_projects h2 {
        font-size: 3rem !important;
        margin-bottom: 1rem !important;
    }
    .home_projects p {
        font-size: 1.1rem !important;
    }
    .home_projects_container {
        padding: 1rem !important;
    }
    .home_projects_container .nextBtn, 
    .home_projects_container .prevBtn {
        font-size: 2rem !important;
        top: 60% !important;   
    }
    .home_projects_container .prevBtn {
        left: 15px !important;
    }
    .home_projects_container .nextBtn {
        right: 15px !important;
    }
    .videos-container .nextBtn,
    .videos-container .prevBtn {
        top: 0% !important;
    }
    .videos-container .nextBtn {
        right: 0px !important;
    }
    .videos-container .prevBtn {
        left: 0px !important;
    }
    .home_videos_container .videos .thumb img {
        height: 100px !important;
    }
    .navbar .right-header {
        overflow-x: hidden;
        justify-content: start !important;
    }
    .navbar .right-header::-webkit-scrollbar {
        display: none;
    }
    .footer_components_mobile .campaigns .row {
        justify-content: center;
    }
    .projects_container_mobile .project,
    .fundraising_container_mobile .fundraiser,
    .footer_components_mobile .campaigns .campaign,
    .fundraising-page-mobile .fundraising_container .fundraiser {
        width: 50%;
    }
    .project .card-title {
        font-size: 1.4rem !important;
    }
    .related_projects .project .card-title {
        font-size: 1.1rem !important;
    }
    .projects_container .project .card-image {
        height: 190px !important;
    }
    .projects_container h2,
    .home_gallery_container .gallery-container h2,
    .related_projects h2 {
        font-size: 2.5rem !important;
    }
    .home_gallery_container .gallery img {
        height: 150px !important;
    }
    .project .fixed-project .input input, .project .fixed-project .input input:focus-visible {
        width: 50px !important;
        font-size: 1.5rem !important;
    }
    .home_gallery_container .gallery img {
        height: 190px;
    }
    .project .fixed-project .fixed-amount {
        font-size: 1.5rem !important;
    }
    .project .custom_amount {
        height: 50px !important;
        font-size: 1.1rem !important;
    }
    .general-page .hero::before, 
    .checkout-page .hero::before, 
    .summary-page .hero::before, 
    .member-page .hero::before,
    .jobs-page .hero::before,
    .job-page .hero::before,
    .fundraisers-page .hero::before,
    .general-page .hero::after, 
    .checkout-page .hero::after, 
    .summary-page .hero::after, 
    .member-page .hero::after,
    .jobs-page .hero::after,
    .job-page .hero::after,
    .fundraisers-page .hero::after {
        width: 25% !important;
    }
    .general-page .hero .page-title, 
    .checkout-page .hero .page-title, 
    .summary-page .hero .page-title, 
    .member-page .hero .page-title,
    .jobs-page .hero .page-title,
    .job-page .hero .page-title,
    .fundraisers-page .hero .page-title {
        font-size: 2.5rem !important;
    }
    .home_videos_container .video-container .main-video {
        height: 45vh !important;
    }
    .footer_components .footer_container {
        padding: 2rem !important;
    }
    .footer_components_mobile .campaigns .campaign .card {
        height: 360px;
    }    
    .footer_components_mobile .campaigns .campaign .overlay {
        width: 96% !important;
    }
    .footer_components_mobile .campaigns .campaign .card-img-overlay p,
    .footer_components_mobile .other_ways,
    .footer_components_mobile .footer_container .footer .section .about {
        font-size: 1.2rem !important;
    }
    .footer_components .footer_container .footer .menus {
        width: 100%;
    }
    .footer_components .footer_container .footer .menus .section {
        flex-basis: 23% !important;
    }
    .footer_components_mobile .footer_container .footer .menus .section:first-child {
        padding-left: 0;
    }
    .footer_components_mobile .footer_container .footer .section .title {
        font-size: 1.3rem;
    }
    .footer_components .footer_container .footer .section .title {
        font-size: 1.2rem !important;
    }
    .footer_components .app_url_icons a{
        width: 50% !important;
    }
    .footer_components .campaigns .campaign {
        padding-right: 0 !important;
    }
    .footer_components .campaigns .campaign .card-body {
        padding: 10px !important;
    }
    .footer_components .footer_container .copyright {
        flex-direction: column;
        align-items: center;
    }
    .footer_components .footer_container .info {
        display: flex;
        gap: 2rem;
    }
    .footer_components .footer_container .footer .section .about,
    .footer_components .footer_container .footer .section .links ul a,
    .footer_components .copyright p,
    .footer_components .info p,
    .home_videos_container .video-container .nav-tabs .nav-link {
        font-size: 1rem !important;
    }
    .footer_components .large-info .text {
        width: 56% !important;
        padding-left: 1rem !important;
    }
    .footer_components .large-info h2 {
        font-size: 2rem !important;
    }
    .footer_components .large-info .text li {
        font-size: 1.1rem !important;
    }
    .footer_components .large-info .app_url_icons a,
    .footer_components .large-info .app_url_icons a img {
        width: 100% !important;
    }
    .footer_components .large-info .image {
        width: 44% !important;
    }
    .footer_components .large-info .image img {
        width: 100% !important;
    }
    .footer_components_mobile .footer_container .footer .section .links ul a {
        font-size: 1.1rem;
    }
    .footer_components_mobile .footer_container .copyright,
    .description {
        font-size: 1.1rem !important;
    }
    .description h2 {
        font-size: 2.5rem !important;
    }
    .v-stretch {
        grid-row: span 1 !important;
    }
    .footer_components .campaigns .campaign .card-body h4 {
        font-size: 1.25rem !important;
    }
    .footer_components .campaigns .campaign p {
        font-size: 1rem !important;
    }
    .footer_components .display-5 {
        font-size: 1.8rem !important;
    }
    .footer_components .account-details .card-body .phone_number {
        font-size: 1.5rem !important;
    }
    .footer_components .account-details .card {
        padding: 5px !important;
    }
    .footer_components .account-details .card-body p {
        font-size: 0.9rem !important;
    }
    #quick-donate,
    #donate-form {
        width: 50vw !important;
        padding: 1rem !important;
    }    
    .step h2 {
        font-size: 2.5rem !important;
    }
    .amounts_qd .btn-group {
        flex-wrap: wrap;
    }
    .amounts_qd .btn-group .donation_amount {
        width: 100% !important;
        flex-grow: 1 !important;
        margin-top: 0.5rem !important;
    }
    #quick-donate label.btn, #donate-form label.btn,
    #quick-donate .custom_amount, #donate-form .custom_amount,
    #quick-donate-mobile label.btn, #donate-form-mobile label.btn,
    #quick-donate-mobile .custom_amount, #donate-form-mobile .custom_amount {
        font-size: 1.1rem;
        height: 45px !important;
    }
    #donate-form .fixed-project .input input, 
    #donate-form-mobile .fixed-project .input input, 
    #donate-form .fixed-project .input input:focus-visible, 
    #donate-form-mobile .fixed-project .input input:focus-visible {
        width: 60px !important;
        font-size: 2rem !important;
    }
    #quick-donate .btn.btn-green {
        font-size: 1.2rem !important;
        height: 45px !important;
    }
    .home_projects_mobile .home_projects_container .project img {
        width: 175px !important;
        height: 175px !important;
    }
    .home_projects_mobile .home_projects_container h4,
    .home_projects_mobile p {
        font-size: 1.2rem !important;
    }
    .fundraising_container_mobile,
    .fundraising_container_mobile .fundraiser {
        padding: 0.5rem !important;
    }
    #payment-form .slider_container .project {
        width: auto;
    }
    .page-container-mobile .hero {
        height: 320px !important;
    }
    .page-container-mobile .hero .hero-content h1 {
        line-height: 6vh !important;
    }
    .page-container-mobile .fundraising_container .fundraisers_mobile {
        padding: 1rem !important;
    }
    .page-container-mobile .fundraising-page-mobile .fundraising_container .fundraiser {
        padding-right: 0.7rem !important;
    }
    .page-container-mobile .single-fundraiser-page .fundraiser-detail .user_end_date,
    .page-container-mobile .single-fundraiser-page #fund-form .fundraiser-detail .target_supporters,
    .page-container-mobile .single-fundraiser-page #fund-form .anonymous_check, 
    .page-container-mobile .single-fundraiser-page #fund-form .anonymous_check i {
        font-size: 1.2rem !important;
    }
    .page-container-mobile .single-fundraiser-page #fund-form .anonymous_check {
        margin-top: 1rem !important;
    }
    .page-container .hero .hero-content {
        left: 2rem !important;
    }
    a.view_all_link {
        font-size: 1.1rem !important;
    }
    .category-page h2 {
        font-size: 2.5rem !important;
    }
    .home_gallery_container_mobile .gallery img {
        height: 250px !important;
    }
    .home_gallery_container .gallery-container .nav-pills li button,
    .page-container-mobile .fundraisers .nav-pills li button {
        font-size: 1.1rem !important;
    }
    .video-button a {
        font-size: 1.5rem !important;
    }
    .video-button a i {
        font-size: 3rem !important;
    }
    .projects_container .card-body .col-md-12 {
        padding: 0 !important;
    }
    .projects_container .details>div span,
    .projects_container .project .estimated {
        font-size: 1rem !important;
    }
    .fundraising_container_mobile h2 {
        margin-bottom: 0 !important;
    }
    .member-page .projects_container .row .col-md-12 .col-md-3 {
        width: 40%;
    }
    .member-page .gifts_container .col-md-4 {
        width: 50%;
    }
    .page-container-mobile .donation-history .table {
        width: 100%;
    }
    .checkout-page-mobile .mobile .form-group {
        display: flex;
        flex-direction: column;
    }
    .checkout-page-mobile .payment-form {
        width: 96% !important;
    }
    .checkout-page-mobile #guest-login-form .edit {
        left: 0 !important;
    }
    .checkout-page-mobile .change_pm a {
        position: absolute;
        right: 10px;
        font-size: 1.1rem !important;
    }
    .checkout-page-mobile .payment-form .card-details #submit, 
    .checkout-page-mobile .payment-form .card-details #submitOnLoggedIn {
        font-size: 1.3rem !important;
    }
    .cart {
        width: 100% !important;
    }
    .cart .cart-item .details {
        width: 28vw !important;
    }
    .checkout-container,
    .checkout-page .summary .donation_details,
    .checkout-page .checkout-auth form,
    .checkout-page .payment-form {
        padding: 1rem !important;
    }
    .checkout-page .summary h1, .checkout-page .total_amount {
        font-size: 1.5rem !important;
    }
    .checkout-page .merchant_fee,
    .checkout-page .admin_fee,
    .checkout-page .login,
    .volunteer-page form .form-group>label,
    .volunteer-page label.btn {
        font-size: 1rem !important;
    }
    .checkout-page .cart.col-md-6 {
        width: 46% !important;
    }
    .checkout-page .checkout-auth form .col-md-6 {
        width: 100% !important;
    }
    .inner-heading {
        font-size: 1.5rem !important;
    }
    .checkout-page .payment-form .amounts>div {
        font-size: 1.1rem !important;
    }
    .checkout-page p.stripe-info {
        font-size: 0.9rem !important;
        line-height: 20px !important;
    }
    .general-page .content, 
    #contact-form,
    #contact-form .row,
    .impact_container,
    .impact_calculator,
    #volunteer-form,
    #volunteer-form .row,
    .general-page .what_we_do.content,
    .fundraising-page .description {
        padding: 1rem !important;
    }
    .general-page .contact_us .description {
        font-size: 1.5rem !important;
    }
    .general-page .impact_container h2,
    .faq-container .title {
        font-size: 2.5rem !important;
    }
    .impact_form .amount_title {
        font-size: 1.8rem !important;
    }
    .impact_form .amount_title input {
        width: 310px !important;
    }
    .impact_form .btn {
        height: auto !important;
    }
    #application_form .col-md-6 {
        width: 100% !important;
    }
    .general-page .volunteer h2 {
        font-size: 2.5rem !important;
    }
    .general-page .volunteer .description,
    .general-page .about_us .description,
    .general-page .what_we_do .description {
        font-size: 1.5rem !important;
    }
    #volunteer-form h1,
    .general-page .what_we_do h2,
    .fundraising-page .content h1,
    #fundraisers-form h1,
    .fundraiser-success h1,
    .fundraising_container h2,
    #fund-form .amount_raised {
        font-size: 2.5rem !important;
    }
    #volunteer-form .row .col-md-4 {
        width: 50% !important;
    }
    #volunteer-form .row .col-md-2 {
        width: 33.33% !important;
    }
    .volunteer-page form input:not([type="file"]), .volunteer-page form select {
        height: 50px !important;
    }
    .reports .card-img-top,
    .fundraising-page .fundraiser .card-img-top,
    .fundraising_container .fundraiser .card-img-top {
        height: 210px !important;
    }
    .page-container .our-work-page .hero {
        height: 30vh !important;
    }
    .container,
    .zakat-calculator .container,
    .fundraiser-success .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
    }
    .types .type {
        padding: 0 2rem !important;
    }
    .types .type .title {
        font-size: 2rem !important;
    }
    .types .projects .project_title h3,
    .countries_container .country h3{
        font-size: 1.3rem !important;
    }
    .calculator {
        width: 58% !important;
    }
    .calculator h4,
    .fundraising_container .fundraiser .card-title {
        font-size: 1.4rem !important;
    }

    .form-field h3 {
        font-size: 1.2rem !important;
    }

    .calc_sidebar h2 {
        font-size: 1.5rem !important;
    }

    .fundraising-page .footer_components .container-fluid,
    .fundraising-page .footer_components .large-info,
    .fundraising-page .footer_components .large-info .content {
        padding: 0 !important;
    }
    .fundraising-page .footer_components .large-info .content {
        flex-direction: column !important;
    }
    .fundraising-page .footer_components .large-info .content .text {
        width: 100% !important;
    }
    .fundraising-page .footer_components .large-info p {
        font-size: 1.1rem !important;
    }
    .fundraising_container .fundraiser,
    .fundraisers-page .details form,
    .fundraisers-page .details form .col-md-6,
    #fundraisers-form h1 {
        padding: 1rem !important;
    }
    .fundraising-page .fundraiser .card-body,
    .fundraising_container .fundraiser .card-body {
        padding: 0.5rem !important;
    }
    .fundraising_container .fundraiser .target_percent,
    .fundraising-page .fundraiser .card-body button,
    .fundraising_container .fundraiser .card-body button {
        margin-top: 1rem !important;
        font-size: 1rem !important;
    }
    #fund-form .fundraiser-detail .user_end_date,
    #fund-form .fundraiser-detail .target_supporters {
        font-size: 1rem !important;
    }
    .events a {
        width: 50% !important;
    }
    .event .description img {
        width: 100% !important;
    }
    .event .details {
        width: 65% !important;
    }
    .event .apply .btn {
        height: auto !important;
    }
    #ticketDetails {
        width: 80% !important;
    }

    /* donor profile */
    .member-page form,
    .member-page .details form,
    .member-page .payment form .card-form {
        padding: 2rem !important;
    }
    .member-page .payment form {
        padding: 0 !important;
    }
    .member-page .tab-content {
        width: 80% !important;
        margin-left: 10% !important;
    }
    .member-page .dashboard h3 {
        font-size: 1.5rem !important;
    }
    .member-page .dashboard .col-md-3 {
        width: 33.33% !important;
    }
    .member-page .dashboard a.item {
        font-size: 1.2rem !important;
    }
    .member-page .dashboard .breakdown {
        flex-direction: column !important;
    }
    .member-page .donations-breakdown .project_types {
        margin-right: 0 !important;
    }
    .member-page .donations-breakdown .extra_details {
        margin-left: 0 !important;
    }
    .member-page .details form,
    .member-page .fundraisers_container,
    .member-page .gifts_container {
        margin-top: 1.5rem !important;
    }
    .member-page .details form h2,
    .member-page .details form >.row>.col-md-6 {
        padding-left: 0 !important;
        padding-right: 1rem !important;
    }
    .member-page .details form h2 {
        font-size: 2.5rem !important;
    }
    .member-page .details form h2 span {
        font-size: 1.5rem !important;
        margin-left: 0.5rem !important;
    }
    .member-page .projects_container .project .amount {
        font-size: 1.5rem !important;
    }
    .member-page .projects_container .form-group {
        width: 280px !important;
    }
    .member-page .projects_container .form-group input {
        width: 100% !important;
    }
    .member-page .projects_container .form-group label {
        font-size: 1.2rem !important;
    }
    .member-page .projects_container a.col-md-4 {
        width: 50% !important;
    }
    .member-page .fundraisers .donor-fundraiser {
        width: 100% !important;
        padding: 1rem;
    }
    .member-page .fundraisers .donor-fundraiser .card-body,
    .member-page .fundraisers .edit-fundraiser,
    .member-page .gifts_container .gift .card-body {
        padding: 0 !important;
    }
    .member-page .payment ul li {
        flex-direction: column !important;
        gap: 1rem;
        font-size: 1rem !important;
        align-items: start !important;
    }
    .member-page .payment ul li .edit-card .btn {
        height: auto !important;
    }
    .member-page .donation-history .col-md-9,
    .member-page .donation-history .col-md-3 {
        width: 100% !important;
    }
    .member-page .donation-history .col-md-3 {
        display: flex !important;
        justify-content: end !important;
    }
    .member-page .donation-history #auth-tabs button {
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem !important;
    }
    .member-page .donation-history .btn-group,
    .member-page .donation-history #auth-tabs {
        margin: 0.5rem 0 !important;
    }
    .member-page .donation-history .btn-group .btn,
    .member-page .donation-history table .btn,
    #event-tickets-table .btn {
        height: auto !important;
    }

    /* fullscreen menu */    
    .fs-menu-container-mobile > .row {
        height: 100vh !important;
    }
    .fs-menu-container-mobile .fs-menu-left {
        display: flex !important;
        background-size: cover !important;
        background-position: center !important; 
    }
    .fs-menu-container .fs-menu-left .left-content {
        width: 90%;
    }
    .fs-menu-container .fs-menu-right .menus {
        padding: 4rem 1rem 0 1rem !important;
        height: auto !important;
    }
    .fs-menu-container .fs-menu-left .title {
        font-size: 2.5rem !important;
    }
    .fs-menu-container .fs-menu-left .desc,
    .fs-menu-container .close-button {
        font-size: 1.2rem !important;
    }
    .fs-menu-container .fs-menu-right .section .title {
        font-size: 1.5rem !important;
    }
    .fs-menu-container .fs-menu-right .section .links ul a {
        font-size: 1.2rem !important;
        line-height: 2rem !important;
    }
    .fs-menu-container .fs-menu-right .section:last-child {
        padding-top: 2.5rem !important;
    }
}