.infographic-page {
    background-color: #f0f0f0; 
    width: 1200px;
    height: 700px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    border-radius: 8px;
}

.infographic-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* --- Central Circle --- */
.central-circle {
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    left: 100px; /* Position from left edge */
    transform: translateY(-50%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    
    /* Multi-colored border mimic using a combination of background and pseudo-elements */
    border: 8px solid transparent; 
    background-image: 
        radial-gradient(circle at center, #fff 0 80%, transparent 80% 100%),
        conic-gradient(
            #f0f0f0 0% 15%, /* Light gray */
            #2d3e50 15% 35%, /* Dark blue */
            #ffcc00 35% 55%, /* Yellow */
            #6aa0af 55% 75%, /* Light blue */
            #f56e4c 75% 90%, /* Orange */
            #dcdcdc 90% 100% /* Light gray */
        );
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.central-circle .content {
    text-align: center;
    color: #333;
    padding: 20px;
}
.central-circle h2 { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: #2d3e50; }
.central-circle p { font-size: 14px; line-height: 1.5; color: #666; max-width: 200px; }


/* Connection dots on the CENTRAL CIRCLE border */



/* --- SVG Lines and Positioning --- */
.lines-svg {
    position: absolute;
    top: 0;
    left: 100px; /* Starts from the left side of the container */
    overflow: visible;
    z-index: 5;
}
.lines-svg path {
    stroke-dasharray: 2 4; /* Optional: If you want a dashed line, otherwise remove */
}

/* --- Options Group --- */
.options-group {
    position: absolute;
    right: 50px; /* Position from right edge */
    top: 50%;
    transform: translateY(-50%);
    width: 400px; /* Width to contain all options */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 500px; /* Vertical spacing */
    z-index: 10;
}

/* Option Box Styling (Capsule Shape) */
.option-box {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    border-radius: 50px; /* Capsule shape */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    position: relative;
}

.option-number {
    background-color: #fff;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.option-box p {
    margin: 0;
    padding-right: 10px; /* Space for box content */
}

/* Specific Option Box Colors */
.option-box-1 { background-color: #2d3e50; } 
.option-box-2 { background-color: #ffcc00; color: #333; } /* Yellow, dark text */
.option-box-3 { background-color: #6aa0af; } 
.option-box-4 { background-color: #f56e4c; } 

/* Connector Node at the end of the line (on the option box) */
.connector-node.end-node {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #666; 
    position: absolute;
    left: -15px; /* Position outside the box */
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 15;
}

/* Matching the end node colors to the central circle segments */
.option-box-1 .connector-node { background-color: #2d3e50; }
.option-box-2 .connector-node { background-color: #ffcc00; }
.option-box-3 .connector-node { background-color: #6aa0af; }
.option-box-4 .connector-node { background-color: #f56e4c; }
@media (max-width: 768px) {

    /* --- Page Container Adjustments --- */
    .infographic-page {
        /* Remove fixed width/height for responsive flow */
        width: 100%;
        min-height: 100vh; /* Ensure it takes up at least the viewport height */
        height: auto;
        box-shadow: none; /* Lighter look on mobile */
        padding: 20px;
        box-sizing: border-box; /* Include padding/border in element's total width/height */
    }

    /* --- Central Circle Adjustments (Stacking Order: Top) --- */
    .central-circle {
        /* Reset positioning for mobile layout */
        position: static;
        transform: none;
        margin: 20px auto; /* Center the circle horizontally */
        
        /* Reduce size for mobile */
        width: 250px;
        height: 250px;
    }
    
    .central-circle h2 { font-size: 24px; }
    .central-circle p { font-size: 13px; max-width: 180px; }


    /* --- Options Group Adjustments (Stacking Order: Below Circle) --- */
    .options-group {
        /* Reset positioning for mobile layout */
        position: static;
        transform: none;
        margin: 40px auto;
        width: 90%; /* Take up most of the available width */
        max-width: 400px; /* Prevent it from getting too wide on tablets */
        height: auto; /* Allow height to adjust to content */
        flex-direction: column; /* Already column, but good to confirm */
        gap: 20px; /* Add space between the option boxes */
    }
    
    /* Option Box itself */
    .option-box {
        /* Ensure boxes take full width of options-group */
        width: 100%;
        padding: 15px 25px; /* Slightly more vertical padding */
    }

    /* Option Number */
    .option-number {
        width: 25px;
        height: 25px;
        font-size: 14px;
        margin-right: 10px;
    }
    
    /* Option Content Paragraph */
    .option-box p {
        font-size: 14px;
        /* Remove extra padding if needed */
        padding-right: 0; 
    }
    
    /* --- Line/Connector Adjustments (Hiding the lines) --- */
    .lines-svg {
        /* Since the circle and options are no longer side-by-side, 
           the SVG lines connecting them are no longer relevant and should be hidden. */
        display: none;
    }
    
    /* Hide the connector nodes, as they were the start/end points of the now-hidden SVG lines */
    .connector-node.end-node {
        display: none;
    }

}