body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #FFF2B2;
    margin: 0;
    padding: 0;
    color: #DC8665;
    font-weight: bold;
}

header {
    background-color: #FFF2B2;
    color: #DC8665;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
}

#semar-logo {
    max-width: 120px;
    border-radius: 50%;
    margin-bottom: 10px; /* Add bottom margin */
}

#DM2scan-logo {
    max-width: 100px;
}

header h1 {
    margin: 0;
    font-size: 3.0em; /* Increased font size */
    text-align: center; /* Center the text */
}

header p {
    margin: 0.2em 0 0 0; /* Remove right margin */
    font-size: 1.4em; /* Increased font size */
    text-align: center; /* Align text to the center */
}

nav {
    background-color: #fff;
    padding: 0.5rem 0;
    border-bottom: 2px solid #ddd;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav li {
    display: inline;
    margin: 0 1rem;
}

nav a {
    text-decoration: none;
    color: #DC8665;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #ddd;
}

main {
    flex: 1;
    padding: 20px;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack sections vertically */
    align-items: center; /* Center content horizontally */

}

section {
     width: 80%; /* Control section width */
    margin-bottom: 20px; /* Add spacing between sections */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
    }

    #DM2scan-logo {
        max-width: 80px; /* Smaller logo on mobile */
    }

    header h1 {
        font-size: 2em; /* Smaller font size for heading */
    }

    header p {
        font-size: 1em; /* Smaller font size for paragraph */
    }

    nav ul {
        flex-direction: column;
        width: 100%;
    }

    nav li {
        display: block; /* Stack navigation items */
        margin: 0.5rem 0;
        width: 100%;
    }

     nav a {
        display: block; /* Make links full-width */
        text-align: center; /* Center-align text */
    }

    main {
        padding: 10px; /* Reduced padding */
    }

    section {
        width: 100%; /* Full-width sections */
        padding: 15px;
    }

    .input-group {
        flex-direction: column; /* Stack input fields */
    }

    input[type="number"] {
        width: 100%; /* Full-width input fields */
        margin-bottom: 10px;
    }

    .input-chart-container {
        flex-direction: column; /* Stack input and chart */
    }

    .chart-container {
        width: 100%; /* Full-width chart */
        height: auto; /* Adjust height automatically */
    }

    #calculate {
        position: static; /* Reset button position */
        margin-top: 10px;
    }

    #features,
    #diagnosis {
        max-width: 100%; /* Full width on mobile */
    }

    #hepatitis-b-diagnosis .risk-factor-group {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .image-container img {
        max-width: 100%; /* Ensure images fit within container */
    }
      /* Adjust the IMT bar for smaller screens */
    #imt-bar-container {
        height: auto; /* Allow height to adjust */
        flex-wrap: wrap; /* Allow segments to wrap */
    }

    .imt-bar-segment {
        font-size: 0.8em; /* Smaller font size */
        padding: 5px 0; /* Add some padding */
        justify-content: flex-start; /* Align text to the left */
    }

    .imt-threshold {
        font-size: 0.7em; /* Smaller font for thresholds */
        transform: translate(-50%, 0); /* Adjust vertical position */
        top: auto;
        bottom: -15px; /* Position below the bar */
    }
        /* Adjust positioning of threshold labels */
    #imt-threshold-18-5,
    #imt-threshold-25,
    #imt-threshold-30 {
        transform: translate(-50%, 0);
    }
}

#diagnosis-tool-3-content h2 {
  color: #DC8665;
}

#glucose-screening-section h2,
#hba1c-screening-section h2 {
    color: #DC8665;
}

h2 {
    color: #FFF2B2;
    border-bottom: 2px solid #FFF2B2;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.input-group {
    margin-bottom: 10px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="number"],
input[type="radio"] {
  width: auto;
  padding: 10px;
  /* Increased padding */
  border: 1px solid #ccc;
  border-radius: 5px;
  /* Rounded corners */
  box-sizing: border-box;
  font-size: 1em;
  /* Larger font */
  margin-right: 10px;
}

.input-chart-container {
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Add some space between input and chart */
}

.chart-container {
    width: 600px; /* Adjust as needed */
    height: 450px; /* Adjust as needed */
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

button {
    background-color: #FFF2B2;
    color: #DC8665;
    padding: 12px 20px; /* Increased padding */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    width: 100%;
    font-size: 1.1em; /* Larger font */
    transition: background-color 0.3s ease;
}

#calculate {
    position: relative;
    top: -50px;
}

