.card:hover {
      box-shadow: 0 20px 30px 0 rgba(0,0,0,0.35);
    }
    .card2:hover {
      box-shadow: 0 20px 30px 0 rgba(0,0,0,0.35);
    }

    .container {
      padding: 0px 0px;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .top-container {
      text-align: center;
    }

    .header {
      padding: 0px 0px;
      background:#ececec;
      z-index: 1000
    }

    .content {
      padding: 16px;
    }


    .sticky + .content {
      padding-top: 102px;
    }
    .grey {
      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      filter: grayscale(100%);
    }

    .colorlib-search {
      clear: both; }
    .colorlib-search .search-wrap {
      width: 100%;
      display: block;
      margin-top: -8em;
      z-index: 9; }
    .colorlib-search .search-wrap-2 {
      background: #296dc1;
      padding: 35px;
      -webkit-box-shadow: 0px 15px 46px -24px rgba(0, 0, 0, 0.41);
      -moz-box-shadow: 0px 15px 46px -24px rgba(0, 0, 0, 0.41);
      box-shadow: 0px 15px 46px -24px rgba(0, 0, 0, 0.41);
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      border-radius: 2px; }

    .dropbtn {
      background-color: #FFF;
      color: #000;
      width: 200px;
      height: 35px;
      font-size:19px;
      border-radius:30px
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 20px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #296dc1;}

    #footer-inst-info > div{    box-shadow: 0px 1px 78px -1px #bcd6f7;padding: 5px 10px;}
    #footer-inst-info > div:hover{    box-shadow: 0px 1px 78px -1px #96c2f9; padding: 5px 10px;}
    @media  only screen and (min-width: 577px) {
      .sticky {
        position: fixed !important;
        top: 0;
        width: 100%;
      }
      .institute_name{font-size: 55px;}
      .header-middle-right{padding-left: 85px}
      .card{margin: 50px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.2s;}
      .card2{
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.2s;
        width: 23%;
        margin: 8px;
        margin-bottom: 25px
      }
      .blue2{font-size: 30px}
      .bg-img-1{z-index: -1}
      #mySidenav a {
        position: fixed;
        right: 0px;
        transition: 0.3s;
        padding: 10px;
        text-decoration: none;
        font-size: 20px;
        color: white;
        background-color: #296dc1;
        border-radius: 20px 0 0 20px;
      }
      #mySidenav #dept-home:hover { 
        color: #296dc1;
        background-color: white;
        border: 2px solid #296dc1;
        border-right: 0;
        border-bottom: 0;
      }
      #dept-home{top: 255px;border: 2px solid white;border-right: 0;border-bottom: 0;z-index: 10;}
    }
    @media  only screen and (max-width: 576px) {
      .sticky {
        position: fixed !important;
        top: 0;
        width: 96%;
      }
      .institute_name{font-size: 23px;text-align: center;}
      .header-middle-right{padding-left: 65px}
      .card{width: 60%;margin: 40px auto;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.2s;}
      .card2{
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.2s;
        width: 80%;
        margin: auto;
        margin-bottom: 25px
      }
      .blue2{font-size: 20px;margin-top: 10px}
      #mySidenav{display: none}
      #footer-inst-info { margin: 20px;}   
    }