@media only screen and (max-width: 820px) {
   .top-space {
      margin-top: 64px;
   
  }
    .glance-top-space {
        margin-top: 250px;
    }
    .main-sec {
        margin-top: 64px;
    }
   .welcome-sec h5 {

      font-size: 24px;
   }
    .hd-height {
        height: 65px;
    }

    .sticky-hdr h2 {
        font-size: 22px;
    }
   .welcome-sec h2 {
      font-size: 32px;
   }

   .welcome-sec h3 {
      font-size: 30px;
   }

   .welcome-sec h3:before {
      width: 70px;
   }

   .login-wrp {
      width: 100%;
   }

   .home-hd-sec h5 {
      font-size: 24px;
      text-align: left;
   }

   .home-hd-sec h2 {
      font-size: 32px;
      text-align: left;
   }

   .home-hd-sec h3 {
      font-size: 30px;
   }

   .box-wrp {
      padding: 5px;
      margin-top:10px;
   }

    .icn-wrp {
        width: 50px;
        height: 50px;
    }

   .shape-cvr {
      width: 200px;
   }


   .offcanvas {
      max-width: 75%;
   }
   .fc-toolbar h2 {
      font-size: 1.20em !important;
      margin: 0;
  }
    a.home-wrk-box-wrp:before {
        font-size: 36px;
    }
    .hd-top h2 {
        color: #ffffff;
        font-family: "Lobster";
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        position: relative;
    }

    .hd-top h5 {
        color: #ffbb01;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        margin-top: 5px;
    }
}

@media only screen and (max-width: 600px) {
    .box-wrp h5 {
        font-size: 10px;
    }
   .box-wrp-blue,
   .box-wrp-light-blue,
   .box-wrp-light-ylw,
   .box-wrp-rose,
   .box-wrp-light-grn,
   .box-wrp-violet {
      padding: 10px 0px 10px 0px;
   }
   .btn-colum{
      flex-direction:column ;
   }
   .hm-wrk-top-space {
      margin-top: 390px;
  }
  .top-20{
   margin-top: 20px;;
 }
 .box-wrp-blue h5, .box-wrp-light-blue h5, .box-wrp-light-ylw h5, .box-wrp-rose h5, .box-wrp-light-grn h5, .box-wrp-violet h5, .box-wrp-blue h5, .box-wrp-light-blue h5{
   font-size: 10px;

 }
 .pink-btn-sml-stu{
   padding: 6px 6px 6px 6px;
   font-size: 12px;
 }
 .present{
   font-size:14px;
   padding: 3px 20px 6px 20px;

}

}


@media only screen and (max-width: 380px) {
.pink-btn-sml-stu {
    padding: 6px 5px 6px 5px;
    font-size: 11px;
}
.stu-prfle h3 {
   font-size: 18px;
}
}