/* style.css */

/* Center the header text */
h1 {
    text-align: center;
    font-size: 36px;
    margin-top: 20px;
    color: #333;
}

/* Basic container styling for the body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

/* Styling the main container */
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styling the tabs section */
ul.nav-tabs {
    display: flex;
    justify-content: center;
    padding: 0;
    list-style: none;
}

ul.nav-tabs li {
    margin-right: 15px;
}

ul.nav-tabs a {
    text-decoration: none;
    color: #007bff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

ul.nav-tabs a:hover {
    background-color: #f0f0f0;
}

/* Styling iframe section */
iframe {
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Responsive iframe */
.tab-content iframe {
    width: 100%;
    height: 600px;
}

footer {
    position: fixed;
    /* Keeps the footer always at the bottom of the window, even when scrolling */
    left: 0;
    /* Aligns the footer to the left edge of the viewport */
    bottom: 0;
    /* Positions the footer at the very bottom of the viewport */
    width: 100%;
    /* Makes the footer span the entire width of the page */
    background-color: #333;
    /* Sets a dark background color for the footer */
    color: white;
    /* Changes the text color to white to contrast with the dark background */
    text-align: center;
    /* Centers the text within the footer */
    padding: 10px 0;
    /* Adds 10px of padding above and below the text for spacing */
    font-size: 14px;
    /* Sets the font size to 14px */
}

footer p {
    margin: 0;
    /* Removes any default margin from the paragraph inside the footer */
}

/* Global Styles - Apply to the entire page */
body {
    font-family: 'Arial', sans-serif;
    /* Use a clean sans-serif font */
    background-color: #f4f4f4;
    /* Light background color */
    color: #333;
    /* Dark gray text color */
    margin: 0;
    /* Remove default margins */
    padding: 0;
    /* Remove default padding */
}

/* Container Styling - Main container for the tool */
.container {
    max-width: 800px;
    /* Limit the container width to 800px */
    margin: 50px auto;
    /* Center the container and add 50px space at the top */
    padding: 20px;
    /* Padding inside the container for spacing */
    background-color: #fff;
    /* White background for a clean look */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for a 3D effect */
    text-align: center;
    /* Center the text inside the container */
}

/* Header Styling - The main title of the tool */
h1 {
    font-size: 2.5em;
    /* Large font size for the title */
    color: #2c3e50;
    /* Darker gray-blue color for the title */
}

/* Section Header Styling - Titles for different sections (e.g., Upgrade Information) */
.section-style h2 {
    margin-bottom: 30px;
    /* Add space below the section header */
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Section Styling - Generic section styling for input areas */
.section-style {
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners to match the container */
    background-color: #f9f9f9;
    /* Light background for sections */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same subtle shadow for a cohesive design */
    padding: 20px;
    /* Padding inside the section for space */
    margin-bottom: 20px;
    /* Add space between sections */
}

/* Flexbox Container Styling - Wrapping the inputs inside a flexible container */
.flex-container {
    display: flex;
    /* Enable Flexbox layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-around;
    /* Distribute the items evenly with space between */
    gap: 20px;
    /* Space between flex items */
}

/* Flexbox Item Styling - Each individual input field inside the flex container */
.flex-item {
    flex: 1 1;
    /* Allow each item to grow or shrink, taking up 20% width */
    min-width: 50px;
    /* Minimum width to prevent items from becoming too small */
    max-width: 300px;
    /* Maximum width to prevent items from becoming too large */
    margin-bottom: 10px;
    /* Space below each item */
    margin-top: 10px;
}

/* Add space below the label */
.flex-item label {
    font-weight: bold;
    /* Make the label text bold */
    margin-bottom: 8px;
    /* Add space between the label and the input field */
    display: block;
    /* Ensure the label is treated as a block element (this is important for margin to work) */
    white-space: nowrap;
}

/* Input Range Sliders - Styling for the sliders */
input[type="range"] {
    width: 100%;
    /* Make sliders stretch to fill the full width */
    margin: 10px 0;
    /* Space above and below the slider */
}

/* Input Fields - Styling for text and number inputs */
input[type="number"],
input[type="text"] {
    padding: 12px;
    /* Padding inside the input fields for a comfortable size */
    width: 100%;
    /* Make inputs take the full width of their container */
    font-size: 1.2em;
    /* Slightly larger font size for better readability */
    margin-bottom: 15px;
    /* Space below each input */
    border: 2px solid #ccc;
    /* Light gray border around inputs */
    border-radius: 6px;
    /* Slight rounding on input corners */
    box-sizing: border-box;
    /* Ensure padding and border are included in width/height */
}

/* Button Styling - Styling for the Reset button */
button {
    background-color: #3498db;
    /* Blue background for the button */
    color: white;
    /* White text color */
    padding: 10px 20px;
    /* Padding inside the button */
    font-size: 1.2em;
    /* Slightly larger font size for buttons */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate it's clickable */
    margin-top: 20px;
    /* Space above the button */
}

/* Button Hover Effect - Change color on hover */
button:hover {
    background-color: #1a252f;
    /* Darker shade for hover effect */
}

/* Result Section Styling - Styling for the section displaying results */
.result-section {
    padding: 20px;
    /* Padding inside the result section */
    border-radius: 10px;
    /* Rounded corners */
    background-color: #f1f1f1;
    /* Slightly darker background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same shadow as other sections */
    margin-top: 20px;
    /* Space above the result section */
}

/* Result Section Header Styling */
.result-section h2 {
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Result Text Styling - General text inside the result section */
.result-section p {
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    color: #333;
    /* Standard text color */
}

/* Detailed Results Section Styling - For additional information below the main result */
#detailed-results {
    margin-top: 20px;
    /* Space above the detailed results */
    font-size: 1.1em;
    /* Slightly larger font size for better readability */
}

/* Responsive Adjustments - Ensure Flexbox works on smaller screens */
@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%;
        /* On small screens, flex items take full width (stacked) */
        max-width: 100%;
        /* Remove max width for smaller screens */
    }
}

/* Global Styles - Apply to the entire page */
body {
    font-family: 'Arial', sans-serif;
    /* Use a clean sans-serif font */
    background-color: #f4f4f4;
    /* Light background color */
    color: #333;
    /* Dark gray text color */
    margin: 0;
    /* Remove default margins */
    padding: 0;
    /* Remove default padding */
}

/* Container Styling - Main container for the tool */
.container {
    max-width: 800px;
    /* Limit the container width to 800px */
    margin: 50px auto;
    /* Center the container and add 50px space at the top */
    padding: 20px;
    /* Padding inside the container for spacing */
    background-color: #fff;
    /* White background for a clean look */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for a 3D effect */
    text-align: center;
    /* Center the text inside the container */
}

/* Header Styling - The main title of the tool */
h1 {
    font-size: 2.5em;
    /* Large font size for the title */
    color: #2c3e50;
    /* Darker gray-blue color for the title */
}

/* Section Header Styling - Titles for different sections (e.g., Upgrade Information) */
.section-style h2 {
    margin-bottom: 30px;
    /* Add space below the section header */
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Section Styling - Generic section styling for input areas */
.section-style {
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners to match the container */
    background-color: #f9f9f9;
    /* Light background for sections */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same subtle shadow for a cohesive design */
    padding: 20px;
    /* Padding inside the section for space */
    margin-bottom: 20px;
    /* Add space between sections */
}

/* Flexbox Container Styling - Wrapping the inputs inside a flexible container */
.flex-container {
    display: flex;
    /* Enable Flexbox layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-around;
    /* Distribute the items evenly with space between */
    gap: 20px;
    /* Space between flex items */
}

/* Flexbox Item Styling - Each individual input field inside the flex container */
.flex-item {
    flex: 1 1;
    /* Allow each item to grow or shrink, taking up 20% width */
    min-width: 50px;
    /* Minimum width to prevent items from becoming too small */
    max-width: 200px;
    /* Maximum width to prevent items from becoming too large */
    margin-bottom: 10px;
    /* Space below each item */
    margin-top: 10px;
}

/* Add space below the label */
.flex-item label {
    font-weight: bold;
    /* Make the label text bold */
    margin-bottom: 8px;
    /* Add space between the label and the input field */
    display: block;
    /* Ensure the label is treated as a block element (this is important for margin to work) */
}

/* Input Range Sliders - Styling for the sliders */
input[type="range"] {
    width: 100%;
    /* Make sliders stretch to fill the full width */
    margin: 10px 0;
    /* Space above and below the slider */
}

/* Input Fields - Styling for text and number inputs */
input[type="number"],
input[type="text"] {
    padding: 12px;
    /* Padding inside the input fields for a comfortable size */
    width: 100%;
    /* Make inputs take the full width of their container */
    font-size: 1.2em;
    /* Slightly larger font size for better readability */
    margin-bottom: 15px;
    /* Space below each input */
    border: 2px solid #ccc;
    /* Light gray border around inputs */
    border-radius: 6px;
    /* Slight rounding on input corners */
    box-sizing: border-box;
    /* Ensure padding and border are included in width/height */
}

/* Button Styling - Styling for the Reset button */
button {
    background-color: #3498db;
    /* Blue background for the button */
    color: white;
    /* White text color */
    padding: 10px 20px;
    /* Padding inside the button */
    font-size: 1.2em;
    /* Slightly larger font size for buttons */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate it's clickable */
    margin-top: 20px;
    /* Space above the button */
}

/* Button Hover Effect - Change color on hover */
button:hover {
    background-color: #1a252f;
    /* Darker shade for hover effect */
}

/* Result Section Styling - Styling for the section displaying results */
.result-section {
    padding: 20px;
    /* Padding inside the result section */
    border-radius: 10px;
    /* Rounded corners */
    background-color: #f1f1f1;
    /* Slightly darker background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same shadow as other sections */
    margin-top: 20px;
    /* Space above the result section */
}

/* Result Section Header Styling */
.result-section h2 {
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Result Text Styling - General text inside the result section */
.result-section p {
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    color: #333;
    /* Standard text color */
}

/* Detailed Results Section Styling - For additional information below the main result */
#detailed-results {
    margin-top: 20px;
    /* Space above the detailed results */
    font-size: 1.1em;
    /* Slightly larger font size for better readability */
}

/* Responsive Adjustments - Ensure Flexbox works on smaller screens */
@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%;
        /* On small screens, flex items take full width (stacked) */
        max-width: 100%;
        /* Remove max width for smaller screens */
    }
}

