@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");

header {
  background: rgb(227, 227, 227);
  background: linear-gradient(
    40deg,
    rgba(227, 227, 227, 1) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(227, 227, 227, 1) 100%
  );
  position: fixed;
  inset: 0;
  bottom: auto;
  z-index: 1000;
  transition: 0.3s all;
}
header:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.5s;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.menubar {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
  padding-left: 0;
}
.menubar .nav-right {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-end;
}

.top-menu,
.desktop-menubar,
.nav-right-bottom {
  display: flex;
}

.nav-right-bottom {
  display: flex;
  justify-content: center; /* Centers the navbar horizontally */
  align-items: center; /* Centers content vertically */
  width: 100%; /* Ensures full width */
  position: relative; /* Adjust if needed */
}

/* toggle button */

/* General styles for the new nav class */
.new-nav-class {
  position: absolute;
  top: 0;
  right: 0; /* Replaced end-0 with right-0 for better browser compatibility */
  z-index: 1000; /* Ensure it appears above other content */
}

/* General styles for the top menu */
.top-menu {
  justify-content: flex-end;
  background-color: black; /* Replaced var(--color-black) with black for simplicity */
  position: relative;
  display: flex; /* Ensure the menu is flex for justify-content to work */
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

/* Pseudo-element for extending the background */
.top-menu:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 600%;
  background-color: black; /* Replaced var(--color-black) with black for simplicity */
  height: 100%; /* Ensure it covers the full height */
}

/* General styles for all links in the top menu */
.top-menu a {
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  display: block;
  color: white;
  text-decoration: none; /* Remove underline from links */
}

/* Styles for the highlighted "Admissions" link */
.top-menu li.highlight a {
  background-color: #ec364b;
  color: white;
  font-weight: 600;
}

/* Hover effect for the "Admissions" link */
.top-menu li.highlight a:hover {
  background-color: #d32f2f; /* Darker shade for hover effect */
  color: white;
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Styles for the "ERP Login" link (non-highlighted) */
.top-menu li:not(.highlight) a {
  background-color: transparent; /* No background color */
}

/* Hover effect for the "ERP Login" link */
.top-menu li:not(.highlight) a:hover {
  background-color: transparent; /* No background color change on hover */
  color: white; /* Keep the text color the same */
  cursor: default !important; /* Force default cursor on hover */
}

.desktop-menubar .menu-item {
  padding: 0rem 0.7rem 1rem 0.7rem;
  display: flex;
  align-items: center;
}
/* body.header-sticky header.sticky .desktop-menubar .menu-item{padding: 0rem 0.7rem;} */
.menu-link {
  font-size: 1.1rem;
  display: block;
  white-space: nowrap;
  color: #fff;
  transition: 0.3s all;
  position: relative;
}
/* padding: 0.9rem 0 1.7rem 0; */
.menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.3s all;
}
/* .menu-item:hover .menu-link::after{transform: scaleX(1);} */
.menu-item:hover .menu-link {
  color: var(--color-red);
}
.nav-right-top {
  margin-bottom: 0.3rem;
  transition: 0.5s;
}
.navbar-brand img {
  transition: 0.5s;
  width: 120px;
}
header.sticky {
  transition: 0.5s;
}
/* background: #fff; */
/* filter: drop-shadow(0 2px 1px rgba(0,0,0,.15)); */
body.header-sticky header.sticky .navbar-brand img {
  max-width: 160px;
}
/* header.sticky .menu-link{padding:0.9rem 0rem 1.6rem 0;} */
/* header.sticky .top-menu a{padding: .3rem .6rem;} */
.search-box {
  margin-left: 20px;
  position: relative;
  top: 11px;
}
.search-box input.form-control {
  padding: 0.85rem 0rem;
  height: auto;
  width: 0;
  border: none;
  border-color: #e0e0e0;
  outline: none;
  box-shadow: none;
  position: absolute;
  right: 100%;
  transition: all 0.3s linear;
}
.search-box button {
  height: 58px;
  background: #fff;
  width: 79px;
  border-left: none;
  border-radius: 5px 0px 0px 5px;
}
.search-box:hover input.form-control,
.search-box:focus input.form-control {
  width: 250px;
  padding-inline: 1rem;
  border: 1px solid #e0e0e0;
}
.search-box:hover button,
.search-box:focus button {
  border-radius: 0;
  border-left: 1px solid #e0e0e0 !important;
  background-color: var(--color-prime-dark);
}
.search-box:hover button img,
.search-box:focus button img {
  filter: invert(1);
}
/* ====submenu====== */
.has-submenu:not(.has-megamenu) {
  position: relative;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 250px;
}
.submenu.level2 {
  top: -1.2rem;
  left: 100%;
}
.submenu ul {
  background-color: #fff;
  padding-block: 1.3rem;
}
.submenu.level2 ul {
  margin-left: 0.3rem;
}
.submenu a,
.submenu a:not([href]):not([class]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  font-size: 1.1rem;
  color: #1e2028;
  padding: 0.7rem 1rem;
  white-space: nowrap;
  line-height: 1.3;
  transition: 0.3s all;
}
.submenu a:hover,
.submenu li:hover > a,
.submenu li:hover > a:not([href]):not([class]) {
  color: #fff;
  background-color: var(--color-prime-dark);
}
.submenu .has-submenu > a::after {
  content: url("../images/angle-right.svg");
  filter: brightness(0);
  transition: 0.3s all;
}
.submenu .has-submenu:hover > a::after {
  filter: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  bottom: auto;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  height: 0;
  transition: 0.05s all;
}
body.submenu-open::before {
  height: 100%;
}

