html, body {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 108px;
}
.main-body {
 padding: 15px;
}
main > .container {
  padding: 60px 15px 0;
}
.bd-placeholder-img {
 font-size: 1.125rem;
 text-anchor: middle;
 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;
}

.child-content-wrapper {
  padding-left: 10px;
  padding-right: 10px;
}

@media (min-width: 768px) {
 .bd-placeholder-img-lg {
  font-size: 3.5rem;
 }
}

.b-example-divider {
 width: 100%;
 height: 3rem;
 background-color: #0000001a;
 border: solid rgba(0, 0, 0, 0.15);
 border-width: 1px 0;
 box-shadow: inset 0 0.5em 1.5em #0000001a, inset 0 0.125em 0.5em #00000026;
}

.b-example-vr {
 flex-shrink: 0;
 width: 1.5rem;
 height: 100vh;
}

.bi {
 vertical-align: -0.125em;
 fill: currentColor;
}

/* Container for brand logo/text height matching SVG */
.brand-flex {
  height: 50px;
  align-items: center;
}

/* ============================================= */
/*  CUSTOM STYLING FOR VISIBLE TOAST NOTIFICATIONS */
/* ============================================= */

/* Main toast container styling */
.toast {
    background-color: #212529 !important; /* A solid, dark background */
    color: #f8f9fa !important;           /* Light text for high contrast */
    border: 1px solid #495057;           /* A subtle border to help it stand out */
    opacity: 1 !important;               /* Ensure it's not transparent */
    min-width: 350px;                    /* Set a minimum width */
    border-radius: .75rem;               /* Consistent rounded corners */
}

/* Toast header styling */
.toast-header {
    background-color: #343a40;           /* A slightly lighter dark for the header */
    color: #f8f9fa;                      /* White text in the header */
    border-bottom: 1px solid #495057;    /* Separator line */
}

/* Make the 'x' close button visible on a dark background */
.toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Styling for the icons in the header */
.toast-header i {
    font-size: 1.2rem; /* Make the success/error icons a bit larger */
}

.nav-scroller {
 position: relative;
 z-index: 2;
 height: 2.75rem;
 overflow-y: hidden;
}

.nav-link {
  border: 2px solid transparent !important;   /* Reserve space for border! */
  border-radius: 4px !important;
  padding: 0.4rem 1rem !important;            /* Adjust as needed for spacing */
  margin: 0 0.25rem !important;               /* Horizontal space between links */
  transition: border 0.18s, color 0.18s !important;
}

.nav-scroller .nav {
 display: flex;
 flex-wrap: nowrap;
 padding-bottom: 1rem;
 margin-top: -1px;
 overflow-x: auto;
 text-align: center;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
 --bd-blue-bg: #0d6efd;
 --bd-blue-rgb: 13, 110, 253;
 --bs-btn-font-weight: 600;
 --bs-btn-color: var(--bs-white);
 --bs-btn-bg: var(--bd-blue-bg);
 --bs-btn-border-color: var(--bd-blue-bg);
 --bs-btn-hover-color: var(--bs-white);
 --bs-btn-hover-bg: #0b5ed7;
 --bs-btn-hover-border-color: #0b5ed7;
 --bs-btn-focus-shadow-rgb: var(--bd-blue-rgb);
 --bs-btn-active-color: var(--bs-btn-hover-color);
 --bs-btn-active-bg: #0a58ca;
 --bs-btn-active-border-color: #0a58ca;
}

.btn-circle {
  width: 60px;         /* Makes the button square */
  height: 60px;
  border-radius: 50%;  /* Makes the button circular */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10); /* Optional: subtle shadow */
}

