/* =========================================================
   COMMON HEADER & MENU
   THENI ANU'S E-SEVAI
   ========================================================= */

.common-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;

    background: #ffffff;

    display: flex;
    align-items: center;

    padding: 8px 4.5%;

    z-index: 9999;

    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}


/* =========================================================
   LOGO + SITE NAME
   ========================================================= */

.common-logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: 12px;
}

.common-logo img {
    width: 62px;
    height: 62px;

    object-fit: contain;

    display: block;
}

.common-site-name {
    color: #004aad;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.15;

    text-align: center;

    width: 145px;

    text-decoration: none;

    white-space: normal;
}

.common-site-name:hover {
    color: #004aad;
}


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

.common-nav {
    flex: 1;

    margin-left: 25px;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* =========================================================
   MENU LIST
   ========================================================= */

#commonMenu {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0;

    list-style: none;

    margin: 0;
    padding: 0;

    white-space: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
}

#commonMenu::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

#commonMenu li a {
    display: block;

    color: #222222;

    font-size: 17px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    padding: 10px 10px;

    transition: all 0.25s ease;
}


/* Hover */

#commonMenu li a:hover {
    color: #004aad;
}


/* Active menu */

#commonMenu li a.common-active {
    color: #0066ff;
}


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

.common-menu-button {

    display: none;

    width: 44px;
    height: 44px;

    border: none;

    background: transparent;

    cursor: pointer;

    padding: 7px;
}


/* Hamburger lines */

.common-menu-button span {

    display: block;

    width: 28px;
    height: 3px;

    background: #222222;

    margin: 5px auto;

    border-radius: 3px;

    transition: all 0.3s ease;
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .common-header {
        padding-left: 2%;
        padding-right: 2%;
    }

    .common-nav {
        margin-left: 10px;
    }

    #commonMenu li a {
        font-size: 16px;
        padding-left: 9px;
        padding-right: 9px;
    }

}


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

@media (max-width: 900px) {

    .common-header {

        height: 72px;

        padding: 5px 15px;
    }


    .common-logo {
        gap: 8px;
    }


    .common-logo img {

        width: 50px;
        height: 50px;
    }


    .common-site-name {

        font-size: 16px;

        width: 115px;
    }


    .common-nav {

        margin-left: auto;

        flex: 0 0 auto;

        position: relative;
    }


    /* Hamburger visible */

    .common-menu-button {

        display: block;
    }


    /* Hide desktop menu initially */

    #commonMenu {

        display: none;

        position: absolute;

        top: 55px;

        right: 0;

        width: 250px;

        max-height: calc(100vh - 90px);

        overflow-y: auto;

        overflow-x: hidden;

        background: #ffffff;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        padding: 8px 0;

        border-radius: 8px;

        box-shadow: 0 5px 20px rgba(0,0,0,0.20);
    }


    /* Mobile menu active */

    #commonMenu.common-menu-open {

        display: flex;
    }


    #commonMenu li {

        width: 100%;
    }


    #commonMenu li a {

        width: 100%;

        padding: 13px 18px;

        font-size: 16px;

        text-align: left;

        white-space: nowrap;
    }


    #commonMenu li a:hover {

        background: #f1f5ff;

        color: #004aad;
    }

}


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

@media (max-width: 480px) {

    .common-site-name {

        font-size: 14px;

        width: 105px;
    }

    .common-logo img {

        width: 45px;
        height: 45px;
    }

    #commonMenu {

        width: 230px;
    }

}
/* =========================================================
   COMMON HEADER - FINAL FIX
   ========================================================= */

/* Fixed header */
.common-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;

    display: flex;
    align-items: center;

    padding: 6px 35px;

    background: #fff;

    z-index: 9999;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   LOGO + SITE NAME
   ========================================================= */

.common-logo {
    flex: 0 0 285px;
    width: 285px;
    min-width: 285px;

    display: flex;
    align-items: center;

    gap: 12px;
}


/* Logo */

.common-logo img {
    width: 62px;
    height: 62px;

    object-fit: contain;

    flex-shrink: 0;
}


/* Site name */

.common-site-name {
    font-size: 20px !important;
    line-height: 1.2;

    text-align: center;

    white-space: normal;

    color: #004aad !important;

    text-decoration: none !important;

    font-weight: 500;
}


/* =========================================================
   NAVIGATION AREA
   ========================================================= */

.common-nav {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    display: flex;

    align-items: center;
}


/* Menu */

#commonMenu {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: nowrap;

    gap: 0;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;

    white-space: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;
}

#commonMenu::-webkit-scrollbar {
    display: none;
}


