/* style.css - Updated Documentation */

/* ------------------------------------ */
/* Reset and Basic Configurations */
/* ------------------------------------ */

/* Global reset to remove default margins and paddings, and set box-sizing for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global styles for body and html, including default font and background color */
body, html {
    font-family: 'Arial', sans-serif; /* Sets the default font */
    background: #f4f4f4; /* Light gray background for the application */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    height: 100%; /* Ensures the body and html take up full screen height */
    display: flex;
    flex-direction: column; /* Ensures content is arranged vertically */
    scroll-padding-top: 180px; /* Adjusts for navbar height plus extra spacing */
}

/* Ensures the main container occupies the full height of the viewport */
#root, #app {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------ */
/* Header Styles */
/* ------------------------------------ */

/* Styles for the main page header */
.main-header {
    display: flex;
    justify-content: space-between; /* Aligns items to opposite ends */
    align-items: center; /* Centers items vertically */
    background-color: #ffffff; /* Light green background for the header */
    padding: 2px 10px; /* Adds padding inside the header */
    width: 100%; /* Ensures the header spans the full width */
    border-top-left-radius: 8px; /* Rounds the top-left corner */
    border-top-right-radius: 8px; /* Rounds the top-right corner */
}

/* Styles for the left section of the header */
.header-left {
    display: flex;
    align-items: center;
}

/* Styles for the right section of the header */
.header-right {
    display: flex;
    align-items: center;
}

/* Styles for the main title within the header */
.main-title {
    color: #0f5f16; /* Dark green text color */
    font-size: 40px; /* Large font size for the title */
    text-decoration: none; /* Removes underline from the title */
    font-weight: bold; /* Makes the title bold */
}

/* Styles for links in the header */
.header-link {
    color: #0f941a; /* Green color for links */
    font-size: 18px; /* Slightly larger font size for visibility */
    margin-left: 20px; /* Adds spacing between links */
    text-decoration: none; /* Removes underline */
    font-weight: bold; /* Makes the link text bold */
    font-style: italic; /* Adds an italic style to the links */
    transition: color 0.3s ease; /* Smooth transition effect for hover state */
}

/* Hover effect for header links */
.header-link:hover {
    color: #007bff; /* Changes the color to blue on hover */
}

/* ------------------------------------ */
/* Main Content and Tabs */
/* ------------------------------------ */

/* Styles for the main content container wrapping the page content */
.main-content {
    flex: 1;
    width: 100%; /* Ensures content spans full width */
    padding: 20px; /* Adds spacing inside the content container */
    display: flex;
    flex-direction: column; /* Aligns child elements vertically */
}

/* Styles for the content inside the tabs, including borders, shadow, and background */
.tabs-content {
    flex: 1;
    border: 3px solid #b6e9be; /* Green border matching the header */
    border-radius: 8px; /* Rounds corners */
    background: #fff; /* White background for readability */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin: 5px 0; /* Adds vertical spacing */
    padding: 20px; /* Internal spacing inside the content area */
    overflow-y: auto; /* Adds vertical scrolling if content overflows */
}

/* Styles for the general pages content, similar to tabs but with thinner borders */
.pages-content {
    flex: 1;
    border: 1px solid #b6e9be; /* Thinner green border */
    border-radius: 8px; /* Rounds corners */
    background: #fff; /* White background for readability */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin: 2px; /* Adds minimal spacing */
    padding: 10px; /* Internal spacing inside the content area */
    overflow-y: auto; /* Adds vertical scrolling if content overflows */
}

/* ------------------------------------ */
/* Print Styles */
/* ------------------------------------ */

/* Styles specific to printing the tab content */
@media print {
    .tabs-content {
        box-shadow: none; /* Removes shadow for cleaner print output */
        page-break-after: always; /* Inserts a page break after each tab content */
    }
}

/* ------------------------------- */
/* Styles for the "How to Use" Title */
/* ------------------------------- */
.how-to-use {
    font-size: 30px; /* Sets the font size for the title */
    text-align: center; /* Horizontally centers the text */
    font-weight: bold; /* Makes the text bold */
    margin: 20px 0; /* Adds vertical spacing above and below the title */
    color: #0f941a; /* Defines the text color */
}

/* Mobile Adjustment */
/* Consider reducing the font size for smaller screens to maintain readability */
@media (max-width: 768px) {
    .how-to-use {
        font-size: 24px;
    }
}

/* ------------------------------- */
/* Page Content Containers */
/* ------------------------------- */
.content-container {
    display: flex; /* Enables a flexbox layout */
    flex-direction: row; /* Arranges children in a horizontal row */
    justify-content: space-between; /* Distributes space evenly between children */
    flex: 1; /* Ensures the container fills available space */
}

.text-container {
    flex: 3; /* Allocates three parts of the space to this container */
    padding-right: 20px; /* Adds spacing to the right */
    overflow-y: auto; /* Enables vertical scrolling if content overflows */
}