/* Global Styles - Apply to the entire page */
body {
    font-family: 'Arial', sans-serif;
    /* Use a clean sans-serif font */
    background-color: #f4f4f4;
    /* Light background color */
    color: #333;
    /* Dark gray text color */
    margin: 0;
    /* Remove default margins */
    padding: 0;
    /* Remove default padding */
}

/* Container Styling - Main container for the tool */
.container {
    max-width: 800px;
    /* Limit the container width to 800px */
    margin: 50px auto;
    /* Center the container and add 50px space at the top */
    padding: 20px;
    /* Padding inside the container for spacing */
    background-color: #fff;
    /* White background for a clean look */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for a 3D effect */
    text-align: center;
    /* Center the text inside the container */
}

/* Header Styling - The main title of the tool */
h1 {
    font-size: 2.5em;
    /* Large font size for the title */
    color: #2c3e50;
    /* Darker gray-blue color for the title */
}

/* Section Header Styling - Titles for different sections (e.g., Upgrade Information) */
.section-style h2 {
    margin-bottom: 30px;
    /* Add space below the section header */
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Section Styling - Generic section styling for input areas */
.section-style {
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners to match the container */
    background-color: #f9f9f9;
    /* Light background for sections */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same subtle shadow for a cohesive design */
    padding: 20px;
    /* Padding inside the section for space */
    margin-bottom: 20px;
    /* Add space between sections */
}

/* Flexbox Container Styling - Wrapping the inputs inside a flexible container */
.flex-container {
    display: flex;
    /* Enable Flexbox layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-around;
    /* Distribute the items evenly with space between */
    gap: 20px;
    /* Space between flex items */
}

/* Flexbox Item Styling - Each individual input field inside the flex container */
.flex-item {
    flex: 1 1;
    /* Allow each item to grow or shrink, taking up 20% width */
    min-width: 50px;
    /* Minimum width to prevent items from becoming too small */
    max-width: 200px;
    /* Maximum width to prevent items from becoming too large */
    margin-bottom: 10px;
    /* Space below each item */
    margin-top: 10px;
}

/* Add space below the label */
.flex-item label {
    font-weight: bold;
    /* Make the label text bold */
    margin-bottom: 8px;
    /* Add space between the label and the input field */
    display: block;
    /* Ensure the label is treated as a block element (this is important for margin to work) */
}

/* Input Range Sliders - Styling for the sliders */
input[type="range"] {
    width: 100%;
    /* Make sliders stretch to fill the full width */
    margin: 10px 0;
    /* Space above and below the slider */
}

/* Input Fields - Styling for text and number inputs */
input[type="number"],
input[type="text"] {
    padding: 12px;
    /* Padding inside the input fields for a comfortable size */
    width: 100%;
    /* Make inputs take the full width of their container */
    font-size: 1.2em;
    /* Slightly larger font size for better readability */
    margin-bottom: 15px;
    /* Space below each input */
    border: 2px solid #ccc;
    /* Light gray border around inputs */
    border-radius: 6px;
    /* Slight rounding on input corners */
    box-sizing: border-box;
    /* Ensure padding and border are included in width/height */
}

/* Button Styling - Styling for the Reset button */
button {
    background-color: #3498db;
    /* Blue background for the button */
    color: white;
    /* White text color */
    padding: 10px 20px;
    /* Padding inside the button */
    font-size: 1.2em;
    /* Slightly larger font size for buttons */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate it's clickable */
    margin-top: 20px;
    /* Space above the button */
}

/* Button Hover Effect - Change color on hover */
button:hover {
    background-color: #1a252f;
    /* Darker shade for hover effect */
}

/* Result Section Styling - Styling for the section displaying results */
.result-section {
    padding: 20px;
    /* Padding inside the result section */
    border-radius: 10px;
    /* Rounded corners */
    background-color: #f1f1f1;
    /* Slightly darker background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same shadow as other sections */
    margin-top: 20px;
    /* Space above the result section */
}

/* Result Section Header Styling */
.result-section h2 {
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Result Text Styling - General text inside the result section */
.result-section p {
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    color: #333;
    /* Standard text color */
}

/* Detailed Results Section Styling - For additional information below the main result */
#detailed-results {
    margin-top: 20px;
    /* Space above the detailed results */
    font-size: 1.1em;
    /* Slightly larger font size for better readability */
}

/* Responsive Adjustments - Ensure Flexbox works on smaller screens */
@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%;
        /* On small screens, flex items take full width (stacked) */
        max-width: 100%;
        /* Remove max width for smaller screens */
    }
}

