.header {
     width: 100%;
     background: linear-gradient(135deg,
             var(--primary),
             var(--primary-dark));
     position: sticky;
     top: 0;
     z-index: 9999;
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
     background: #254D32;
 }

 .nav_container {
     max-width: 1400px;
     margin: auto;
     padding: 0 20px;
     height: 78px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

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

 .logo {
     display: flex;
     align-items: center;
     gap: 14px;
     text-decoration: none;
     color: #fff;
 }

 .logo img {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     object-fit: cover;
 }

 .logo_text h2 {
     font-size: 20px;
     font-weight: 700;
     line-height: 1.1;
 }

 .logo_text span {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.75);
 }

 /* =========================
           NAV MENU
        ========================= */

 .nav_menu {
     display: flex;
     /*  align-items: center; */
 }

 .nav_links {
     display: flex;
     align-items: center;
     list-style: none;
     gap: 6px;
 }

 .nav_links>li {
     position: relative;
 }

 .nav_links>li>a {
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     color: #fff;
     padding: 14px 18px;
     border-radius: 12px;
     font-size: 15px;
     font-weight: 500;
     transition: 0.3s ease;
 }

 .nav_links>li>a:hover {
     background: rgba(255, 255, 255, 0.08);
 }

 .arrow {
     font-size: 11px;
     transition: 0.3s ease;
 }

 .has_dropdown:hover .arrow,
 .has_mega:hover .arrow {
     transform: rotate(180deg);
 }

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

 .dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     width: 280px;
     background: #fff;
     border-radius: 18px;
     padding: 18px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(12px);
     transition: 0.3s ease;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
 }

 .has_dropdown:hover .dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown a {
     display: flex;
     align-items: center;
     justify-content: space-between;
     text-decoration: none;
     color: #163844;
     padding: 14px;
     border-radius: 12px;
     margin-bottom: 6px;
     transition: 0.3s ease;
     font-size: 14px;
     font-weight: 500;
 }

 .dropdown a:hover {
     background: #f3f7f8;
     padding-left: 18px;
 }

 /* =========================
           MEGA MENU
        ========================= */

 .mega_menu {
     position: absolute;

     top: calc(100% + 0px);
     left: 50%;



     width: 800px;


     background: #fff;
     border-radius: 5px;
     padding: 28px;

     display: grid;
     align-items: flex-start;
     grid-template-columns: 320px 1fr;
     gap: 24px;

     opacity: 0;
     visibility: hidden;



     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.14);

     z-index: 9999;
     left: 50%;

     transform: translateX(-10%);
 }

 .has_mega {
     position: relative;
     display: flex;
     align-items: center;
 }

 .mega_menu_about {
     grid-template-columns: 2fr;
 }

 .mega_menu_rd {
     grid-template-columns: 1fr;
 }

 .has_mega {
     position: relative;
 }

 .has_mega:hover .mega_menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-10%);
 }

 .mega_menu_media {
     transform: translateX(-80%);
 }

 .mega_menu_max_600 {
     max-width: 600px;
 }

 .has_mega:hover .mega_menu_media {
     transform: translateX(-80%);
 }

 /* =========================
           LEFT SECTION
        ========================= */

 .mega_highlight {
     background: var(--accent-1);
     border-radius: 5px;
     padding: 10px 10px;
     color: var(--background-color-1);
     max-width: 280px;
 }

 .mega_highlight img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     border-radius: 5px;
     margin-bottom: 10px;
 }

 .mega_highlight h3 {
     font-size: 22px;
     margin-bottom: 7px;
 }

 .mega_highlight p {
     font-size: 14px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.88);
     margin-bottom: 10px;
 }

 .btn {

     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.12);
     padding: 12px 18px;
     border-radius: 12px;
     color: var(--background-color-1);
     text-decoration: none;
     transition: 0.3s ease;
 }

 .btn:hover {
     background: rgba(255, 255, 255, 0.22);
 }

 /* =========================
           RIGHT GRID
        ========================= */

 .mega_grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
 }

 .mega_grid_1_col {
     grid-template-columns: repeat(1, 1fr);
 }

 .mega_grid_about {
     grid-template-columns: repeat(2, 1fr);
 }

 .mega_card {
     border: 1px solid #edf2f4;
     border-radius: 5px;
     padding: 10px;
     transition: 0.3s ease;
     background: var(--background-color-1);
 }



 .mega_card>a {
     text-decoration: none;
     color: #163844;
 }

 .mega_card i {
     font-size: 22px;
     margin-bottom: 12px;
     color: var(--primary);
 }

 .mega_card h4 {
     font-size: 16px;
     margin-bottom: 8px;
     font-weight: 500;
 }

 .mega_card p {
     font-size: 13px;
     color: #64748b;
     line-height: 1.6;
 }

 /* =========================
           RESEARCH MENU
        ========================= */

 .inner_links {
     margin-top: 18px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .inner_links a {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     text-decoration: none;
     color: #163844;
     font-size: 14px;
     font-weight: 500;
     padding: 12px 14px;
     border-radius: 12px;
     transition: 0.3s ease;
     background: var(--background-color-3);
 }

 .inner_links_media a {
     justify-content: unset;
 }

 .inner_links a:hover {
     background: #edf5f7;
     transform: translateX(4px);
 }

 .inner_links a i {
     color: var(--primary);
     font-size: 14px;
     margin: 0;
 }

 .no_top {
     margin-top: 0;
 }

 .no_top a {
     background: var(--background-color-1);
     border: 1px solid #edf2f4;
 }

 .no_top a:hover {
     background: #f5f9fa;
 }

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

 .mobile_toggle {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.08);
     display: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--text-color-white);
     font-size: 22px;
     position: relative;
     z-index: 10001;
 }

 /* =========================
           overlay_nav
        ========================= */

 .overlay_nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.45);

     opacity: 0;
     visibility: hidden;

     transition: 0.3s ease;

     z-index: 9998;
 }

 .overlay_nav.active {
     opacity: 1;
     visibility: visible;
 }

 .dir-card {
     padding: 16px;
     border-radius: 5px;
     border: 1px solid #eee;
     transition: 0.3s;
     border: 1px solid #DCE5EA;
 }

 .dir-card .dir-title {
     font-weight: 500;
     color: var(--text-color-1);
 }

 .dir-title a {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-decoration: none;
     color: var(--primary);
     font-size: 0.95rem;
 }

 .dir-title span {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .directorate-mega .dir-title i {
     color: var(--primary);
 }

 .social_grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
 }

 .social_card {
     position: relative;

     display: flex;
     align-items: center;
     gap: 14px;

     padding: 18px 10px;
     border-radius: 10px;

     text-decoration: none;
     overflow: hidden;

     color: var(--background-color-3);

     transition: 0.3s ease;
 }

 .social_card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 }

 .social_card i {
     width: 46px;
     height: 46px;
     margin-bottom: 0px;
     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 50%;

     background: var(--background-color-1);
     font-size: 1.2rem;
 }

 .social_card span {
     font-size: 15px;
     font-weight: 500;
     letter-spacing: 0.2px;
 }

 /* FACEBOOK */

 .social_card:nth-child(1) {
     background: linear-gradient(135deg, #1877f2, #0f5fd7);
 }

 /* X / TWITTER */

 .social_card:nth-child(2) {
     background: linear-gradient(135deg, #1f2937, #000000);
 }

 /* YOUTUBE */

 .social_card:nth-child(3) {
     background: linear-gradient(135deg, #ff0000, #c40000);
 }

 /* INSTAGRAM */

 .social_card:nth-child(4) {
     background: linear-gradient(135deg,
             #f58529,
             #dd2a7b,
             #8134af,
             #515bd4);
 }

 @media(max-width:1100px) {

     .mega_menu {
         width: 760px;
     }

 }

 @media(max-width:992px) {
     .nav_container {
         justify-content: flex-end;
     }

     .mobile_toggle {
         display: flex;
     }

     .nav_menu {
         position: fixed;
         padding: 0px 20px;
         top: 0;
         left: 0;

         width: 90%;
         /*    max-width: 85%; */

         height: 100vh;
         background: var(--background-color-1);

         overflow-y: auto;

         transform: translateX(-100%);
         transition: transform 0.4s ease;

         z-index: 10000;

         box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
     }

     .nav_menu.active {
         width: 80%;
         transform: translateX(0);
     }

     .nav_links {
         flex-direction: column;
         align-items: flex-start;
         gap: 0;
     }

     .nav_links>li {
         width: 100%;
         border-bottom: 1px solid #edf2f4;
     }

     .nav_links>li>a {
         color: #163844;
         width: 100%;
         justify-content: space-between;
         padding: 18px 0;
         border-radius: 0;
     }

     .dropdown,
     .mega_menu {
         position: static;
         width: 100%;
         opacity: 1;
         visibility: visible;
         transform: none;
         display: none;
         box-shadow: none;
         padding: 10px 0 10px 12px;
         border-radius: 0;
         background: transparent;

         max-height: 65vh;
         overflow-y: auto;
         background: #f7fafb;
         padding: 20px;
         animation: slideDown 0.3s ease;
         left: auto;
         right: auto;
         transform: none !important;
     }

     .has_dropdown.open .dropdown,
     .has_mega.open .mega_menu {
         display: block;
     }

     .mega_menu {
         grid-template-columns: 1fr;
     }

     .mega_grid {
         grid-template-columns: 1fr;
     }

     .mega_highlight {
         margin-bottom: 20px;
     }

     .nav_links {
         width: 100%;
     }

     .has_mega.open>a,
     .has_dropdown.open>a {
         font-weight: 600;
     }

     .has_mega.open,
     .has_dropdown.open {
         /*  background: #f7fafb; */
         /*    padding: 0px 20px; */
     }

     .has_mega {
         display: block;
     }

 }

 @media(max-width:600px) {
     .dir-title a {
         font-size: 0.75rem;
     }

     .nav_container {
         height: 72px;
         padding: 0 4px;
     }

     .logo_text h2 {
         font-size: 16px;
     }

     .logo_text span {
         display: none;
     }

     .nav_menu {
         width: 100%;
     }

     .inner_links a {
         font-size: 13px;
         padding: 12px;
     }

     .social_grid {
         grid-template-columns: repeat(1, 1fr);
     }

     .brand-logo img {
         width: 90px;
         height: 90px;
     }

     .brand-area {
         gap: 5px;
     }

     .header-section-content {
         padding: 0px 5px;
     }

     .mega_menu {
         padding: 10px 5px;
     }
 }

 @keyframes slideDown {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }