:root {	
--body-bg: #FFEDD4;
--violet-dark: #350F56;

--cmd-color: #3C64B3;
--itd-color: #5A1A82;
--ind-color: #CE267C;
--intd-color: #F06C25;
--txd-color: #45B4DD;

--text-white: #fff;
--text-light: #FFEDD4;
--lavender-light: #E8C3FF;
--gray: #989292;

}
.guide-bg { background-color: var(--gray); }
html{scroll-behavior:smooth}

.bg-cmd { background-color: #3C64B3!important }
.bg-ind { background-color: #CE267C!important }
.bg-intd { background-color: #F06C25!important }
.bg-itd { background-color: #5A1A82!important }
.bg-tad { background-color: #45B4DD!important }

/* custom webkit scrollbar
 */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--body-bg);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--gray);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
}

.preloader { position: fixed; overflow-y: hidden; left: 0px; top: 0px; width:100%; height: 100%;  z-index: 1000; background-color: #350F56; }
.show-xs { display: none; }
.show-lg { display: block; }

/*.preloader-gif {
  z-index: 9999;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  top: -5vh;
  height: 110vh;
  transition: all 1s ease-out;
  background-color: var(--loading);
  padding: 0;
  margin: 0;
  opacity: 1;
  user-select: none;
  pointer-events: none;
}
.preloader-gif img {
  border-radius: 200px;

  transform: scale(0.9);
}*/
body { background-color: var(--body-bg); font-family: 'Inter', sans-serif; }
.ff-inter { font-family: 'Inter', sans-serif; }
.ff-source-sans { font-family: 'Source Sans 3', sans-serif; }

.bg-body { background-color: var(--body-bg); }
.bg-header { background-color: var(--violet-dark); }



/* Messages 
===================================================== */
.messages { margin-top: 225px; }
.director-msg h1, .director-msg h2, .speaker-msg h1, .speaker-msg h2 { font-family: 'Source Sans 3', sans-serif; color:var(--body-bg); font-size: 30px; font-weight: 600; }
.director-msg h2 { color: var(--lavender-light); font-size: 24px; }
.director-msg p, .speaker-msg p { font-family: 'Source Sans 3', sans-serif; color:var(--text-white); font-size: 17px; font-weight: 400; }
.speaker-msg h1{ color:#45B4DD; }
.messages h3 { font-weight: 600; font-size: 43px; color:var(--violet-dark); font-family: 'Inter', sans-serif; }
.speaker-msg h2{ color:var(--violet-dark); font-size: 24px; }
.speaker-msg p { color:var(--violet-dark); }
.message-detail { margin-bottom: 40px; padding: 35px; border-radius: 15px; }
.message-detail img  { border-radius: 15px; }

/* Footer 
===================================================== */
.footer { font-size: 18px; vertical-align: middle; background-color: var(--violet-dark); font-family: 'Inter', sans-serif;  }
.footer a { color:var(--body-bg); }
.footer a:hover { text-decoration: none; color: inherit; color:var(--body-bg); }

h1.programme { display: block; width: 100%; margin: 20px 0; padding-right: 17px; padding-left: 17px; color: #CE267C; font-family: 'Source Sans 3', sans-serif; font-size: 40px; font-weight: 600; }
.student-card .col-sm-6 { margin-bottom: 50px!important; }
.card { flex-direction: row; align-items: center; justify-content: space-between;    color: #F8E8E8; border-radius: 2000px 2000px; transition: 0.6s ease; border: var(--indd-color) solid 4px; }
.card .square-img-container img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.card-body { max-width: 50%; padding: 0px; padding-right: 5%; margin-left: 10px; }
.card-top-text { width: auto; font-weight: 600; font-size: 14px; color: #FFEDD4; top: 0; text-decoration: none; font-family: 'Source Sans 3', sans-serif; }
.card-bottom-text { width: auto; font-weight: 600; font-size: 12px; color: #fff; bottom: 0; font-family: 'Source Sans 3', sans-serif; }

.card { flex-direction: row; align-items: center; /*background-color: var(--violet-dark); color: var(--violet-dark);*/ border-radius: 2000px 2000px; border: #FFE1B8 solid 4px; transition: 0.6s ease; }
.card .square-img-container { width: 150px; height: 150px; object-fit: cover; }
.card .square-img-container img { width:100%; height:auto;  object-fit: cover; }

.menuBar, .subMenu { font-family: 'Inter', sans-serif; font-weight: 700; }
.menuBar {z-index: 2; position: relative; font-size: 16px; }
.menuBar .nav { width: 100%; justify-content: space-between; text-align: center; border: 0;}
.menuBar .nav > li {min-height: 115px; flex-grow: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 0;}
.menuBar .nav > li.activeLi {z-index: 1;}
.menuBar .nav > li > a, .menuBar .nav > li > .linkOuter a {color: #fff; height: 100%; width: 100%; display: flex; align-items: center; z-index: 1; justify-content: center; position: relative;}
.menuBar .nav > li > a span  {max-width: 155px;display: inline-block; }
.menuBar .nav > a:focus, .menuBar .nav a:hover {color: #fff; text-decoration: none;}

.menuBar .nav > li.active > a, .menuBar .nav > li.active > .linkOuter a {color: #fff;}

.menuBar .nav > li:first-child  {border-radius: 115px 0 0 115px;}
.menuBar .nav > li:last-child  {border-radius: 0 115px 115px 0;}

.menuBar .nav > li:first-child a.active::before, 
.menuBar .nav > li:last-child a.active::after {display: none;}

.menuBarContent {z-index: 0; position: relative; margin-top: -45px;}
.menuBarContent .tab-pane {padding-top: 45px;}
.subMenu {display: flex; justify-content: space-between;  padding: 15px 30px;  font-size: 20px; min-height: 120px; }
.subMenu a {color: #fff;  flex-grow: 1; max-width: 150px; text-align: center; display: flex; align-items: center; justify-content: center;}

.subMenu a:hover {text-decoration: none;}

.menuBar .nav a.active::after,
.menuBar .nav a.active::before {content: ''; position: absolute; height: 115px; width: 110px; top: 0;}
.menuBar .nav a.active::after {right: -60px; border-bottom-right-radius: 115px; border-top-right-radius: 115px;}
.menuBar .nav a.active::before {left: -60px; border-bottom-left-radius: 115px; border-top-left-radius: 115px;}

.current { color: #FFEDD4 !important; }
.subMenu a.active {color: #5b1a82;}

.blueColor,
.blueColor .dropdown-menu,
.blueColor a.active::after,
.blueColor a.active::before {background-color: #3768ad;}

.pinkColor,
.pinkColor .dropdown-menu,
.pinkColor a.active::after,
.pinkColor a.active::before {background-color: #ce267d;}

.orangeColor,
.orangeColor .dropdown-menu,
.orangeColor a.active::after,
.orangeColor a.active::before {background-color: #f06c21;}

.purpleColor,
.purpleColor .dropdown-menu,
.purpleColor a.active::after,
.purpleColor a.active::before {background-color: #5b1a82;}
.purpleColor .subMenu a.active {color: #44b4dc;}

.liteBlueColor,
.liteBlueColor .dropdown-menu,
.liteBlueColor a.active::after,
.liteBlueColor a.active::before {background-color: #44b4dc;}

.grayColor,
.grayColor .dropdown-menu,
.grayColor a.active::after,
.grayColor a.active::before {background-color: #989292;}

/* Project Detail 
================================================ */
.about-student { background-color: #350F56; padding: 3px; border: 5px; /*padding-bottom: 90px!important;*/ }
.project-title { font-weight: 700; color:  #CE267C; font-size: 32px; margin-bottom: 20px; }
h4 { font-size: 20px; color: #FFEDD4; font-family: 'Source Sans 3', sans-serif;}
h4 label { color: #E8C3FF; padding-right: 5px;}
.synopsis { font-family: 'Source Sans 3', sans-serif; font-weight: 400; font-size: 16px; color: #000000; line-height: 28px; }
.synopsis h3 { color: #5A1A82; font-weight: 600; font-size: 22px; margin-bottom: 20px; }
.synopsis h4.read-more { color: #350F56; font-weight: 600; font-size: 16px; margin-bottom: 25px; margin-top: 25px; }
.keywords label { padding-left: 5px; color:#000; font-size: 16px; font-weight: 600; }

.card:hover {
    border: var(--violet-dark) solid 4px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
}

/* Credits */
.credit-list span { cursor: pointer; font-family: 'Source Sans 3', sans-serif; font-weight: 700; }
.credit-list span:hover { cursor: pointer; font-weight: 700; }
.credit-list p { font-size: 13px; font-weight: 500; margin-bottom: 10px; line-height: 20px; }
.credit-list h4 { font-size: 13px; margin:15px 0 0 0;  font-weight: 700; color:var(--ind-color); }
.credit-list h3 { text-transform: uppercase; font-weight: 700; display: inline-block; border-bottom: var(--cream) solid 2px; padding-bottom: 1px; font-size: 13px; margin-bottom: 5px; }

.archives a { font-size: 15px; margin:15px 0;  font-weight: 500; color:var(--ind-color); display: block; }
.mobile-nav { display: none; }
.show-sm {display: block; }
.show-xs {display: none; }

/*.show-xs { display: block; }
.show-lg { display: none; }*/

/* Media Queries
=============================================== */
@media screen and (max-width: 768px) {
	.show-sm {display: none; }
	.show-xs {display: block; }
	.credit-list { margin-top: 100px; margin-bottom: 30px; }
	/*.show-xs { display: block; }
	.show-lg { display: none; }*/
	.messages { margin-top: 75px; }
	.desktop-nav { display: none; }
	.mobile-nav { display: block; z-index: 1000; top:0; }
	.mobile-nav img.identity { width: 100%!important; height: auto; }
	body > .mob { margin-top: 130px !important; }
	#accordion ul, #accordion li { padding: 3px; }
	#accordion { padding-top: 30px; }
	#accordion .card { flex-direction: column; align-items: stretch; border:none; padding: 3px; border-radius: 15px; }
	#accordion .card-header { background-color: transparent; border-bottom: none; padding-bottom: 10px; padding: 0;  }
    #accordion .card-body { margin-left: 0px; max-width: 100%; }
	#accordion .card-body li { font-size: 16px;  padding: 10px; text-decoration: none; }
	#accordion a { font-family: 'Inter', sans-serif; font-weight: 500; display: block; text-decoration: none; color: var(--body-bg);  padding-left: 0; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; }
	#accordion li {width: 100%}	
	#accordion .rounded { border-radius: 2.25rem!important; }
	#accordion .rounded-body { border-radius: 1.25rem!important; }
	.btn:focus { box-shadow: none; }
	.btn-link, .btn-link:hover { color:#fff; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--body-bg); }
	.card { justify-content:flex-start;  }
	.square-img { width: 200px; height: 200px; float: none; margin: 0px auto!important;}
	.card .square-img-container { width: 120px; height: 120px; }
	.card .square-img-container img { width:100%; height:auto; }
	.student-card .col-sm-6 { margin-bottom: 20px!important; }
	.card-body { padding-right:0; }
	.card .square-img-container img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
	.messages p { margin-left: 15px; }
	.messages .col-sm-8 { padding-left: 0px !important; }
	.messages h3 { font-size: 28px; text-align: center;}
	.guide1 { margin-top: 150px!important; }
   #nav-icon3 {
  width: 30px;
  height: 45px;
  /*position: relative;
	   
  margin: 50px auto;*/
  margin-top: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top:-35px;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  right: 0;
  height: 3px;
  width: 100%;
  background: #d3531a;
  border-radius: 10px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 10px;
}

#nav-icon3 span:nth-child(4) {
  top: 20px;
}

#nav-icon3.open span:nth-child(1) {
  top: 20px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

}

@media screen and (max-width: 768px) {
	.navbar-md { display: block; }
}