/* Global Styles - Apply to the entire page */
body {
    font-family: 'Arial', sans-serif;
    /* Use a clean sans-serif font */
    background-color: #f4f4f4;
    /* Light background color */
    color: #333;
    /* Dark gray text color */
    margin: 0;
    /* Remove default margins */
    padding: 0;
    /* Remove default padding */
}

/* Container Styling - Main container for the tool */
.container {
    max-width: 800px;
    /* Limit the container width to 800px */
    margin: 50px auto;
    /* Center the container and add 50px space at the top */
    padding: 20px;
    /* Padding inside the container for spacing */
    background-color: #fff;
    /* White background for a clean look */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for a 3D effect */
    text-align: center;
    /* Center the text inside the container */
}

/* Header Styling - The main title of the tool */
h1 {
    font-size: 2.5em;
    /* Large font size for the title */
    color: #2c3e50;
    /* Darker gray-blue color for the title */
}

/* Section Header Styling - Titles for different sections (e.g., Upgrade Information) */
.section-style h2 {
    margin-bottom: 30px;
    /* Add space below the section header */
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Section Styling - Generic section styling for input areas */
.section-style {
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners to match the container */
    background-color: #f9f9f9;
    /* Light background for sections */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same subtle shadow for a cohesive design */
    padding: 20px;
    /* Padding inside the section for space */
    margin-bottom: 20px;
    /* Add space between sections */
}

/* Flexbox Container Styling - Wrapping the inputs inside a flexible container */
.flex-container {
    display: flex;
    /* Enable Flexbox layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-around;
    /* Distribute the items evenly with space between */
    gap: 20px;
    /* Space between flex items */
}

/* Flexbox Item Styling - Each individual input field inside the flex container */
.flex-item {
    flex: 1 1;
    /* Allow each item to grow or shrink, taking up 20% width */
    min-width: 50px;
    /* Minimum width to prevent items from becoming too small */
    max-width: 200px;
    /* Maximum width to prevent items from becoming too large */
    margin-bottom: 10px;
    /* Space below each item */
    margin-top: 10px;
}

/* Add space below the label */
.flex-item label {
    font-weight: bold;
    /* Make the label text bold */
    margin-bottom: 8px;
    /* Add space between the label and the input field */
    display: block;
    /* Ensure the label is treated as a block element (this is important for margin to work) */
}

/* Input Range Sliders - Styling for the sliders */
input[type="range"] {
    width: 100%;
    /* Make sliders stretch to fill the full width */
    margin: 10px 0;
    /* Space above and below the slider */
}

/* Input Fields - Styling for text and number inputs */
input[type="number"],
input[type="text"] {
    padding: 12px;
    /* Padding inside the input fields for a comfortable size */
    width: 100%;
    /* Make inputs take the full width of their container */
    font-size: 1.2em;
    /* Slightly larger font size for better readability */
    margin-bottom: 15px;
    /* Space below each input */
    border: 2px solid #ccc;
    /* Light gray border around inputs */
    border-radius: 6px;
    /* Slight rounding on input corners */
    box-sizing: border-box;
    /* Ensure padding and border are included in width/height */
}

/* Button Styling - Styling for the Reset button */
button {
    background-color: #3498db;
    /* Blue background for the button */
    color: white;
    /* White text color */
    padding: 10px 20px;
    /* Padding inside the button */
    font-size: 1.2em;
    /* Slightly larger font size for buttons */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate it's clickable */
    margin-top: 20px;
    /* Space above the button */
}

/* Button Hover Effect - Change color on hover */
button:hover {
    background-color: #1a252f;
    /* Darker shade for hover effect */
}

/* Result Section Styling - Styling for the section displaying results */
.result-section {
    padding: 20px;
    /* Padding inside the result section */
    border-radius: 10px;
    /* Rounded corners */
    background-color: #f1f1f1;
    /* Slightly darker background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same shadow as other sections */
    margin-top: 20px;
    /* Space above the result section */
}

/* Result Section Header Styling */
.result-section h2 {
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Result Text Styling - General text inside the result section */
.result-section p {
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    color: #333;
    /* Standard text color */
}

/* Detailed Results Section Styling - For additional information below the main result */
#detailed-results {
    margin-top: 20px;
    /* Space above the detailed results */
    font-size: 1.1em;
    /* Slightly larger font size for better readability */
}

/* Responsive Adjustments - Ensure Flexbox works on smaller screens */
@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%;
        /* On small screens, flex items take full width (stacked) */
        max-width: 100%;
        /* Remove max width for smaller screens */
    }
}

