/* ==========================Menu css======================================================================================= */


/* ==========================Menu css===============================
   MODERN GOVERNMENT NAVBAR
   ========================================================= */

:root {
    --navy: #12345b;
    --navy-dark: #0b2745;
    --orange: #e8751a;
    --orange-dark: #c85d0b;
    --orange-light: #fff4e9;
    --text: #26384d;
    --muted: #64748b;
    --white: #ffffff;
    --border: #e5eaf0;
    --shadow: 0 10px 30px rgba(15, 42, 70, .14);
}


/* =========================================================
   HEADER
   ========================================================= */

.custom-navbar {
    position: sticky;
    top: 0;
    z-index: 100;

    width: 100%;

    background: rgba(255,255,255,.97);

    border-top: 4px solid var(--navy);
    border-bottom: 1px solid #dce3eb;

    box-shadow: 0 4px 18px rgba(10,35,60,.08);

    padding: 0 20px;

    backdrop-filter: blur(12px);
}


/* Orange accent line */

.custom-navbar::after {
    content: "";

    position: absolute;

    bottom: -3px;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--orange),
        #f59e0b,
        var(--orange)
    );

    opacity: .9;
}


/* =========================================================
   MENU WRAPPER
   ========================================================= */

.cn-menu-wrapper {
    width: 100%;
}


/* =========================================================
   MAIN MENU
   ========================================================= */

.cn-nav-list {
    list-style: none;

    display: flex;

    align-items: stretch;

    justify-content: flex-start;

    margin: 0;
    padding: 0;

    gap: 15px;
}


/* =========================================================
   MENU ITEM
   ========================================================= */

.cn-nav-list > li {
    position: relative;
}


/* =========================================================
   MAIN LINK
   ========================================================= */

.cn-nav-list > li > a {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 64px;

    padding: 8px 13px;

    color: var(--navy);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.25;

    text-align: center;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease;
}


/* Remove paragraph margin */

.cn-nav-list > li > a p {
    margin: 0;
    padding: 0;
}


/* =========================================================
   MAIN UNDERLINE
   ========================================================= */

.cn-nav-list > li > a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: var(--orange);

    transform: translateX(-50%);

    transition: width .3s ease;
}


/* Hover / Active */

.cn-nav-list > li:hover > a,
.cn-nav-list > li.cn-open > a,
.cn-nav-list > li > a.active {

    color: var(--orange);
}


.cn-nav-list > li:hover > a::after,
.cn-nav-list > li.cn-open > a::after,
.cn-nav-list > li > a.active::after {

    width: 80%;
}


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

.cn-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 7px;

    width: 16px;
    height: 16px;

    font-size: 18px;

    color: var(--muted);

    transition:
        transform .3s ease,
        color .3s ease;
}


/* Main arrow */

.cn-nav-list > li:hover > a .cn-arrow,
.cn-nav-list > li.cn-open > a .cn-arrow {

    color: var(--orange);

    transform: rotate(180deg);
}


/* =========================================================
   ALL DROPDOWN LEVELS
   ========================================================= */

.cn-dropdown-menu {

    list-style: none;

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    min-width: 245px;

    margin: 0;

    padding: 8px;

    background: rgba(255,255,255,.98);

    border: 1px solid var(--border);

    border-top: 3px solid var(--orange);

    border-radius: 0 0 10px 10px;

    box-shadow: var(--shadow);

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px) scale(.98);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s;

    z-index: 10000;
}


/* =========================================================
   DROPDOWN POINTER
   ========================================================= */

.cn-dropdown > .cn-dropdown-menu::before {

    content: "";

    position: absolute;

    top: -8px;

    left: 28px;

    width: 13px;
    height: 13px;

    background: white;

    border-left: 1px solid var(--border);

    border-top: 1px solid var(--border);

    transform: rotate(45deg);
}


/* =========================================================
   SUB DROPDOWN (LEVEL 2 CHILD & LEVEL 3+ SUB-CHILD)
   ========================================================= */

/* Level 2 items (direct child of top navbar dropdown):
   Keep relative positioning so child menu opens adjacent to hovered item */
.cn-sub-dropdown {

    position: relative;
}


/* Default submenus position */
.cn-sub-dropdown > .cn-dropdown-menu {

    top: -12px;

    left: calc(100% + 4px);

    transform: translateX(10px) scale(.98);
}

/* Invisible hover bridge to prevent menu from closing when moving cursor across gap */
.cn-sub-dropdown > .cn-dropdown-menu::after {

    content: "";

    position: absolute;

    top: 0;

    left: -12px;

    width: 14px;

    height: 100%;

    background: transparent;

    pointer-events: auto;
}


/* =========================================================
   DESKTOP DROPDOWN SHOW & PARALLEL ALIGNMENT (> 1260px)
   ========================================================= */

