.mainContent{
    padding-top: 68px;
 }
 /** Hero Section CSS **/
  .homePage .heroBanner {
    position: relative;
    overflow: hidden;
  }
  .homePage .heroBanner .bannerImg {
    /* background: url(./../img/homeImages/banner2.png); */
    background-repeat: var(--background-no-repeat);
    height: 100vh;
    max-height: 100%;
    background-size: cover;
    position: var(--position-relative);
    background-position: center;
  }
  .homePage .heroBanner .bannerImg .layer {
    background: #192F59;
    background: linear-gradient(to top, #192F59 0%, #FFFFFF00 100%);
    height: 100%;
  }
  .homePage .heroBanner .bannerImg .content {
    height: 84%;
  }
  .homePage .heroBanner .bannerImg .heroBanner {
    color: var(--bs-white);
  }
  .homePage .heroBanner .bannerImg .heroBanner p {
    font-size: var(--font-30);
    line-height: 35px;
  }
  .homePage .heroBanner .bannerImg .heroBanner .sectionText {
    font-family: 'josefin-sans';
    font-size: var(--font-48);
    font-weight: var(--font-600);
    line-height: 60px;
    text-transform: capitalize;
  }
  .homePage .heroBanner .bannerImg .heroBanner .designation {
    font-family: 'josefin-sans';
    font-size: 18px;
    line-height: 34px;
    text-transform: capitalize;
  }
  .homePage .heroBanner .bannerImg .heroBtn {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
  .homePage .heroBanner .bannerImg .heroBtn .btn {
    background-color: var(--primary-blue);
    color: var(--bs-white);
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
  }
  .homePage .heroBanner .bannerImg .heroBtn .overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--primary-orange);
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: 0.5s ease;
  }
  .homePage .heroBanner .bannerImg .heroBtn .overlay .icon {
    color: var(--bs-white);
    font-size: var(--font-18);
    position: var(--position-absolute);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .homePage .heroBanner .bannerImg .heroBtn:hover .overlay {
    width: 100%;
  }
  .homePage .heroBanner .shapeImg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .homePage .heroBanner .shapeImg img {
    width: 100%;   
  }
  .homePage .heroBanner .slick-dots {
    bottom: 15% !important;
    display: flex !important;
    left: calc(100% - 73%) !important;
    z-index: 222;
  }
  .homePage .heroBanner .slick-dots li button:before {
    background-color: var(--bs-white);
    color: transparent;
    border-radius: 50%;
    opacity: .8;
    width: 18px;
    height: 18px;
  }
  .homePage .heroBanner .slick-dots li.slick-active button:before {
    background-color: var(--primary-green);
    opacity: 1;
  }
   /** Hero Section CSS End **/
   /** Main KPI Section **/
  .homePage .mainKpi {
    position: var(--position-relative);
    background-color: #F9F9F9;
  }
  .homePage .mainKpi .kpiBorder {
    border-right: 1px solid #cfcfcf;
  }
  .homePage .mainKpi .kpiBorder:last-child {
    border: none;
  }
  .homePage .mainKpi .kpiImg {
    position: absolute;
    right: 0;
    top: 0;
  }
  .homePage .mainKpi .kpiImg img {
    width: 92px;
  }
  .homePage .mainKpi .info p {
    font-size: var(--font-18);
    color: var(--primary-green);
    font-weight: var(--font-500);
  }
  .homePage .mainKpi .info h5 p{
    font-size: var(--font-36);
    font-weight: var(--font-500);
    color: var(--primary-blue);
    font-family: 'josefin-sans';    
  }
  /** Main KPI Section End **/
  /** About Us Section CSS **/
  .homePage .aboutSection .vidSection {
    position: relative;
  }
  .homePage .aboutSection .vidSection .coverImg {
    position: relative;
    width: 100%;
    height: 520px;
    object-fit: var(--object-cover);
  }
  .homePage .aboutSection .vidSection .content {
    position: absolute;
    display: grid;
    width: 100%;
    top: 0;
    place-content: center;
    place-items: center;
    height: 100%;
    background: linear-gradient(90.15deg, rgba(0, 0, 0, 0.3) 0.13%, rgba(0, 0, 0, 0) 92.48%);
  }
  .homePage .aboutSection .vidSection button {
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .homePage .aboutSection .vidSection button img {
    width: 104px;
  }
  .homePage .aboutSection .videoSectionBg {
    position: absolute;
    left: 0;
  }
  .homePage .aboutSection .aboutContent {
    background-color: var(--primary-blue);
    position: var(--position-relative);
  }
  .homePage .aboutSection .aboutContent .aboutBg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
  }
  .homePage .aboutSection .aboutContent .aboutBg img{
    width: 92px;
  }
  .homePage .aboutSection .aboutContent .aboutTitle {
    font-family: 'josefin-sans';
    font-size: var(--font-36);
    font-weight: var(--font-500);
    color: var(--bs-white);
    line-height: 46px;
  }
  .homePage .aboutSection .aboutContent .description {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: var(--overflow-H);
    height: 166px;
    line-height: 30px;
    color: var(--bs-white);
    line-height: 32px;
    margin-bottom: 20px;
  }
  .homePage .aboutSection .aboutContent .aboutBtn {
    background-color: var(--bs-white);
    color: #2D2D2D;
  }
  .homePage .aboutSection .aboutContent .aboutBtn:hover {
    background-color: var(--bs-white);
    color: var(--bs-white);
  }
/** About Us Section CSS End **/
/** Director Message Css **/
  .homePage .aboutSection .aboutContent .directorBg {
    position: absolute;
    left: 0;
    transform: translate(0%, -50%);
    rotate: 180deg;
  }
  .homePage .aboutSection .aboutContent .directorBg img{
    width: 92px;
  }
/** Director Message Css End **/
/** Thriving & KPI Section CSS **/
  .homePage .thrivingSection {
    position: relative;
    padding-top: 110px;
  }
  .homePage .thrivingSection .thrivingImg {
    position: absolute;
    top: calc(100% - 124%);
    left: calc(100% - 108%);
    padding-top: 9px;
  }
  .homePage .thrivingSection .card {
    background-color: var(--primary-blue);
    color: var(--bs-white);
  }
  .homePage .thrivingSection .card i {
    rotate: 180deg;
    font-size: 72px;
    color: var(--primary-green);
  }
  .homePage .thrivingSection .card .thrivingHeading {
    font-size: var(--font-48);
    line-height: 56px;
  }
  .homePage .thrivingSection .card .thrivingHR {
    border: 0;
    opacity: 1;
    height: auto;
    border-radius: 20px;
    background-color: transparent;
  }
  .homePage .thrivingSection .card .thrivingHR::after {
    content: "";
    display: block;
    border-bottom: 6px solid var(--primary-green);
    max-width: 40px;
    border-radius: 20px;
    margin: auto;
  }
  .homePage .thrivingSection .card .content {
    font-size: var(--font-18);
    text-transform: uppercase;
  }
  .homePage .thrivingSection .card .title {
    font-size: var(--font-18);
    font-weight: var(--font-600);
    height: 60px;
  }
  .homePage .thrivingSection .card .description {
    font-size: var(--font-16);
    min-height: 48px;
  }
  .homePage .thrivingSection .card:hover {
    background-color: var(--primary-green);
    scale: 1.05;
    transition: all 500ms ease;
  }
  .homePage .thrivingSection .card:hover .thrivingHR::after {
    border-bottom: 6px solid var(--primary-blue);
    max-width: 80px;
    transition: all 800ms ease;
  }
  .homePage .thrivingSection .card:hover i {
    color: var(--primary-blue);
  }
/** Thriving & KPI section CSS End **/
/** Why BIIB CSS **/
  .homePage .whyBIIB {
    /*background-color: #CAEED5;*/
    background-color: rgba(227, 40, 69, 0.1);
  }
  .homePage .whyBIIB .sections .logo img {
    height: 54px;
    object-fit: cover;
  }
  .homePage .whyBIIB .sections .title {
    font-family: 'josefin-sans';
    color: var(--primary-blue);
    font-size: var(--font-24);
    font-weight: var(--font-600);
    line-height: 30px;
  }
  .homePage .whyBIIB .sections p {
    color: var(--primary-blue);
    font-weight: var(--font-400);
    /** Why BIIB section CSS End **/
    /** Courses Section CSS **/
  }
  .homePage .courses {
    background-color: #F9F9F9;
  }
  .homePage .courses .coursesImg .imge {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%);
    border-radius: 0px;
  }
  .homePage .courses .coursesImg .seats {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .homePage .courses .coursesImg .seats p {
    font-size: var(--font-14);
    padding: 5px;
    background: var(--primary-orange);
    border-radius: 10px 10px 0px 0px;
  }
  .homePage .courses .card-body .courseTitle {
    color: var(--primary-blue);
    font-size: var(--font-20);
    height: 52px;
    font-weight: var(--font-600);
  }
  .homePage .courses .card-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    color: #3F3F3F;
    height: 70px;
  }
  .homePage .courses .card-footer .btn-course {
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: 5px;
    font-size: 16px;
  }
  .homePage .courses .card-footer .btn-course:hover {
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: var(--bs-white);
    transition: var(--transition);
  }
  .homePage .courses .card-footer .btn-course:hover i {
    animation: slide 1s ease 0s 1 normal none;
  }