/* Global Styles - Apply to the entire page */
body {
    font-family: 'Arial', sans-serif;
    /* Use a clean sans-serif font */
    background-color: #f4f4f4;
    /* Light background color */
    color: #333;
    /* Dark gray text color */
    margin: 0;
    /* Remove default margins */
    padding: 0;
    /* Remove default padding */
}

/* Container Styling - Main container for the tool */
.container {
    max-width: 800px;
    /* Limit the container width to 800px */
    margin: 50px auto;
    /* Center the container and add 50px space at the top */
    padding: 20px;
    /* Padding inside the container for spacing */
    background-color: #fff;
    /* White background for a clean look */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for a 3D effect */
    text-align: center;
    /* Center the text inside the container */
}

/* Header Styling - The main title of the tool */
h1 {
    font-size: 2.5em;
    /* Large font size for the title */
    color: #2c3e50;
    /* Darker gray-blue color for the title */
}

/* Section Header Styling - Titles for different sections (e.g., Upgrade Information) */
.section-style h2 {
    margin-bottom: 30px;
    /* Add space below the section header */
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Section Styling - Generic section styling for input areas */
.section-style {
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners to match the container */
    background-color: #f9f9f9;
    /* Light background for sections */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same subtle shadow for a cohesive design */
    padding: 20px;
    /* Padding inside the section for space */
    margin-bottom: 20px;
    /* Add space between sections */
}

/* Flexbox Container Styling - Wrapping the inputs inside a flexible container */
.flex-container {
    display: flex;
    /* Enable Flexbox layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-around;
    /* Distribute the items evenly with space between */
    gap: 20px;
    /* Space between flex items */
}

/* Flexbox Item Styling - Each individual input field inside the flex container */
.flex-item {
    flex: 1 1;
    /* Allow each item to grow or shrink, taking up 20% width */
    min-width: 50px;
    /* Minimum width to prevent items from becoming too small */
    max-width: 200px;
    /* Maximum width to prevent items from becoming too large */
    margin-bottom: 10px;
    /* Space below each item */
    margin-top: 10px;
}

/* Add space below the label */
.flex-item label {
    font-weight: bold;
    /* Make the label text bold */
    margin-bottom: 8px;
    /* Add space between the label and the input field */
    display: block;
    /* Ensure the label is treated as a block element (this is important for margin to work) */
}

/* Input Range Sliders - Styling for the sliders */
input[type="range"] {
    width: 100%;
    /* Make sliders stretch to fill the full width */
    margin: 10px 0;
    /* Space above and below the slider */
}

/* Input Fields - Styling for text and number inputs */
input[type="number"],
input[type="text"] {
    padding: 12px;
    /* Padding inside the input fields for a comfortable size */
    width: 100%;
    /* Make inputs take the full width of their container */
    font-size: 1.2em;
    /* Slightly larger font size for better readability */
    margin-bottom: 15px;
    /* Space below each input */
    border: 2px solid #ccc;
    /* Light gray border around inputs */
    border-radius: 6px;
    /* Slight rounding on input corners */
    box-sizing: border-box;
    /* Ensure padding and border are included in width/height */
}

/* Button Styling - Styling for the Reset button */
button {
    background-color: #3498db;
    /* Blue background for the button */
    color: white;
    /* White text color */
    padding: 10px 20px;
    /* Padding inside the button */
    font-size: 1.2em;
    /* Slightly larger font size for buttons */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate it's clickable */
    margin-top: 20px;
    /* Space above the button */
}

/* Button Hover Effect - Change color on hover */
button:hover {
    background-color: #1a252f;
    /* Darker shade for hover effect */
}

/* Result Section Styling - Styling for the section displaying results */
.result-section {
    padding: 20px;
    /* Padding inside the result section */
    border-radius: 10px;
    /* Rounded corners */
    background-color: #f1f1f1;
    /* Slightly darker background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same shadow as other sections */
    margin-top: 20px;
    /* Space above the result section */
}

/* Result Section Header Styling */
.result-section h2 {
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Result Text Styling - General text inside the result section */
.result-section p {
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    color: #333;
    /* Standard text color */
}

/* Detailed Results Section Styling - For additional information below the main result */
#detailed-results {
    margin-top: 20px;
    /* Space above the detailed results */
    font-size: 1.1em;
    /* Slightly larger font size for better readability */
}

/* Responsive Adjustments - Ensure Flexbox works on smaller screens */
@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%;
        /* On small screens, flex items take full width (stacked) */
        max-width: 100%;
        /* Remove max width for smaller screens */
    }
}