.list-container {
    flex: 1; /* Allocates one part of the space to this container */
    overflow-y: auto; /* Enables vertical scrolling if content overflows */
}

/* Mobile Adjustment */
/* Stack the containers vertically on smaller screens */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
    }
    .text-container {
        padding-right: 0;
    }
}

/* ------------------------------- */
/* About Page and Related Content */
/* ------------------------------- */
.about-container {
    padding: 20px; /* Adds padding inside the container */
    margin: 10px; /* Adds spacing around the container */
    text-align: center; /* Centers the text */
}

.about-BioRemPP-title {
    font-size: 40px; /* Sets the font size for the title */
    padding: 2px; /* Adds padding inside the title */
    margin: 1px; /* Adds spacing around the title */
    text-align: center; /* Centers the title */
}

.about-BioRemPP-subtitle {
    padding: 1px; /* Adds padding inside the subtitle */
    margin: 1px; /* Adds spacing around the subtitle */
    text-align: center; /* Centers the subtitle */
}

.about-content-container {
    display: flex; /* Enables a flexbox layout */
    justify-content: space-between; /* Distributes space evenly between children */
    align-items: flex-start; /* Aligns items to the top */
    flex: 1; /* Ensures the container fills available space */
}

.about-text-container {
    flex: 3; /* Allocates three parts of the space to this container */
    padding-right: 20px; /* Adds spacing to the right */
    overflow-y: auto; /* Enables vertical scrolling if content overflows */
}

.about-content {
    text-align: center; /* Centers the text */
    margin: 10px; /* Adds spacing around the content */
    overflow-wrap: break-word; /* Prevents text overflow by breaking words */
}

/* Mobile Adjustment */
/* Adjust font sizes and stack content vertically on smaller screens */
@media (max-width: 768px) {
    .about-BioRemPP-title {
        font-size: 30px;
    }
    .about-content-container {
        flex-direction: column;
    }
}

/* ------------------------------- */
/* Tabs Styling */
/* ------------------------------- */
.main-tabs {
    display: flex; /* Enables a flexbox layout */
    justify-content: flex-start; /* Aligns tabs to the left */
    background: #b6e9be; /* Sets the background color */
    padding: 10px 20px; /* Adds padding inside the tabs container */
    border: 0px; /* Removes the border */
    border-bottom-left-radius: 8px; /* Rounds the bottom-left corner */
    border-bottom-right-radius: 8px; /* Rounds the bottom-right corner */
}

.tab {
    background: #86f196 !important; /* Default background color */
    color: #0f5f16 !important; /* Default text color */
    font-size: 30px; /* Sets the font size */
    font-weight: bold; /* Makes the text bold */
    padding: 10px 20px; /* Adds padding inside the tab */
    border: 1px solid #0f941a; /* Defines the border */
    border-radius: 8px; /* Rounds the corners */
    margin-right: 10px; /* Adds spacing between tabs */
    cursor: pointer; /* Changes the cursor to a pointer */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth transitions for color and background changes */
}

.tab--selected {
    background: #0f941a !important; /* Background color for the selected tab */
    color: #fff !important; /* Text color for the selected tab */
    border-bottom: none; /* Removes the bottom border */
}

.tab:hover:not(.tab--selected) {
    background: #0f941a !important; /* Hover background color */
    color: #fff !important; /* Hover text color */
}

.tab--not-selected {
    background: #b6e9be !important; /* Default background color for non-selected tabs */
    color: #0f941a !important; /* Default text color for non-selected tabs */
}

/* Mobile Adjustment */
/* Reduce font sizes and padding for better fit on smaller screens */
@media (max-width: 768px) {
    .tab {
        font-size: 24px;
        padding: 8px 15px;
    }
}



/* Container for aligning all step cards centrally */
.step-cards-container {
    display: flex; /* Flexbox layout for consistent alignment */
    justify-content: center; /* Horizontally centers the cards */
    align-items: center; /* Vertically centers the cards */
    flex-wrap: wrap; /* Allows cards to wrap onto multiple lines if needed */
    max-width: 1200px; /* Restricts the container's width */
    margin: 40px auto; /* Centers container and adds vertical spacing */
}

/* Individual step card style */
.step-card {
    position: relative; /* Enables positioning of child elements */
    min-width: 300px; /* Ensures a minimum width for cards */
    height: 300px; /* Fixed height for uniform card sizes */
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
                inset -5px -5px 15px rgba(255, 255, 255, 0.1),
                5px 5px 15px rgba(128, 224, 136, 0.3),
                -5px -5px 15px rgba(8, 197, 33, 0.37); /* Adds multiple-layer shadows */
    border-radius: 15px; /* Rounded corners for softer appearance */
    margin: 10px; /* Spacing around each card */
    background: #a1f082; /* Light green background color */
}

