:root {
     --main_primary: #0a3776;
     --light_primary: #E6EAF1;
     --main_secondary: #f2b25a;
     --light_secondary: #FDF7E7;
     --gray: #627084;
     --dark_gray: #344256;
     --light_gray: #f1f2f4;
     --red: #ef4444;
     --green: #1dc95c;
     --light_green: #E8F9EE;
}
 body{
     font-family: "DM Sans", sans-serif;
     font-size: 16px;
     color: var(--gray);
     overflow-x: hidden;
}
 h1,h2,h3,h4,h5,h6,p {
     margin: 0px;
     padding: 0px;
}
 h1{
     font-size: 72px;
}
 h2{
     font-size: 36px;
}
 h3{
     font-size: 30px;
}
 h4{
     font-size: 24px;
}
 h5{
     font-size: 20px;
}
 p {
     margin: 0px;
}
 .bg_primary {
     background-color: var(--main_primary);
}
 .bg_light_primary {
     background-color: var(--light_primary) 
}
 .bg_secondary {
     background-color: var(--main_secondary);
}
 .bg_light_secondary {
     background-color: var(--light_secondary);
}
 .bg_gray {
     background-color: var(--gray);
}
 .bg_light_gray {
     background-color: var(--light_gray);
}
 .bg_green {
     background-color: var(--green);
}
 .bg_light_green {
     background-color: var(--light_green);
}
 .color_primary {
     color: var(--main_primary);
}
 .color_secondary {
     color: var(--main_secondary);
}
 .color_gray{
     color: var(--gray);
}
 .color_dgray {
     color: var(--dark_gray);
}
 .color_red {
     color: var(--red);
}
 .color_green {
     color: var(--green);
}
 .text_white {
     color: #fff;
}
 .text_white_90 {
     color: rgba(255,255,255,0.9);
}
 .text_white_70 {
     color: rgba(255,255,255,0.7);
}
 .shadow_light{
     box-shadow: 0px 0px 10px #d3d3d3;
}
 .border_light {
     border-color: #D9D9D9;
}
 .border_green {
     border: 1px solid var(--green);
}
.hover.border_red.card-impact:hover{
border-color: var(--red) !important;
}

 .radius_10{
     border-radius: 10px !important;

}
 .radius_20{
     border-radius: 20px;
}
.radius_15{
border-radius: 15px;
}
 .radius_30{
     border-radius: 30px;
}
 .cursor_pointer {
     cursor: pointer;
}
 .btn {
     padding: 8px 16px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     border-radius: 5px;
     text-decoration: none;
     box-shadow: none;
     border: none;
}
 .btn_outline {
     border: 1px solid #fff;
}
.btn.btn_outline:hover{
     background-color: #fff;
     color: var(--main_primary) !important;
}
 .btn.btn-outline-light:hover {
     backdrop-filter: blur(5px);
     background: none;
     color: white;
}
 .btn:hover {
     opacity: 1;
}
 .btn.bg_primary:hover {
     background-color: var(--main_primary);
     color: inherit;
}
 .btn.bg_secondary:hover {
     background-color: #DAA65D;
     color: var(--main_primary);
}
.btn.bg-white:hover {
     background-color: var(--main_primary) !important;
     color: #fff;
}
 .font_12 {
     font-size: 12px;
}
 .font_14 {
     font-size: 14px;
}
 .font_18 {
     font-size: 18px;
}
 .section-padding {
     padding: 5rem 0;
}
 .hero {
     background: linear-gradient(90deg, rgba(10, 55, 118, 0.68) 0%, rgba(10, 55, 118, 0.59) 100%), url('/wp-content/uploads/2025/09/home-banner.jpg') center/cover no-repeat;
     padding: 80px 0 150px;
     color: white;
}
.hero{
    background-color: rgba(10, 55, 118, 0.6);
    background-blend-mode: multiply;
}
 .hero h1 {
     font-size: 72px;
     line-height: 72px;
     margin-bottom: 20px;
}
.navbar{
background-color: #F6F7F9;
}
.navbar.is-sticky {
  position: fixed;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  backdrop-filter: blur(10px);
  animation: slideDown 0.35s ease-out;
  width: 100%;
  background-color: #f6f7f9eb;
  z-index: 1111;
}
.navbar .btn{
        box-shadow: 0px 6px 20px lightgray;
}
.navbar.is-sticky img {
  max-width: 80%;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
 a.navbar-brand img {
     width: 100px;
    }
 ul.navbar-nav li a {
     color: #344256;
     font-weight: 500;
     font-size: 14px;
     margin-left: 10px;
     margin-right: 10px;
}
 ul.navbar-nav li a:hover {
     color: var(--main_primary);
}
.btn-outline-light{
    border: 1px solid #ffffff4d;
    border-radius: 10px;
        padding: 10px 30px !important;
}  
 .card-donation {
     background: white;
     border-radius: 0.75rem;
     border: 2px solid hsl(215 20% 88%);
     transition: all 0.3s ease;
     height: 100%;
     padding: 1.5rem 0.7rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.card-impact .btn{
    position: absolute;
    right: 0;
    left: 0;
    width: 70% !important;
    margin: auto;
    bottom: 20px;
}
 .hover.border-urgent:hover {
     border-color: var(--urgent);

}
 .hover.border-primary-light:hover {
     border-color: var(--primary-light);
}
 .hover.border-accent-warm:hover {
     border-color: var(--accent-warm);
}
 .icon-circle {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
}
 .icon-circle.urgent {
     background-color: rgba(220, 53, 69, 0.1);
}
 .icon-circle.success {
     background-color: rgba(25, 135, 84, 0.1);
}
 .icon-circle.primary {
     background-color: rgba(13, 110, 253, 0.1);
}
 .icon-circle.primary-light {
     background-color: rgba(110, 168, 254, 0.1);
}
 .icon-circle.accent-warm {
     background-color: rgba(253, 126, 20, 0.1);
}
 .impact-badge {
     display: inline-block;
     padding: 0.25rem 0.75rem;
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 500;
}
 .impact-badge.success {
     color: var(--success);
     background-color: rgba(25, 135, 84, 0.1);
}
 .btn-hero {
     transition: all 0.3s ease;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     justify-content: center;
}
 .btn-hero:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
 .quote-islamic {
     font-size: 1.5rem;
     font-style: italic;
     font-weight: 500;
     color: #333;
     position: relative;
     padding: 1rem 2rem;
}
 .quote-islamic::before {
     content: "";
     font-size: 5rem;
     position: absolute;
     left: -15px;
     top: -25px;
     color: rgba(13, 110, 253, 0.1);
     font-family: Georgia, serif;
}
 .fade-in-up {
     animation: fadeInUp 0.6s ease-out forwards;
     opacity: 0;
}
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .card-1 {
     animation-delay: 0s;
}
 .card-2 {
     animation-delay: 0.1s;
}
 .card-3 {
     animation-delay: 0.2s;
}
 .card-4 {
     animation-delay: 0.3s;
}
 .card-5 {
     animation-delay: 0.4s;
}
 .footer {
     background-color: var(--main_primary);
     color: #fff;
     padding-top: 4rem;
}
 .footer-logo {
     height: 70px;
     width: auto;
     margin-bottom: 1.5rem;
}
 .footer-heading {
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: white;
}
 .footer-link {
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     display: block;
     margin-bottom: 0.75rem;
     transition: color 0.2s;
     font-size: 0.875rem;
}
 .footer-link:hover {
     color: white;
}
 .footer-icon {
     color: var(--accent-warm);
     margin-right: 0.75rem;
     flex-shrink: 0;
     width: 20px;
     height: 20px;
}
 .footer-contact-item {
     display: flex;
     margin-bottom: 1rem;
}
 .footer-contact-text {
     font-size: 0.875rem;
     color: rgba(255, 255, 255, 0.8);
}
 .footer-contact-title {
     font-weight: 500;
     color: white;
     margin-bottom: 0.25rem;
}
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     padding: 1.5rem 0;
}
 .footer-bottom-text {
     font-size: 0.875rem;
     color: rgba(255, 255, 255, 0.8);
}
 .certification-item {
     display: flex;
     align-items: center;
     margin-right: 1.5rem;
}
 .certification-icon {
     color: var(--success);
     margin-right: 0.5rem;
     width: 20px;
     height: 20px;
}
 .footer-input {
     background-color: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.2);
     color: white;
     padding: 0.5rem 1rem;
     height: 44px;
     margin-bottom: 1rem;
}
 .footer-input::placeholder {
     color: rgba(255, 255, 255, 0.6);
}
 .btn-subscribe {
     background-color: var(--accent-warm);
     color: var(--primary-color);
     font-weight: 500;
     height: 44px;
     width: 100%;
     transition: background-color 0.2s;
}
 .btn-subscribe:hover {
     background-color: #ffa62d;
}
 .border-start.color_red {
     border-left: 4px var(--bs-border-style) var(--red)!important;
}
 .border-start.color_green {
     border-left: 4px var(--bs-border-style) var(--green)!important;
}
 .hover-effect {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .hover-effect:hover {
     transform: scale(1.05);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
 .hover.border-urgent:hover {
     border-color: hsl(45 85% 50%);
}
 .hover.border_green:hover {
     border-color: var(--green);
}
 .hover.border_primary:hover {
     border-color: var(--main_primary);
}
 .card-impact {
     transition-property: all;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-duration: .3s;
     animation-duration: .3s;
     position: relative;
     padding-bottom: 60px;
}
 .card-impact {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .card-impact:hover {
     transform: translateY(-0.5rem);
     box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.12), 0 5px 8px -4px rgba(0, 0, 0, 0.08);
}
 .gradient-section {
     background-image: linear-gradient(to bottom, #fff, #F2F3F5);
}
 nav.navbar button.navbar-toggler {
     outline: none;
     box-shadow: none;
     border: none;
}

.group:hover .group-hover{
  background-color: rgba(255, 255, 255, 0.2) !important;
}


 .down-arrow .fa-arrow-down {
     animation: bounce 1s infinite;
     font-size: 20px;
}
 .down-arrow {
     text-align: center;
     margin-top: 60px;
}
 @keyframes bounce {
     0%, 100% {
         transform: rotate(0deg) translateY(0);
    }
     50% {
         transform: rotate(0deg) translateY(10px);
    }
}

.text-destructive {
  color: var(--red);
}


.timeline-line {
  left: 3.2rem;
  width: 4px;
  background-color: rgba(13, 110, 253, 0.2); /* Bootstrap primary/20 */
}

.timeline-wrapper {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
}

.timeline-year {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  font-size: 1.25rem;
  position: relative;
  flex-shrink: 0;
}

.timeline-card {
  margin-left: 2rem;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  transition: all 0.4s ease;
  flex: 1;
}
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.timeline-wrapper > div:before {
    border-left: 1px solid var(--main_primary);
    height: 130px;
    content: "";
    position: absolute;
    right: 100px;
    left: 39px;
    right: 0px;
    top: 29px;
    bottom: 0px;
}
.timeline-wrapper > div:last-child:before {
    display: none;
}
.founder_img {
     height: 24rem; 
     object-fit: cover; 
     width: 100%;
     border-radius: 8px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
/*start donate page styling*/
.hero_donate{
    background-image: none;
  background: linear-gradient(135deg, #062147, var(--main_primary));
}
.hero .h1_small{
    font-size: 60px;
}
.yellow_highlighted_text{
        background-color: #ecb61333;
        border: 2px solid #ecb613;
        border-radius: 12px;
        padding: 24px;
        max-width: 900px;
        margin-top: 40px;
}
.yellow_highlighted_text span{
    color: #ecb613 ;
}
.opportunities_section{
 background: linear-gradient(135deg, #1dc95c0d, #fff);
}
.sm-icon-circle{
    height: 50px;
    width: 50px;
}
.blue_transparent_bg{
    background-color: #ffffff1a;
}
/*start styling for news page*/
.cat_col{
    width: 20%;
}
.gradient_box{
background: #0A377633;
    background: linear-gradient(147deg, rgba(10, 55, 118, 0.2) 6%, rgba(29, 201, 92, 0.2) 95%);

}
.gradient_box p{
    font-size: 60px;
}
.blog_btn{
    border-radius: 0.7rem;
    border-color: #dadfe7;
}
.blog_btn:hover{
    border-color: #dadfe7;
    background-color: #ffecb3 !important;
}
.heart_icon{
    font-size: 60px;
}
.share_icon {
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
}
.share_icon li{
    list-style: none;
    text-align: center;
}
.share_icon li a {
text-decoration: none;
color: var(--gray);
}

.share_icon li a span{
    height: 40px;
    width: 40px;
    background-color: var(--light_gray);
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.share_icon li:hover a span{
  background-color: var(--light_green);  
} 
.share_icon li:hover a{
    color: var(--green);
}
.wpcf7-form-control-wrap {
    position: relative;
}
.donation_form{
    max-width: 800px;
    margin: auto;
}
.donation_form .wpcf7-radio {
    display: flex
;
    justify-content: space-between;
    flex-wrap: wrap;
}
.donation_form .form-check{
    padding-left: 0px;
}
.donation_form label{
    font-size: 18px;
    color: var(--main_primary);
}
.donation_form br{
    display: none;

}
.donation_form p .wpcf7-radio .wpcf7-list-item, .donation_form p  .wpcf7-radio .wpcf7-list-item {
    width: 16%;
    border: 2px solid #dadfe7;
    margin: 3px 0px;
    border-radius: 10px;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    position: relative;
    font-size: 16px;
    color: var(--main_primary);
}
.donation_form .fld-type .wpcf7-radio .wpcf7-list-item, .donation_form .newsletter_options .wpcf7-radio .wpcf7-list-item{
    width: 49% !important;
}
.donation_form .newsletter_options .wpcf7-radio .wpcf7-list-item:has(input[type="radio"]:checked), .donation_form .fld-type .wpcf7-radio .wpcf7-list-item:has(input[type="radio"]:checked), .donation_form .fld-email .wpcf7-radio .wpcf7-list-item:has(input[type="radio"]:checked){
    background-color: var(--main_primary);
    color: #fff !important;
}
.donation_form .newsletter_options .wpcf7-radio .wpcf7-list-item:has(input[type="radio"]:checked) label{
    color: #fff !important;
}
.wpcf7-not-valid-tip{
    font-size: 14px;
}
.donation_form .wpcf7-radio .wpcf7-list-item input[type="radio"] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 56px;
    width: 100%;
}
.donation_form .wpcf7-radio .wpcf7-list-item:has(input[type="radio"]:checked) {
    border-color: var(--main_primary);
}
.donation_form .btn{
    background-color: var(--main_primary);
    font-size: 18px;
    height: 50px;
    margin-top: 20px;
}
.donation_form input[type="text"]:focus, .donation_form input[type="email"]:focus{
    box-shadow: 0px 0px 0px transparent;
    border-color: var(--main_primary);
}
.modal{
    z-index: 111111111;
}
.impact_progress_card .progress .progress-bar {
    border-radius: 30px;
    background-color: var(--main_secondary);
}
.impact_progress_card .progress {
    border-radius: 30px;
    /* background-color: var(--main_primary); */
}
.story_btn:hover{
    background-color: #fff !important;
    color: var(--main_primary) !important;
}
.banner_bottom_section{
    margin-top: -80px;
    position: relative;
    z-index: 11;
    max-width: 1000px;
    width: 95%;

}
.home_second_section{
    padding-top: 160px;
    margin-top: -80px;
    position: relative;
}
.islamic_section{
    background-color: #f3fbf5;
}
.hero_contact, .hero_about{
    /* background-image: url("https://savemotherandchild.org/wp-content/uploads/2025/09/contact-banner1.jpeg"); */
    padding: 80px 0px 80px !important;
    position: relative;
    background-color: rgba(10, 55, 118, 0.8);
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    min-height: 490px;
}
.hero_donate{
    padding: 80px 0px 80px !important;
}
.navbar  li a{
    position: relative;
}
.navbar  li a::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 0;
    background-color: var(--main_secondary);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease;
    border-radius: 4px;
}
.navbar li a:hover::after {
    width: 75%;
}
.hero_about{
    background-image: url("/wp-content/uploads/2025/09/About-Us-Image.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero_contact{
    background-image: url("/wp-content/uploads/2025/09/SMC-Contact-Us.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.white_text{
  text-shadow: 0px 0px 2px #000;
}
.video_div::after{
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
/* Circle wrapper */
.menu-icon {
  border: none;
  background: var(--main_primary) !important;     /* circle background color */
  border-radius: 50%;      /* make it circular */
  width: 45px;             /* circle size */
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;                /* spacing between lines */
  padding: 0;
  transition: background 0.3s ease;
}

/* Hamburger lines */
.menu-icon .toggler-icon {
  display: block;
  height: 3px;
  width: 20px;
  background-color: #fff;  /* line color */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* When menu is OPEN (Bootstrap removes .collapsed) */
.menu-icon:not(.collapsed) .toggler-icon:nth-child(1) {
  transform: rotate(45deg) translate(7px, 6px);
}


.menu-icon:not(.collapsed) .toggler-icon:nth-child(2) {
  opacity: 0;
}

.menu-icon:not(.collapsed) .toggler-icon:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}

/* Optional hover effect */
.menu-icon:hover {
  background: #ddd;
}
.newsletter_options .wpcf7-list-item{
    margin-left: 0px;
}
.newsletter_options .wpcf7-list-item input[type="checkbox"]{
    opacity: 0;
}
.newsletter_options .wpcf7-list-item label:has(input[type="checkbox"]){
    padding-left: 15px;
}
.newsletter_options .wpcf7-list-item label:has(input[type="checkbox"])::after{
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    border: 2px solid #0a3776;
    left: 0;
    border-radius: 4px;
    margin-top: -2px;
}
.newsletter_options label{
    font-size: 14px !important;
}
.newsletter_options .wpcf7-list-item label:has(input[type="checkbox"]:checked)::after{
content: "✓";
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding-top: 2px;
    font-weight: bold;
}
.news_card{
    padding-bottom: 70px !important;
}
.news_card .blog_btn{
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    margin: auto;
    width: 90% !important;
}
.contact_form ::placeholder{
    color: #c2c3c5;
}
.contact_form input:focus{
    border-color: var(--main_secondary);
    box-shadow: 0px 0px 0px transparent;
}
.contact_form p:has(.wpcf7-submit){
    text-align: center;
}
.contact_form .wpcf7-submit {
    min-width: 300px;
}
.contact_form .wpcf7-spinner{
    position: absolute;

}
@media only screen and (min-width: 1700px){
    .hero {
    background-position: 50% 20%;
    min-height: 750px;
    display: flex;
    align-items: center;
}
}
@media only screen and (max-width: 1024px){
    .cat_col{
    width: 33%;
}
}
@media only screen and (max-width: 768px){
    .hero_contact, .hero_about{
        background-size: contain;
    }
    .footer_info{
    justify-content: center;
}
.hero h1, h1 {
        font-size: 44px !important;
        line-height: 50px !important;
    }
    .banner_bottom_section {
    margin-top: -105px;
    width: 98%;
}
.hero h4{
    font-size: 18px;
}
}
@media only screen and (max-width: 576px){
    .contact_form .wpcf7-submit{
        width: 100%;
    }
        .hero_contact, .hero_about {
        background-size: cover;
    }
    h1{
        font-size: 50px;
    }
    .donation_form p span[data-name="amount"] .wpcf7-radio .wpcf7-list-item, .donation_form p span[data-name="recurring"] .wpcf7-radio .wpcf7-list-item {
    min-height: 38px;
    font-size: 13px;
    width: 32%;
}
    .yellow_highlighted_text {
    padding: 16px;
    font-size: 15px;
}
    .cat_col{
    width: 100%;
}
.card-impact .btn{
    width: 90% !important;
}
.hero h1, h1 {
    font-size: 38px !important;
    line-height: 46px !important;
}
.hero h4{
    font-size: 16px;
}
.hero {
    padding: 40px 0 120px;
}
.down-arrow{
    margin-top: 30px;
}
.hero .btn{
    width: 90%;
}
.card-donation .icon-circle{
    margin-bottom: 0px;
}
.banner_bottom_section{
    width: 95% !important;
}

}