#scrollTopBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: #0d6efd; /* Bootstrap primary */
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

#scrollTopBtn:hover {
  transform: translateY(-3px);
}





.bg-navbar{
    background-color: #edf9ff !important;
    height: 68px;
    overflow: visible; /* allow dropdown to extend outside the navbar */
    position: relative; /* create positioning context but not a stacking barrier */
    z-index: 0;
}

.navbar-logo img{
    vertical-align: middle;
}

.navbar-brand{
    align-items: center;
}

#welcome{
    font-weight: 800 !important;
}

.block-divider{
    width: 100%;
    height: 2.5rem;
    background-color: #eff1ff52;
    box-shadow: inset 0 .2em .6em #0000001a, inset 0 .125em .5em #00000026;
}

.navbar .container-fluid {
    overflow: visible; /* ensure the container doesn't clip the absolutely positioned menu */
}
.navbar { overflow: visible; } /* ensure the navbar element itself doesn't clip children */

.rotate-icon {
  transition: transform 0.3s ease;
}

button[aria-expanded="true"] .rotate-icon {
  transform: rotate(180deg);
}

/* small screens dropdown */
@media (max-width: 991.98px) {
    #mainNav {
        position: absolute;
        top: calc(100% + 0.4rem); /* place just below navbar and visibly outside */
        right: 0;
        left: auto;
        transform: none;
        z-index: 1200; /* above navbar and page content */
        min-width: 220px;
        background-color: #ffffff; /* explicit opaque background so the box is visible */
        border-radius: .5rem;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
        padding: .25rem .5rem;
        overflow: visible;
    }

    /* allow Bootstrap to control collapsed state; show only when opening (.collapsing) or open (.show) */
    #mainNav.collapsing {
        display: block !important;
        height: auto !important;
    }
    #mainNav.collapse {
        display: none !important; /* keep hidden when collapsed */
    }
    #mainNav.show {
        display: block !important;
        height: auto !important;
    }

    /* vertical stacked links inside the dropdown */
    #mainNav .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: .125rem;
    }

    #mainNav .nav-link {
        padding: .6rem .9rem;
        white-space: nowrap;
        display: block;
    }

    /* when collapsed menu is opened, render it fixed to viewport so no ancestor clips it */
    #mainNav.show {
        position: fixed !important;
        top: calc(68px + 8px) !important; /* navbar height + small gap */
        right: 12px !important;             /* align near toggler on right */
        left: auto !important;
        z-index: 1400 !important;
        width: auto !important;
        min-width: 220px;
        max-width: 360px;
        background-color: #ffffff !important; /* opaque box so rounded background is visible */
        border-radius: .5rem !important;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important;
        padding: .25rem .5rem !important;
    }

    /* keep the collapse from being clipped during Bootstrap's transition */
    #mainNav.collapsing {
        height: auto !important;
        transition: none !important;
        display: block !important;
    }

    /* ensure stacked links inside fixed box */
    #mainNav .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: .125rem;
    }

    #mainNav .nav-link {
        padding: .6rem .9rem;
        white-space: nowrap;
        display: block;
    }

    /* ensure toggler stays above the fixed box so it's visually connected */
    .navbar-toggler {
        position: relative;
        z-index: 1500;
    }
}

/* large screens: keep centered absolute behavior */
@media (min-width: 992px) {
    #mainNav{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    #mainNav .navbar-nav {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .para{
        text-size-adjust: 80%;
    }
}