/* Global Styles - Apply to the entire page */
body {
    font-family: 'Arial', sans-serif;
    /* Use a clean sans-serif font */
    background-color: #f4f4f4;
    /* Light background color */
    color: #333;
    /* Dark gray text color */
    margin: 0;
    /* Remove default margins */
    padding: 0;
    /* Remove default padding */
}

/* Container Styling - Main container for the tool */
.container {
    max-width: 800px;
    /* Limit the container width to 800px */
    margin: 50px auto;
    /* Center the container and add 50px space at the top */
    padding: 20px;
    /* Padding inside the container for spacing */
    background-color: #fff;
    /* White background for a clean look */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for a 3D effect */
    text-align: center;
    /* Center the text inside the container */
}

/* Header Styling - The main title of the tool */
h1 {
    font-size: 2.5em;
    /* Large font size for the title */
    color: #2c3e50;
    /* Darker gray-blue color for the title */
}

/* Section Header Styling - Titles for different sections (e.g., Upgrade Information) */
.section-style h2 {
    margin-bottom: 30px;
    /* Add space below the section header */
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Section Styling - Generic section styling for input areas */
.section-style {
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners to match the container */
    background-color: #f9f9f9;
    /* Light background for sections */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same subtle shadow for a cohesive design */
    padding: 20px;
    /* Padding inside the section for space */
    margin-bottom: 20px;
    /* Add space between sections */
}

/* Flexbox Container Styling - Wrapping the inputs inside a flexible container */
.flex-container {
    display: flex;
    /* Enable Flexbox layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-around;
    /* Distribute the items evenly with space between */
    gap: 20px;
    /* Space between flex items */
}

/* Flexbox Item Styling - Each individual input field inside the flex container */
.flex-item {
    flex: 1 1;
    /* Allow each item to grow or shrink, taking up 20% width */
    min-width: 50px;
    /* Minimum width to prevent items from becoming too small */
    max-width: 200px;
    /* Maximum width to prevent items from becoming too large */
    margin-bottom: 10px;
    /* Space below each item */
    margin-top: 10px;
}

/* Add space below the label */
.flex-item label {
    font-weight: bold;
    /* Make the label text bold */
    margin-bottom: 8px;
    /* Add space between the label and the input field */
    display: block;
    /* Ensure the label is treated as a block element (this is important for margin to work) */
}

/* Input Range Sliders - Styling for the sliders */
input[type="range"] {
    width: 100%;
    /* Make sliders stretch to fill the full width */
    margin: 10px 0;
    /* Space above and below the slider */
}

/* Input Fields - Styling for text and number inputs */
input[type="number"],
input[type="text"] {
    padding: 12px;
    /* Padding inside the input fields for a comfortable size */
    width: 100%;
    /* Make inputs take the full width of their container */
    font-size: 1.2em;
    /* Slightly larger font size for better readability */
    margin-bottom: 15px;
    /* Space below each input */
    border: 2px solid #ccc;
    /* Light gray border around inputs */
    border-radius: 6px;
    /* Slight rounding on input corners */
    box-sizing: border-box;
    /* Ensure padding and border are included in width/height */
}

/* Button Styling - Styling for the Reset button */
button {
    background-color: #3498db;
    /* Blue background for the button */
    color: white;
    /* White text color */
    padding: 10px 20px;
    /* Padding inside the button */
    font-size: 1.2em;
    /* Slightly larger font size for buttons */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate it's clickable */
    margin-top: 20px;
    /* Space above the button */
}

/* Button Hover Effect - Change color on hover */
button:hover {
    background-color: #1a252f;
    /* Darker shade for hover effect */
}

/* Result Section Styling - Styling for the section displaying results */
.result-section {
    padding: 20px;
    /* Padding inside the result section */
    border-radius: 10px;
    /* Rounded corners */
    background-color: #f1f1f1;
    /* Slightly darker background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Same shadow as other sections */
    margin-top: 20px;
    /* Space above the result section */
}

/* Result Section Header Styling */
.result-section h2 {
    color: #2c3e50;
    /* Consistent color for section headers */
}

/* Result Text Styling - General text inside the result section */
.result-section p {
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    color: #333;
    /* Standard text color */
}

/* Detailed Results Section Styling - For additional information below the main result */
#detailed-results {
    margin-top: 20px;
    /* Space above the detailed results */
    font-size: 1.1em;
    /* Slightly larger font size for better readability */
}

/* Responsive Adjustments - Ensure Flexbox works on smaller screens */
@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%;
        /* On small screens, flex items take full width (stacked) */
        max-width: 100%;
        /* Remove max width for smaller screens */
    }
}