@font-face {
font-family: 'Orbitron Light';
font-style: normal;
font-weight: normal;
src: local('Orbitron Light'), url('../fonts/orbitron-light.woff') format('woff');
}


.checkedcolor {
  color: orange;
} 
.page_title
{
  font-size: 18px;
  text-shadow:  2px 3px 4px #ccc;
  margin-bottom: 10px;
} 



@font-face {
font-family: 'Orbitron Light';
font-style: normal;
font-weight: normal;
src: local('Orbitron Light'), url('../fonts/orbitron-light.woff') format('woff');
}
.page-spacer1050 { padding:10px 0 50px 0; }
.clr_height_20{clear:both;height:20px;}
.clr_height_10{clear:both;height:10px;}
.clr{clear:both;}
.email_update_sms{list-style:none;}
.align-center{text-align:center;}
.border_with_padding_10{
  border:1px solid #ccc;padding:10px;
}
.padding_10{
  padding:10px;
}
.height_100percent{
  height:100%;
}
.margin_10{
  margin:10px;
}
.margin_5{
  margin:5px;
}
.margin_top_5{
  margin-top:5px;
}
select
{
  padding:8px 10px;
  width:100%;
}
.heading-text-shadow{
  text-shadow: 2px 2px 4px #0000FF;
}
.std_min_height{min-height:280px;}

.home-min-height-650{margin-top:10px;margin-bottom:10px;}

.mission_min_height{min-height:270px;}
.inspiration_min_height{min-height:170px;}

.dropcap2 {
    display: block;
    float: left;
  font-size: 3.1em;
    font-weight: 400;
    line-height: 36px;
    margin-right: 6px;
    text-shadow: none;
}
.text-primary2 {
    color: #188ae2 !important;
}
.btn-primary2{
    background: #188ae2 !important;
  color:#fff!important;
}

.circularshaped {
    position: relative;
   
    display: inline-block;
    overflow: hidden;
  
    vertical-align: middle;
    z-index: 1;
   border-radius: 30px;
}
.count-down
{
  font-size:22px;
  font-weight:400;
  color:#000ae2;
  text-shadow:4px 4px 4px #188ae2;
  text-align:center;
}
.btn-rounded {
    border-radius: 8px;
    padding: 6px 18px;
  margin:5px 0px;
}

span.qnumber {
  background: #06a304;
  border-radius: 13px;
  -moz-border-radius: 13px;
  -webkit-border-radius: 13px;
  color: #ffffff;
  display: inline-block;
  font-size:18px;
  font-weight: bold;
  line-height: 26px;
  margin-right: 5px;
  text-align: center;
  width: 26px; 
}
.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_circle {
    position: absolute;
    width:22px;
    height:22px;
    background-color: green;
    border-radius:11px;
    left:0;
    top:0;
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#fff;
    left:8px;
    top:12px;
}

span.wrongsign {
  background: red;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #ffffff;
  display: inline-block;
  font-size:13px;
  font-weight: bold;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px; 
}

.small-outer-class
{
  border:1px solid #ccc;padding:0px 5px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;
}



@media only screen and (min-width:780px) and (max-width: 1920px)  {
  .vission_min_height{min-height:550px;}
}
@media only screen and (min-width:1000px) and (max-width: 1920px)  {
.home-min-height-650
{
  min-height:470px;
}

}


  .sinlge-skill p em {
    color: #ccc!important;
  text-shadow:2px 2px 2px #000;
   
}
.sinlge-skill p {
    color: #ccc!important;
  text-shadow:2px 2px 2px #000;
    
}

.green_background
{
  background:rgba(106,164,47,1);
  color:#fff;
  
} 

.lightgreen_background
{
  background:rgba(50,205,50,1);
  color:#fff;
  
} 
.black_background
{
  background:rgba(0,0,0,1);
  color:#fff;
  
} 

.gray_background
{
  background:rgba(0,0,0,0.5);
  color:#fff;
  
}
.red_background
{
  background:rgba(219,54,21,1);
  color:#fff;
  
}
.blue_background
{
  background:rgba(45,125,164,1);
  color:#fff;
  
}
.yellow_background
{
  background:rgba(255,189,32,1);
  color:#fff;
  
}



.progress2 {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 2px;
    margin-bottom: 2px;
    overflow: hidden;
  border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  border:1px solid #ccc;
  
}

.progress2 span
{
  padding:5px 10px;
  color:#ccc!important;
}

.progress3 {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 2px;
    margin-bottom: 2px;
    overflow: hidden;
  border-radius: 20px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  border:1px solid #ccc;
}

.progress3 span
{
  padding:5px 10px;
  color:#ccc!important;
}




