/* =========================================
   1. GLOBAL & FONTS
   ========================================= */
/* Import Fonts: Nunito (Body), Quicksand (Headings), Great Vibes (Signature) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Quicksand:wght@500;700;800&family=Great+Vibes&display=swap');

:root {
    --primary: #f39c12;       /* Vibrant Orange */
    --secondary: #2c3e50;     /* Dark Blue */
    --dark-green-bg: #2E4033; /* New Section Background */
    --accent-teal: #e0f2f1;
    --accent-pink: #fce4ec;
    --accent-blue: #e3f2fd;
    --text-dark: #333;
}

body { font-family: 'Nunito', sans-serif; background-color: #fdfdfd; overflow-x: hidden; }
h1, h2, h3, h4, h5, .navbar-brand { font-family: 'Quicksand', sans-serif; }

/* =========================================
   2. NAVIGATION
   ========================================= */
.navbar { transition: 0.4s ease; padding: 15px 0; }
.navbar.scrolled { background: white; box-shadow: 0 5px 20px rgba(0,0,0,0.1); padding: 10px 0; }
.navbar.scrolled .nav-link, .navbar.scrolled .navbar-brand { color: var(--secondary) !important; }
.navbar-brand { font-weight: 800; font-size: 1.8rem; }

/* =========================================
   3. HERO SECTION (TORN EDGE)
   ========================================= */
.hero-wrapper {
    position: relative;
    height: 90vh;
    background: linear-gradient(rgba(44, 62, 80, 0.7), rgba(44, 62, 80, 0.6)), 
                url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=2070');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    color: white;
}

/* SVG Divider */
.custom-shape-divider-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(138% + 1.3px);
    height: 120px;
}
.custom-shape-divider-bottom .shape-fill { fill: #fdfdfd; }

/* =========================================
   HERO SLIDER STYLES
   ========================================= */
.hero-slider-area {
    position: relative;
    height: 90vh; /* Keeps the tall hero look */
    width: 100%;
    overflow: hidden;
}

.carousel-item {
    height: 90vh;
    background-color: #000; /* Fallback */
}

/* Image styling */
.hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* Darkens image so text pops */
}

/* Centering the text content */
.carousel-caption {
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    z-index: 10;
}

/* Navigation Arrows */
.carousel-control-prev, .carousel-control-next {
    z-index: 20;
    width: 5%;
}

/* Ensure the Torn Paper SVG stays on top of the slider */
.custom-shape-divider-bottom {
    z-index: 30; /* Higher than slider, lower than navbar */
}

/* =========================================
   4. DONATION & SERVICE CARDS
   ========================================= */
.donation-card {
    background: white;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    position: relative;
    margin-top: -80px;
    z-index: 10;
}
.btn-amount {
    border: 2px solid #eee;
    margin: 0 5px;
    border-radius: 50px;
    font-weight: 700;
    transition: 0.3s;
}
.btn-amount:hover, .btn-amount.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.service-box {
    padding: 30px;
    border-radius: 20px;
    transition: 0.4s;
    height: 100%;
}
.service-box:hover { transform: translateY(-10px); }
.bg-teal { background: var(--accent-teal); color: #00695c; }
.bg-pink { background: var(--accent-pink); color: #880e4f; }
.bg-blue { background: var(--accent-blue); color: #0d47a1; }
.bg-orange { background: var(--primary); color: white; }
.service-icon { font-size: 3rem; margin-bottom: 20px; }

/* =========================================
   5. NEW: ABOUT FEATURE SECTION (Dark Green)
   ========================================= */
.about-feature-section {
    background-color: var(--dark-green-bg);
    color: #ffffff;
    overflow: hidden;
    padding: 100px 0;
    position: relative;
}

/* Image Wrapper */
.about-image-column {
    position: relative;
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image-circle {
    position: relative;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: #FFC107; /* Orange Circle background */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.about-person-img {
    width: 90%;
    height: auto;
    object-fit: cover;
}

/* Bubbles */
.skill-bubble {
    position: absolute;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    z-index: 3;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    font-family: 'Nunito', sans-serif;
    animation: floatBubble 4s ease-in-out infinite;
}
@keyframes floatBubble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bubble-orange { background-color: #FFC107; color: var(--dark-green-bg); }
.bubble-green { background-color: #4F6D54; color: #ffffff; }

/* Bubble Positions */
.pos-1 { top: 5%; left: 50%; }
.pos-2 { top: 25%; left: 0%; }
.pos-3 { top: 25%; right: -5%; }
.pos-4 { top: 50%; left: -5%; }
.pos-5 { top: 55%; left: 25%; z-index: 4; }
.pos-6 { top: 55%; right: 5%; }
.pos-7 { bottom: 10%; left: 10%; }

/* Typography */
.about-subtitle {
    color: #FFC107;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.about-subtitle::before {
    content: ""; display: inline-block; width: 40px; height: 3px; background-color: #FFC107; margin-right: 15px;
}
.about-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; }
.highlight-text { color: #FFC107; }
.about-desc { color: #dcdcdc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 40px; }

/* Stats */
.about-stat-number { font-size: 2.5rem; font-weight: 800; color: #FFC107; display: block; line-height: 1; }
.about-stat-label { font-size: 0.85rem; color: #ccc; text-transform: uppercase; letter-spacing: 1px; }

/* Button & Signature */
.btn-download {
    padding: 12px 35px;
    border: 2px solid #FFC107;
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}
.btn-download:hover { background-color: #FFC107; color: var(--dark-green-bg); }
.signature-text {
    font-family: 'Great Vibes', cursive;
    font-size: 3rem;
    color: #FFC107;
    transform: rotate(-5deg);
}

/* =========================================
   6. CTA PARALLAX & TEAM
   ========================================= */
.cta-parallax {
    background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), 
                url('https://images.unsplash.com/photo-1559027615-cd4628902d4a?q=80&w=2074');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.team-card {
    border: none;
    transition: 0.3s;
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
}
.team-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.team-img-box {
    width: 120px; height: 120px; margin: 0 auto 20px;
    border-radius: 50%; overflow: hidden;
    border: 5px solid var(--accent-teal);
}
.team-img { width: 100%; height: 100%; object-fit: cover; }
.team-social a { color: #ccc; margin: 0 8px; transition: 0.3s; }
.team-social a:hover { color: var(--primary); }

/* =========================================
   7. FOOTER
   ========================================= */
footer { background: var(--secondary); color: white; padding: 60px 0 20px; margin-top: 0px; }
footer a { color: #ccc; text-decoration: none; }
footer a:hover { color: var(--primary); }

/* Responsive Adjustments */
@media (max-width: 991px) {
    .about-image-column { margin-bottom: 60px; }
    .about-title { font-size: 2.5rem; }
    /* Adjust bubbles for mobile so they don't go off screen */
    .pos-2, .pos-4 { left: 0; }
    .pos-3, .pos-6 { right: 0; }
}