/* Remove hover and focus effects for this button specifically */
.btn-bd-primary.btn-circle:hover,
.btn-bd-primary.btn-circle:focus {
  background-color: var(--bs-btn-bg, #0d6efd) !important;
  border-color: var(--bs-btn-border-color, #0d6efd) !important;
  color: var(--bs-btn-color, #fff) !important;
  box-shadow: none !important;
  /* Remove any transform if Bootstrap adds one */
  transform: none !important;
}

.position-fixed, #bd-theme {
  z-index: 2147483647; /* Always on top */
}

.card-lightaqua {
    background-color: #E0F7FA !important;      /* Light aqua, reminiscent of clear water*/

}
.card-beige {
    background-color: #F5F5DC !important;      /* #FFF9E5 also Beige, reminiscent of notebook*/

}
.card-laquamarine {
    background-color: #B2DFDB !important;      /* LAquamarine Light */

}
.card-aliceblue {
    background-color: #E3F2FD !important;      /* Alice blue*/

}

/* In dark mode, override these with dark-friendly colors: */
[data-bs-theme="dark"] .card-lightaqua    { background-color: #183441 !important; }
[data-bs-theme="dark"] .card-beige        { background-color: #393535 !important; }
[data-bs-theme="dark"] .card-laquamarine  { background-color: #234C4C !important; }
[data-bs-theme="dark"] .card-aliceblue    { background-color: #1d273d !important; }

[data-bs-theme="dark"] .card-lightaqua,
[data-bs-theme="dark"] .card-beige,
[data-bs-theme="dark"] .card-laquamarine,
[data-bs-theme="dark"] .card-aliceblue {
    border: 1px solid #fff !important;
    /* Optional: with border radius for smoother look */
    border-radius: 1rem; /* or your preferred value */
}

.bd-mode-toggle {
 z-index: 1500;
}

.bd-mode-toggle .bi {
 width: 1em;
 height: 1em;
}

/* Profile Picture in Navbar/User list */
.rounded-circle {
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-bg,
.flex-shrink-0 .dropdown img.rounded-circle {
  background: #fff;
  border-radius: 50%;
  padding: 2px;             /* Optional: small white border */
  box-shadow: 0 0 0 1.5px #fff; /* Optional: thin outline */
}
.d-flex.flex-column.align-items-center.text-center img.rounded-circle {
    width: 150px; /* Explicitly set width */
    height: 150px; /* Explicitly set height */
    border-radius: 50%; /* Make it a perfect circle */
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    display: block; /* Helps with consistent sizing and alignment */
    margin: 0 auto; /* Centers the image within its container */
}
/* --- Dropdown Hover Effect --- */
.dropdown-menu .dropdown-item {
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}

.dropdown-toggle::after {
  color: #fff !important;
  border-top-color: #fff !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #0d6efd !important; /* A nice blue, matching Bootstrap primary */
    color: #fff !important /* White text on hover */
    /* You can also add other effects like asubtle text-shadow or border */
}

/* If you want the icons to also change color on hover */
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
    color: #fff !important; /* Make icon white on hover */
}
.bd-mode-toggle .dropdown-menu .active .bi {
 display: block !important;
}
.form-control-dark::placeholder,
.text-bg-dark::placeholder {
 color: #fff;
 opacity: 1; /* Make sure it's not semi-transparent */
}
form[role="search"] input::placeholder {
 color: #fff !important;
 opacity: 1;
}
form[role="search"] input::-webkit-input-placeholder {
 color: #fff !important;
}
form[role="search"] input:-ms-input-placeholder {
 color: #fff !important;
}
form[role="search"] input::-ms-input-placeholder {
 color: #fff !important;
}
form[role="search"] input::-moz-placeholder {
 color: #fff !important;
}
form[role="search"] input:-moz-placeholder {
 color: #fff !important;
}

/* White color for username text */
.flex-shrink-0 .dropdown-toggle .ms-2,
.flex-shrink-0 .dropdown-toggle span {
  color: #fff !important;
}

.card,
.aqua-modal {
 border-radius: 1.1rem;
 box-shadow: 0 4px 24px rgba(32, 156, 238, 0.18);
}
.btn-primary,
.btn-success {
 border-radius: 1.5rem;
 font-weight: 600;
}
.card-title.text-primary {
 color: #d7ebf7 !important;
}
.card-title.text-success {
 color: #20c997 !important;
}
input.form-control,
select.form-select {
 border-radius: 1rem;
 background: #f4f7f6;
 border-color: #e0e0e0;
}

#userid-label,
#userid-helper-text {
 transition: color 0.2s;
}
a.link-secondary {
 color: #209cee !important;
 font-weight: 500;
}
a.link-secondary:hover {
 color: #125fa4 !important;
}
.validation-msg {
 font-size: 0.96em;
}


/* Adjust the content pane to ensure it has enough height to scroll */
#fish-content-pane {
    min-height: calc(100vh - 100px - var(--navbar-height, 56px)); /* Ensure it's tall enough to scroll */
}

/* --- Content Sections --- */
.content-sections {
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

section h2 {
    font-size: 2.5em;
    color: #1a3a4f;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

section h2::after {
    content: '';
    display: block;
    width: 160px;
    height: 3px;
    background-color: #007bff;
    margin: 15px auto 0;
    border-radius: 2px;
}
.main-content-sections {
    padding: 50px 20px;
}

section h2 {
    font-size: 2.5em;
    color: #1a3a4f;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

section h2::after {
    content: '';
    display: block;
    width: 160px;
    height: 3px;
    background-color: #007bff;
    margin: 15px auto 0;
    border-radius: 2px;
}

[data-bs-theme="dark"] section h2 {
    color: #6ebfff;
}


.card {
    background-color: var(--bs-card-bg);
    color: var(--bs-card-color, var(--bs-body-color));
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
   /* transform: translateY(-8px);*/
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.card h3 {
    font-size: 1.5em;
    padding: 15px 20px 10px;
}

.card p {
    font-size: 0.95em;
    padding: 0 20px 15px;
}

.card-link {
    display: block;
    text-align: right;
    padding: 10px 20px 20px;
    font-weight: bold;
    color: #007bff;
}

/* Adjust the signup-form itself within its new parent */
.signup-form {
    display: flex; /* Keep original flex for input and button */
    justify-content: flex-start; /* Align form elements to the left within its area */
    flex-wrap: wrap; /* Allow form elements to wrap */
    gap: 10px; /* Adjust gap between input and button if needed */
    margin-top: 0; /* Remove top margin if inherited from previous styles */
}

.signup-form input[type="email"] {
    max-width: 100%; /* Ensure input is responsive within its new parent */
    width: 250px; /* You can set a fixed width or rely on flex-grow: 1 */
    flex-grow: 1; /* Allows input to grow within its available space */
}

.signup-form button {
    flex-shrink: 0; /* Prevents button from shrinking */
}



/* --- Footer Styles --- */
.main-footer {
    background-color: #0a1f2f;
    color: #eee;
    padding: 50px 20px 20px;
    margin-top: 50px;
}
background-color: var(--bs-body-bg);
    color: var(--bs-body-color);

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
}

.footer-section h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.3em;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    display: inline-block; /* Shrink border to text width */
}

.footer-section p, .footer-section ul li {
    font-size: 0.95em;
    line-height: 1.8;
}

.footer-section ul li a {
    color: #eee;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #007bff;
}

.footer-section.links ul {
    /* list-style: none; (list-unstyled Bootstrap class handles this in HTML now) */
    /* padding: 0; (list-unstyled Bootstrap class handles this in HTML now) */
    margin: 0; /* Ensure no unwanted margin */
}

.footer-section.links ul li {
    margin-bottom: 8px; /* Add spacing between list items */
}
.footer-section.links ul li:last-child {
    margin-bottom: 0; /* No margin after the last item in a column */
}

.footer-section.links ul li a {
    color: inherit; /* Inherit text color from the footer (e.g., #E0E0E0) */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.footer-section.links ul li a:hover {
    color: #007bff; /* Clear Water Aqua on hover */
    text-decoration: underline; /* Add underline on hover */
}

.social-icons a {
    color: #eee;
    font-size: 1.5em;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #007bff;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #1a3a4f;
    font-size: 0.85em;
    color: #bbb;
}

/* Specific for Text Guides and Forum */
.text-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #000;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Alerts */
.alert {
    margin-top: 15px;
}

/* Admin Badges */
.admin-badge {
    vertical-align: middle;
    font-size: 0.8em;
}
/* Styling for messages within forms */
.message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 0.9em;
    text-align: center;
    display: none;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Password Toggle Styles */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); /* Corrected: Centers the icon vertically within the input field */
    cursor: pointer;
    color: #555;
}

/* Validation Message Styles */
.validation-message {
    color: #dc3545;
    font-size: 0.85em;
    margin-top: -8px;
    margin-bottom: 10px;
    display: none;
}

.input-group.invalid input {
    border-color: #dc3545;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #555;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: auto;
    margin-bottom: 0;
}
.g_id_signin {
    display: none !important; /* Use !important to override Google's inline styles */
}

.form-switch-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
    color: #666;
}

.form-switch-link a {
    font-weight: bold;
    color: #007bff;
}
/* --- User Profile Page Specific Styles --- */

/* General page background already set by body { background-color: #f4f7f6; } */
/* You can override it for the profile page specifically if you want a different background just for this page */
/* Example:
.profile-page-wrapper {
    background-color: #e9ecef;
}
*/

/* Enhanced Card Styling for Profile */
.card.p-4.shadow-lg.border-0.rounded-4 {
    border-radius: 1rem !important; /* Ensures more rounded corners */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Stronger shadow */
    background-color: #fff; /* Explicitly set card background */
}

/* Profile Picture Styling */
.rounded-circle.border.border-primary.p-1 {
    border: 3px solid var(--bs-primary) !important; /* Thicker border using Bootstrap's primary color variable */
    padding: 3px !important; /* Space between image and border */
}

/* Username and Email Styling */
.text-primary {
    color: #007bff !important; /* Ensure primary color for username, if not already picked up by Bootstrap */
}

.text-muted.small {
    font-size: 0.85rem !important; /* Make email text slightly smaller */
    /*color: #6c757d !important;  Ensure a consistent muted color */
}

.tagline-text{
   color: #6ebfff !important;
}

/* Section Headings within the profile card */
h5.mb-3.text-secondary {
    color: white !important; /* Use Bootstrap's secondary color for section headings */
    font-weight: 600; /* Make them a bit bolder */
}

/* Horizontal Rule (separator) styling */
hr.my-4 {
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Subtle separator */
    margin-top: 1.5rem !important; /* Adjust margin around HR */
    margin-bottom: 1.5rem !important;
}

/* Button Styling (already partially covered by global .btn-primary) */
/* Specific adjustments for profile page buttons */
.btn-primary.w-100, .btn-info.w-100 {
    font-weight: 500; /* Slightly less bold than default Bootstrap if preferred */
    letter-spacing: 0.5px;
    padding: 10px 15px; /* Adjust padding for button height */
}

.btn-primary.w-100:hover, .btn-info.w-100:hover {
    transform: translateY(-2px); /* Lift button on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

/* Form label for file input */
.form-label {
    font-weight: 500; /* Maintain consistency with existing form labels */
    color: #333; /* Ensure a dark color */
}

/* Form text (e.g., max file size) */
.form-text {
    color: #6c757d; /* Consistent muted text color */
    font-size: 0.8rem; /* Slightly smaller text */
    margin-top: 0.25rem;
}

/* Admin badge specific styling (re-affirming from previous suggestion for clarity) */
.badge.bg-warning.text-dark {
    font-size: 0.75em; /* Make admin badge slightly smaller relative to username */
    padding: 0.3em 0.6em;
    border-radius: 0.5rem;
    vertical-align: middle;
}
/* Responsive adjustments for the profile page layout */
@media (max-width: 767.98px) {
    .container.my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    .card.p-4 {
        padding: 20px !important; /* Reduce padding on small screens if it looks too much */
    }
}
/* --- End of User Profile Page Specific Styles --- */

/* About Us Page - Image Height Adjustment */
/* Ensure the row stretches to contain its content */
.about-us-hero-row {
    display: flex;
    align-items: stretch; /* Makes columns stretch to the height of the tallest column */
    /* Add min-height to ensure the row has a base height, especially on smaller screens or if text is short */
    min-height: 300px; /* Adjust this value as needed, e.g., to ensure a minimum visible height */
}

/* Make the image fill the height of its parent column */
.about-us-hero-row .col-lg-6 img {
    width: 100%; /* Ensures the image takes full width of its column */
    height: 100%; /* Makes the image take full height of its column */
    object-fit: cover; /* Important: Ensures the image covers the area without distortion, cropping if necessary */
    display: block; /* Ensures it behaves as a block element for sizing */
    background-repeat: no-repeat;
}

/* Optional: Adjust vertical alignment of text content within the column */
/* This ensures the text is vertically centered if the image makes the column very tall */
.about-us-hero-row .col-lg-6:first-child { /* Targets the text column */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers content within the text column */
}


/* Responsive adjustments for smaller screens, to stack columns */
@media (max-width: 991.98px) { /* Bootstrap's 'lg' breakpoint for col-lg-6 */
    .about-us-hero-row {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center items when stacked */
        min-height: unset; /* Remove min-height when stacked */
    }
    .about-us-hero-row .col-lg-6:first-child {
        padding-bottom: 1rem; /* Add some space below text when stacked */
    }
    .about-us-hero-row .col-lg-6 img {
        height: auto; /* Allow image to scale naturally when stacked */
    }
}
@media (max-width: 520px) {
  #slide-chatbox-panel { width: 98vw !important; height: 70vh !important; right: 0; bottom: 0;}
}

/*.marquee-card {
    background: rgba(255,255,255,0.11);  
    backdrop-filter: blur(4px);          
    border: 1.5px solid rgba(255,255,255,0.16);
    box-shadow: 0 4px 24px 0 rgba(255,255,255,0.10);
    border-radius: 1.2rem;
}
*/

.marquee-card {
    background: rgba(46, 159, 194, 0.19);  /* very light blue-teal, translucent */
    border: 1.5px solid rgba(255,255,255,0.13);
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.18);
    border-radius: 1.2rem;
}

/* Light theme only for text guides page */
.light-theme {
    background-color: #f8f9fa;
    color: #212529;
}

.light-theme .card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

.light-theme .card-title {
    color: #0d6efd;
}

.light-theme .btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}
.light-theme .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
}

/* Sticky Search Bar */
.sticky-search {
    position: sticky;
    top: 0; /* Adjust based on navbar height */
    z-index: 1020; /* Keep above content */
    background-color: #f8f9fa;
}

.sticky-search .form-control {
    background-color: #fff;
    border-color: #ced4da;
    color: #212529;
}

.sticky-search .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.sticky-search .btn-primary:active,
.sticky-search .btn-primary:focus {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.sticky-search input::placeholder {
    color: #000;            /* black */
    opacity: 1;             /* ensure it's not faded */
}
/* For cross-browser support */
.sticky-search input::-webkit-input-placeholder {
    color: #000;
    opacity: 1;
}
.sticky-search input:-ms-input-placeholder {
    color: #000;
    opacity: 1;
}
.sticky-search input::-ms-input-placeholder {
    color: #000;
    opacity: 1;
}
.cards-container {
    padding-top: 2rem; /* 16px gap */
}
.guides-wrapper {
    max-height: calc(100vh - 180px); /* full height minus navbar + search + pagination space */
    overflow-y: auto;
}