p {
    font-size: 18px;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #f0f0f0; /* Optional */
}

a {
    color: white !important;
    text-decoration: none !important;
}

a:visited {
    color: white !important;
}

a:active {
    color: white !important;
}

a:hover {
    color: gray !important;
    text-decoration: underline !important;
}

.custom-link {
    color: #4C4E52 !important;
    text-decoration: none !important;
}

.custom-link:visited {
    color: #4C4E52 !important;
}

.custom-link:hover {
    color: #1f2a44 !important;
    text-decoration: underline !important;
}

/* Flex container for rows */
.responsive-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

/* Text column */
.responsive-col.text {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Graph column */
.responsive-col {
    flex: 0 0 70%;
    max-width: 70%;
    box-sizing: border-box;
}

/* Graph full width inside its column */
.responsive-graph-2 {
    width: 90%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 40px;
}

/* Responsive behavior: stack columns on small screens */
@media (max-width: 768px) {
    .responsive-col,
    .responsive-col.text {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 20px; /* adds space between stacked items */
    }
}

/* Base styling for graph */
.responsive-graph {
    width: 95%;
    margin: 0 auto;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 40px;
}

/* Smaller padding on mobile */
@media screen and (max-width: 768px) {
    .responsive-graph {
        padding: 10px !important;
	width: 100%;
    }
}