.elementor-842 .elementor-element.elementor-element-a60d7ee:not(.elementor-motion-effects-element-type-background), .elementor-842 .elementor-element.elementor-element-a60d7ee > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dandemutande.africa/wp-content/uploads/2025/11/Utande-zim-Group-Structure-2-Banner.png");background-position:center center;background-repeat:no-repeat;background-size:auto;}.elementor-842 .elementor-element.elementor-element-a60d7ee > .elementor-container{min-height:600px;}.elementor-842 .elementor-element.elementor-element-a60d7ee > .elementor-background-overlay{opacity:0.33;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-842 .elementor-element.elementor-element-a60d7ee, .elementor-842 .elementor-element.elementor-element-a60d7ee > .elementor-background-overlay{border-radius:0px 0px 0px 0px;}.elementor-842 .elementor-element.elementor-element-a60d7ee{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-842 .elementor-element.elementor-element-1904e80 > .elementor-element-populated{margin:70px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-842 .elementor-element.elementor-element-37d20f1 > .elementor-container{min-height:400px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-842 .elementor-element.elementor-element-c274800{margin:101px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-842 .elementor-element.elementor-element-c274800 .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:45px;font-weight:600;line-height:55px;word-spacing:0px;color:var( --e-global-color-075cc30 );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-842 .elementor-element.elementor-element-fcc7706{--divider-border-style:solid;--divider-color:var( --e-global-color-primary );--divider-border-width:2.2px;}.elementor-842 .elementor-element.elementor-element-fcc7706 .elementor-divider-separator{width:100%;}.elementor-842 .elementor-element.elementor-element-fcc7706 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-842 .elementor-element.elementor-element-6e4036c{margin-top:0px;margin-bottom:50px;}.elementor-842 .elementor-element.elementor-element-61461ab > .elementor-element-populated{margin:30px 30px 30px 30px;--e-column-margin-right:30px;--e-column-margin-left:30px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-842 .elementor-element.elementor-element-37d20f1 > .elementor-container{min-height:292px;}.elementor-842 .elementor-element.elementor-element-c274800{margin:-140px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-842 .elementor-element.elementor-element-c274800 .elementor-heading-title{font-size:21px;line-height:2em;letter-spacing:0px;}}/* Start custom CSS for heading, class: .elementor-element-c274800 */.title-color{
    color:#009EE1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e9db29c *//* ========================
   1. LAYOUT GRID
   ======================== */
.org-chart-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Equal Columns */
    gap: 30px; /* Space BETWEEN the dotted boxes */
    max-width: 1300px;
    margin: 60px auto;
    font-family: 'Comfortaa', sans-serif;
}

.org-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 50px; /* Space between rows inside the box */
    
    /* NEW: Dotted Box Styling */
    border: 2px dashed #cbd5e1; /* The dotted line color */
    border-radius: 24px;        /* Rounded corners for the box */
    padding: 40px 10px;         /* Space inside the box */
    background-color: rgba(255, 255, 255, 0.3); /* Optional subtle background */
}

/* On Mobile, add space below each box */
@media (max-width: 900px) {
    .org-column {
        margin-bottom: 40px;
    }
}
/* ========================
   2. CARD STYLING
   ======================== */
.org-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    width: 140px; /* Compact width for grid */
    min-height: 80px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.org-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-color: #00b4db;
}

.org-card img.logo {
    max-width: 100px;
    max-height: 50px;
    object-fit: contain;
    display: block;
}

/* Flag Styling */
.org-card img.flag-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    border: 2px solid #fff;
}

/* ========================
   3. GROUPINGS
   ======================== */
/* Top Group (Parents) */
.node-group-top {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    padding-bottom: 25px; /* Space for lines */
    width: 100%;
}

/* Bottom Group (Children) */
.node-group-bottom {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding-top: 25px; /* Space for lines */
    width: 100%;
}

/* ========================
   4. DASHED CONNECTORS
   ======================== */
:root {
    --dash-color: #5c6b92;
    --dash-size: 1px;
}

/* --- MERGING LINES (Top) --- */
/* The horizontal bar connecting parents */
.connector-merge {
    position: absolute;
    bottom: 0;
    left: 20%; /* Adjust based on card width */
    right: 20%;
    height: 25px; /* Height of the drop */
    border-bottom: 1px dashed var(--dash-color);
    z-index: 1;
}

/* Vertical lines dropping from EACH parent to the bar */
.node-group-top .org-card::after {
    content: "";
    position: absolute;
    bottom: -25px; /* Reach the connector bar */
    left: 50%;
    width: 1px;
    height: 25px;
    border-left: 1px dashed var(--dash-color);
}

/* Special tweak for 3-parent groups to ensure line width covers all */
.three-parents .connector-merge { left: 16%; right: 16%; }
.two-parents .connector-merge { left: 25%; right: 25%; }


/* --- SPLITTING LINES (Bottom) --- */
/* The horizontal bar connecting children */
.connector-split {
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 25px;
    border-top: 1px dashed var(--dash-color);
    z-index: 1;
}

/* Vertical lines rising from EACH child to the bar */
.node-group-bottom .org-card::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    width: 1px;
    height: 25px;
    border-left: 1px dashed var(--dash-color);
}


/* --- SINGLE VERTICAL LINKS --- */
/* Line coming INTO a node from top */
.vertical-link-top::before {
    content: "";
    position: absolute;
    top: -50px; /* Reach up to previous section */
    left: 50%;
    width: 1px;
    height: 50px;
    border-left: 1px dashed var(--dash-color);
    z-index: 0;
}

/* Line going OUT of a node to bottom */
.vertical-link-bottom::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50%;
    width: 1px;
    height: 50px;
    border-left: 1px dashed var(--dash-color);
    z-index: 0;
}

/* ========================
   POPUP HOVER STYLES
   ======================== */
.info-popup {
    position: absolute;
    bottom: 110%; /* Sit above the card */
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    width: 220px; /* Wider than the card */
    background: rgba(10, 25, 61, 0.95); /* Deep Navy Background */
    backdrop-filter: blur(8px); /* Glass effect */
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999;
    
    /* Animation */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

/* The little triangle arrow pointing down */
.info-popup::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: rgba(10, 25, 61, 0.95) transparent transparent transparent;
}

/* Styles for text inside popup */
.info-popup h4 {
    margin: 0 0 5px 0;
    color: #00b4db; /* Brand Cyan */
    font-size: 14px;
    font-weight: 700;
}
.info-popup p {
    margin: 0;
    color: #cbd5e1;
}

/* REVEAL ON HOVER */
.org-card:hover .info-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}


/* ========================
   5. MOBILE RESPONSIVE
   ======================== */
@media (max-width: 900px) {
    .org-chart-wrapper {
        grid-template-columns: 1fr; /* Stack columns vertically */
        gap: 80px;
    }

    /* On mobile, we might want to stack the parents vertically too if screen is very narrow */
    .node-group-top, .node-group-bottom {
        flex-wrap: wrap; 
    }
    
    .org-card {
        width: 120px; /* Slightly smaller cards on mobile */
    }
}/* End custom CSS */