/* Internal box within each card */
.step-card .box {
    position: absolute; /* Positioned within the card */
    top: 20px; left: 20px; right: 20px; bottom: 20px; /* Creates internal padding */
    background: #62a562; /* Green background for the box */
    border-radius: 15px; /* Rounded corners for consistency */
    display: flex; /* Flex layout for content alignment */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    overflow: hidden; /* Hides overflow content */
}

/* Decorative pseudo-element for the card */
.step-card .box:before {
    content: ""; /* Empty content for styling */
    position: absolute; /* Positioned inside the box */
    top: 0; left: 0; /* Anchored to the top-left */
    width: 50%; height: 100%; /* Covers half the width and full height */
    background: rgba(255, 255, 255, 0.03); /* Transparent white overlay */
}

/* Content inside each card */
.step-card .box .content {
    padding: 20px; /* Padding for spacing */
    text-align: center; /* Centers text */
    display: flex; /* Flex layout for vertical stacking */
    flex-direction: column; /* Content flows vertically */
    justify-content: flex-end; /* Aligns content at the bottom */
    width: 100%; height: 100%; /* Ensures full usage of container space */
}

/* Green box for step information */
.step-card .box .content .step-info {
    background: #66bb6a; /* Green background for the info box */
    padding: 20px; /* Spacing inside the box */
    border-radius: 15px; /* Rounded corners */
    text-align: center; /* Centers the text */
    margin-top: auto; /* Pushes the info box to the bottom */
}

/* Styling for step number */
.step-card .box .content .step-number {
    font-size: 50px; /* Large font size for prominence */
    color: rgba(41, 107, 15, 0.623); /* Semi-transparent green text */
    margin: 0; /* Removes default margins */
    padding-left: 10px; /* Adds spacing to the left */
}

/* Title within the step info box */
.step-card .box .content .step-info h3 {
    font-size: 28px; /* Bold, large text for the title */
    color: #fff; /* White text for contrast */
    margin-bottom: 15px; /* Adds spacing below the title */
}

/* Paragraph text within the step info box */
.step-card .box .content .step-info p {
    font-size: 16px; /* Standard font size */
    font-weight: 300; /* Light font weight */
    color: rgba(255, 255, 255, 0.9); /* Semi-transparent white text */
}

/* ---------------------------------------- */
/* Lists and Cards */
/* ---------------------------------------- */

/* Container for lists, using flex layout for horizontal alignment */
.list-container {
    display: flex;
    justify-content: space-around; /* Even spacing between items */
    margin-top: 20px; /* Adds top spacing */
}