.btn-default{
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-primary{
  color: #fff;
  background-color: #286090;
  border-color: #122b40;

}
.btn-primary:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

.btn-success{
  color: #fff;
  background-color: #449d44;
  border-color: #255625;
}
.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}
.btn-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-danger{
  color: #fff;
  background-color: #c9302c;
  border-color: #761c19;
}
.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.center {
    text-align: center;
     padding-bottom: 5px; 
}
.feature-wrap2 i {
    font-size: 48px;
    height: 110px;
    width: 110px;
    margin: 3px;
    border-radius: 100%;
    line-height: 110px;
    text-align: center;
    background: #ffffff;
    color: #c52d2f;
    border: 3px solid #ffffff;
    box-shadow: inset 0 0 0 5px #f2f2f2;
    -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    float: inherit;
   
} 

@media only screen and (min-width:10px) and (max-width: 678px)  {
  #piechart_marks
  {
    margin-left: -65px;
  }
   #piechart_correct
  {
    margin-left: -65px;
  }
   #piechart_wrong
  {
    margin-left: -65px;
  }
   #piechart_na
  {
    margin-left: -65px;
  }
 
}


.p-6-10
{
  padding:6px 10px!important;
}
.fss
{
  font-size: 12px;
}
.fss11
{
  font-size: 11px;
}
.fss13
{
  font-size: 13px;
}


/* Center the loader */
.loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Hide the content initially */
.content {
    display: none;
}

.syllabi-section ul li {
  margin: 30px;
  padding: 10px;
  background: #36524b;
  opacity: .7;
} 


.carousel-control-prev-my,
.carousel-control-next-my {
top:45%;
  background-color: rgba(0, 0, 0, 0.5); /* Set your desired color and opacity */
  width: 40px; /* Set the width of the control */
  height: 40px; /* Set the height of the control */
  border-radius: 50%; /* Make the control round */
  display: flex;
  align-items: center;
  justify-content: center;
}
.go-top-button {
  position: fixed;
  bottom: 20px; /* Position from the bottom */
  right: 20px;  /* Position from the right */
  display: none; /* Hidden by default */
  background-color: #007bff; /* Button color */
  color: white; /* Text color */
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000; /* Ensure it is above other content */
  transition: opacity 0.3s; /* Smooth transition */
}

.go-top-button:hover {
  background-color: #0056b3; /* Hover color */
}

.mt-90
{
margin-top: 100px!important;
}

.mt-50
{
margin-top: 40px!important;
}

.mt-60
{
margin-top: 60px!important;
}

.mt-70
{
margin-top: 70px!important;
}


.padded-cell {
  padding: 10px!important;
} 

.card-bg {
  position: relative;
  overflow: hidden;
}

.card-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/logo-transparent-small.png') no-repeat center center;
  background-size: cover;
  opacity: 0.2;
  /* Set the desired opacity */
  z-index: 0;
  /* Ensure it stays behind the content */
}

.card-body {
  position: relative;
  z-index: 1;
  /* Ensure content stays above the background image */
}

.btn-custom {
          position: relative;
          
          border: none;
          background-color: transparent; /* Make background transparent */
          background-image: url('../images/logo-transparent-button.png'); /* Set the background image */
          background-size: cover; /* Cover the entire button */
          background-position: center; /* Center the image */
          background-repeat: no-repeat; /* Do not repeat the image */
          transition: all 0.3s ease; /* Smooth transition */
      }

      .btn-custom:hover {
          opacity: 1; /* Optional hover effect */
      }
      
      .btn-custom2 {
        position: relative;
        
        border: none;
        background-color: transparent; /* Make background transparent */
        background-image: url('../images/logo-transparent-button-2.png'); /* Set the background image */
        background-size: cover; /* Cover the entire button */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        transition: all 0.3s ease; /* Smooth transition */
    }

    .btn-custom2:hover {
        opacity: 1; /* Optional hover effect */
    }

    .rotating-image {
      width: 200px; /* Set the desired width of the image */
      height: 200px; /* Set the desired height of the image */
      animation: rotate 6s linear infinite;
  }

  .rotating-image150 {
    width: 150px; /* Set the desired width of the image */
    height: 150px; /* Set the desired height of the image */
    animation: rotate 10s linear infinite;
} 

.rotating-image20 {
  width: 20px; /* Set the desired width of the image */
  height: 20px; /* Set the desired height of the image */
  animation: rotate 3s linear infinite;
}

  @keyframes rotate {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(360deg);
      }
  }

  .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 60s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero { padding-block-start: 155px; }

.hero .container {
  display: grid;
  gap: 40px;
}

.hero-text {
  color: #000;;
  font-size: 18px;
  text-align: center;
  margin-block: 18px 20px;
}

.hero .btn { margin-inline: auto; }

