/* ************** HEADER CSS   ***********/
 @media screen and (max-width: 991px) {

     .desktop-hide {
         display: block !important;
     }

     .desktop-hide ul {
         text-align: right;
         display: flex;
     }

     .header-box .header-nav-box {
         display: block;
         background: #efefef;
         padding: 10px;
         margin: 10px 0px 10px 0px;
         border-radius: 4px;
     }

     .header-box .header-nav-box .navbar {
         width: 100%;
         margin-bottom: 0;
     }

     .header-box .header-nav-box .navbar .navbar-header {
         background: transparent;
         margin: 0;
         position: relative;
         top: 0;
         right: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .header-box .header-nav-box .navbar .navbar-header .navbar-header-toggle-flex {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
     }

     .header-box .header-nav-box .navbar .navbar-header .navbar-header-toggle-flex .exams-toggle-btn {
         background: #2d3092;
         padding: 6px 10px;
         color: #fff;
         font-size: 10px;
         border-radius: 4px;
     }

     .header-box .header-nav-box .navbar .navbar-header .navbar-toggle {
         margin: 0;
     }

     .counter-ul {
         display: block;
         padding: 30px 2em;
     }

     .counter-ul li {
         width: 100%;
         margin-top: 10px;
     }

     .top-header {
         float: none;
     }

     .site-logo img {
         width: 20%;
     }

     .sus-main {
         margin-bottom: 10px;
     }

     .prgrm .boxshadow {
         max-height: fit-content;
     }

     .vision_section {
         display: block;
     }

     .vision_section_p {
         font-size: 15px;
         line-height: 25px;
     }

     .mission_section {
         display: block;
     }

     .mission_section_p {
         font-size: 15px;
         line-height: 25px;
     }

     .main .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
    }
 }

 @media (max-width: 767px) {
     .navbar-nav {
         display: inline;
     }

     .header-box .header-nav-box .navbar .navbar-collapse .navbar-nav li {
         display: block;
         margin-left: 20px;
     }

     .navbar-default .navbar-brand {
         display: inline;
     }

     .navbar-default .navbar-toggle .icon-bar {
         background-color: #fff;
     }

     .navbar-default .navbar-nav .dropdown-menu>li>a {
         color: red;
         background-color: #ccc;
         border-radius: 4px;
         margin-top: 2px;
     }

     .navbar-default .navbar-nav .open .dropdown-menu>li>a {
         color: #333;
     }

     .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
     .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
         background-color: #ccc;
     }

     .navbar-nav .open .dropdown-menu {
         border-bottom: 1px solid white;
         border-radius: 0;
     }

     .dropdown-menu {
         padding-left: 10px;
     }

     .dropdown-menu .dropdown-menu {
         padding-left: 20px;
     }

     .dropdown-menu .dropdown-menu .dropdown-menu {
         padding-left: 30px;
     }

     li.dropdown.open {
         border: 0px solid red;
     }

     .site-logo img {
         width: 20%;
     }

     #upcoming-prgrm-list .arlo-event-listitem {
        width: 100%;
    }
    
    #upcoming-prgrm-list .left {
        width: 100%;
    }
 }

 @media (min-width: 768px) {
     ul.nav li:hover>ul.dropdown-menu {
         display: block;
     }

     #navbar {
         text-align: center;
     }

     /* start of large tablet styles */
     .site-logo {
         width: 100% !important;
     }

     .header-social-link {
         float: inherit !important;
         display: none;
     }

     .product-course-search {
         width: 100% !important;
     }

     .search-tags-link {
         padding: 14px 0 0 0 !important;
     }

     .mobile-hide {
         display: none;
     }

     .web-hide {
         display: block !important;
         padding: 20px;
     }

     .banner-section-bg {
         padding: 0 0 3em !important;
         background-position: 70% !important;
     }

     .banner-heading {
         font-size: 30px !important;
         padding: 10px !important;
     }

     .banner-search-box {
         width: 100% !important;
         margin: 0 !important;
     }

     .banner-ul {
         padding: 14px 0 0 !important;
         margin-bottom: 0;
     }

     .banner-ul li {
         margin-bottom: 10px !important;
     }

     .become-partner-link {
         top: 19em !important;
     }

     .panel {
         background: rgb(254, 235, 212) !important;
         padding: 0px 10px !important;
     }

     .accordion {
         background-color: #7abdff !important;
         color: #000 !important;
         font-weight: bold;
     }

     .accordion:after {
         color: #000 !important;
     }

     .mobile-navi ul {
         padding: 10px 0;
         margin: 0;
         float: left;
         width: 100%;
     }

     .mobile-navi ul li {
         background: #fff;
         font-weight: bold;
         text-align: center;
         padding: 6px 20px;
         float: left;
         list-style: none;
         margin-right: 10px;
         margin-bottom: 10px;
         transition: all .25s ease-in-out;
     }

     .mobile-navi ul li:hover {
         background: #7abdff;
     }

     .er-crse {
         padding: 20px !important;
     }

     .mobile-head {
         padding-top: 20px;
         padding-bottom: 20px !important;
     }

     p.copyright-text {
         padding: 10px;
     }

     .subscribe-form {
         width: 100% !important;
     }

     .subscribe-button {
         position: relative !important;
         right: 0 !important;
         top: 10px !important;
     }

     .modal-dialog {
         width: 70%;
         margin: 30px auto;
     }
 }

 @media all and (max-width: 300px) {
     body {
         font-size: 14px;
     }
 }

 @media all and (max-width: 500px) {
     .testim .arrow {
         font-size: 1.5em;
     }

     .testim .cont div p {
         line-height: 25px;
     }
 }