/* Individual list cards with borders, shadows, and padding */
.list-card {
    background-color: #fff; /* White background */
    border: 1px solid #26e20db7; /* Light green border */
    border-radius: 5px; /* Slightly rounded corners */
    padding: 20px; /* Internal spacing */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Title inside list cards */
.list-title {
    text-align: center; /* Centers the title */
    margin-bottom: 10px; /* Adds spacing below the title */
}

/* Unordered list inside list cards */
.list-group {
    list-style-type: none; /* Removes default bullet points */
    padding: 0; /* Removes padding */
}

.list-group li {
    padding: 8px 0; /* Vertical padding for spacing */
    border-bottom: 1px solid #eee; /* Light gray border between items */
}

.list-group li:last-child {
    border-bottom: none; /* Removes border for the last item */
}

/* ---------------------------------------- */
/* About Page Image Container */
/* ---------------------------------------- */

/* Container for images, ensuring central alignment and responsive wrapping */
.about-image-container {
    display: flex; /* Flex layout for alignment */
    justify-content: center; /* Centers the container horizontally */
    flex-wrap: wrap; /* Allows images to wrap to the next line */
    gap: 30px; /* Spacing between images */
    margin-top: 20px; /* Adds top spacing */
    width: 100%; /* Full-width container */
}

/* Individual image styling */
.about-image {
    flex: 1 1 calc(33.33% - 40px); /* Occupies one-third of the space */
    max-width: 150px; /* Limits image width */
    height: auto; /* Maintains aspect ratio */
    margin: 5px; /* Adds spacing around each image */
}

/* Title for the integration section */
.integration-title {
    text-align: center; /* Centers the text */
    margin-top: 30px; /* Adds top spacing */
}
/* ---------------------------------------- */
/* General Styles for Analysis Cards */
/* ---------------------------------------- */

/* Styling for analysis cards container, including borders, rounded corners, and background color */
.analysis-card {
    border: 1px solid #d2c0c0; /* Light gray border for separation */
    border-radius: 8px; /* Rounded corners */
    padding: 16px; /* Inner spacing */
    margin-bottom: 20px; /* Space below each card */
    background-color: #0deb322f; /* Light green background */
}

/* Title and description styling for analysis cards */

.analysis-title {
    text-align: left; /* Left-align text for readability */
    font-size: 1.5em; /* Larger font size for titles */
    margin-bottom: 8px; /* Space below the title */
    font-weight: bold;      /* <- Força o negrito */
}


.analysis-description {
    text-align: left; /* Left-align text for readability */
    font-size: 1.5em; /* Larger font size for titles */
    margin-bottom: 8px; /* Space below the title */
}

/* Specific styling for descriptions */
.analysis-description {
    font-size: 1em; /* Standard font size for descriptions */
    color: #000000; /* Black text for contrast */
}

/* Additional styling for insights text */
.analysis-insights {
    text-align: left;
    font-size: 1em; /* Standard font size */
    margin-bottom: 8px; /* Space below insights text */
}

/* ---------------------------------------- */
/* Upload Buttons and Process Section */
/* ---------------------------------------- */

/* Container for upload buttons with spacing and alignment */
.upload-buttons-container {
    display: flex; /* Flex layout for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Space between buttons */
}

/* Styling for "Or" text displayed between buttons */
.upload-or-text {
    font-size: 30px; /* Large font size for emphasis */
    font-weight: bold; /* Bold for visibility */
    color: #555; /* Gray text color */
}

/* Explanation text for each step */
.step-explanation {
    font-size: 20px; /* Medium font size */
    font-weight: 500; /* Semi-bold for readability */
    color: #277325; /* Green color for emphasis */
    margin-bottom: 10px; /* Space below the text */
    text-align: center; /* Center-align text */
}

/* Additional styling for explanatory text containers */
.upload-explanatory-text,
.process-explanatory-text {
    margin-bottom: 15px; /* Space below text blocks */
}

/* Styling for the upload and process card */
.upload-process-card-style {
    background-color: rgb(209, 223, 199); /* Light green background */
    box-shadow: 2px 4px 6px rgba(148, 219, 130, 0.726); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    margin: 20px auto; /* Center-align with top/bottom spacing */
    width: 1200px; /* Fixed width */
    height: fit-content; /* Adjust height dynamically */
    display: flex; /* Flex layout */
    flex-direction: column; /* Vertical stacking */
    gap: 10px; /* Space between elements */
    align-items: center; /* Center-align content */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .upload-process-card-style {
        width: 90%; /* Adjust width for smaller screens */
    }
}

/* Styling for upload button */
.upload-button-style {
    border: 2px dashed #007bff; /* Dashed blue border */
    border-radius: 5px; /* Rounded corners */
    color: #007bff; /* Blue text */
    padding: 10px; /* Inner spacing */
    width: 400px; /* Fixed width */
    text-align: center; /* Center-align text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: border-color 0.3s ease; /* Smooth border color change */
}

/* Hover effect for upload button */
.upload-button-style:hover {
    border-color: #a31d1b; /* Red border on hover */
}

/* Styling for process button */
.process-button-style {
    background-color: #28a745; /* Green background */
    color: white; /* White text */
    border-radius: 5px; /* Rounded corners */
    border: none; /* No border */
    padding: 10px 20px; /* Inner spacing */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth background color change */
}

/* Hover effect for process button */
.process-button-style:hover {
    background-color: #218838; /* Darker green background */
}

/* Additional styling for sample button */
.process-sample-button-style {
    background-color: #2848a7; /* Blue background */
    color: white; /* White text */
    border-radius: 5px; /* Rounded corners */
    border: none; /* No border */
    padding: 10px 20px; /* Inner spacing */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth background color change */
}

/* Hover effect for sample button */
.process-sample-button-style:hover {
    background-color: #3a5fbb; /* Lighter blue background */
}

/* ---------------------------------------- */
/* Styling for View Results Button */
/* ---------------------------------------- */

/* Main styling for "View Results" button */
.view-results-style {
    background-color: #ed3329; /* Green background */
    color: white; /* White text */
    border-radius: 5px; /* Rounded corners */
    border: none; /* No border */
    padding: 10px 20px; /* Inner spacing */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth background color change */
    margin-top: 10px; /* Space above the button */
}

/* Hover effect for "View Results" button */
.view-results-style:hover {
    background-color: #218838; /* Darker green background */
}

/* ---------------------------------------- */
/* Styling for Graph and Navigation Menu */
/* ---------------------------------------- */

/* Card styling for graph display */
.graph-card {
    background-color: #fff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    padding: 20px; /* Inner spacing */
    margin: 20px 0; /* Vertical spacing */
    transition: box-shadow 0.3s ease-in-out; /* Smooth shadow transition */
}

/* Hover effect for graph cards */
.graph-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
}

/* Container for cards with top padding */
.card-container {
    position: relative;
    padding-top: 50px; /* Space for filter menu */
}