@media (min-width: 1261px) {

    /* Level 2 Dropdown Show */

    .cn-dropdown:hover > .cn-dropdown-menu,
    .cn-dropdown:focus-within > .cn-dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0) scale(1);
    }


    /* Sub-Dropdowns:
       Keep position relative so submenus anchor adjacent to their hovered items.
       Tall submenus that would overflow are dynamically adjusted via viewport detection. */
    .cn-sub-dropdown,
    .cn-dropdown-menu .cn-dropdown-menu .cn-sub-dropdown {

        position: relative !important;
    }

    .cn-sub-dropdown > .cn-dropdown-menu,
    .cn-dropdown-menu .cn-dropdown-menu .cn-dropdown-menu {

        top: -9px !important;

        left: calc(100% + 4px) !important;

        transform: translateX(10px) scale(.98);
    }


    /* Level 3, Level 4, Level 5... Show */

    .cn-sub-dropdown:hover > .cn-dropdown-menu,
    .cn-sub-dropdown:focus-within > .cn-dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: translateX(0) scale(1);
    }


    /* Any nested submenu Show */

    .cn-dropdown-menu
    .cn-sub-dropdown:hover
    > .cn-dropdown-menu,
    .cn-dropdown-menu
    .cn-sub-dropdown:focus-within
    > .cn-dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: translateX(0) scale(1);
    }

    /* Active parent item highlight while exploring submenus */
    .cn-sub-dropdown:hover > .cn-dropdown-item {

        color: var(--orange) !important;

        background: var(--orange-light) !important;
    }

}


/* =========================================================
   DROPDOWN ITEM
   ========================================================= */

.cn-dropdown-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 11px 13px;

    color: var(--text);

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    text-decoration: none;

    border-radius: 7px;

    transition:
        color .2s ease,
        background .2s ease,
        padding-left .2s ease;
}


.cn-dropdown-item:hover,
.cn-dropdown-item.active {

    color: var(--orange);

    background: var(--orange-light);

    padding-left: 18px;
}


/* =========================================================
   SUBMENU ARROW
   ========================================================= */

.cn-sub-dropdown > .cn-dropdown-item .cn-arrow {

    transform: rotate(0deg);

}


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

.cn-toggler {

    display: none;

    width: 45px;
    height: 40px;

    margin: 10px 0;

    color: var(--navy);

    background: white;

    border: 1px solid #d7e0e9;

    border-radius: 7px;

    font-size: 21px;

    cursor: pointer;

    transition: .2s;
}


.cn-toggler:hover {

    color: white;

    background: var(--navy);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1261px) {

    .custom-navbar {

        padding: 0 65px;
    }


    .cn-menu-wrapper {

        display: block !important;
    }


    .cn-nav-list {

        flex-direction: row;
    }

}


/* =========================================================
   MOBILE & TABLET (<= 1260px)
   ========================================================= */

