/*header style start*/
  .navbar-brand .mainlogo{
    width: 100%;
    max-width: 1100px;height: 110px
  }
/*header style end*/
/*scroll btn style start*/
#scrolltopbtn {
    color:#662e91;
  display: flex;
      justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
  background-color: #ffc107;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 60px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#scrolltopbtn:active {
  background-color: #555;
}
#scrolltopbtn.show {
  opacity: 1;
  visibility: visible;
}
#scrolltopbtn svg{
  font-size: 12px;
}
/*scroll btn style end*/

.sjcet-box{
    /*background-color:#a42eff33!important;*/
  background-color: #fbf8fe!important;
}
/*welcome section design start*/

.design-arrow{
      position: absolute;
    left: 0;
}
.design-arrow img{
  width: 200px;
}
.welcome-site-title{
  font-weight: 800;
    text-transform: capitalize;
    font-size: 45px;
    color:#662e91;
    margin-top: 10px;
    margin-bottom: 0;
    position: relative;
}
.site-title-tagline{
  text-transform: none!important;
}
.site-title-tagline {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 18px;
    font-weight: 700;
    color: #662e91;
    position: relative;
}
.course-site-title {
    font-weight: 800;
    text-transform: capitalize;
    font-size: 55px;
    color: #662e91;
    margin-top: 10px;
    margin-bottom: 0;
    position: relative;
}
.site-heading p {
    margin-top: 15px;
}
.welcom_images img{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 20px;
}

/*welcome section design end*/

/*event style start*/
.section-title h2 {
    font-size: 50px;
    margin-bottom: 0 !important;
    padding-bottom: 0;
    position: relative;
    font-weight: 800;
}
.event-item{
      /*border-rlaadius: 20px;*/
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
    background-color: #fff;
    padding: 12px;
  
}
.event-item:hover img {
    transform: scale(1.1);
}
.event-item .thumb {
    overflow: hidden;
}
.hover-zoomin a {
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.hover-zoomin img {
    height: auto;
    transition: all .5s ease-in-out;
    width: 100%;
}
.event-content {
    padding: 12px;
    position: relative;
    transition: all .5s ease 0s;
}
.event-content .date {
    background-color: #ff7350;
    color: #fff;
    font-family: Jost, sans-serif;
    font-size: 12px;
    height: 67px;
    left: 30px;
    position: absolute;
    text-align: center;
    top: -60px;
    width: 87px;
}
.event-content .date strong {
    display: block;
    font-size: 24px;
}
.event-content h3 a{
    font-size: 18px;
    color: #c2001b;
}
.event-content .time {
    font-family: Jost, sans-serif;
}
.event-content .time strong {
    color: #ff7350;
    font-weight: 500;
}
.event-content .time i {
    margin-left: 5px;
    margin-right: 5px;
}
/*event style end*/

/*study style start*/
#particles-js {
    position: absolute;
    height: 100%;
    z-index: 0;
}
.studybg{
  background-image: url('images/homebg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  /*background: linear-gradient(148deg, rgba(2, 0, 36, 0.7848273098301821) 0%, rgba(13, 95, 249, 0.9697012594100141) 100%);*/
    width: 100%;
    
}

.custom_card {
  --blur: 16px;
  --size: clamp(300px, 50vmin, 600px);
  width: 100%;
  max-width: 380px;
  height: 300px;
  aspect-ratio: 4 / 3;
  position: relative;
  border-radius: 1rem;
      margin-right: 50px;
  overflow: hidden;
  color: #000;
  transform: translateZ(0);
   transition: 0.5s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + (var(--hover, 0) * 0.25))) rotate(calc(var(--hover, 0) * -5deg));
  transition: transform 0.2s;
}

.card__footer {
  padding: 0 1.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: red;
  display: grid;
  grid-template-row: auto auto;
  gap: 0.5ch;
  background:#fff;
  height: 30%;
  align-content: center;
}
.card__footer a{
      font-size: 17px;
    color: #662e91;
        font-weight: 700;
    text-decoration: none;
}
.custom_card:is(:hover, :focus-visible) {
  --hover: 1;
}
.study .custom_card{
  padding-left: 0px!important;
  padding-right: 0px!important;
}
/*study style end*/
/*spotlight style start*/
.csslider {
  /*important*/
 width: 100%;
 /*height: 450px;*/
  display: inline-block;
  text-align: center;
  position: relative;
}
.csslider > input {
  display: none;
}