.hero-banner {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: flex-start;
  gap: 30px;
}

.hero-banner .img-holder .one img{
  border-top-right-radius: 70px!important;
  border-bottom-left-radius: 110px!important;
}

.hero-banner .img-holder .two img{
  border-top-left-radius: 50px!important;
  border-bottom-right-radius: 90px!important;
}


@media (min-width: 575px) {
  .hero-banner { grid-template-columns: 1fr 0.9fr; }


}

@media (min-width: 768px) {
  .hero { padding-block-start: 165px; }

  .hero .container { gap: 50px; }

  .hero-text { margin-block-end: 30px; }

  .hero-banner {
    position: relative;
    z-index: 1;
  }

  .hero-banner .img-holder { max-width: max-content; }

  .hero-banner .img-holder.one { justify-self: flex-end; }

  .hero-banner .img-holder.two { margin-block-start: 100px; }

  .hero-shape-1 {
    display: block;
    position: absolute;
    bottom: -40px;
    left: -10px;
  }

}

@media (min-width: 992px) {
  
  .hero .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .hero .section-title,
  .hero-text { text-align: left; }

  .hero .btn { margin-inline: 0; }

}

@media (min-width: 1200px) {
  
  .hero { padding-block-start: 195px; }

  .hero .container { gap: 80px; }

  .hero-shape-2 {
    top: -80px;
    z-index: -1;
  }

}


.hand-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/mb.png') no-repeat center center;
  background-size: cover;
  opacity: 0.7;
  /* Set the desired opacity */
  z-index: 0;
  /* Ensure it stays behind the content */
}

.hand-container {
  position: relative;
  width: 400px;
  height: 512px;
}
.screen {
  position: absolute;
  top: 40px;
  left: 250px;
  transform: translateX(-50%);
  width: 167px;
  height: 295px;

  background-color: #fff; 
  display: flex;
  justify-content: center;
  align-items: center;
 
}


.text-6-all::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/6_text_blank.png') no-repeat center center;
  background-size: cover;
  opacity: 0.7;
  /* Set the desired opacity */
  z-index: 0;
  /* Ensure it stays behind the content */
}

