/* --- UNIVERSAL & RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.6;
}

/* Base Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.relative {
    position: relative;
}

/* Impact Colors */
:root {
    --brac-pink: #1b1ed6; /* Specific pink from the image */
    --brac-grey-bg: #F8F8F8; /* Lightest background grey */
    --brac-text: #444;
}

/* Section Headings */
.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    margin-top: -10px;
    margin-bottom: 50px;
}


/* --- PART 1: UNLOCKING POTENTIAL (Doodle) --- */
.potential-wrapper {
    padding: 100px 0;
    background-color: var(--brac-grey-bg);
    
    /* Doodle Background Pattern */
    /* REPLACE with your seamless pattern link */
    background-image: url('https://via.placeholder.com/400x400/F8F8F8/E0E0E0?text=Doodle+Pattern');
    background-repeat: repeat;
    background-size: 300px; /* Controls pattern scale */
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.impact-card {
    position: relative;
    overflow: visible; /* Crucial for the content box overlap */
}

/* Image Wrapper and Custom Mask Shape */
.card-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Keep images square like the ref */
    overflow: hidden;
    
    /* Specific BRAC shape: round top-right corner */
    border-radius: 12px 12px 12px 12px; 
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

/* The Overlapping White Content Box */
.card-content-box {
    background-color: #fff;
    padding: 25px;
    width: 90%; /* Defines width before margin offset */
    position: relative;
    
    /* Moves the box up to overlap the image */
    margin-top: -80px; 
    margin-left: 15px; /* Offset from left */
    
    border-radius: 4px; /* Slight rounding on main box */
    
    /* Shadow similar to the ref */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
}

.impact-number {
    display: block;
    font-size: 42px;
    font-weight: 900;
    color: var(--brac-pink); /* SPECIFIC BRAC PINK */
    margin-bottom: 10px;
}

.impact-text {
    font-size: 14px;
    color: var(--brac-text);
    font-weight: 300;
}


/* --- PART 2: GLOBAL IMPACT (Map) --- */
.map-wrapper {
    padding: 100px 0;
}

.map-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Important for clean map edges */
}

.map-base-image {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.9;
}

/* Map Interaction controls */
.map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.control-btn {
    width: 40px;
    height: 40px;
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Pink Hotspots */
.map-hotspot {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(--brac-pink);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(67, 27, 214, 0.6);
    cursor: pointer;
    transform: translate(-50%, -50%); /* Center on the point */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}

.map-hotspot:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 15px rgba(39, 27, 214, 0.9);
}

/* Precise Hotspot Positioning (Example positions) */
.hotspot-south-asia { top: 70%; left: 55%; } /* Positioning Example */
.hotspot-af-east-1  { top: 75%; left: 30%; }
.hotspot-af-east-2  { top: 82%; left: 28%; }


/* The Floating Map Info Box */
.map-impact-box {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background-color: #fff;
    padding: 40px;
    width: 400px;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    z-index: 15;
    
    /* Start hidden for JS interaction */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

/* The .active state, controlled by JS or just applied by default */
.map-impact-box.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.map-impact-number {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #333; /* Dark text for the main total */
    margin-bottom: 20px;
    border-bottom: 1px solid #EEE; /* Line from ref */
    padding-bottom: 15px;
}

.map-impact-desc {
    font-size: 14px;
    color: #555;
    font-weight: 300;
    margin-bottom: 30px;
}

.map-button-group {
    display: flex;
    gap: 15px;
}

/* Specific Dark Buttons from ref */
.map-btn-dark {
    background-color: #222;
    color: #fff;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

.map-btn-dark .arrow {
    margin-left: 8px;
}

.map-btn-dark:hover {
    background-color: #444;
}

/* =========================================
   ADDITIONS FOR RESPONSIVENESS 
   ========================================= */

/* Tablet View (992px and below) */
@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }

    .map-impact-box {
        width: 350px;
        padding: 30px;
        right: 20px;
        bottom: 20px;
    }
}

/* Mobile View (768px and below) */
@media (max-width: 768px) {
    .potential-wrapper, .map-wrapper {
        padding: 60px 0; /* Less padding on small screens */
    }

    .section-title {
        font-size: 28px;
        text-align: center;
    }

    .section-subtitle {
        text-align: center;
    }

    .card-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }

    .impact-card {
        margin-bottom: 60px; /* Space for the overlapping box */
    }

    .card-content-box {
        margin-top: -60px; /* Slightly less overlap on mobile */
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Move Map Info Box below the map on mobile */
    .map-impact-box {
        position: relative;
        width: 100%;
        right: 0;
        bottom: 0;
        margin-top: 20px;
        opacity: 1; /* Always visible on mobile */
        transform: none;
        box-shadow: none;
        border: 1px solid #eee;
        pointer-events: auto;
    }

    .map-controls {
        display: none; /* Hide zoom controls on mobile */
    }
}