/** Courses Section CSS End **/
/** News Section CSS **/
  .homePage .news .newImg img {
    clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%);
    height: 252px;
    object-fit: cover;
  }
  .homePage .news .newImg .calender {
    position: var(--position-absolute);
    bottom: var(--bottom-0);
    width: var(--width-100);
    height: 38px;
    background: rgba(234, 136, 51, 0.9);
    display: var(--display-flex);
    flex-direction: var(--flex-dir-col);
    justify-content: var(--justify-content-center);
    height: auto;
  }
  .homePage .news .newImg .calender p {
    font-size: var(--font-14);
  }
  .homePage .news .card-body .newsTitle {
    font-size: var(--font-20);
    color: var(--primary-blue);
    line-height: 30px;
    height: 60px;
    overflow: var(--overflow-H);
    font-weight: var(--font-600);
  }
  .homePage .news .card-body .description {
    height: 78px;
    line-height: 28px;
  }
  .homePage .news .card-body p{
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 78px;
    line-height: 28px;
    color: #3F3F3F;
  }
  .homePage .news .btn-news {
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: 5px;
    font-size: var(--font-16);
  }
  .homePage .news .btn-news:hover {
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: var(--bs-white);
    transition: var(--transition);
  }
  .homePage .news .btn-news:hover i {
    animation: slide 1s ease 0s 1 normal none;
  }
  .homePage .news .btn-blogs {
    border: 1px solid var(--primary-blue);
    color: var(--bs-white);
    background: var(--primary-blue);
    border-radius: 5px;
    font-size: 16px;
  }
  .homePage .news .btn-blogs:hover {
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: var(--bs-white);
    transition: var(--transition);
  }
  .homePage .news .btn-blogs:hover i {
    animation: slide 1s ease 0s 1 normal none;
  }