.text-6-all {
  position: relative;
  width: 291px;
  height: 512px;
}
.text-inside-1 {
  position: absolute;
  top: 90px;
  left: 65px;
  transform: translateX(-50%);
  width: 55px;
  height: 20px; 

 
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.text-inside-1-hand-lick
{
  position: absolute;
  top: 35px;
  left: 115px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-inside-2 {
  position: absolute;
  top: 105px;
  left: 218px;
  transform: translateX(-50%);
  width: 55px;
  height: 20px; 
 
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.text-inside-2-hand-lick
{
  position: absolute;
  top: 45px;
  left: 257px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-inside-3 {
  position: absolute;
  top: 245px;
  left: 70px;
  transform: translateX(-50%);
  width: 55px;
  height: 20px; 
 
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.text-inside-3-hand-lick
{
  position: absolute;
  top: 185px;
  left: 115px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-inside-4 {
  position: absolute;
  top: 257px;
  left: 218px;
  transform: translateX(-50%);
  width: 55px;
  height: 20px; 
 
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.text-inside-4-hand-lick
{
  position: absolute;
  top: 195px;
  left: 257px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-inside-5 {
  position: absolute;
  top: 394px;
  left: 70px;
  transform: translateX(-50%);
  width: 55px;
  height: 20px; 
 
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.text-inside-5-hand-lick
{
  position: absolute;
  top: 334px;
  left: 115px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-inside-6 {
  position: absolute;
  top: 404px;
  left: 218px;
  transform: translateX(-50%);
  width: 55px;
  height: 20px; 
 
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.text-inside-6-hand-lick
{
  position: absolute;
  top: 344px;
  left: 258px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.hand_blick 
{
  animation: blink_hn 3s step-end infinite;
 
}



@keyframes blink_hn {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.text-inside-each
{
  font-size:10px;
  font-weight: bold;
  color: #fff; 
}
.text-inside-each:hover{
  text-shadow: 2px 6px 15px rgba(0,0,0,0.82);
  font-size:12px;
  font-weight: bold;
  cursor: pointer;
}


@media (max-width: 600px) {
  .hand-container {
    display: none;
  }
  .screen {
    display: none;
  }
  .text-6-all {
    display: none;
  }
  .hand_blick
  {
    display: none;
  }
  #youtube-video77
  {
    display: none;
  }
  .text-inside-each
  {
    display: none;
  }

}

#m_div, #j_div
{
  min-height:300px;
}

.cont-us-bckg::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('../images/contact.png') no-repeat center center;
  background-size: cover;
  opacity: 0.6;
  /* Set the desired opacity */
  z-index: 0;
  /* Ensure it stays behind the content */
}

.cont-us-bckg {
  position: relative;
  width: 616px;
  height: 512px;
}

footer {
  height: 300px;  
  background-image: linear-gradient(to right bottom, #3d0699, #4117a9, #4324b9, #4530c9, #463cda, #5850e4, #6963ee, #7976f8, #9996fb, #b8b6fd, #d6d6fd, #f6f6fb);
} 



.shape {
  position: absolute;
  display: none;
}

.about-banner {
  position: relative;
  z-index: 1;
}

.about-banner .img-holder { border-radius: 10px; }



@media (min-width: 768px) {

  
  .about-banner {
    padding: 60px;
    padding-inline-end: 0;
  }

  .about-banner .img-holder {
    max-width: max-content;
    margin-inline: auto;
  }

  .about-shape-1 {
    display: block;
    top: -40px;
    right: -70px;
  }

  .about-shape-2 {
  display: block;
  bottom: -100px;
  left: -60px;
  animation: bounce 2.5s infinite;
}

}

@media (min-width: 1200px) {
  
  .shape { display: block; }
  .about-banner .img-holder { margin-inline: 0; }

  .about-shape-3 {
    top: -20px;
    left: -100px;
    z-index: -1;
  }

  
  .about-shape-4 {
    top: 30px;
    right: -60px;
    z-index: -1;
  }


}

.top-right-bottom-left-border{
  border-top-right-radius: 110px!important;
  border-bottom-left-radius: 110px!important;
}

@media (min-width: 1200px) {
.video-shape-1 {
  top: -10px;
  left: -50px;
}

.video-shape-2 {
  top: -80px;
  right: 120px;
  z-index: 1;
}
}

.box { 
  opacity: 0;
  animation: fadeInOut 18s infinite;
}

.box1 {
  animation-delay: 0s;
}

.box2 {
  animation-delay: 2s;
}

.box3 {
  animation-delay: 4s;
}

.box4 {
  animation-delay: 6s;
}

.box5 {
  animation-delay: 8s;
}

.box6 {
  animation-delay: 10s;
}

.box7 {
  animation-delay: 12s;
}

.box8 {
  animation-delay: 14s;
}

.box9 {
  animation-delay: 16s;
}

/* Keyframe animation */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#about_shape_1_div
{
  position:absolute;
  left:525px;
  top:0px;
}
#about_shape_1_div .lg
{  
  padding-left: 20px;
}
#about_shape_1_div .ju
{
  font-size: 32px;
  font-family:khula;
  font-weight: bold;
  color: #188ae2;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  animation: colorChange 5s linear infinite;
}
.thecolorchange
{
  animation: colorChange 5s linear infinite;
}

#about_shape_1_div .alumni
{
  font-size: 30px;
  font-family:khula;
  font-weight: bold;
  color:orange;
  padding-left:60px;
}

@keyframes colorChange {
  0% {
    color: #3498db; /* Blue */
  }
  25% {
    color: #e74c3c; /* Red */
  }
  50% {
    color: #f1c40f; /* Yellow */
  }
  75% {
    color: #2ecc71; /* Green */
  }
  100% {
    color: #3498db; /* Blue (back to initial) */
  }
}

#reg_blink
{
  transition: transform 2s ease-in-out;
}
#log_blink
{
  transition: transform 2s ease-in-out;
}

#log_blink.move{
  transform: translateX(-500px) translateY(90px);
}

#reg_blink.move{
  transform: translateX(-350px) translateY(100px);
}

#exa_blink
{
  transition: transform 2s ease-in-out;
}

#exa_blink.move{
  transform: translateX(-350px) translateY(-50px);
}
#res_blink
{
  transition: transform 2s ease-in-out;
}

#res_blink.move{
  transform: translateX(-500px) translateY(-60px);
}

#wea_blink
{
  transition: transform 2s ease-in-out;
}

#wea_blink.move{
  transform: translateX(-350px) translateY(-200px);
}

#com_blink
{
  transition: transform 2s ease-in-out;
}

#com_blink.move{
  transform: translateX(-500px) translateY(-210px);
}  


.ring-50 {
  width: 60px;
  height: 60px;
  border: 10px solid #3498db;
  border-radius: 50%;
  animation: colorChangering50 2s infinite;
}

@keyframes colorChangering50 {
  0% {
      border-color: #3498db;
  }
  25% {
      border-color: #e74c3c;
  }
  50% {
      border-color: #f1c40f;
  }
  75% {
      border-color: #2ecc71;
  }
  100% {
      border-color: #3498db;
  }
}

@media (min-width: 600px) {
.desktop-height
{
  margin-top:60px;
}
}