/* Navigation menu styling */
.navigation-menu {
    padding: 10px; /* Inner spacing */
    background-color: #a5c6aa2f; /* Light green background */
    border-bottom: 2px solid #ccc; /* Light gray border */
    text-align: center; /* Center-align text */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 100; /* Ensures menu stays on top */
}
/* --------------------------------------- */
/* General Alignment for Cards and Text    */
/* --------------------------------------- */

/* Organizes cards in a vertical column aligned to the left */
.step-cards-column {
    display: flex; /* Enables flexible layout */
    flex-direction: column; /* Stacks items vertically */
    gap: 30px; /* Adds spacing between cards */
    margin: 20px 0; /* Vertical spacing around the container */
    align-items: flex-start; /* Aligns items to the left */
    max-width: 100%; /* Ensures the container uses the full width */
}

/* Aligns the card and text side by side */
.step-row {
    display: flex; /* Enables flexible layout */
    flex-direction: row; /* Arranges items horizontally */
    gap: 20px; /* Adds spacing between the card and the text */
    align-items: center; /* Vertically centers the content */
    width: 100%; /* Occupies the full width */
}

/* Styles for individual cards */
.step-card {
    flex: 0 0 50%; /* Sets the card width to 50% of the container */
    max-width: 500px; /* Limits the card's width */
}

/* Styles for the text next to the card */
.step-text {
    padding: 10px; /* Adds inner spacing */
    flex: 1; /* Allows the text to take the remaining space */
    font-size: 16px; /* Sets font size */
    color: #333; /* Text color */
    line-height: 1.5; /* Increases line spacing for readability */
    text-align: justify; /* Aligns text evenly on both sides */
}

/* --------------------------------------- */
/* Navbar Styling                          */
/* --------------------------------------- */

/* Container for the navbar, including title and menu */
.navbar-container {
    display: flex; /* Enables flexible layout */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    padding: 10px 0; /* Adjusts navbar height */
    background-color: #F8F9FA; /* Light gray background */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border-bottom: 1px solid #ddd; /* Adds a bottom border */
    position: fixed; /* Fixes the navbar at the top */
    top: 0;
    left: 0;
    right: 0;
    width: 100%; /* Full-width navbar */
    z-index: 1000; /* Ensures it stays above other elements */
}

.navbar-nav .nav-link:hover {
    color: #90ee90 !important; /* verde-limão suave ao passar o mouse */
}


/* Container for title, subtitle, and links */
.navbar-menu-container {
    position: relative; /* Enables relative positioning for child elements */
    display: flex; /* Enables flexible layout */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers content horizontally */
    width: 100%; /* Full-width container */
}

/* Styles for the navbar title */
.navbar-title {
    font-size: 20px; /* Font size */
    font-weight: bold; /* Bold text */
    color: #007BFF; /* Primary blue color */
    text-decoration: none; /* Removes underline from links */
    margin-bottom: 5px; /* Spacing below the title */
    text-align: center; /* Centers the text */
    width: 100%;
}

/* Subtitle below the title */
.navbar-subtitle {
    font-size: 14px; /* Font size */
    font-weight: normal; /* Normal font weight */
    color: #6c757d; /* Gray color */
    margin-bottom: 8px; /* Spacing below the subtitle */
    text-align: center; /* Centers the text */
    cursor: pointer; /* Indicates interactivity */
}

/* Initially hides the links */
.nav-links {
    display: none; /* Hides the links initially */
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    justify-content: space-between; /* Evenly spaces the links */
    align-items: stretch; /* Aligns links vertically */
    gap: 16px; /* Spacing between links */
    width: 100%; /* Full-width container */
    background-color: #F8F9FA; /* Light gray background */
    padding: 10px 20px; /* Adds inner spacing */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border-top: 1px solid #ddd; /* Adds a top border */
}

/* Displays the links when hovering over the menu container */
.navbar-menu-container:hover .nav-links {
    display: flex; /* Displays the links */
}

/* Individual link styles */
.nav-link {
    font-size: 12px; /* Font size */
    color: #007BFF; /* Primary blue color */
    text-decoration: none; /* Removes underline */
    padding: 3px 8px; /* Adds inner spacing */
    transition: color 0.3s ease; /* Smooth color transition */
    text-align: center; /* Centers text inside the link */
}

/* Changes the link style on hover */
.nav-link:hover {
    text-decoration: underline; /* Adds underline */
    color: #0056b3; /* Darker blue color */
}

/* --------------------------------------- */
/* Responsive Adjustments for Mobile       */
/* --------------------------------------- */

@media (max-width: 768px) {
    /* Adjusts card layout for smaller screens */
    .step-row {
        flex-direction: column; /* Stacks cards vertically */
        align-items: center; /* Centers content horizontally */
    }

    /* Ensures text wraps properly */
    .step-text {
        font-size: 14px; /* Reduces font size */
    }

    /* Navbar adjustments */
    .navbar-container {
        padding: 5px 0; /* Reduces padding for smaller screens */
    }

    .nav-links {
        gap: 8px; /* Reduces spacing between links */
        flex-direction: column; /* Stacks links vertically */
    }
}

