/* Custom styles for Owl Carousel navigation */
.owl-nav {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
}

.owl-prev,
.owl-next {
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    border: none !important;
    padding: 10px 15px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    /* border-radius: 4px !important; */
}

    .owl-prev:hover,
    .owl-next:hover {
        background: rgba(0, 0, 0, 0.8) !important;
    }

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .owl-nav {
        top: 33.33% !important;
    }

    .owl-prev,
    .owl-next {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .owl-prev,
    .owl-next {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
}

/* ==============================================
   Primary nav next to the logo
   Home / Academics / About / Admission / Login now sit
   inline with the logo (like the reference screenshot),
   while Student Life / News & Events / Downloads stay in
   the blue bar below.
   ============================================== */

/* Turn the logo row into a flex row: logo left, nav right */
.tg-logoandnoticeboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tg-primarynav {
    float: none;
}

    .tg-primarynav .tg-navigation {
        width: auto;
        float: none;
    }

        .tg-primarynav .tg-navigation > ul {
            width: auto;
            float: none;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

            .tg-primarynav .tg-navigation > ul > li {
                float: none;
            }

                /* The default nav styling is white text (for the blue bar)  
   override to dark text since this nav sits on a white background */
                .tg-primarynav .tg-navigation > ul > li > a {
                    color: #003f7a;
                    border-right: none;
                    padding: 0 16px;
                    font-weight: 600;
                }

        /* Only change color on hover   the active/current page should look
   the same as the rest of the nav items, not stand out in red */
        .tg-primarynav .tg-navigation ul li:hover > a,
        .tg-primarynav .tg-navigation ul li > a:hover {
            color: #7dd3fc;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 6px;
            text-decoration-thickness: 2px;
        }

        /* The active page's top-level nav item gets an underline instead
   of the theme's default solid background box (css/color.css), which
   looked like an unwanted blue box on this white logo row. */
        .tg-primarynav .tg-navigation > ul > li.current-menu-item > a,
        .tg-primarynav .tg-navigation > ul > li:hover > a,
        .tg-primarynav .tg-navigation > ul > li > a:hover {
            background: none;
        }

        .tg-primarynav .tg-navigation > ul > li.current-menu-item > a {
            text-decoration: underline;
            text-underline-offset: 6px;
            text-decoration-thickness: 2px;
            text-decoration-color: #003f7a;
        }

    /* The theme sets li.menu-item-has-mega-menu to position:static
   (relying on a positioned ancestor further up to catch its absolutely-
   positioned dropdown). In the primary nav, that ancestor ends up being
   the Bootstrap grid column (Bootstrap always makes columns
   position:relative), not the "About" link itself   so the mega-menu
   was anchoring to the far left of the page instead of opening under
   "About". Make the <li> itself the anchor instead. */
    .tg-primarynav li.menu-item-has-mega-menu {
        position: relative;
    }

/* This nav is desktop-only; mobile keeps using the existing
   hamburger sidebar, which already lists every page */
@media (max-width: 800px) {
    .tg-primarynav {
        display: none;
    }
}

/* ==============================================
   Fixed / sticky header
   #tg-header wraps BOTH the logo/top nav row and
   the blue .tg-navigationarea sub-menu bar beneath it,
   so fixing this one element keeps both rows stuck
   together at the top when the visitor scrolls.
   ============================================== */
#tg-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    margin: 0;
    background: #ffffff;
    transition: box-shadow 0.25s ease;
}

/* Subtle shadow once the page has scrolled a bit, toggled by the
   small script at the bottom of includes/menuhead.php */
#tg-header.tg-header-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Header is now taken out of normal flow (position: fixed), so the page
   content needs matching top padding or it will sit underneath the header.
   The exact value is set on body by JS (see includes/menuhead.php) because
   the header's real height changes between the desktop and stacked
   mobile layouts. This is just a safe fallback before that JS runs. */
body {
    padding-top: 110px;
}

@media (max-width: 800px) {
    body {
        padding-top: 90px;
    }
}