.stats span:first-child {
  font-size: 6rem;
  line-height: 1;
  margin-bottom: 1rem;
  font-weight: 300;
  display: block;
}
/* ====submenu====== */
/* megamenu */
.mega-menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: #f2f6f8;
  padding-top: 170px;
  z-index: -1;
  display: none;
}
.has-submenu:hover .mega-menu {
  display: block;
}
.megamenu-items li {
  display: block;
  padding: 0.8rem 0.8rem;
  padding-right: 1.8rem;
  position: relative;
  font-size: 1.1rem;
  color: #333333;
  transition: all 0.05s linear;
  cursor: pointer;
}
.megamenu-items li:before {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: url("../images/angle-right.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.megamenu-items :where(li:hover, li.active) {
  background: #fff;
  color: #000;
  font-weight: 600;
}

.mega-menu-right {
  display: grid;
  height: 100%;
}
.mega-menu-right .mega-submenu {
  grid-area: 1/1;
  background: #fff;
  height: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  display: none;
}
.mega-menu-right .mega-submenu.show {
  display: flex;
}
.mega-menu-right ul {
  margin-bottom: 2rem;
}
.mega-submenu ul li {
  position: relative;
  margin-bottom: 1rem;
}
/* .mega-submenu ul li::before{content:''; position: absolute; left: 0; top: .4rem; height: .7rem; width: .7rem; border: 2px solid var(--color-yellow); border-radius: 50%;} */
.mega-submenu ul li a {
  font-size: 1.1rem;
  color: #000;
  line-height: 1.5;
  transition: 0.3s all;
}
.mega-submenu ul li a:hover {
  color: var(--color-red);
}
.mega-submenu .bottom {
  margin-top: auto;
}
.mega-menu-infra li a {
  font-size: var(--font18);
  letter-spacing: 0px;
  color: #000000;
}
.mega-menu-infra li {
  margin-bottom: 1rem;
}
.mega-menu-infra h6,
.mega-menu-infra h6 a {
  color: #73a9df;
  font-size: var(--font18);
}
.infra-campus h4 {
  color: #000;
  font-size: var(--font18);
}
.infra-campus {
  margin-bottom: 1.5rem;
}
.agri-farms {
  margin-top: 3rem;
}
.mega-menu-infra-right {
  position: relative;
}
.mega-menu-infra-right h4 {
  background: #f2f6f8;
  max-width: 270px;
  text-align: right;
  position: absolute;
  bottom: -15px;
  left: -38px;
  padding: 2rem;
}
.submenu.level2.admission-menu {
  position: absolute;
  right: 100%;
  left: auto;
}
.desktop-menubar
  #mainmenu1_rptmainmenu_ctl00_submenu
  li:last-child
  .submenu.level2 {
  bottom: -24px;
  top: auto;
}
.nav-right-bottom .desktop-menubar > li:last-child .submenu {
  left: auto;
  right: 0;
}
/*--UI14041994-18-01-2024-css-start--*/
/* header.sticky .nav-right-top{display: none;} */
/* body.header-sticky header.sticky .menu-link {padding: 1.7rem 0;} */
/* body.header-sticky .nav-right-bottom {margin-top: 1rem;}  */
body.header-sticky .search-box {
  top: 25px;
}
/*--UI14041994-18-01-2024-css-End--*/
body.header-sticky .nav-right-top {
  transition: all 0.5s ease;
  margin-top: -3.3rem;
}

/* .header-down .nav-right-top {margin-top: 0;transition: all .5s ease;} */
/*--UI14041994-19-01-2024-css-End--*/
.desktop-menubar .has-submenu.initiativelist .submenu {
  left: auto;
  right: 0;
}

@media (min-width: 992px) {
  .menubar {
    justify-content: space-between;
    padding-top: 0;
    padding-left: 2rem;
    align-items: flex-start;
  }
}
@media (min-width: 1600px) {
  .mega-menu-right .stats {
    margin-right: 2rem;
  }
  .mega-menu {
    padding-top: 200px;
  }
}
@media (max-width: 1600px) {
  .mega-menu-right .stats {
    text-align: right;
    margin-right: 2rem;
  }
  .input-group.search-box {
    width: 50px;
    margin-left: 0;
  }
  body.header-sticky header.sticky .navbar-brand img {
    max-width: 146px;
  }
  .navbar-brand {
    max-width: 200px;
  }
  /* body.header-sticky .nav-right-bottom { margin-top: 1.3rem;} */
} /*--1600-css-end--*/
@media (max-width: 1400px) {
  .desktop-menubar .menu-item {
    padding-inline: 0.5rem;
  }
  .menu-link {
    font-size: 1rem;
  }
  /* .navbar-brand{max-width: 250px;} */
  .top-menu a {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
  }
  body.header-sticky header.sticky .top-menu a {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
  }
  /* header.sticky .navbar-brand img{max-width: 200px;} */
  .search-box {
    margin-left: 10px;
  }
  .search-box button {
    padding: 0.3rem;
    width: 50px;
  }
  .submenu a,
  .submenu a:not([href]):not([class]),
  .megamenu-items li,
  .stats span.desc {
    font-size: 0.8rem;
    /* padding: 0.5rem 1.5rem; */
  }
  .mega-submenu ul li a {
    font-size: 0.8rem;
  }
  .stats-lg span[data-count] {
    font-size: 6rem;
  }
  .mega-menu-right .stats {
    margin-right: 0rem;
  }
  .mega-menu-infra li a {
    font-size: 0.8rem;
  }
  .stats.after-el span.desc {
    padding-left: 0;
  }
} /*--1400-css-end--*/
@media (max-width: 1399px) {
  /* body.header-sticky header.sticky .menu-link {padding: 1.9rem 0;} */
} /*--1399-css-end--*/
@media (max-width: 1199px) {
  .menu-link {
    font-size: 0.8rem;
  }
  .input-group.search-box {
    width: 50px;
    margin-left: 0;
  }
  body.header-sticky header.sticky .navbar-brand img {
    max-width: 130px;
  }
  /* body.header-sticky .nav-right-bottom {margin-top: 1.4rem;} */
  body.header-sticky header.sticky .desktop-menubar .menu-item {
    padding: 0rem 0.5rem;
  }
} /*--1199-css-end--*/

@media (max-width: 991.92px) {
  .navbar-brand {
    margin-right: 0;
  }
  .menubar .nav-right {
    display: none;
  }
  body.header-sticky header.sticky .menubar {
    padding-top: 0;
  }
}
@media (max-width: 991px) {
  header {
    transition: 0.5s ease-out;
  }
  .navbar-brand {
    margin: auto;
    text-align: center;
  }
  body.header-sticky header.sticky .navbar-brand img {
    max-width: 100%;
    margin: auto;
  }
  header.sticky .navbar-brand {
    max-width: 150px;
    transition: 0.5s;
  }
  .navbar-brand img {
    width: 100%;
  }
  .menubar {
    padding: 0.5rem 0;
  }
} /*--991-css-end--*/
@media (max-width: 375px) {
  .navbar-brand {
    max-width: 160px;
  }
  header.sticky .navbar-brand {
    max-width: 115px;
  }
} /*--375-css-end--*/
