/* Custom Typography */
.serif-font {
font-family: 'Georgia', serif;
}

/* Hero Section with Overlay */
.hero-section {
background: linear-gradient(rgb(0 0 0 / 4%), rgba(0, 0, 0, 0.4)),
          url('../img/slider1.webp');
background-size: cover;
background-position: center;
min-height: 90vh;
}

.hero-box{
margin-top:300px;
}

@media (max-width: 768px){
.hero-box{
margin-top:200px;
}
}


.logo-main {
max-width: 350px;
filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3));
}

/* The Green Section below the hero image */
.cta-section {
background-color: #264d2e; /* Dark forest green */
border-top: 4px solid #1a331f;
}

/* Card Styling */
.bg-light-texture {
background-color: #e9ecef;
background-image: url("../img/paper.png"); /* Subtle texture */
}

.btn-dark-green {
background-color: #1a331f;
color: white;
border-radius: 5px;
padding: 8px 25px;
transition: 0.3s;
}

.btn-dark-green:hover {
background-color: #264d2e;
color: #fff;
}

.custom-btn {
background: linear-gradient(to bottom, #2d5a35, #1a331f);
border: 1px solid #142818;
box-shadow: 0 4px 0 #0d1a10;
}

/* Navbar adjustment */
/* .nav-link {
font-size: 0.9rem;
font-weight: 500;
color: #333 !important;
} */

/* .nav-link.active {
color: #1a331f !important;
}
.nav-link:active{
  border-width: 3px !important;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
} */
/* Base navigation link style */
.navbar-nav .nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333 !important;
    padding-bottom: 5px;
    margin: 0 10px;
    border-bottom: 3px solid transparent; /* Keeps layout stable */
    transition: all 0.3s ease;
}

/* Active class styling */
.navbar-nav .nav-link.active {
    color: #1a331f !important; /* The dark green from the movement theme */
    font-weight: 700;
    border-bottom: 3px solid #2d5a35; /* The green underline seen in the image */
}

/* Hover state for better UX */
.navbar-nav .nav-link:hover {
    color: #2d5a35 !important;
}
.custom-footer {
/* Dark slate/stone textured background */
background: linear-gradient(rgba(30, 33, 37, 0.9), rgba(30, 33, 37, 0.9)),
          url('../img/dark-matter.png');
background-color: #1a1c1e;
font-size: 0.85rem;
font-family: 'Arial', sans-serif;
}

/* Links styling */
.custom-footer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
margin: 0 12px;
transition: color 0.2s;
}

.custom-footer a:hover {
color: #fff;
}

/* Social Icons specific sizing */
.social-icons i {
font-size: 1.2rem;
margin: 0 5px;
}

/* Vertical divider (Bootstrap 'vr' override) */
.custom-footer .vr {
background-color: rgba(255, 255, 255, 0.3);
width: 1px;
height: 20px;
opacity: 1;
}

/* copyright and legal text */
.copyright-row span, .sub-footer-links small {
color: rgba(255, 255, 255, 0.6);
}

.legal-links-inline a {
margin: 0 5px;
}

/* Ensure mobile responsiveness */
@media (max-width: 768px) {
.footer-nav, .copyright-row {
  flex-direction: column;
  text-align: center;
}
.footer-nav a, .social-icons {
  margin-bottom: 8px;
}
.vr { display: none; }
}

/* ######################## About Page Css ######################## */
/* About Us Specific Styles */
.about-section {
    /* Matching the paper-like texture from the previous step */
    background-color: #f8f9fa;
    background-image: url("https://www.transparenttextures.com/patterns/paper.png");
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-section h2 {
    color: #1a331f; /* Dark green tone from logo */
}

.about-section h3 {
    font-size: 1.75rem;
    color: #222;
    line-height: 1.2;
}

.about-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444 !important;
}

.about-section img {
    border-radius: 2px; /* Slight rounding to look more professional */
    border: 1px solid #ddd;
}

/* Serif font helper if not already in your style.css */
.serif-font {
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Ensuring mobile spacing is clean */
@media (max-width: 991.98px) {
    .about-section .row {
        text-align: center;
    }
    .about-section h3 {
        margin-top: 1rem;
    }
}



/* ################ Contact page css ######################### */
.contact-section {
    background-color: #f8f9fa;
    background-image: url("https://www.transparenttextures.com/patterns/paper.png");
    position: relative;
    overflow: hidden;
}

.text-dark-green {
    color: #1a331f;
}

/* Flex Column behavior to push the image to the bottom */
.contact-person-img {
    margin-top: auto; /* Pushes image to the bottom of the column */
}

.contact-person-img img {
    /* Slightly overlap or sit flush as per the design */
    margin-bottom: -48px;
    max-width: 90%;
}

.contact-card {
    background-color: #ffffff;
    border-radius: 8px !important;
}

/* Button color to match the red in your image */
.btn-danger {
    background-color: #b91d1d !important;
    border: none;
}

/* Responsive fix for mobile */
@media (max-width: 991px) {
    .contact-person-img img {
        margin-bottom: 20px;
        max-width: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .contact-details {
        text-align: center;
    }
    .contact-details .d-flex {
        justify-content: center;
    }
}


/* ################### Donate page css ##################### */
/* Typography & Textures */
.serif-font { font-family: 'Georgia', serif; }

.bg-paper-texture {
    background-color: #fcfcfc;
    background-image: url("https://www.transparenttextures.com/patterns/paper.png");
}

/* Contact Section & Fading Image */
.contact-area { position: relative; }

.lady-image-container {
    margin-bottom: -3rem; /* Positions image relative to container bottom */
    position: relative;
    width: 110%; /* Makes image appear "outside" left of container slightly */
    margin-left: -10%;
}

.lady-fade-img {
    width: 100%;
    /* Gradient mask to fade image into the background texture */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%),
                        linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%),
                linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* Form Styling */
.form-control {
    background-color: #fdfdfd;
    border: 1px solid #ddd;
}

#custom_amount:focus {
    border-color: #1a331f !important; /* Dark green border */
    box-shadow: 0 0 0 0.25rem rgba(26, 51, 31, 0.25); /* Subtle green glow */
    outline: 0;
}

#donate_form .form-control:focus,
#donate_form .form-select:focus {
    border-color: #1a331f;
    box-shadow: 0 0 0 0.25rem rgba(26, 51, 31, 0.25);
}

#donate_form .form-control.error:focus {
    border-color: #b91d1d;
    box-shadow: 0 0 0 0.25rem rgba(185, 29, 29, 0.25);
}

.btn-danger {
    background-color: #b91d1d;
    border: none;
}