/* START UPDATED HEADER SECTION WITH MENU Dated 11-09-2025 by Gaurav */
:root {
    --primary-font: 'Inter', sans-serif;
	--menu-font: "Roboto Condensed", sans-serif;
    --text-dark: #111;
    --text-red: #D00000;
    --text-white: #fff;
	--text-black: #000;
}
body {overflow-x: hidden; }
/*
.topbarHeader{background:#3A3537; height:40px;  padding:0px 0px 0px 40px; display: flex;}
.topMenuLinks {display:flex; gap:20px; margin: 0;  padding: 5px 0;}
.topMenuLinks li a{font-family: var(--menu-font);font-weight: 400;font-size: 14px;line-height: 24px;color:#fff; text-decoration:none; transition: all 0.2s ease;}
.rightMenuAdmission{margin-left:auto;}
*/
.topbarHeader{height: 40px;  padding: 0px 0px 0px 40px;  display: flex;  justify-content: flex-end;}
.topMenuLinks {display: flex;  gap: 10px;  padding: 5px 20px;  background: #fff;  height: 40px;  margin:2px 0px 0px 0px;}
.topMenuLinks li{position:relative;}
.topMenuLinks li:before{position:absolute; height:15px; width:1px; background:#C0C0C0; top:7px; left: -5px; content:"";}
.topMenuLinks li:first-child:before{display:none;}
.topMenuLinks li a{font-family: var(--menu-font);  font-weight: 500;  font-size: 12px;  line-height: 24px;  color: #000;  text-decoration: none;  transition: all 0.2s ease;  padding: 20px 5px;}

.topMenuLinks li a:hover {  font-weight: 600; }


.rightMenuAdmission ul{display:flex; list-style: none;}
.rightMenuAdmission li{display: flex;  list-style: none; }

.rightMenuAdmission li a {
  position: relative;
  display: inline-block;
  background: #D00000; /* remove direct background */
  height: 40px;
  font-family: var(--menu-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 40px; /* center text vertically */
  text-align: center;
  padding: 0px 40px;
  color: #fff;
  text-decoration: none;
  overflow: hidden; /* hide overflow of pseudo element */
  z-index: 1;
}
.rightMenuAdmission li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #8c0000;
  z-index: -1;
  transition: width 0.4s ease;
}

.slideBtn {
  position: relative;
  display: inline-block;
  background: #class="slideBtn"; /* start transparent */
  height: 40px;
  line-height: 40px; /* vertically center */
  font-family: var(--menu-font);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
 
  color: #fff;
  text-decoration: none;
  
  
  /* optional border */
}

.slideBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #D00000;
  z-index: -1;
  transition: width 0.4s ease;
}

.slideBtn:hover::before {
  width: 100%;
}

.slideBtn:hover {
  color: #fff; /* text stays visible */
}


.rightMenuAdmission li a:hover::before {
  width: 100%;
}

.rightMenuAdmission li a:hover {
  color: #fff; /* keep text visible */
}


.topAdmissionN1{display:flex; align-items: center; background: #D00000;  float:right; min-width: 170px; border-left: 1px solid #fff; cursor:pointer;}
.topAdmissionN1:hover{background:#8c0000;}
.topAdmissionNHover1{background:var(--text-red)}

.taNumber1{font-size: 14px;font-weight:600;line-height: 20px;text-align: left; color:#fff; margin: 0px 15px;}
.taNumber1 span{display:block; font-size: 11px;font-weight: 500;line-height: 13.31px;text-align: left;}
.taNumber1 a{color:#fff; text-decoration:none; font-weight: 600;font-size: 14px;line-height: 21px;}
.taNumber1 a:hover{color:#fff; text-decoration:underline;}

#toggle-button1 {font-family: var(--menu-font);transition: color 0.2s linear;  text-align: right;  vertical-align: middle;  font-size: 14px;font-weight:600;line-height: 20px;text-align: left; color:#fff; display: flex;gap: 15px; height: 100%;  /*min-width: 200px;*/ text-align: center;  justify-content: center;
  align-content: center;  align-items: center; padding: 0px 25px 0px 40px;}
#toggle-button1 i {  cursor: pointer;color: #fff;}
.barsLines1::after {  content: "\e26c";  position: absolute;   right: 0; top:-2px;font-weight: 400; font-family: 'Material Symbols Outlined'; font-size:24px; font-style: normal; color: #fff;}
.closeLines1::after {  content: "\e5cd";  position: absolute;   right: 0; top:-2px;font-weight: 400; font-family: 'Material Symbols Outlined'; font-size:24px; font-style: normal; color: #fff;}


.barsLines1{width: 22px;height: 17px;position: relative; top: 0px;}
/* .closeLines1{background:url("https://www.chitkara.edu.in/wp-content/themes/chitkara/images/2025/Union.png") no-repeat 2px 0px; width: 22px;height: 17px;position: relative;background-size: contain;} */
i.active1 { color: lightblue;  transform: rotate(90deg);}
#toggle-button1 i:hover { color: lightblue;}
#navToggle1 {  position: absolute;    text-align: center;  font-size: 30px;  width:217px;  
  top:40px; right:0px;  background: linear-gradient(93.76deg, rgba(0, 0, 0, 0.5) 9.56%, rgba(21, 20, 20, 0.437627) 51.74%, rgba(0, 0, 0, 0) 90.87%),
linear-gradient(133.53deg, rgba(0, 0, 0, 0.5) 5.53%, rgba(21, 20, 20, 0.437627) 51.65%, rgba(0, 0, 0, 0) 94.44%),
linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
z-index: 100000;border-radius:0px;height: 100vh; min-height:635px;
display: block; 
transform: translateX(100%); /* hidden off screen */
  transition: transform 0.3s ease-in-out;

}
#navToggle1 .active {
  transform: translateX(0); /* slide into view */
}
#navToggle1.active {
  transform: translateX(0); /* slide into view */
}

ul.tobNavToogle1{padding:22px 32px; display: inherit;}
.tobNavToogle1 li{font-family: var(--menu-font);font-size: 14px;font-weight: 600;line-height: 16.94px;text-align: left; color: #fff;  position: relative;padding-bottom: 30px; display: inherit;}
.tobNavToogle1 li:after{ position:absolute; bottom:12px; content:""; width:108px; height:2px;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);}
.tobNavToogle1 li span{display:block; margin-top:8px; font-weight: 500;}
.tobNavToogle1 li:last-child:after{background:none;}
.tobNavToogle1 li:last-child{padding-bottom: 0px;}
.tobNavToogle1 li a{color:#fff; text-decoration:none;}

.headerSection {position: sticky;top: 0;z-index: 1000; background: #fff;  /*box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/}
/*.scrolled{ background: rgba(255,255,255,0.95);}*/
/*
.headerSection.scrolled .logoCU {  opacity: 0;  transform: translateX(-50px);}
.headerBtn {  opacity: 0;  transform: translateX(30px);  transition: all 0.6s ease;  background: #D00000;  color: #fff;  border: none;  padding: 8px 16px;
  border-radius: 6px;  cursor: pointer;}
.headerSection.scrolled .headerBtn {  opacity: 1;  transform: translateX(0);}
.headerSection.scrolled .menuBarNew {  margin-left: 0;}*/

.headerSection{display:flex; gap:10px; padding:00px 40px; /*position: relative;*/ }
.logoCU {
  width: 215px;
  padding: 10px 0;
  /*transition: width 0.5s ease, padding 0.3s ease, top 0.3s ease, opacity 0.3s ease;*/
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  opacity: 1;
  position: absolute;
  top: -35px;
}

.headerSection.scrolled .logoCU {
  width: 165px;   /* smoothly shrinks width */
  padding:5px 0;     /* smoothly shrinks padding */
  top: 0;         /* smoothly moves down */
  position: relative;
  transform: scale(0.95);
}
/*
.logoCU {
  width: 215px;
  padding: 10px 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 1;
  transform: translateX(0) scale(1);
  position: absolute;
  top: -35px;
 
}

.headerSection.scrolled .logoCU {
  transform: translateX(0) scale(.85); 
  position: relative; top: 0;width: 175px; padding:0px;
}

*/

/*.logoCU {max-width: 215px;  padding: 10px 0px;  transition: all 0.3s ease;  opacity: 1;  transform: translateX(0);  position: absolute;  width: 215px;
  top: -35px;}
.headerSection.scrolled .logoCU { max-width: 185px;  position: relative;top:0px;}*/

/*.logoCU{max-width:185px; padding:10px 0px; transition: all 0.6s ease;  opacity: 1;  transform: translateX(0);}*/
.menuBarNew{margin-left:auto; transition: margin-left 0.3s ease;}
.navbarNew{position: inherit;}
/*.headerSection.scrolled .menuBarNew .nav-link{padding-top: 29px; padding-bottom: 29px;}*/
.nav-item {padding: 0px 0px; font-family: var(--menu-font);}
.menuBarNew .nav-link{padding: 18px 1rem;}
.menuBarNew a.nav-link{font-family: var(--menu-font);font-weight: 600;font-size: 16px;line-height: 24px;text-transform: none;color: #000000; position:relative; z-index: 100000;}
.menuBarNew a.nav-link:hover{text-decoration:none;}
a.currentActive{color:#D00000 !important; text-decoration:none; position:relative;} 
a.currentActive::before{content:""; background:#D00000; position:absolute; bottom:10px; width:100%; height:2px; left: 0;}
 
.menuBarNew a.nav-link:hover::before{content:""; background:#D00000; position:absolute; bottom:10px; width:100%; height:2px; left: 0;}
.dropdown-hover:hover>.dropdown-menu1 {display: inline-block; transition-delay: 0.4s;}
.dropdown-hover>.dropdown-toggle:active {pointer-events: none;}
/*.navbar-expand-lg .navbar-nav .dropdown-menu{left:0px; overflow: hidden;}*/


#navbarExampleOnHover .dropdown-menu1 .menuSideBoxLeft8{width: 70% !important;}
#navbarExampleOnHover .dropdown-menu1 .menuSideBoxLeft4{width: 35% !important;}
#navbarExampleOnHover .dropdown-menu1 .menuSideBoxRight{width: 30% !important; padding-left: 30px;}
#v-pills-tabContent, #PGPrograms-tabContent, #OnlinePrograms-tabContent{padding-right: 10px;}

.sidebarMenuWrap{display:flex; flex-wrap:wrap;  transition: transform 0.3s ease; /*box-shadow: 0px 1px 8px 0px #00000026;*/}
.sidebarMenuWrap img{height:180px; width:100%;object-fit: cover;}
.sidebarMenuWrap a{height:180px; width:100%;object-fit: cover;}
.globalMenuBg{background:#922646 !important;}
.sidebarMenuContent{/*background: #D00000; padding:30px 20px 25px 20px; color:#fff;*/}
.sidebarMenuContent h3{font-family: var(--menu-font);font-weight: 700;font-size: 18px;line-height: 28px;color:#111; margin-top:10px; margin-bottom:5px;}
.sidebarMenuContent p{font-family: var(--menu-font);font-weight: 400;font-size: 14px;line-height: 22px;color:#111; margin: 0;}
.sidebarMenuContent img.overviewIcon{width:8px; height:8px;}
.sidebarMenuContent a{color:#3A3537; text-decoration:none; font-family: var(--menu-font);font-weight: 800;font-size: 14px;line-height: 22px;}
.sidebarMenuWrap:hover a{font-weight: 800;  text-decoration:underline;}
.sidebarMenuContent a span{position:relative; top:5px; font-size: 18px;}

.sidebarMenuContentLink:hover{text-decoration:underline; color: #d000;}
.sidebarMenuContentLink:hover h3{ text-decoration:underline;}
.sidebarMenuContentLink:hover p{text-decoration:underline;}
.sidebarMenuContentLink:hover a{color:#D00000; text-decoration:underline; text-decoration-color: #D00000;}
.sidebarMenuContentLink:hover a span{color:#D00000;}

.menuRankingInsti h3{font-family: var(--menu-font);font-weight: 700;font-size: 18px;line-height: 28px;color:#111; margin-top:3px; margin-bottom:10px;}
ul.menuRankingInstiList{display:flex; flex-wrap:wrap; margin:0px; gap:8px;}
.menuRankingInstiList li{height:80px; width: 100%;  border-radius: 2px; align-content: center;  padding-left: 25px;}
.menuRankingInstiList li img{max-height:62px;}
.menuRankingInstiList li.rank1{background: linear-gradient(90deg, rgba(208, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);}
.menuRankingInstiList li.rank2{background: linear-gradient(90deg, rgba(57, 49, 134, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);}
.menuRankingInstiList li.rank3{background: linear-gradient(90deg, rgba(247, 166, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);}
.menuRankingInstiList li.rank4{background: linear-gradient(90deg, rgba(214, 1, 158, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);}

ul.global_logo_menu{display:flex; flex-wrap:wrap; margin-left: -3px;}
.global_logo_menu li{max-width: 110px;}

/* Hidden state */
/*.dropdown-menu {  display: block;  position: absolute;  top: 100%;  left: 0;  width: 100%;visibility: hidden;  opacity: 0;  transform: translateX(100%);    
  transition: transform 0.4s ease, opacity 0.0s ease;  pointer-events: none;  overflow-x: hidden; background:#fff; }*/
.dropdown-menu1 { display: block;  position: absolute;  top: 100%;  left: 0;  width: 100%;  visibility: hidden;  opacity: 0; /** transform: translateY(-5px); */ transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;  /*pointer-events: none;  overflow-x: hidden;*/  
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);padding-bottom: 30px;padding-top: 15px;
transition-delay: 0.4s; z-index:1000;}

.dropdown-hover:hover > .dropdown-menu1 {  visibility: visible;  opacity: 1;  transform: translateY(0);  pointer-events: auto; 
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);
transition-delay: 0.4s; z-index:1000;}
.dropdown-menu1.show {/*animation: none !important;*/ display: block;  opacity: 1;}
.dropdown-menu1 .container-fluid{padding:0px 40px;}
.menuListItem {display: flex; gap: 40px; }
.menuListItem ul {list-style: none; padding: 0; margin: 0; width: 100%; display: flex;  flex-wrap: wrap;  gap: 0px 40px;}
.menuListItem li { border-bottom: 1px solid #000000;  display: flex; justify-content: space-between; align-items: center; width: 47%;}
.menuListItem li a { text-decoration: none; color: #000; flex: 1; position: relative; padding: 7px 0; transition: font-size 0.3s ease, color 0.3s ease, border-bottom-color 0.3s ease; font-size: 15px; line-height:24px;font-weight: 500;}

/*.menuListItem li a::after { background:url(images/2025/home-page/updated/menu/Link-Arrow.svg) no-repeat; width:24px;height:24px;content: "";   position: absolute;   right: 0; top: 50%;transform: translateY(-50%); color: #000; transition: transform 0.5s ease;}*/
.menuListItem li a::after {  content: "\e89e";  position: absolute;   right: 0; top: 50%;transform: translateY(-50%);  transition: transform 0.5s ease;  font-weight: 400; font-family: 'Material Symbols Outlined'; font-size:20px;}
.menuListItem li a:hover::after{color:#D00000; }

.menuListItem li:hover a {/*transform: translate(10px, 00%);*/       color: #d00000;   }
.menuListItem li:hover { border-bottom: 1px solid #d00000;  }
.menuListItem li a:hover {font-size:16px;  line-height:24px;  font-weight: 500;}
.menuListItem li a:hover::after {/*transform: translate(-20px, -50%); */}


ul.menuTabList{list-style: none; padding: 0; margin-left: 20px;}
.menuTabList li { border-bottom: 1px solid #000000;  display: flex; justify-content: space-between; align-items: center; width: 100%; }
.menuTabList li a { text-decoration: none; color: #000; flex: 1; position: relative; padding: 7px 0; transition: font-size 0.3s ease, color 0.3s ease, border-bottom-color 0.3s ease;font-size: 15px; line-height:24px; font-weight: 500;}
.menuTabList li a::after {  content: "\e89e";  position: absolute;   right: 0; top: 50%;transform: translateY(-50%);  transition: transform 0.5s ease;  font-weight: 400; font-family: 'Material Symbols Outlined'; font-size:20px;}
.menuTabList li a:hover::after{color:#D00000; }

.menuTabList li:hover a {/*transform: translate(10px, 00%);   */    color: #d00000;   }
.menuTabList li:hover { border-bottom: 1px solid #d00000;  }
.menuTabList li a:hover {font-size:16px;  line-height:24px; font-weight: 500; }


.sidebarMenuTab ul {list-style: none; padding: 0; margin: 0; width: 100%; display: flex;  flex-wrap: wrap;  gap: 0px 40px;}
.sidebarMenuTab li {   display: flex; justify-content: space-between; align-items: center; width: 100%; }
.sidebarMenuTab li a { text-decoration: none; color: #000; flex: 1; position: relative; padding: 7px 0;transition: font-size 0.3s ease, color 0.3s ease, border-bottom-color 0.3s ease; font-size: 15px; line-height:24px; border-bottom: 1px solid #000000; font-weight: 500;}
.sidebarMenuTab li a::after {  width:24px;height:24px;content: "\f054";  position: absolute;   right: 0; top: 50%;transform: translateY(-50%);  transition: transform 0.5s ease; font-family: "Font Awesome 5 Free"; font-weight: 900; text-align: right;}
.sidebarMenuTab li:hover a {      color: #d00000;   }
.sidebarMenuTab li:hover {   }
.sidebarMenuTab li a:hover {font-size:16px;  line-height:24px; font-weight: 500; color:#D00000;  border-bottom: 1px solid #d00000;}
.sidebarMenuTab li a:hover::after{color:#D00000; font-size: 17px;}

.sidebarMenuTab li a.active{color:#D00000; border-bottom: 1px solid #d00000;font-size:16px;}
.sidebarMenuTab li a.active:hover::after{color:#D00000 !important; font-size: 16px;}

/* END UPDATED HEADER SECTION WITH MENU Dated 11-09-2025 by Gaurav */
@media only screen and (min-width: 1200px) and (max-width: 1340px) {
	a.learnLink{font-size: 14px;}
	.sportsNewsListArchive li{width:22%;}
	.topbarHeader{padding: 0px 0px 0px 20px;}
	.logoCU{max-width: 145px;}
	.headerSection{padding: 00px 20px;}
	.menuBarNew a.nav-link{font-size: 15px;}
	.dropdown-menu1 .container-fluid { padding: 0px 20px;}
}
@media only screen and (min-width: 1099px) and (max-width: 1199px) {
	.topbarHeader{padding: 0px 0px 0px 20px;}
	.logoCU{max-width: 115px; margin-top: 10px;}
	.headerSection{padding: 00px 10px;}
	.menuBarNew a.nav-link{font-size: 14px;}
	.dropdown-menu1 .container-fluid { padding: 0px 10px;}
	.menuTabList li a{padding-right: 20px;}
	
}
@media only screen and (min-width: 991px) and (max-width: 1098px) {
	.topbarHeader{padding: 0px 0px 0px 10px;}
	.logoCU{max-width: 115px; margin-top: 10px;}
	.headerSection{padding: 00px 10px;}
	.menuBarNew a.nav-link{font-size: 13px;}
	.navbar-expand-lg .navbar-nav .nav-link { padding-right: 5px !important;    padding-left: 5px !important;}
	.dropdown-menu1 .container-fluid { padding: 0px 10px;}
	.rightMenuAdmission li a{padding: 0px 20px;}
	#toggle-button1{padding: 0px 15px 0px 20px;}
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.schoolList li{-webkit-box-flex: 0; -ms-flex: 0 0 24%; flex: 0 0 24%; }
	/*.homeCon{padding:7px;min-height: 95px;}*/
	.main-nav{display:none;}
	.lBlogsList li{padding: 6px 10px;}
	.bottomRead{bottom: -15px;}
	a.learnLink{font-size: 14px;}
	.sportsNewsListArchive li{width:21%;}
	#sticky_navigation ul li a {  padding: 17px 7px !important;}
	.admissionBtnMenu a{width: 90px;}
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
	.headermenu{display: block;z-index: 10000;}
	.headerSection{display:block;}
	.headerSection, .topbarHeader{display:none;}
	
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.headerSection, .topbarHeader{display:none;}
}
@media only screen and (max-width: 767px)
{
		.headerSection, .topbarHeader{display:none;}
}