/* ---------------------------------------- */
/* Styles for the Regulatory Agencies Page */
/* ---------------------------------------- */

/* Styles for the entire page layout, ensuring consistency */
.regulatory-agencies-page {
    padding: 20px; /* Adds spacing around the page content */
    font-family: Arial, sans-serif; /* Ensures readability */
    line-height: 1.6; /* Improves text spacing */
}

/* Main title of the Regulatory Agencies page */
.regulatory-title {
    font-size: 32px; /* Large font for emphasis */
    font-weight: bold; /* Highlights the title */
    color: #007BFF; /* Blue color aligns with the theme */
    margin-bottom: 20px; /* Adds spacing below the title */
}

/* Section titles for different parts of the page */
.regulatory-section-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #343a40; /* Darker color for better contrast */
}

/* Styles for paragraph and introductory text */
.regulatory-text, .regulatory-intro {
    font-size: 16px;
    color: #6c757d; /* Neutral color for body text */
    margin-bottom: 15px; /* Adds spacing below paragraphs */
}

/* Title for individual regulatory agencies */
.regulatory-agency-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    color: #0056b3; /* Slightly darker blue for differentiation */
}

/* Responsive Adjustment for Mobile Devices */
@media (max-width: 768px) {
    .regulatory-title {
        font-size: 28px; /* Slightly smaller for better fit */
    }
    .regulatory-section-title {
        font-size: 20px;
    }
}

/* ---------------------------------------- */
/* Related Articles Section */
/* ---------------------------------------- */

/* Styles for the unordered list of articles */
.related-articles-list {
    list-style-type: none; /* Removes bullets from the list */
    font-size: 16px;
    color: #6c757d; /* Neutral tone for article descriptions */
    padding-left: 20px;
    line-height: 1.8; /* Improves spacing between list items */
}

/* Individual list items in the related articles section */
.related-articles-list li {
    margin-bottom: 1.5em; /* Adds spacing between articles */
}

/* Title style for related articles */
.article-title {
    font-weight: bold; /* Highlights the article title */
    color: #343a40; /* Darker color for emphasis */
}

/* Links to related articles */
.related-article-link {
    color: #007BFF; /* Blue color for links */
    text-decoration: none; /* Removes underline */
    font-weight: bold; /* Adds emphasis */
}

/* Hover effect for article links */
.related-article-link:hover {
    text-decoration: underline; /* Adds underline on hover */
    color: #0056b3; /* Darker blue for hover effect */
}

/* ---------------------------------------- */
/* Section Header and Title Styles */
/* ---------------------------------------- */

.section-header {
    margin-bottom: 20px;
    text-align: left; /* Aligns text to the left */
}

.section-title {
    font-size: 24px;
    font-weight: bold;
    color: #007BFF; /* Blue for thematic consistency */
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: left;
}

.section-objective {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 15px;
    font-style: italic; /* Adds emphasis */
    text-align: left;
}

/* ---------------------------------------- */
/* Tooltip Styles */
/* ---------------------------------------- */

/* Wrapper for tooltips */
.tooltip-container {
    display: inline-block;
    position: relative;
    cursor: pointer; /* Changes cursor to pointer */
    font-weight: bold;
    color: #007BFF; /* Matches theme color */
}

/* Tooltip text with underline */
.tooltip-text {
    text-decoration: underline;
}