.csslider > input:nth-of-type( 4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider > input:nth-of-type( 3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider > input:nth-of-type( 2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider > input:nth-of-type( 1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider > ul {
  /*important*/
  width: 100%;
  height: 100%;
  /*important*/
  position: relative;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider > ul > li {
  /*important*/
  vertical-align: top;
  font-size: initial;
  font-size: 15px;
  /*important*/
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
  transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
/*-------------NAVIGATION-------------*/
.csslider > .navigation {
  position: absolute;
  /*important*/
  bottom: -8px;
  left: 50%;
  margin-bottom: -10px;
  /*important*/
  z-index: 10;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  /*important*/
  border-radius: 50%;
  margin: 0 4px;
  padding: 5px;
  background: #fda31b;
  /*important*/
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  /*important*/
  margin-left: -6px;
  margin-top: -6px;
  padding: 7px;
  background: #fff;
  border-radius: 50%;  
  /*important*/
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
}
 
.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after
{
  opacity: 1;
}
/*-------------ARRROWS-------------*/
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .arrows {
  /*important*/
  left: -31px;
  padding: 0 31px;
  height: 26px;
  /*important*/
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 100%;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  /*important*/
  box-shadow: inset 2px -2px 0 1px #fda31b;
  /*important*/
  display: none;
  position: absolute;
  top: -50%;
  padding: 10px;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}
.csslider > .arrows label:hover {
  /*important*/
  box-shadow: inset 3px -3px 0 2px #ffffff;
  /*important*/
  margin: 0 0px;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3)
{
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4)
{
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);  
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
.more_btn{
  display: flex;justify-content: flex-end;
}
.more_btn a{
  color: #fda31b; 
}
.mou-section{
  padding: 12px;
}
.mou-section h3 {
    margin-bottom: 15px;
    font-size: 26px;
    font-weight: 800;
    text-align: justify;
        color: #ffc107;
}
.csslider img{
      height: 300px;
    border: 5px solid #ffc107;;
    border-radius: 80px 80px 0 80px;
    padding: 12px;
}
.mou-section p {
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
    font-size: var(--fontSize);
}
.opacity-2 {
    opacity: 0.2 !important;
}
.rotate-193 {
    -webkit-transform: rotate(193deg) !important;
    transform: rotate(193deg) !important;
}
.fill-orange {
    fill: #000000 !important;
}
.counter img{
  position: absolute;
        width: 320px;
    top: -216px;
    z-index: 999;
    left: -56px;
}
.choose-area{
  position: relative;
  z-index: 1;
}
.choose-area::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(static/images/01.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    z-index: -1;
}
/*spotlight style end*/
/*explore sjcet start*/
.explorebg {
    background-image: url(images/explore-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: #ffd861; */
}
.choose-card{
      background-color: white;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      padding: 10px;
      width: 100%;
      border: 1px solid #bdbdbd;
      display: flex;
      flex-direction: column;
      border-radius: 17px;
    }
    .choose-card-image img{
      width:100%;
      object-fit: cover;
      border-radius: 17px;
      object-position: center;
      aspect-ratio: 1/1;
    }
    .choose-card-body{
      padding: 10px;
    }
    .choose-card-tags{
      display: flex;
      gap: 10px;
      padding: 10px;
    }
    .tag{
      border-radius: 30px;
      padding: 2px 15px;
      font-weight: 500;
      font-size: .8rem;
      border: 1px solid #bdbdbd;
      color: #8b8b8b;
    }
    .choose-card-content{
      display: flex;
      flex-direction: column;
      font-size: 1rem;
      word-break: break-all;
    }
    .choose-card-content > p{
      color: #8b8b8b;
    }
    .choose-card-title{
      font-size: 1rem;
      font-weight: 600;
    }
    .choose-card-footer{
      display: flex;
      justify-content: center;
    }

    .choose-card-btn{
    text-decoration: none;
         background-color: rgb(102 46 145 / 25%);
      padding: 10px 20px;
      outline: none;
      border: none;
          font-weight: 700;
      cursor: pointer;
      border-radius: 20px;
      font-size: 1rem;
          color: #662e91;
      transition: all .2s;
    }
    .choose-card-btn:hover{
          color: rgb(246 77 77);
          font-weight: 700;
      transform: translateY(-4px);
    }
/*explore sjcet end */

/*banner carousal zoom effect start*/
#carouselExampleDark .carousel-item{
   animation: zoomeffect 25s infinite;
}
@keyframes zoomeffect{
    0%{
      background-position:center;
      transform:scale(1,1);
    }
    50%{
      background-position:center;
      transform:scale(1.5,1.5);
    }
    100%{
      background-position:center;
      transform:scale(1,1);
    }
}
/*banner carousal zoom effect end*/

/*life carosual design start*/
.life_sjcet_bg {
    background-image: url(images/bg-image.jpg);
}
.life_carousel-container {
  display: flex;
  align-items: center;
  gap: 1rem;
      max-width: 42vw;
}

.life_carousel-button {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #f48fb1;
  transition: color 0.2s ease-in-out;
}

.life_carousel-button:hover {
  color: #e91e63;
}

.life_carousel {
  display: flex;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 3rem;
  flex-grow: 1;
  scroll-behavior: smooth;
  border-radius: 15px;
  padding: 20px;
}

.life_card {
  flex: 0 0 auto;
  max-width: 350px;
  width: 100%;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  /*box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);*/
  overflow: hidden;
  position: relative;
  border-radius: 17px;
  background-color: #fff;
}
.lifecard_img{
  padding: 16px;
}
.life_card:hover img {
  transform: scale(1.1);
}
.lifecard_img img{
  width: 100%;
    object-fit: cover;
    border-radius: 17px;
    object-position: center;
  display: block;
  transition: transform 0.2s ease-in-out;
    aspect-ratio: 1 / 1;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.life_card:hover::before {
  animation: pulse 1s ease-in-out infinite alternate;
}
.life_sjcet_headding span{
  font-size: 2.25rem;
  font-weight: 700;
}

.life_card_name{
    width: 100%;
    background-color: #fff;
    top: 10px;
    left: 10px;
    padding: 12px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
/*life carosual design end*/

/*recuirters design start*/
.recruiters-slider {
  margin: auto;
  overflow: hidden;
  position: relative;
}
.recruiters-slide img{
  width: 200px;
  height: 100px;
}
.recruiters-slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.recruiters-slider::before {
  left: 0;
  top: 0;
}
.recruiters-slider .recruiters-slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.recruiters-slider .recruiters-slide {
  height: 100px;
  width: 250px;
}
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
/*recuirters design end*/

/*mobile devices design start*/
@media screen and (max-width: 600px) {
   .design-arrow{
  display: none;
 }
 .mou-section h3{
  font-size: 20px;
 }
 .custom_card{
  width: 100%;
  max-width: 100%;
 }
 .life_carousel-container{
      max-width: 100%;
          gap: 0;
 }
 .csslider > .arrows{
        top: auto !important;
        left: 0 !important;
        padding: 0px 0px !important;
        height: 26px !important;
        z-index: 4 !important;
        bottom: -50px !important;
 }
}
@media screen and (max-width: 900px) {
  .design-arrow{
  display: none;
 }
  .custom_card{
  width: 100%;
  max-width: 100%;
 }
 .life_carousel-container{
      max-width: 100%;
          gap: 0;
 }
  .navbar-brand .mainlogo{
    width: 100%;
    max-width: 500px;height: 72px
  }
    .mou-section h3{
  font-size: 30px;
 }
}
@media screen and (max-width: 1100px) {
   .navbar-brand .mainlogo{
    width: 100%;
    max-width: 850px;height: 72px
  }
 
}
/*mobile devices design end*/