/* common for all */

.custom-shrink{
            flex-shrink: 0;
}
/* Custom Breadcrumb Link Styles */
nav[aria-label="Breadcrumb"] a {
  color: #1F2937; /* This is the hex code for your 'brand-dark' */
}

/* Optional: Add a hover effect */
nav[aria-label="Breadcrumb"] a:hover {
  text-decoration: underline;
  color: #14B8A6; /* This is the hex code for your 'brand-teal' for a nice hover effect */
}

nav[aria-label="Breadcrumb"] ol li {
    color: #14B8A6; /* This is the hex code for your 'brand-teal' for a nice hover effect */
}


/* this code for header  */
/* mobile device nav menu  */
.custom_header{
      z-index: 999;
}

.custom_mobile_menu{
      z-index: 9999;
}
 /* Custom brand colors */
        .brand-dark { background-color: #2c3e50; }
        .brand-bg-light { color: #ecf0f1; }
        .brand-teal-dark { background-color: #16a085; }
        .brand-bg-white { background-color: #ffffff; }
        .brand-text-medium { color: #34495e; }

        /* --- Animation & Visibility Control for Mobile Menu --- */
        #mobile-menu-container {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none; /* Initially non-clickable */
        }
        /* When open, the container becomes visible and clickable */
        #mobile-menu-container.open {
            opacity: 1;
            pointer-events: auto;
        }

        #mobile-menu {
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* When container is open, slide the menu in */
        #mobile-menu-container.open #mobile-menu {
            transform: translateX(0);
        }

        @media only screen and (max-width: 767px){
          .sm_responsive{
            padding: 5px !important;
          }
        }
/* close  */


/* this style for foote section  */
.custom_design ul li,
.custom_design p
 {
      color: #000 !important;
      font-weight: 400;
}
.bg-custom-color{
background-color: #E9EFEA;
}
.copyright,
.bg-custom-color-headertop{
background-color: #03196E;
}
.custom_design h2,
.custom_design h3{
  color: #03196E;
  font-weight: 600;
}
.footer_copyright{
  color: #fff !important;
}




.footer_subscription {
      padding: 0 15px;
      border-radius: 0 8px 8px 0;
}

/* close all style here  */


/* this code for footer  */
        ul#menu-footer-menu li a:hover,
        ul#menu-campaign-menu li a:hover,
        .custom_foot a span:hover{
          text-decoration: underline !important;
          color: #14B8A6;
        }

        .custom_design div p{
          line-height: 1.7em;
        }
        ul#menu-footer-menu li,
        ul#menu-campaign-menu li,
        .custom_foot a{
        padding: 5px 0 !important;
        }

        ul#menu-footer-menu li a,
        ul#menu-campaign-menu li a, 
        .custom_foot a{
        font-size: 16px !important;
        } 

        .custom_design{
          padding: 12px;
        }

        .first_col{
          width: 24%;
        }

        .sec_col{
          width: 20%;
        }
        .three_col{
          width: 20%;
        }
        .four_col{
          width: 30%;
        }

        @media only screen and (max-width: 1024px){
           .custom_design{
            width: 48%;
            margin-top: 40px;
            padding: 10px;
           }
           .first_col{
            padding: 10px;
           }

        }

         @media only screen and (max-width: 767px){
           .custom_design{
            width: 100%;
            margin-top: 20px;
			   text-align: center;
           }
			 .custom_design figure.wp-block-image img {
				 margin: 0 auto;
			 }
			 .custom_design ul.wp-block-social-links {
					justify-content: center;
					margin-top: 10px;
				}
           .py-16{
            padding: 30px 15px !important;
           }
        }
		footer.bg-custom-color {
			overflow: hidden;
		}

        /* this code for header sub menu */

        /* =================================================== */
        /* FINAL & FORCED - 3-Level Dropdown Menu CSS Fix
        /* =================================================== */

        /* 1. Hide all dropdowns by default */
        .sub-menu-container {
        display: none !important;
        position: absolute !important;
        z-index: 50 !important; 
    }

        /* 2. Show the direct child dropdown when its parent is hovered */
        .group:hover > .sub-menu-container {
        display: block !important;
    }

        /* 3. --- The Definitive Fix for 3rd-Level Menu Alignment --- */
        /* Selects any dropdown that is inside another dropdown */
        .sub-menu-container .sub-menu-container {
        /* Position it to the right of the parent item */
        left: 100% !important;

        /* This line aligns it perfectly with the top of its parent item */
        top: 0 !important; 
    }



    /* this code for tab donation card width fix  */

    .donation_card_custom_width{
      width: 23.5%;
    }
    @media only screen and (max-width: 1024px){
      .donation_card_custom_width{
      width: 48%;
    }
    }

     @media only screen and (max-width: 767px){
      .donation_card_custom_width{
      width: 100%;
    }
    }


/**
 * One Time Popup Form
 */
/* Overlay */
.givinghand-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.givinghand-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Popup Card */
.givinghand-popup-content {
    background: #fff;
    padding: 40px 35px 30px 35px;
    border-radius: 18px;
    width: 380px;
    max-width: 95%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    text-align: center;
    position: relative;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 1.25, 0.5, 1), opacity 0.5s ease;
}

.givinghand-popup-overlay.active .givinghand-popup-content {
    transform: scale(1);
    opacity: 1;
}

/* Close Button */
.givinghand-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 24px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.givinghand-close:hover {
    color: #DA2738;
    transform: rotate(90deg);
}

/* Heading */
.givinghand-popup-content h3 {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937; /* text color */
}

/* Floating label inputs */
.input-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.input-wrapper input {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #fff;
    color: #1f2937;
}

.input-wrapper label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 5px;
    color: #aaa;
    font-size: 14px;
    pointer-events: none;
    transition: all 0.2s ease;
}

/* Move label on focus or input */
.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    color: #DA2738;
}

/* Input focus border */
.input-wrapper input:focus {
    border-color: #DA2738;
    box-shadow: 0 0 8px rgba(218, 39, 56, 0.2);
}

/* Button */
#givinghand-form button {
    display: block;
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: #DA2738; /* primary solid color */
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(218,39,56,0.3);
}

#givinghand-form button:hover {
    background: #b21f2d;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(218,39,56,0.4);
}

/* Success/Error Message */
#givinghand-message {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    transition: all 0.3s ease;
}

.breadcrumbs-section .breadcrumb-brand {
    font-size: 80px;
}

@media only screen and (max-width: 767px) {
    .breadcrumbs-section .breadcrumb-brand {
        font-size: 43px;
    }
}