/** News Section CSS End **/
/** Top Brass CSS **/
  .homePage .topBrass .card {
    box-shadow: 0px 0px 7px rgba(119, 119, 119, 0.21);
  }
  .homePage .topBrass .card .teamImg .imge {
    background-repeat: no-repeat;
    background-size: cover;
    height: 360px;
    clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%);
    background-position: top;
    /* clip-path: circle(34% at 50% 50%);
    object-fit: cover; */
  }
  .homePage .topBrass .card .card-body .line {
    height: 2px;
    width: 100%;
    background-color: var(--primary-blue);
  }
  .homePage .topBrass .card .card-body .card-title {
    color: var(--primary-blue);
    height: 36px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-16);
    justify-content: center;
    font-weight: var(--font-600);
    line-height: 20px;
  }
  .homePage .topBrass .card .card-body .card-text {
    color: #484848;
    font-size: var(--font-14);
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 66px;
  }
  .homePage .topBrass .card .card-body .card-text p {
    color: #484848;
  }
  .homePage .topBrass .card:hover {
    background-color: var(--primary-blue);
    transition: var(--transition);
  }
  .homePage .topBrass .card:hover .card-body .line {
    background-color: var(--bs-white);
  }
  .homePage .topBrass .card:hover .card-body .card-title, .homePage .topBrass .card:hover .card-body .card-text {
    color: var(--bs-white);
  }
/** Top Brass CSS End**/
/** Events Section CSS **/
  .homePage .events {
    background-color: var(--primary-blue);
    position: var(--position-relative);
  }
  .homePage .events .eventsHr {
    position: var(--position-absolute);
    left: var(--left-0);
    top: calc(100% - 67%);
  }
  .homePage .events .eventsHr img{
    width: 92px;
  }
  .homePage .events .main-heading {
    color: var(--bs-white);
  }
  .homePage .events .card .imageSection {
    position: var(--position-relative);
  }
  .homePage .events .card .imageSection .imge {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 284px;
    /* height: 306px; */
    /* clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%); */
    border-radius: 0px;
    /* height: 284px; */
    /* object-fit: var(--object-cover); */
  }
  .homePage .events .card .imageSection .dateSection {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .homePage .events .card .imageSection .dateSection .info {
    background-color: var(--primary-green);
    padding: 5px 18px;
  }
  .homePage .events .card .card-body img {
    height: 284px;
    object-fit: cover;
  }
  .homePage .events .card .card-body .eventTitle {
    font-size: var(--font-24);
    line-height: 32px;
    font-weight: var(--font-600);
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 58px;
  }
  .homePage .events .card .card-body .description {
    height: 50px;
  }
  .homePage .events .card .card-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 50px;
  }
  .homePage .events .card .card-body .muted {
    font-size: var(--font-14);
    color: #C0C0C0;
  }
  .homePage .events .eventsBtn {
    background-color: var(--bs-white);
    color: #2d2d2d;
  }
  .homePage .events .eventsBtn:hover {
    color: var(--bs-white);
  }
  .homePage .events .nav .nav-item .nav-link{
    background-color: transparent;
    height: 42px;
    width: 100px;
    border-radius: 5px;
    color: var(--bs-white);
    font-family: 'josefin-sans';
    font-size: 16px;
    border: 1px solid #FFFFFF;
  }
  .homePage .events .nav .nav-item .nav-link.active{
    background-color: #fff;
    color: var(--primary-blue);
  }
  .homePage .events .eventVideoSection {
    position: relative;
  }
  .homePage .events .eventVideoSection .imageSection{
    position: relative;
  }
  .homePage .events .eventVideoSection .imageSection .playIcon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
  }
  .homePage .events .eventVideoSection .imageSection .playIcon img{
    width: 78px;
    height: 78px;
  }
  .homePage .events .eventVideoSection:hover .imageSection .imge {
    opacity: .6;
  }
  .homePage .events .eventVideoSection:hover .imageSection .playIcon {
    visibility: visible;
  }
  .homePage .events .eventVideoSection:hover {
    background-color: var(--primary-blue);
    cursor: pointer;
    transition: all .3s linear;
  }