button:hover {
    background-color: #e6d9a8;
}

.result {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

#detect-location {
    background-color: #FFF2B2;
    color: #DC8665;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

#location-info, #food-recommendation {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 20px; /* Ensure it takes up some space even when empty */
}
#imt-result, #imt-interpretation {
    margin-top: 5px;
    padding: 5px;
    font-size:1.1em;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
  color: #DC8665;
}

.kurus {
  color: #b3d9ff;
}

.ideal {
  color: #90ee90;
}

.gemuk {
  color: #ffff99
}

.obesitas {
  color: #ff9999;
}

#hepatitis-b-diagnosis .risk-factor-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 10px; /* Space between grid items */
    margin-bottom: 15px;
}

#hepatitis-b-diagnosis h3 {
    margin-bottom: 5px;
}

#toggle-risk-factors,
#toggle-symptoms {
    background-color: #FFF2B2;
    color: #DC8665;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

#toggle-risk-factors:hover,
#toggle-symptoms:hover {
    background-color: #e6d9a8;
}

#imt-bar-container {
    display: flex;
    width: 100%;
    height: 20px;
    border: 1px solid #DC8665; /* Using the text color for the border */
    margin-top: 10px; /* Space between text and bar */
    position: relative;
}

.imt-bar-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    position: relative;
}

#imt-kurus {
    background-color: #b3d9ff; /* Light Blue */
    width: 46.25%; /* Up to 18.5 */
}

#imt-ideal {
    background-color: #90ee90; /* Light Green */
    width: 16.25%;  /* 18.5 to 24.9 */
}

#imt-gemuk {
    background-color: #ffff99; /* Light Yellow */
    width: 12.5%; /* 25 to 29.9 */
}

#imt-obesitas{
    background-color: #ff9999; /* Light Red */
    width: 25%; /* 30 and above */
}

#imt-indicator{
    position: absolute;
    width: 4px;
    height: 20px;
    /*background-color: #DC8665;*/
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.imt-threshold {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8em;
  color: #000;
}

#imt-threshold-18-5 {
  left: 46.25%;
}

#imt-threshold-25 {
  left: 62.5%;
}

#imt-threshold-30 {
  left: 75%;
}

* {
  font-weight: bold !important;
  font-family: "Montserrat", "Roboto", sans-serif !important;
}

#welcome h2,
#features h2,
#diagnosis h2{
    color: #DC8665;
}

#features,
#diagnosis {
    max-width: 45%;
}

#nutrition-analysis-section a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FFF2B2;
  color: #DC8665;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  width: 100%; /* Added width */
  text-align: center; /* Center the text */
  box-sizing: border-box; /* Include padding and border in the element's width */
}

#nutrition-analysis-section a:hover {
  background-color: #e6d9a8;
}

#imt-calculator h2,
#food-recommendation-section h2,
#nutrition-analysis-section h2,
#faq-section h2,
#hepatitis-b-diagnosis h2,
#features h2,
#diagnosis h2,
#welcome h2
 {
  color: #DC8665;
}

#diabetes-food-recommendation iframe {
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.pdf-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#diabetes-food-recommendation {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-container {
    width: 100%;
}

.image-container img {
    max-width: 95%; /* Slightly reduced max-width */
    width: auto;       /* Allow image to scale down */
    height: auto;
    display: block;
    margin: 0 auto;   /* Center horizontally */
}

/* Styles for diagnosis-tool-3-content */
#diagnosis-tool-3-content {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#diagnosis-tool-3-content h3 {
    color: #DC8665;
    border-bottom: 2px solid #DC8665;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

#glucose-recommendation,
#insulin-adjustment-recommendation,
#medication-recommendation {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.exercise-category {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.exercise-category h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #DC8665;
}

.exercise-category ul {
    padding-left: 20px;
    margin-bottom: 0;
}
.medication-group {
    margin-bottom: 10px;
}

.medication-group div {
    margin-bottom: 5px;
}

#medication-considerations h4{
    color: #DC8665;
}

#hba1c-screening-section {
    margin-bottom: 20px;
    background-color: #ffffff; /* White background */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}