@media (max-width: 767px){
  .navbar-area{
    position: fixed;
    top: 0;
  }
  .row{
    width: 100%;
    margin: 0;
  }
  .home-slider{
    height: 48vh;
    max-height: 500px;
    background: var(--purple);
    width: calc(100% - 80px);
    margin: 0 40px;
    margin-top: -200px;
    padding: 20px;
    position: relative;
  }
  .home-slider .hero-text{
    width: 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
  }
  .hero-area{
    /*height: calc(100vh - 100px);*/
    height:auto;
  }
  .hero-area .home-banner-img{
    /*height: 60vh!important;*/
  }
  .hero-area .home-banner-img img{
    width: 100%;
    height: auto;
  }
  .hero-area .hero-text h1{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
  }
  .hero-area .hero-text p{
    font-size: 14px;
    text-align: center;
  }
  .hero-area .hero-text .button{
    text-align: center;
    margin: 20px auto 0 auto;
  }
  .hero-area .hero-text .button .btn{
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
  }
  .mission .about-left{
    width:100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .halfnhalf .about-left{
    width:100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .single-heading-left h2{
    position: relative;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    font-weight: 700;
    width: 100%;
    font-size: 22px;
    margin-bottom: 50px;
  }

  .halfnhalf .col-12{
    padding: 30px!important;
  }
  .principal{
    height: 100%;
  }
  .principal img {
    height: auto;
    width: 100%;
  }
  .npfWidgetButton{
    left: 72%!important;
    top: 75%!important;
  }
  #popup-6c4c69ff8d815746c948d96c63d34df2 iframe{
    height: 70vh;
  }
  #vacancyModal .modal-dialog {
    width: 100%;
    margin: 0;
  }
  .branchesCard{
    margin-bottom: 100px;
  }
  .row.mt-5{
    margin-top: 0!important;
  }
  .full-banner{
    height: 25vh;
  }
  .section{
    text-align:center;
    padding: 30px 0;
  }
  .faqs .accordion .card button{
    width: 100%;
    font-size: 14px;
  }
  .feestructure .feetable th, .feestructure .feetable td {
    font-size: 12px;
  }
  .centerHeading h2{
    font-size:22px;
  }
  .cocurricular{
    margin-bottom: 60px;
    padding: 0 20px;
  }
  .cocurricular .home-slider .hero-text{
    margin: 0;
  }
  .cocurricular .hero-area .home-banner-img{
    background-position: top center!important;
  }
  .guidelinesmiddle.section{
    padding: 20px 0!important;
  }
  .sports-half .about-left {
    width: 100%;
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
  }
  .branchesCard{
    padding: 50px 20px;
  }
  .branchesCard .card-title{
    width: 100%;
    font-size: 16px;
  }
  .branchesCard .card-text p{
    font-size: 14px;
  }












}