/** Events Section End **/
/** Campus Gallery Section CSS **/

  .campusGallery .main {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .campusGallery #carousel {
      position: relative;
      height: 480px;
      top: 50%;
      transform: translateY(-50%);
      overflow: hidden; 
  }
  .campusGallery #carousel div {
      position: absolute;
      transition: transform 1s, left 1s, opacity 1s, z-index 0s;
      opacity: 1;
  }
  .campusGallery #carousel div img {
      width: 340px;
      transition: width 1s; 
  }
  .campusGallery #carousel div.hideLeft {
      left: 0%;
      opacity: 0;
      transform: translateY(50%) translateX(-50%);
  }
  .campusGallery #carousel div.hideLeft img {
      width: 200px; 
  }
  .campusGallery #carousel div.hideRight {
      left: 100%;
      opacity: 0;
      transform: translateY(50%) translateX(-50%); 
  }
  .campusGallery #carousel div.hideRight img {
      width: 200px; 
  }
  .campusGallery #carousel div.prev {
      z-index: 5;
      left: 30%;
      transform: translateY(64px) translateX(-50%); 
  }
  .campusGallery #carousel div.prev img {
      width: 270px; 
  }
  .campusGallery #carousel div.prevLeftSecond {
      z-index: 4;
      left: 15%;
      transform: translateY(50%) translateX(-50%);
      opacity: .7; 
  }
  .campusGallery #carousel div.prevLeftSecond img {
      width: 200px; 
  }
  .campusGallery #carousel div.selected {
      z-index: 10;
      left: 50%;
      transform: translateY(30px) translateX(-50%); 
  }
  .campusGallery #carousel div.next {
      z-index: 5;
      left: 70%;
      transform: translateY(64px) translateX(-50%); 
  }
  .campusGallery #carousel div.next img {
      width: 270px; 
  }
  .campusGallery #carousel div.nextRightSecond {
      z-index: 4;
      left: 85%;
      transform: translateY(50%) translateX(-50%);
      opacity: .7; 
  }
  .campusGallery #carousel div.nextRightSecond img {
      width: 200px; 
  }

  .campusGallery .buttons {
      position: absolute;
      left: 50%;
      transform: translate(-50% , -24%);
      bottom: 10px;
      width: 100%;
      text-align: center;
  }
  .campusGallery .buttons #prev,
  .campusGallery .buttons #next {
    background-color: transparent;
    border: 1px solid var(--primary-green);
    padding: 5px 22px;
    margin: 10px;
  }
  .campusGallery .buttons #prev i,
  .campusGallery .buttons #next i{
    color: var(--primary-green);
  }
  .campusGallery .buttons #prev:hover,
  .campusGallery .buttons #next:hover{
    background-color: var(--primary-green);
  }
  .campusGallery .buttons #prev:hover i,
  .campusGallery .buttons #next:hover i{
    color: var(--bs-white);
  }


  .homePage .campusGallery {
    background-color: #F9F9F9;
  }
  .homePage .campusGallery .galleryCarousel {
    position: relative;
  }
  .homePage .campusGallery .carousel__prev, .homePage .campusGallery .carousel__next {
    position: absolute;
    bottom: 10%;
    transition: transform 0.25s ease;
  }
  .homePage .campusGallery .carousel__prev i, .homePage .campusGallery .carousel__next i {
    cursor: pointer;
    background: var(--bs-white);
    padding: 18px;
    border: 1px solid var(--primary-green);
    color: var(--primary-green);
    line-height: 0;
  }
  .homePage .campusGallery .carousel__prev i:hover, .homePage .campusGallery .carousel__next i:hover {
    background-color: var(--primary-green);
    color: var(--bs-white);
  }
  .homePage .campusGallery .carousel__prev {
    right: calc(100% - 48%);
  }
  .homePage .campusGallery .carousel__next {
    right: calc(100% - 56%);
  }
  .homePage .campusGallery .carousel__body {
    width: 100%;
    padding: 20px 0 50px 0;
    overflow: hidden;
  }
  .homePage .campusGallery .carousel__body .carousel__slider {
    position: relative;
    transition: transform 1s ease-in-out;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item {
    position: relative;
    display: block;
    float: left;
    box-sizing: border-box;
    margin-left: 10px;
    margin-right: 20px;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item .item__3d-frame {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item .item__3d-frame:after {
    content: "";
    position: absolute;
    bottom: -15%;
    width: 100%;
    height: 40px;
    transform: rotateX(90deg) translate3d(0px, -20px, 0px);
    opacity: 0.85;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item .item__3d-frame__box {
    display: flex;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--primary-blue);
    box-shadow: 0px 0px 15px 1px #192f59;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item .item__3d-frame__box h1 {
    font-size: 7em;
    width: 100%;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item .item__3d-frame__box h1 img {
    width: 100%;
    height: 180px;
  }
  .homePage .campusGallery .carousel__body .carousel__slider__item--active .item__3d-frame .item__3d-frame__box h1 img {
    height: 260px;
    transition: all 2s ease;
  }
  .homePage .campusGallery .gal {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .homePage .campusGallery .gal img {
    width: 100%;
    padding: 7px 0;
  }
  @media screen and (min-width: 300px) and (max-width: 574px) {
    .homePage .campusGallery .gal {
      -webkit-column-count: 2;
      /* Chrome, Safari, Opera */
      -moz-column-count: 2;
      /* Firefox */
      column-count: 2;
    }
    .homePage .courses .card-body .courseTitle{
        height:auto;
    }
    .homePage .events .card .card-body .eventTitle {
        height: auto;
    }
    .homePage .events .card .card-body p {
        height: auto;
    }
  }
  @media screen and (min-width: 575px) and (max-width: 767px) {
    .homePage .campusGallery .gal {
      -webkit-column-count: 2;
      /* Chrome, Safari, Opera */
      -moz-column-count: 2;
      /* Firefox */
      column-count: 2;
    }
  }
  .homePage .campusGallery .btn-blogs {
    border: 1px solid var(--primary-blue);
    color: var(--bs-white);
    background: var(--primary-blue);
    border-radius: 5px;
    font-size: 16px;
  }
  .homePage .campusGallery .btn-blogs:hover {
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: var(--bs-white);
    transition: var(--transition);
  }
  .homePage .campusGallery .btn-blogs:hover i {
    animation: slide 1s ease 0s 1 normal none;
  }
/** Campus Gallery Section CSS End **/
/** Partner Section CSS **/
  .homePage .partnerLog .heading {
    font-size: var(--font-20);
    font-weight: var(--font-600);
    color: var(--primary-green);
  }
/** Partner Section CSS End **/
/** My Campus Experience Css**/
.homePage .placementpage {
  background-color: #f9f9f9;
}
.homePage .placementpage .pagesCard .imge .guestPic{
  height: 232px;
  object-fit: cover;
  /*clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%);*/
}
.homePage .placementpage .pagesCard .imge{
  position: relative;
}
.homePage .placementpage .pagesCard .imge .playIcon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.homePage .placementpage .pagesCard .imge .playIcon img{
  width: 78px;
  height: 78px;
}
.homePage .placementpage .pagesCard .card-body {
    height: 208px;
}
.homePage .placementpage .pagesCard .card-body .card-title{
  font-size: var(--font-24);
  line-height: 32px;
  color: var(--primary-blue);
  min-height: 64px;
  font-family: 'josefin-sans';
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.homePage .placementpage .pagesCard .card-body .card-name{
  color: #3F3F3F;
  font-family: 'josefin-sans';
  font-size: 18px;
}
.homePage .placementpage .pagesCard .card-body .card-text{
  font-size: var(--font-16);
  line-height: 28px;
  color: #3F3F3F;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}
.homePage .placementpage .pagesCard:hover .imge .playIcon {
  visibility: visible;
}
.homePage .placementpage .pagesCard:hover {
  background-color: var(--primary-blue);
  cursor: pointer;
  transition: all .3s linear;
}
/* .placementpage .pagesCard:hover .imge .guestPic {
  opacity: .6;
} */

.homePage .placementpage .pagesCard:hover .imge .myexpericencePic {
  opacity: .6;
}

.homePage .placementpage .pagesCard:hover .card-title,
.homePage .placementpage .pagesCard:hover .card-text,
.homePage .placementpage .pagesCard:hover .card-name{
  color: var(--bs-white);
} 
/** My Campus Experience CSS End **/

/** New Testimonial Section CSS **/
.homePage .newTestimonial .testimonilaGrid .card{
 background-color: var(--primary-green);
  height: 340px;
}
.homePage .newTestimonial .vidCarousel p{
  font-size: 18px;
  color: #484848;
  font-weight: 500;
  line-height: 30px;
}
.homePage .testimonialVideo video {
  height: 174px;
}
.homePage .testimonialVideo .card .teamImg .imge {
    height: 230px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.homePage .newTestimonial .testimonilaGrid .card .card-text{
  font-size: 18px;
  color: var(--bs-white);
  line-height: 30px;
}
.homePage .newTestimonial .testimonilaGrid .card .card-text{
  font-size: 18px;
  color: var(--bs-white);
  line-height: 20px;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  height: 40px;
}
.homePage .newTestimonial .testimonilaGrid .card .content{
  height: 94px;
}
.homePage .newTestimonial .testimonilaGrid .card .testimonialSubtitle {
  height: 20px;
  /*overflow: hidden;*/
}
.homePage .newTestimonial .testimonilaGrid .card .content p{
  font-size: 16px;
  color: var(--bs-white);
  line-height: 20px;
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  height: 82px;
}
.homePage .newTestimonial .testimonilaGrid .card .card-title{
  font-size: 18px;
  color: var(--bs-white);
  font-weight: 600;
}
.homePage .newTestimonial .testimonilaGrid .card .card-subtitle{
  font-size: 16px;
  color: var(--bs-white);
  font-weight: 400;
} 
.homePage .newTestimonial .testimonilaGrid .card .userImg{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.homePage .newTestimonial .testimonialVideo .slick-arrow{
  display: none !important;
}
/** New Testimonial Section Css End**/

  @keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(6px);
    }
  }
  @media only screen and (min-width: 300px) and (max-width: 450px) {
    .campusGallery .galleryCarousel .carousel__prev {
      right: calc(100% - 48%);
    }
    .campusGallery .galleryCarousel .carousel__next {
      right: calc(100% - 68%);
    }
    .homePage .bannerImg {
      height: 48vh !important;
      background-size: 100% 100%;
    }
  }
  @media only screen and (min-width: 451px) and (max-width: 574px) {
    .campusGallery .galleryCarousel .carousel__prev {
      right: calc(100% - 48%);
    }
    .campusGallery .galleryCarousel .carousel__next {
      right: calc(100% - 62%);
    }
    .slickCarousel .slick-prev {
      left: calc(100% - 22%) !important;
    }
    .homePage .bannerImg {
      height: 42vh !important;
      background-size: 100% 100%;
    }
  }
  @media only screen and (min-width: 500px) and (max-width: 767px) {
    .homePage .topBrass .card .teamImg .imge{
      height:410px
    }
  }
  @media only screen and (min-width: 300px) and (max-width: 574px) {
   .homePage .bannerImg .heroBanner {
      text-align: center;
    }
    .homePage .heroBanner .bannerImg .content {
        height: 80%;
    }
    .homePage .bannerImg .heroBanner .sectionText {
      font-size: var(--font-20) !important;
      line-height: 28px !important;
    }
    .homePage .bannerImg .heroBanner .muted-text {
      font-size: var(--font-20) !important;
      line-height: normal !important;
    }
    .homePage .bannerImg .heroBanner p {
      font-size: var(--font-16) !important;
      line-height: normal !important;
    }
    .homePage .mainKpi .info p {
        font-size: var(--font-16);
    }
    .homePage .mainKpi .info h5 p {
        font-size: var(--font-24);
    }
    .homePage .aboutSection .vidSection .coverImg {
      height: 320px;
      object-fit: var(--object-cover);
    }
    .homePage .aboutSection .vidSection .content button img {
      width: 100px;
    }
    .homePage .aboutSection p {
      text-align: justify;
    }
    .homePage .aboutSection .aboutImg .outerImg {
      height: 300px !important;
      object-fit: cover;
    }
    .homePage .aboutSection .videoSectionBg img {
      width: 120px;
    }
     .homePage .aboutSection .aboutContent .aboutBg img,
    .homePage .aboutSection .aboutContent .directorBg img  {
      width: 42px;
    }
    .homePage .aboutSection .aboutContent .aboutTitle {
      font-size: var(--font-22);
      line-height: 26px;
    }
    .homePage .testimonial .testimonialLeft img {
      height: 400px;
    }
    .homePage .testimonial .testimonialRight {
      position: relative;
      height: 100%;
      width: 100%;
    }
    .homePage .testimonial .testimonialRight img {
      height: 400px;
      width: 100%;
    }
    .homePage .testimonial .testimonialRight .contentdiv {
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    .homePage .testimonial .testimonialRight .contentdiv .card .card-body .card-heading p {
      font-size: 16px;
    }
    .homePage .testimonial .testimonialRight .contentdiv .card .card-body .card-heading h3 {
      font-size: 28px;
    }
    .homePage .thrivingSection {
      padding-top: 20px;
    }
    .homePage .thrivingSection .card i {
      font-size: 46px;
    }
    .homePage .thrivingSection .card .thrivingHeading {
      font-size: var(--font-24);
    }
    .homePage .thrivingSection .card .title{
        font-size: var(--font-16);
    }
    .homePage .thrivingSection .card .description {
        font-size: var(--font-14);
    }
    .homePage .thrivingSection .card:hover {
      scale: 1;
    }
    .homePage .querySection .wrapperLeft {
      left: calc(100% - 98%);
    }
    .homePage .querySection .wrapperRight {
      right: calc(100% - 98%);
    }
    .homePage .querySection .question {
      font-size: var(--font-24);
      color: var(--primary-orange);
    }
    .homePage .querySection h4 {
      font-size: 24px;
    }
    .homePage .querySection .or {
      font-size: 36px;
      color: var(--primary-orange);
    }
    .homePage .news .card-body .newsTitle {
      height: auto;
    }
    .homePage .KPI-section .kpiBlog .counter .col-01 {
      border-bottom: 1px solid var(--bs-white);
      border-right: 0px;
    }
    .homePage .KPI-section .kpiBlog .counter .col-02 {
      border-bottom: 1px solid var(--bs-white);
    }
    .homePage .KPI-section .kpiBlog .counter .col-03 {
      border-right: 0px;
      border-bottom: 1px solid var(--bs-white);
    }
    .homePage .KPI-section .kpiBlog .counter .info span i {
      font-size: 28px !important;
    }
    .homePage .KPI-section .kpiBlog .counter .info h4 {
      font-size: 26px !important;
    }
    .homePage .KPI-section .kpiBlog .counter .info .description {
      font-size: 16px !important;
    }
    .homePage .mainKpi .kpiImg {
      top: unset;
      bottom: 0;
    }
    .homePage .mainKpi .kpiImg img {
      width: 40px;
    }

    .campusGallery #carousel {
      height: 410px;
    }
    .campusGallery #carousel div img {
      width: 240px; 
    }
    .campusGallery #carousel div.selected {
      transform: translateY(50px) translateX(-50%);
    }
    .campusGallery #carousel div.next,
    .campusGallery #carousel div.prev{
      transform: translateY(70px) translateX(-50%);
    }
    .campusGallery #carousel div.prev img,
    .campusGallery #carousel div.next img {
      width: 200px; 
    }
    .campusGallery #carousel div.nextRightSecond img,
    .campusGallery #carousel div.prevLeftSecond img {
      width: 170px; 
    }
    .homePage .heroBanner .slick-dots {
      bottom: 14% !important;
      display: block !important;
      left: 0 !important;
    }
    .homePage .heroBanner .slick-dots li button:before {
        width: 16px;
        height: 16px;
    }
    .homePage .heroBanner .shapeImg {
        bottom: 0px;
    }
    .homePage .newTestimonial .vidCarousel p{
      text-align: justify;
    }
    .homePage .newTestimonial .testimonilaGrid .card{
      height: auto;
    }
  }
  @media only screen and (max-width: 767px) {
    .homePage .thrivingSection .card .title {
      height: auto;
    }
  }
  @media only screen and (min-width: 575px) and (max-width: 767px) {
    .homePage .bannerImg {
      height: 450px;
    }
    .homePage .aboutSection .aboutImg .outerImg {
      height: 300px !important;
      object-fit: cover;
    }
    .homePage .aboutSection .aboutContent .aboutTitle {
      font-size: var(--font-22);
      line-height: 30px;
    }
    .homePage .aboutSection .aboutContent .aboutBg img,
    .homePage .aboutSection .aboutContent .directorBg img {
      width: 52px;
    }
    .homePage .testimonial .testimonialLeft img {
      height: 400px;
    }
    .homePage .testimonial .testimonialRight {
      position: relative;
      height: 100%;
      width: 100%;
    }
    .homePage .testimonial .testimonialRight img {
      height: 400px;
      width: 100%;
    }
    .homePage .testimonial .testimonialRight .contentdiv {
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    .homePage .testimonial .testimonialRight .contentdiv .card .card-body .card-heading p {
      font-size: 16px;
    }
    .homePage .testimonial .testimonialRight .contentdiv .card .card-body .card-heading h3 {
      font-size: 28px;
    }
    .homePage .thrivingSection {
      padding-top: 30px;
    }
    .homePage .campusGallery .galleryCarousel .carousel__prev {
      right: calc(100% - 48%);
    }
    .homePage .campusGallery .galleryCarousel .carousel__next {
      right: calc(100% - 60%);
    }
    .homePage .aboutSection .videoSectionBg img {
      width: 120px;
    }
    .homePage .heroBanner .slick-dots {
      left: calc(100% - 87%) !important;
    }
  }
  @media only screen and (max-width: 991px) {
    .homePage .aboutSection .vidSection .directorImg {
      height: 370px;
    }
    .homePage .mainKpi .kpiBorder:nth-child(2) {
        border: none;
    }
    .homePage .heroBanner .slick-dots li button:before {
        width: 14px;
        height: 14px;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .homePage .aboutSection .aboutImg .outerImg {
      height: 300px !important;
      object-fit: cover;
    }
    .homePage .aboutSection .vidSection .directorImg {
      height: 384px;
    }
    .homePage .aboutSection .aboutContent .aboutTitle {
      font-size: var(--font-28);
      line-height: 30px;
    }
    .homePage .aboutSection .aboutContent .aboutBg img,
    .homePage .aboutSection .aboutContent .directorBg img {
      width: 52px;
    }
    .homePage .testimonial .testimonialLeft img {
      height: 520px;
    }
    .homePage .testimonial .testimonialRight img {
      height: 520px;
    }
    .homePage .testimonial .testimonialRight .contentdiv {
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    .homePage .testimonial .testimonialRight .contentdiv .card .card-body .card-heading h3 {
      font-size: 28px;
    }
    .homePage .campusGallery .galleryCarousel .carousel__prev {
      right: calc(100% - 46%);
    }
    .homePage .campusGallery .galleryCarousel .carousel__next {
      right: calc(100% - 58%);
    }
    .homePage .aboutSection .videoSectionBg img {
      width: 160px;
    }
    .homePage .events .eventsHr img{
        width: 48px;
    }
    .homePage .heroBanner .bannerImg{
        height: 64vh;
    }
    .homePage .heroBanner .bannerImg .heroBanner .sectionText{
        font-size: var(--font-32);
        line-height: 40px;
    }
    .homePage .heroBanner .bannerImg .heroBanner p{
        font-size: var(--font-24);
        line-height: 24px;
    }
    .homePage .heroBanner .slick-dots{
         left: calc(100% - 92%) !important;
    }
    .homePage .topBrass .card .teamImg .imge {
      height: 320px;
    }
  }
  @media only screen and (min-width: 991px) and (max-width: 1400px) {
    .homePage .aboutSection .aboutContent .directorBg img {
      width: 70px;
    }
  }
  @media only screen and (min-width: 991px) and (max-width: 1099px) {
    .homePage .topBrass .card .teamImg .imge {
      height: 290px;
    }
  }
  @media only screen and (min-width: 1100px) and (max-width: 1199px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 90%) !important;
    }
    .homePage .topBrass .card .teamImg .imge {
      height: 320px;
    }
  }
  @media only screen and (min-width: 1200px) and (max-width: 1299px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 95%) !important;
    }
  }
  @media only screen and (min-width: 1300px) and (max-width: 1399px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 90%) !important;
    }
  }
  @media only screen and (min-width: 1400px) and (max-width: 1499px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 94%) !important;
    }
  }
  @media only screen and (min-width: 1500px) and (max-width: 1599px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 92%) !important;
    }
  }
  @media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 89%) !important;
    }
  }
  @media only screen and (min-width: 1700px) and (max-width: 1799px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 86%) !important;
    }
  }
  @media only screen and (min-width: 1800px) and (max-width: 1899px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 82%) !important;
    }
  }
  @media only screen and (min-width: 1900px) and (max-width: 1999px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 83%) !important;
    }
  }
  @media only screen and (min-width: 2000px) and (max-width: 2199px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 80%) !important;
    }
  }
  @media only screen and (min-width: 2200px) and (max-width: 2300px) {
    .homePage .heroBanner .slick-dots {
        left: calc(100% - 79%) !important;
    }
  }
  @media only screen and (min-width: 1400px) and (max-width: 2400px) {
    .homePage .aboutSection .aboutImg .upperImg {
      left: calc(100% - 143%) !important;
    }
    .homePage .aboutSection .aboutImg .bottomImg {
      left: calc(100% - 143%) !important;
    }
  }