/* Each menu item */

#commonMenu li {
    flex: 0 0 auto;

    white-space: nowrap;

    margin: 0;
    padding: 0;
}


/* Menu links */

#commonMenu li a {
    display: block;

    white-space: nowrap;

    color: #222;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    padding: 9px 9px;

    transition: 0.25s;
}


/* Hover */

#commonMenu li a:hover {
    color: #0066ff;
}


/* =========================================================
   FIX CONTENT GOING BEHIND FIXED HEADER
   ========================================================= */

/*
   #common-menu itself has no height because the actual
   header is fixed. Therefore give the first page content
   92px top space.
*/

#common-menu + * {
    margin-top: 92px !important;
}


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

@media (max-width: 768px) {

    .common-header {
        height: 75px;

        padding: 5px 12px;
    }


    .common-logo {
        flex: 0 0 205px;

        width: 205px;

        min-width: 205px;

        gap: 7px;
    }


    .common-logo img {
        width: 52px;
        height: 52px;
    }


    .common-site-name {
        font-size: 16px !important;
    }


    .common-nav {
        min-width: 0;
    }


    #commonMenu li a {
        font-size: 14px;

        padding: 8px 7px;
    }


    #common-menu + * {
        margin-top: 75px !important;
    }

}
/* =========================================================
   MOBILE COMMON MENU
   ========================================================= */

.common-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border: none;
    background: transparent;

    padding: 7px;

    cursor: pointer;

    flex-shrink: 0;
}


/* Hamburger lines */

.common-menu-button span {
    display: block;

    width: 27px;
    height: 3px;

    margin: 5px auto;

    background: #004aad;

    border-radius: 3px;

    transition: 0.3s;
}


/* =========================================================
   COMMON MENU - MOBILE FINAL FIX
   ========================================================= */

@media (max-width: 768px) {

    /* HEADER */
    .common-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 75px !important;

        display: flex !important;
        align-items: center !important;

        padding: 5px 10px !important;

        background: #ffffff !important;

        z-index: 99999 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LOGO AREA
       ===================================================== */

    .common-logo {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 6px !important;
    }


    .common-logo img {
        width: 50px !important;
        height: 50px !important;

        flex-shrink: 0 !important;
    }


    .common-site-name {
        font-size: 15px !important;

        line-height: 1.15 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        color: #004aad !important;
    }


    /* =====================================================
       NAV AREA
       ===================================================== */

    .common-nav {
        flex: 0 0 auto !important;

        width: auto !important;

        min-width: 45px !important;

        overflow: visible !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;
    }


    /* =====================================================
       HAMBURGER BUTTON
       ===================================================== */

    .common-menu-button {
        display: block !important;

        width: 42px !important;
        height: 42px !important;

        padding: 5px !important;

        margin: 0 !important;

        border: none !important;

        background: transparent !important;

        cursor: pointer !important;

        flex-shrink: 0 !important;

        z-index: 100001 !important;
    }


    .common-menu-button span {
        display: block !important;

        width: 26px !important;
        height: 3px !important;

        margin: 5px auto !important;

        background: #004aad !important;

        border-radius: 3px !important;
    }


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

    #commonMenu {

        /* VERY IMPORTANT */
        display: none !important;

        position: fixed !important;

        top: 75px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100vw !important;

        max-width: 100vw !important;

        height: auto !important;

        max-height: calc(100vh - 75px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        margin: 0 !important;
        padding: 5px 0 !important;

        list-style: none !important;

        background: #ffffff !important;

        box-shadow: 0 8px 20px rgba(0,0,0,0.20) !important;

        z-index: 100000 !important;

        box-sizing: border-box !important;
    }


    /* OPEN MENU */

    #commonMenu.mobile-open {

        display: flex !important;
    }


    /* =====================================================
       MENU ITEMS
       ===================================================== */

    #commonMenu li {

        display: block !important;

        width: 100% !important;

        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 1px solid #eeeeee !important;

        white-space: nowrap !important;
    }


    #commonMenu li a {

        display: block !important;

        width: 100% !important;

        padding: 13px 20px !important;

        margin: 0 !important;

        font-size: 16px !important;

        font-weight: 600 !important;

        text-align: left !important;

        color: #222222 !important;

        background: #ffffff !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    #commonMenu li a:hover {

        color: #004aad !important;

        background: #f1f6ff !important;
    }


    /* =====================================================
       PAGE CONTENT SPACE
       ===================================================== */

    #common-menu {

        display: block !important;

        width: 100% !important;

        height: 75px !important;
    }

}