/* =========================================================
   P.T. LEE CHENGALVARAYA NAICKER TRUST
   NAVIGATION
========================================================= */


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.trust-navbar {

    width: 100%;

    position: relative;

    z-index: 5000;

    background:
        linear-gradient(
            135deg,
            #08002d 0%,
            #160052 45%,
            #0b2868 100%
        );

    box-shadow:
        0 8px 25px rgba(
            10,
            20,
            60,
            0.20
        );

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;

}


/* =========================================================
   STICKY NAVIGATION
========================================================= */

.trust-navbar.scrolled {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 99999;

    box-shadow:
        0 10px 30px rgba(
            0,
            0,
            0,
            0.25
        );

    animation:
        stickyNavIn 0.35s ease forwards;

}


@keyframes stickyNavIn {

    from {

        opacity: 0;

        transform:
            translateY(-100%);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   NAV CONTAINER
========================================================= */

.nav-container {

    width: 100%;

    max-width: 1500px;

    min-height: 58px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 3px;

}


/* =========================================================
   MAIN NAVIGATION LINKS
========================================================= */

.nav-link {

    min-height: 58px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    position: relative;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;

}


/* =========================================================
   NAV ICON
========================================================= */

.nav-link i {

    font-size: 14px;

}


/* =========================================================
   BOTTOM HIGHLIGHT LINE
========================================================= */

.nav-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 3px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #e2134f,
            #8b35ff,
            #356ce2
        );

    transition:
        width 0.3s ease;

}


/* =========================================================
   HOVER HIGHLIGHT
       
   IMPORTANT:
   This only highlights the menu.
   It does NOT open the dropdown.
========================================================= */

.nav-link:hover {

    color: #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.nav-link:hover::after {

    width: 70%;

}


/* =========================================================
   ACTIVE PAGE
========================================================= */

.nav-link.active {

    color: #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.nav-link.active::after {

    width: 70%;

}


/* =========================================================
   DROPDOWN CONTAINER
========================================================= */

.nav-dropdown {

    position: relative;

    display: flex;

    align-items: stretch;

}


/* =========================================================
   DROPDOWN TOGGLE
========================================================= */

.dropdown-toggle {

    cursor: pointer;

}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.nav-dropdown .arrow {

    font-size: 9px;

    transition:
        transform 0.3s ease;

}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.nav-dropdown-menu {

    position: absolute;

    top: 100%;

    left: 50%;

    width: 235px;

    padding: 8px;

    transform:
        translateX(-50%)
        translateY(10px);

    background: #ffffff;

    border:
        1px solid
        rgba(
            53,
            108,
            226,
            0.15
        );

    border-radius:
        0 0 12px 12px;

    box-shadow:
        0 15px 35px
        rgba(
            15,
            30,
            80,
            0.20
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

}


/* =========================================================
   CLICK OPEN
       
   IMPORTANT:
   Dropdown opens ONLY when JS adds .open.
   There is NO :hover dropdown opening.
========================================================= */

.nav-dropdown.open
.nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =========================================================
   OPEN ARROW
========================================================= */

.nav-dropdown.open
.arrow {

    transform:
        rotate(180deg);

}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.nav-dropdown-menu a {

    display: block;

    width: 100%;

    padding:
        11px 13px;

    color: #172033;

    text-decoration: none;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12.5px;

    font-weight: 500;

    line-height: 1.45;

    border-radius: 8px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;

}


/* =========================================================
   DROPDOWN LINK HOVER HIGHLIGHT
========================================================= */

.nav-dropdown-menu a:hover {

    color: #e2134f;

    background:
        linear-gradient(
            90deg,
            rgba(
                226,
                19,
                79,
                0.08
            ),
            rgba(
                53,
                108,
                226,
                0.08
            )
        );

    transform:
        translateX(3px);

}


/* =========================================================
   ACTIVE DROPDOWN LINK
========================================================= */

.nav-dropdown-menu a.active {

    color: #e2134f;

    background:
        linear-gradient(
            90deg,
            rgba(
                226,
                19,
                79,
                0.08
            ),
            rgba(
                53,
                108,
                226,
                0.08
            )
        );

}


/* =========================================================
   INSTITUTION DROPDOWN
========================================================= */

.institution-menu {

    width: 340px;

}


.institution-menu a {

    font-size: 12px;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {

    display: none;

    border: 0;

    outline: none;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    color: #ffffff;

    padding:
        8px 14px;

    border-radius: 8px;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    gap: 7px;

}


.mobile-menu-btn i {

    font-size: 17px;

    transition:
        transform 0.3s ease;

}


.mobile-menu-btn.active i {

    transform:
        rotate(90deg);

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 991px) {


    /* -----------------------------------------------------
       NAV CONTAINER
    ----------------------------------------------------- */

    .nav-container {

        min-height: 54px;

        padding:
            7px 15px;

        justify-content:
            flex-end;

        position: relative;

    }


    /* -----------------------------------------------------
       STICKY MOBILE NAV
    ----------------------------------------------------- */

    .trust-navbar.scrolled {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        width: 100%;

        z-index: 99999;

    }


    /* -----------------------------------------------------
       MOBILE BUTTON
    ----------------------------------------------------- */

    .mobile-menu-btn {

        display: inline-flex;

        margin-left: auto;

    }


    /* -----------------------------------------------------
       HIDE NAVIGATION BY DEFAULT
    ----------------------------------------------------- */

    .nav-container > .nav-link,

    .nav-container > .nav-dropdown {

        display: none;

        width: 100%;

    }


    /* -----------------------------------------------------
       SHOW NAVIGATION WHEN MOBILE MENU OPEN
    ----------------------------------------------------- */

    .trust-navbar.mobile-open
    .nav-container > .nav-link,

    .trust-navbar.mobile-open
    .nav-container > .nav-dropdown {

        display: block;

    }


    /* -----------------------------------------------------
       MOBILE COLUMN
    ----------------------------------------------------- */

    .trust-navbar.mobile-open
    .nav-container {

        flex-direction: column;

        align-items: stretch;

    }


    /* -----------------------------------------------------
       MOBILE BUTTON POSITION
    ----------------------------------------------------- */

    .trust-navbar.mobile-open
    .mobile-menu-btn {

        align-self: flex-end;

        margin-bottom: 5px;

    }


    /* -----------------------------------------------------
       MOBILE NAV LINK
    ----------------------------------------------------- */

    .nav-link {

        width: 100%;

        min-height: 50px;

        justify-content:
            flex-start;

        padding:
            0 20px;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.07
            );

    }


    /* -----------------------------------------------------
       REMOVE DESKTOP BOTTOM LINE
    ----------------------------------------------------- */

    .nav-link::after {

        display: none;

    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN
    ----------------------------------------------------- */

    .nav-dropdown {

        width: 100%;

        display: block;

    }


    .nav-dropdown >
    .nav-link {

        width: 100%;

    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN MENU
    ----------------------------------------------------- */

    .nav-dropdown-menu,

    .institution-menu {

        position: static;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        padding: 0;

        transform: none;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        background:
            rgba(
                0,
                0,
                0,
                0.18
            );

        transition:
            max-height 0.35s ease,
            opacity 0.3s ease,
            visibility 0.3s ease;

    }


    /* -----------------------------------------------------
       MOBILE OPEN
    ----------------------------------------------------- */

    .nav-dropdown.open
    .nav-dropdown-menu {

        max-height: 700px;

        padding:
            6px 10px;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    /* -----------------------------------------------------
       MOBILE ARROW
    ----------------------------------------------------- */

    .nav-dropdown.open
    .arrow {

        transform:
            rotate(180deg);

    }


    /* -----------------------------------------------------
       MOBILE SUBMENU LINKS
    ----------------------------------------------------- */

    .nav-dropdown-menu a {

        color:
            rgba(
                255,
                255,
                255,
                0.92
            );

        padding:
            11px 20px 11px 42px;

        border-radius: 6px;

    }


    /* -----------------------------------------------------
       MOBILE SUBMENU HOVER
    ----------------------------------------------------- */

    .nav-dropdown-menu a:hover {

        color: #ffffff;

        background:
            rgba(
                255,
                255,
                255,
                0.08
            );

        transform: none;

    }


    /* -----------------------------------------------------
       MOBILE ACTIVE SUBMENU
    ----------------------------------------------------- */

    .nav-dropdown-menu a.active {

        color: #ffffff;

        background:
            rgba(
                255,
                255,
                255,
                0.08
            );

        transform: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .nav-container {

        padding:
            6px 10px;

    }


    .mobile-menu-btn {

        padding:
            8px 13px;

    }


    .nav-link {

        font-size: 12px;

        padding:
            0 15px;

    }


    .nav-dropdown-menu a {

        font-size: 11.5px;

    }

}