/* Custom Sidebar Styles */
.custom-sidebar {
    background-color: #013A63  ; /* Dark blue color */
    color: rgb(59, 175, 90);
    top: 0; /* Position at the top of the page */
    left: 0; /* Align to the left of the screen */
    width: 10px; /* Set the width of the sidebar (adjust as necessary) */
    padding-top: 200px; /* Add some padding at the top */
    font-size: 0.9rem; /* Optional: Slightly smaller font */

}





.custom-sidebar .nav-link:hover {
    background-color: #ff8c00; /* Change to orange background on hover */
}

.custom-sidebar h4 {
    color: #ff8c00; /* White text for the title */
    font-size: 35px;
    font-weight: bold;
}
/* Custom styles for the title */
/* Custom styles for the images */
.plaza-image-container {
    margin-right: 10px; /* Space between the image and text */
}

.plaza-image {
    position: relative;

    max-width: 100%; /* This makes the Plaza 6G image larger (adjust the percentage as needed) */
    height: auto;
    object-fit: contain; /* Ensures the image doesn't stretch disproportionately */
}

.welcome-text {
    flex: 5; /* Ensures text takes up the remaining space */
    text-align: left; /* Aligns the text left */
}

/* Styling for the welcome section */
.wave {
    font-size: 2rem; /* Bigger wave emoji */
}

.display-4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bold title */
    font-size: 3rem; /* Slightly larger font size for the title */
    color: #ff8c00; /* Dark color for readability */
}

.lead {
    font-size: 1.2rem; /* Larger font for description */
    color: #666; /* Slightly lighter color for description */
}

/* Ensures the second image is responsive */
.plaza-home-image {
    position: relative;
    width: 10%;
    max-width: 1200px; /* Limits the maximum size of the second image */
    height: 10;
}
.nav-item.derived {
    margin-left: 1.5rem; /* Indent derived items */
    font-size: 0.95rem; /* Optional: Slightly smaller font */


}

/* Custom Navbar                                                responds to  Infrastructure/Network/software/Harware/setup Upper Bar */


/* Custom Navbar */
.custom-navbar {
    background: linear-gradient(90deg, #1e3c72, #2a5298); /* Beautiful gradient */
    font-size: 0.9rem;
    padding: 0.15rem 1rem;
}

.custom-navbar .navbar-brand {
    font-family: 'Poppins', sans-serif; /* Modern font */
    font-size: 1.8rem;
    color: #fff;
    letter-spacing: 0.2em;
}

.custom-navbar .nav-link {
    color: #f8f9fa !important; /* Light color for links */
    margin-right: 1rem;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase; /* Modern styling */
}

.custom-navbar .nav-link:hover {
    color: #ffcc00 !important; /* Gold hover effect */
    text-decoration: underline;
}

/* Centered Content */
.container h1 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    color: #1e3c72;
}

.container p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #6c757d;
}
/* Custom Navbar                                         responds to  Infrastructure Upper Bar */


/* +  button                                         */

    .btn-outlined {
        background-color: #800080; /* Purple */
        border: 2px solid #800080;
        color: white; /* White text */
        padding: 12px 30px;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .btn-outlined:hover {
        background-color: white; /* White on hover */
        color: #800080; /* Purple text */
    }

    .btn-outlined:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(128, 0, 128, 0.3); /* Purple shadow */
    }


/* +  button                                         */


/* Flash Message ...Vm added-----------------------------------------------------------------responds to  Infrastructure Upper Bar */


.flash-message-container {
    position: fixed;  /* Fix the flash message at the top of the screen */
    top: 20px;  /* Space from the top */
    left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Center it perfectly */
    z-index: 1050;  /* Ensure it appears on top */
    font-size: 14px;  /* Smaller text */
    border-radius: 10px;  /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Subtle shadow */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth appearance */
    opacity: 0;  /* Initially hide it */
}

.flash-message-container.show {
    opacity: 1;  /* Show the message */
    transform: translateX(-50%) translateY(0);  /* Slide into view */
}

.flash-message {
    margin: 0;  /* Remove extra margin */
}

body {
    padding-top: 0;  /* No need to shift content down */
}
/* Flash Message ...Vm added-----------------------------------------------------------------responds to  Infrastructure Upper Bar */