/* navbar */

 .navbar {
     background: var(--bg-color-icfre-blue);
     /*   height: 65px; */
     display: flex;
     justify-content: center;
     align-items: center;

     /*  padding: 0 60px; */
     -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
     box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
     /* border-bottom: 1px solid var(--border-color-theme); */
 }

 .sticky {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 999;
 }

 .navbar .logo {
     display: none;
     text-decoration: none;
     color: #122f48;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 20px;

     opacity: 0;
 }

 /* nav menu button */

 .menu-btn {
     position: relative;
     display: none;
     justify-content: center;
     align-items: center;
     width: 1.5rem;
     height: 1.5rem;
     cursor: pointer;
     z-index: 2;
 }

 .navbar .menu-btn__lines::before,
 .navbar .menu-btn__lines::after {
     content: "";
     position: absolute;
 }

 .navbar .menu-btn__lines,
 .navbar .menu-btn__lines::before,
 .navbar .menu-btn__lines::after {
     width: 1.5rem;
     height: 0.1rem;
     background: var(--text-color-whitesmoke);
     transition: all 0.4s ease-in-out;
 }

 .navbar .menu-btn__lines::before {
     transform: translateY(-0.5rem);
 }

 .navbar .menu-btn__lines::after {
     transform: translateY(0.5rem);
 }

 .navbar .menu-items {
     display: flex;
     align-items: center;
 }

 .navbar ul li {
     list-style: none;
     /*  transition: 0.3s ease; */

 }

 .navbar .menu-items>li:hover {
     background-color: var(--bg-color-5);
     padding: 5px 5px;
     padding: 5px 0px;
 }

 .navbar .menu-items li.dropdown:hover {
     background-color: var(--bg-color-5);
     padding: 5px 5px;
     padding: 0px;
 }

 .navbar .menu-items>li:hover>a {
     color: var(--text-color-black-3);
 }

 .navbar ul li .arrow {
     transition: all 0.3s ease-out;
 }

 .navbar ul li a {
     text-decoration: none;
     color: var(--text-color-white);

 }

 .navbar ul li ul li a {
     color: var(--text-color-black-2);
 }

 /* dropdown menu */

 .navbar .dropdown {
     position: relative;
 }

 .navbar .dropdown-mega {
     position: static;
 }

 .navbar .dropdown-menu li {
     border-top: 1px solid var(--border-color-1);
 }

 .navbar .dropdown-menu li:hover {
     padding: 0px;
     background: var(--bg-color-icfre-blue-contrast-bg);


 }

 .expand-btn:after {
     font-size: 18px;
     content: " \25BE";
     opacity: 0.4;
     margin-left: 2px;
 }

 .navbar .dropdown-menu,
 .menu-right {
     position: absolute;
     background: var(--bg-color-5);
     width: 240px;
     line-height: 30px;
     border-radius: 0 0 5px 5px;
     top: 37px;
     border-top: 1px solid white;
     left: 0;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s ease;
     -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
     box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
 }

 .navbar .menu-right {
     top: 0;
     left: 100%;
 }

 .navbar .dropdown-menu,
 .menu-left {
     left: unset;
     /*   right: 0; */
 }

 .navbar .menu-left {
     left: -100%;
 }

 .left-align {
     right: 0;
 }

 .navbar .menu-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     padding: 5px 10px;
     font-size: 0.8rem;
 }


 .navbar .menu-item-pdf {
     justify-content: flex-start;
 }

 .navbar .menu-item-pdf i {
     font-size: 0.7rem;
     margin-left: 10px;
 }

 .navbar .menu-item:hover {
     color: var(--bg-color-white-1);
 }

 .menu-item.first-item {
     padding: 5px 4px;


     padding: 7px 4px;
     font-weight: 600;
     /* letter-spacing: 1px; */
     font-family: "Open Sans", helvetica, arial;
     font-size: 0.85rem;
 }

 .navbar .dropdown:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
 }

 .navbar .dropdown-right:hover .menu-right {
     left: 100%;
     opacity: 1;
     visibility: visible;
 }

 .navbar .dropdown-right:hover .menu-left {
     left: -100%;
 }

 /* mega menu  */

 .navbar .mega-menu {
     position: absolute;
     left: 0;
     /*  width: 100vw; */
     top: 37px;
     border-top: 1px solid #ffffff;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s ease-out 0s, visibility 0.1s linear 0s;
 }

 .mega-menu .content {
     background: var(--bg-color-5);
     padding: 20px;

     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     width: 100%;
     justify-content: space-between;
     -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
     box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
 }

 .mega-menu .content-directorate {
     grid-template-columns: repeat(6, 1fr);
     /*  padding: 1rem 1rem 1rem 1rem 1rem 1rem; */
 }

 .mega-menu .content-directorate .content-directorate-section {
     padding: 10px 10px;
     /*     background: var(--bg-color-white-2); */
     /*   min-height: 100px; */
     /*   border: 1px solid var(--border-color-2); */
     border-radius: 5px;
 }



 .directorate-section-content ul li a {
     font-size: 0.8rem;
     text-decoration: underline;
     color: var(--text-color-black-2);
     margin-left: 3px;
 }

 .blog .content {
     grid-template-columns: repeat(4, 1fr);
 }

 .content .col {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     line-height: 3rem;
 }

 .content .col .img-wrapper {
     display: block;
     position: relative;
     width: 100%;
     height: 20vw;
     overflow: hidden;
 }

 .content .col .img {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 }

 .content .col img {
     width: 100%;
     transition: transform 0.3s ease-in-out;
 }

 .content .col .img-wrapper:hover img {
     transform: scale(1.1);
 }

 .content .col .menu-title {
     color: #ff5722;
     font-size: 1.2rem;
     line-height: 3rem;
     font-weight: bold;
 }

 .content-directorate .col .menu-title {
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--text-color-black-2);
     line-height: 20px;
     border-left: 3px solid var(--bg-color-icfre-blue);
     padding-left: 5px;
     color: var(--text-color-theme);
 }

 .content-directorate .col .menu-title a {
     color: var(--text-color-black-3);
     font-weight: 400;
     font-size: 0.7rem;
     text-decoration: underline;
     margin-left: 10px;
 }

 .content .col p {
     line-height: 1.2rem;
     margin-top: 5px;
     color: #112f48;
 }

 .content .col .mega-links {
     border-left: 1px solid #3c3c3c;
 }

 .content .col .read-more {
     font-size: 16px;
     display: flex;
     padding-top: 1rem;
     color: #03a9f4;
     transition: color 0.3s ease;
     justify-content: flex-end;
     padding-right: 10px;
 }

 .col .mega-links li,
 .col .mega-links li a {
     padding: 0 1rem;
 }

 .menu-items li:hover .mega-menu {
     opacity: 1;
     visibility: visible;
 }

 .content .col .read-more:hover {
     color: #ff5722;
 }

 /* container */
 .container {
     /*  margin: 100px auto auto; */
     padding: 0 15px;
     max-width: 1200px;
     text-align: center;
 }

 .container p {
     color: #ffffff;
 }

 /*  h1 {
     font-weight: 700;
     line-height: 10vw;
     color: #ffffff;

 } */

 /* animation menu hamburger */
 .menu-btn.open .menu-btn__lines {
     transform: translateX(1rem);
     background: transparent;
 }

 .menu-btn.open .menu-btn__lines::before {
     transform: rotate(45deg) translate(-0.5rem, 0.5rem);
     background: var(--text-color-whitesmoke);
 }

 .menu-btn.open .menu-btn__lines::after {
     transform: rotate(-45deg) translate(-0.5rem, -0.5rem);
     background: var(--text-color-whitesmoke);
 }

 .directorate-section-content ul li {

     font-size: 0.8rem;
     line-height: normal;
     padding: 10px 5px;
 }

 #search-form {
     z-index: 9999;
     position: absolute;
     /* left: 2%; */
     right: 0;
     background-color: var(--bg-color-5);
     width: 335px;
     padding: 20px;
     float: right;
     margin-right: 20px;

     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     border: 1px solid var(--border-color-1);
     border-top: 4px solid #000;
 }

 .search-icon {
     cursor: pointer;
     /* margin: 12px 20px !important; */
     font-size: 1rem !important;
     color: var(--theme-color);
     vertical-align: middle;
 }

 .search-form-container {
     position: relative;
     display: none;
 }

 /*  .search-form-container:after {
     position: absolute;
     left: 5%;
     content: " ";
     border-top: 9px solid transparent;
     border-bottom: 9px solid #000;
     border-left: 9px solid transparent;
     border-right: 9px solid transparent;
     margin-top: -10px;
 }
 */
 #searchbox {
     border: 1px solid #eee;
     padding: 5px 30px 5px 10px;
     outline: none;
     border-radius: 0;
 }

 #searchbutton {
     border: 0px;
     background: var(--bg-color-icfre-blue);
     color: #fff;
     height: 30px;
     padding: 0px 10px;
     /* margin-left: -4px; */
     cursor: pointer;
     outline: none;
     font-size: 0.7rem;
     border-radius: 4px;
     border: 1px solid var(--border-color-1);
     color: var(--text-color-whitesmoke);
 }

 #searchbutton:hover {
     background-color: #25649F;
 }

 /* Responsive style */




 @media screen and (max-width: 1105px) {
     .navbar .menu-item {
         font-size: 0.75rem;
     }
 }

 @media screen and (max-width: 1047px) {
     .navbar .menu-item {
         font-size: 0.7rem;
     }
 }

 @media screen and (max-width: 980px) {
     .mega-menu .content {
         padding: 10px 5px;
         gap: 10px;
     }

     .content-directorate .col .menu-title {
         font-size: 0.8rem;
     }

     .directorate-section-content ul li {
         font-size: 0.6rem;
     }

     .directorate-section-content ul li a {
         font-size: 0.6rem;
     }
 }

 @media screen and (max-width: 996px) {
     .navbar .menu-item {
         font-size: 0.65rem;
     }
 }

 @media screen and (max-width: 942px) {
     .navbar .menu-item {
         font-size: 0.6rem;
     }
 }

 @media screen and (max-width: 890px) {
     .navbar .menu-item {
         font-size: 0.55rem;
     }
 }

 @media screen and (max-width: 835px) {
     .navbar .menu-item {
         font-size: 0.5rem;
     }
 }

 @media screen and (max-width: 768px) {
     .navbar {
         padding: 10px 20px;
         justify-content: right;
     }

     .overflow {
         overflow: hidden;
     }

     .overlay {
         position: fixed;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         z-index: 500;
         background-color: rgba(0, 0, 0, 0.6);
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
     }

     .overlay--active {
         opacity: 1;
         visibility: visible;
     }

     .menu-btn {
         display: flex;
     }

     .navbar .menu-items {
         position: fixed;
         height: 100%;
         max-height: initial;
         overflow-y: auto;
         width: 80%;
         top: 0;
         left: 0;
         background: #fcfcfc;
         display: block;
         transform: translateX(-100vh);
         transition: 0.3s ease-out;
         padding-bottom: 100px;
     }

     .menu-items.open {
         transform: translateY(0);
         background: var(--bg-color-icfre-blue);
     }

     .menu-items li:first-child {
         margin-top: 20px;
     }

     .menu-items li a {
         padding: 10px 1rem;
         display: block;
         font-size: 18px;
     }

     .menu-items .dropdown-right .right-arrow {
         transform: rotate(90deg);
     }

     .menu-item.first-item {
         padding: 10px 10px;
     }

     /* DROPDOWN, MEGA MENUS */
     .menu-items .dropdown-menu,
     .menu-items .menu-right,
     .menu-items .mega-menu {
         position: static;
         opacity: 1;
         top: 4rem;
         visibility: visible;
         margin-left: -18px;
         width: auto;
         max-height: 0;
         transform: scaleX(0);
         transform-origin: left;
         overflow: hidden;
         transition: all 0.5s ease;
     }

     .menu-items .dropdown-menu,
     .menu-items .menu-right {
         padding-left: 1rem;
         width: 102%;
         margin-left: -10px;
     }

     .navbar .menu-item {
         font-size: 0.7rem;
     }


     .menu-items .mega-menu .col {
         padding-left: 1rem;
     }

     .expand-btn.open+.sample {
         max-height: 100%;
         transform: scaleZ(1);
         overflow: scroll;
     }

     .expand-btn.open+.blog.sample {
         max-height: 100%;
         transform: scaleZ(1);
         max-width: fit-content;
     }

     .navbar .sample {
         border-top: none;
     }

     .sample li {
         margin: 0;
     }

     .sample li:last-child {
         border-bottom: none;
     }

     .sample li a {
         font-size: 1rem;
     }

     .mega-menu .content {
         grid-template-columns: auto;
         padding: 1rem 1rem 0 1rem;
     }

     .mega-menu .content-directorate {
         grid-template-columns: repeat(1, 1fr);
         padding: 10px;
     }

     .mega-menu .content .col {
         width: 100%;
         padding-top: 1rem;
         margin-bottom: 0.5rem;
     }

     .mega-menu .content-directorate .col {
         padding-top: 0rem;
     }

     .col .mega-links li,
     .col .mega-links li a {
         padding: 0 0.5rem;
     }

     .content .col .mega-links {
         border-left: 0;
         padding-left: 0.5rem;
     }

     .col .mega-links li {
         margin: 0;
     }

     .directorate-section-content ul li {
         margin-top: 0px !important;

     }

     .directorate-section-content ul li {
         border-top: 1px solid var(--border-color-1);
     }

     .directorate-section-content ul li a {
         padding: 0px 0px 0px 10px;
         font-size: 0.7rem;
     }

     #search-form {
         /* left: 26%; */
     }

     /* .search-form-container:after {
         left: 27%;
     } */
 }