/* Tooltip content box */
.tooltip-container .tooltip-content {
    visibility: hidden; /* Hidden by default */
    width: 300px; /* Fixed width for consistency */
    background-color: #f8f9fa; /* Light background */
    color: #212529; /* Neutral text color */
    text-align: left;
    border: 1px solid #d6d8db; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    padding: 10px;
    position: absolute;
    z-index: 1; /* Ensures visibility */
    top: 120%; /* Positioned below the trigger element */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Tooltip header for emphasis */
.tooltip-header {
    font-weight: bold;
    margin-bottom: 5px;
    color: #343a40;
}

/* Example text inside the tooltip */
.tooltip-example {
    font-family: monospace;
    background-color: #e9ecef; /* Light gray background */
    padding: 5px;
    border-radius: 4px;
    margin: 0;
    white-space: pre-wrap; /* Preserves formatting */
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-content {
    visibility: visible;
}

/* ---------------------------------------- */
/* Button Styles */
/* ---------------------------------------- */

/* Styles for the download button */
.download-button {
    display: inline-block;
    background-color: #62a562; /* Green background */
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid #a1f082; /* Darker green border */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    margin-top: 20px;
}

/* Hover effect for the download button */
.download-button:hover {
    background-color: #a1f082; /* Lighter green on hover */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow on hover */
}

/* Container for button alignment */
.button-container {
    text-align: center;
    margin-top: 20px;
}

/* ---------------------------------------- */
/* Alert Styles */
/* ---------------------------------------- */

.alert-container {
    margin-top: 15px; /* Adds spacing above the alert */
    text-align: center; /* Centers alert text */
}

.process-button-style + .alert-container {
    margin-top: 10px; /* Adjusts spacing below specific buttons */
}

/* ---------------------------------------- */
/* Mobile Adjustments */
/* ---------------------------------------- */

@media (max-width: 768px) {
    .download-button {
        font-size: 16px; /* Smaller font for mobile */
        padding: 8px 16px;
    }
    .tooltip-content {
        width: 250px; /* Reduced width for smaller screens */
    }
}



/* Center-aligns images within a container with added margins */
.image-container {
    text-align: center;
    margin: 20px 0;
}

/* Styles example images with width constraints, borders, and rounded corners */
.example-image {
    width: 80%; /* Relative width for responsiveness */
    max-width: 800px; /* Maximum width to prevent oversized images */
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Styles for numbered descriptions, emphasizing titles and improving readability */
.numbered-descriptions h4 {
    font-weight: bold;
    color: #0056b3; /* Dark blue for visibility */
    margin-top: 20px;
}

/* Text and list items under numbered descriptions */
.numbered-descriptions p,
.numbered-descriptions .help-list {
    font-size: 16px;
    text-align: left; /* Align text to the left for readability */
    margin: 10px 0;
    padding-left: 20px; /* Indent for better structure */
}

/* Individual list items with consistent spacing */
.help-list li {
    margin-bottom: 10px;
}

/* Styles titles in the help section for visibility and emphasis */
.help-section-title-right {
    text-align: left; /* Aligns titles to the left */
    font-weight: bold;
    color: #0056b3; /* Dark blue for emphasis */
    margin-top: 20px;
    margin-bottom: 10px;
}

/*
=========================================================================================
Button and Progress Bar Container
=========================================================================================
*/

/* Central container for buttons and progress bars */
.button-progress-container {
    display: flex; /* Flexible box for layout */
    flex-direction: column; /* Stacks elements vertically */
    align-items: center; /* Centers elements */
    gap: 15px; /* Adds spacing between child elements */
    width: 100%; /* Full width for consistent alignment */
}

/* Progress bar styling with width constraints for responsiveness */
#progress-bar {
    width: 80%; /* Relative width */
    max-width: 600px; /* Limit maximum width */
    margin: 0 auto; /* Center horizontally */
}

/* Centralized container for the progress bar */
#progress-container {
    width: 100%;
    text-align: center;
    margin-top: 10px; /* Space between bar and other elements */
}

/* Utility class for consistent top margins */
.mt-3 {
    margin-top: 10px;
}

/* Styles alert containers with centered text and a defined width */
.alert-container {
    width: 50%; /* Half-width for balanced layout */
    text-align: center;
}

/*
=========================================================================================
Responsive Adjustments
=========================================================================================
*/

@media (max-width: 768px) {
    /* Centers buttons and adjusts spacing on smaller screens */
    .button-progress-container {
        align-items: center;
    }

    /* Increases progress bar width for better visibility on smaller screens */
    #progress-bar {
        width: 90%;
    }

    /* Adjusts alert container width for smaller screens */
    .alert-container {
        width: 90%;
    }
}

/*
=========================================================================================
Related Articles Section
=========================================================================================
*/

/* Removes default list styling for related articles */
.related-articles-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Adds spacing between article items */
.related-articles-list li {
    margin-bottom: 15px;
}

/* Styles author lines with italic text and muted color */
.authors-line {
    display: block;
    font-size: 0.95rem;
    font-style: italic;
    color: #555; /* Muted gray for secondary information */
    margin-bottom: 5px;
}