@media (max-width: 1260px) {

    .custom-navbar {

        padding: 0 15px;
    }


    .cn-toggler {

        display: block;
    }


    .cn-menu-wrapper {

        display: none;
    }


    .cn-menu-wrapper.cn-show {

        display: block;
    }


    .cn-nav-list {

        display: flex;

        flex-direction: column;

        padding-bottom: 12px;

        gap: 0;
    }


    /* Main mobile link */

    .cn-nav-list > li > a {

        min-height: 48px;

        justify-content: space-between;

        padding: 13px 15px;

        font-size: 14px;

        text-align: left;

        border-bottom: 1px solid #edf1f5;
    }


    .cn-nav-list > li > a::after {

        display: none;
    }


    /* =====================================================
       ALL MOBILE SUBMENU LEVELS
       ===================================================== */

    .cn-dropdown-menu {

        position: static;

        display: none;

        width: 100%;

        min-width: 0;

        margin: 0;

        padding: 6px;

        background: #fffaf5;

        border: 0;

        border-left: 3px solid var(--orange);

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;
    }


    /* Level 2 open */

    .cn-dropdown.cn-open > .cn-dropdown-menu {

        display: block;
    }


    /* Level 3+ open */

    .cn-sub-dropdown.cn-open > .cn-dropdown-menu {

        display: block;
    }


    /* Nested level */

    .cn-dropdown-menu
    .cn-sub-dropdown
    .cn-dropdown-menu {

        margin-left: 10px;

        background: #fff;

        border-left: 2px solid #f1b27a;
    }


    /* Dropdown links */

    .cn-dropdown-item {

        padding: 11px 14px;

        font-size: 13px;
    }


    /* Mobile arrow */

    .cn-sub-dropdown > .cn-dropdown-item .cn-arrow {

        transform: rotate(0deg);
    }


    .cn-sub-dropdown.cn-open
    > .cn-dropdown-item
    .cn-arrow {

        transform: rotate(90deg);
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.cn-nav-list a:focus-visible,
.cn-toggler:focus-visible {

    outline: 3px solid rgba(232,117,26,.35);

    outline-offset: 2px;
}


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

.cn-nav-list > li > a.active {

    color: var(--orange);
}












/* ======================    Header Css============================================================================================ */

.cn-dropdown-menu {

    scrollbar-width: thin;

    scrollbar-color:
        var(--orange)
        #f5f5f5;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */
  .modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center; align-items: center;

  .logo-container {
    width: 100%;           /* Ensures the div spans the full width of its parent */
    display: flex;         /* Enables Flexbox on the container */
    justify-content: center; /* Centers the content (logo) horizontally */
    align-items: center;   /* Centers the content (logo) vertically (if container has height) */
    /* Optional: Add a specific height or padding for visible vertical centering */
    // height: 100px;
    /* Optional: Add a background color to see the 100% width in action */
    background-color: white; 
}

.logo {
  /* You can set a specific width or max-width for the logo image */
  max-width: 500px; 
  height: auto; /* Maintains the aspect ratio */
}
}
.show-modal { display: flex; } /* Class to show the modal */








/* =========================================================
   TOP SLIDER SECTION ENHANCEMENT & RESPONSIVENESS (#slidetop1)
   - Fits slider and animated ticker (#newsTicker15) on first view without scrolling (1280px to 1700px)
   - Proper width/height scaling with zero empty space or horizontal overflow (480px to 1200px)
   - Clean play/pause button and dots controls positioning across all devices
   ========================================================= */

.topsliderrow {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.topsliderrow .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.topsliderrow .row {
  margin: 0 !important;
  padding: 0 !important;
}

.topsliderrow .col-sm-12 {
  padding: 0 !important;
  margin: 0 !important;
}

.slidetop1 {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.slidetop1 #owlnew {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slidetop1 #owlnew .item {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.slidetop1 #owlnew .item img,
.slidetop1 .abc,
.abc {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Play/Pause Buttons on Slider */
.play-btn1 {
  position: absolute !important;
  z-index: 141 !important;
  right: 25px !important;
  left: auto !important;
  bottom: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.play-btn1 button,
.play-btn1 .play_slider,
.play-btn1 .stop_slider {
  width: 30px !important;
  height: 30px !important;
  background: #e8751a !important;
  border: none !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: background 0.2s ease !important;
}

.play-btn1 button:hover,
.play-btn1 .play_slider:hover,
.play-btn1 .stop_slider:hover {
  background: #d4630e !important;
}

/* Dots Navigation */
.slidetop1 #owlnew .owl-dots {
  position: absolute !important;
  bottom: 15px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  z-index: 140 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
}

/* Carousel Caption */
.slidetop1 .carousel-caption {
  position: absolute !important;
  left: 30px !important;
  bottom: 15px !important;
  right: auto !important;
  text-align: left !important;
  z-index: 140 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* News Ticker Bar (#newsTicker15) directly beneath slider */
.breaking-news-ticker {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 90 !important;
}

/* =========================================================
   BREAKPOINTS: HEIGHT & WIDTH TUNING
   ========================================================= */

/* Extra Large Screens (> 1700px): Preserved as per user feedback */
@media (min-width: 1701px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 621px !important;
  }
}

/* Laptops & Standard Desktops (1280px to 1700px):
   Fits slider + controls + animated ticker bar (#newsTicker15) on first view without scrolling */
@media (min-width: 1280px) and (max-width: 1700px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 521px !important;
  }
}

/* Viewport height adjustments for zoomed displays (e.g. 110% - 150% zoom on 1280px+) */
@media (min-width: 1280px) and (max-height: 760px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 466px !important;
  }
}

@media (min-width: 1280px) and (max-height: 670px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 408px !important;
  }
}

/* Small Desktops & Large Tablets (992px to 1279px) */
@media (min-width: 992px) and (max-width: 1279px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 370px !important;
  }
  .play-btn1 {
    right: 20px !important;
    bottom: 12px !important;
  }
}

/* Medium Tablets (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 320px !important;
  }
  .play-btn1 {
    right: 15px !important;
    bottom: 12px !important;
  }
  .play-btn1 button,
  .play-btn1 .play_slider,
  .play-btn1 .stop_slider {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}

/* Small Tablets / Large Mobile (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 250px !important;
  }
  .play-btn1 {
    right: 12px !important;
    bottom: 10px !important;
    gap: 4px !important;
  }
  .play-btn1 button,
  .play-btn1 .play_slider,
  .play-btn1 .stop_slider {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }
  .slidetop1 #owlnew .owl-dots {
    bottom: 10px !important;
  }
}

/* Mobile Screens (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 220px !important;
  }
  .play-btn1 {
    right: 10px !important;
    bottom: 8px !important;
    gap: 4px !important;
  }
  .play-btn1 button,
  .play-btn1 .play_slider,
  .play-btn1 .stop_slider {
    width: 24px !important;
    height: 24px !important;
    font-size: 9px !important;
  }
  .slidetop1 #owlnew .owl-dots {
    bottom: 8px !important;
  }
}

/* Small Mobile Screens (< 480px) */
@media (max-width: 479px) {
  .slidetop1 #owlnew .item img,
  .slidetop1 .abc,
  .abc {
    height: 190px !important;
  }
  .play-btn1 {
    right: 8px !important;
    bottom: 6px !important;
    gap: 3px !important;
  }
  .play-btn1 button,
  .play-btn1 .play_slider,
  .play-btn1 .stop_slider {
    width: 22px !important;
    height: 22px !important;
    font-size: 9px !important;
  }
  .slidetop1 #owlnew .owl-dots {
    bottom: 6px !important;
  }
}