/* Emphasizes article titles */
.article-title {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* Styles journal information for articles */
.journal-info {
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}

/* Configures DOI links with hover effects for visibility */
.related-article-link {
    display: block;
    font-size: 0.9rem;
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-article-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Defines consistent spacing with horizontal lines */
.my-2 {
    border: 0.5px solid #ccc;
    margin: 10px 0;
}

/*
=========================================================================================
Contact Information Section
=========================================================================================
*/

/* Styles the contact page layout */
.contact-page {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 800px; /* Restrict maximum width */
    margin: 0 auto;
}

/* Emphasizes the contact title */
.contact-title {
    text-align: center;
    font-size: 2.5rem;
    color: #2a9d8f; /* Teal for emphasis */
    margin-bottom: 20px;
}

/* Aligns profile section elements horizontally */
.profile-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* Styles profile pictures with rounded corners and shadows */
.profile-picture {
    border-radius: 10%;
    width: 350px;
    height: 500px;
    margin-right: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Left-aligned text for developer descriptions */
.text-section {
    text-align: left;
}

/* Emphasizes developer names */
.developer-name {
    font-size: 1.8rem;
    margin: 0;
    color: #264653; /* Dark teal */
}

/* Italic text for academic titles */
.academic-title {
    font-size: 1.2rem;
    margin: 5px 0;
    color: #2a9d8f;
    font-style: italic;
}

/* Bold text for developer titles */
.developer-title {
    font-size: 1rem;
    margin: 5px 0;
    color: #2a9d8f;
    font-weight: bold;
}

/* Line-height for better readability */
.description-section {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Developer descriptions with muted text */
.developer-description {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

/* Central alignment for contact methods */
.contact-methods {
    text-align: center;
    margin-bottom: 30px;
}

/* Header for contact section */
.contact-header {
    font-size: 1.5rem;
    color: #2a9d8f;
    margin-bottom: 10px;
}

/* Bold and visible email links */
.contact-email {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e76f51; /* Orange for visibility */
    text-decoration: none;
}

.contact-email:hover {
    text-decoration: underline;
}

/* Styles for social media icons */
.social-media {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    color: #264653;
    text-decoration: none;
}

.social-icon i {
    font-size: 2rem;
    color: #264653;
    transition: color 0.3s ease;
}

.social-icon i:hover {
    color: #2a9d8f;
}

/*
=========================================================================================
Help Message Section
=========================================================================================
*/

/* Aligns and spaces help messages */
.help-message-container {
    text-align: auto;
    margin-top: 30px;
}

/* Styles help message text */
.help-message {
    font-size: 1.2em;
    font-weight: 500;
    color: #333; /* Matches the application palette */
}

/* Configures help links with hover effects */
.help-link {
    color: #007bff; /* Blue for links */
    text-decoration: none;
    font-weight: bold;
}

.help-link:hover {
    text-decoration: underline;
    color: #0056b3; /* Darker blue on hover */
}

.help-link2 {
    color: #87bc47; /* Azul padrão para links */
    text-decoration: none;
    font-weight: bold;
}


.features-section-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #343a40;
}

.features-link {
    font-size: 16px;
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.help-title {
    font-size: 32px;
    font-weight: bold;
    color: #007BFF;
    margin-bottom: 20px;
}

.features-title {
    font-size: 32px;
    font-weight: bold;
    color: #007BFF;
    margin-bottom: 20px;
}

.help-section-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #343a40;
}

.features-section-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #343a40;
}


/* features.css */

/* Container geral para a página Features */
.features-container {
    margin: 0 auto;    /* Centraliza o container */
    padding: 20px;
}

/* Estilização do título da página */
.features-title {
    margin-bottom: 20px;
    font-size: 2.5rem;
    text-align: center;
}

/* Estilização do texto introdutório */
.features-intro {
    font-size: 1.1rem;
    margin-bottom: 30px;
    text-align: justify;
}

/* Estilização dos títulos das seções */
.help-section-title,
.features-section-title,
.section-title {
    font-size: 2rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Estilização dos parágrafos */
.features-text,
.analysis-description,
.analysis-insights,
.section-objective {
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: justify;
}

/* Estilização da sidebar */
.sidebar {
    padding: 20px;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

/* Tornando a sidebar sticky */
.sticky-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Estilização dos links da sidebar */
.sidebar-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.sidebar-link {
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #007bff;
}

.sidebar-link-highlight {
    font-size: 1.6rem;
    font-weight: bold;
    color: #0056b3;
}

.sidebar-link:hover {
    text-decoration: underline;
}

/* Placeholder adjustments */
.me-1 {
    margin-right: 0.25rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.w-100 {
    width: 100%;
}


.doc-image {
    max-width: 100%;  /* Limita a largura ao tamanho máximo do contêiner */
    height: auto;     /* Mantém a proporção da imagem ao redimensionar */
    display: block;   /* Remove possíveis espaços extras ao redor da imagem */
    margin: 0 auto;   /* (Opcional) Centraliza a imagem horizontalmente */
}
.doc-legend {
    margin-top: 1rem;
    font-size: 0.95rem; /* Ajuste conforme necessidade */
    text-align: left;   /* Força alinhamento à esquerda */
}

.doc-legend p {
    margin-bottom: 0.5rem;
}

.doc-legend strong {
    color: #333;
    font-weight: 600;
}

.graphical-abstract-image {
    max-width: 100%;  /* Limita a largura ao tamanho máximo do contêiner */
    height: auto;     /* Mantém a proporção da imagem ao redimensionar */
    display: block;   /* Remove possíveis espaços extras ao redor da imagem */
    margin: 0 auto;   /* (Opcional) Centraliza a imagem horizontalmente */
    border-radius: 10px;
}