/* ==========================================================

MAX WIDTH 1200PX OR MIN WIDTH 992PX RESPONSIVE START HERE 

============================================================*/

@media (max-width:1200px) {

    #header .logo {
        width: 30%;
    }

    #header .menu {
        width: 60%;
    }

    #header .logo h1 {
        font-size: 22px;
    }

    #header a {
        font-size: 13px;
    }

    .group {
        width: 100%;
        display: block;
    }

    .group img {
        margin: 0px;
        margin-bottom: 10px;
        width: 100%;
    }

    .filter {
        margin-right: 0px;
    }

    .filter::before {
        top: 0px;
        height: 100%;
    }

    .filter::after {
        top: 0px;
        height: 100%;
    }

    .welcome-heading h3 {
        margin-bottom: 20px;
    }

    input[type="text"]:focus {
        width: 71%;
    }

    #academies .academics_box .box img {
        height: 172px;
    }

    .group-pics .display {
        display: none;
    }

    #contact .info-box p {
        font-size: 11px;
    }

    .admission-form img {
        width: 91%;
    }

}

/* ==========================================================

MAX WIDTH 1200PX OR MIN WIDTH 992PX RESPONSIVE END HERE 

============================================================*/

/* ==========================================================

MAX WIDTH 991PX OR MIN WIDTH 768PX RESPONSIVE START HERE 

============================================================*/

@media (max-width:991px) {

    .topbar .email-box .email {
        display: none;
    }

    .menu ul li {
        display: none;
    }

    .menu ul {
        justify-content: flex-end;
    }

    .menu ul .menu-icon {
        display: block;
    }

    #header .logo {
        width: 50%;
    }

    #header .menu {
        width: 50%;
    }

    #header .logo h1 {
        font-size: 22px;
    }

    .group {
        width: 100%;
        display: block;
    }

    .group img {
        margin: 0px;
        margin-bottom: 10px;
        width: 100%;
    }

    .filter {
        margin-right: 0px;
    }

    .filter::before {
        top: 0px;
        height: 100%;
    }

    .filter::after {
        top: 0px;
        height: 100%;
    }

    .welcome-heading h3 {
        margin-bottom: 20px;
    }

    input[type="text"]:focus {
        width: 71%;
    }

    #particles-js {
        height: 537px;
    }

    #academies .academics_box .box img {
        height: 172px;
    }

    .admission-form {
        width: 90%;
    }

    .admission-form img {
        width: 91%;
    }
    label {
        font-size: 15px;
    }

}

/* ==========================================================

MAX WIDTH 991PX OR MIN WIDTH 768PX RESPONSIVE END HERE 

============================================================*/

/* ==========================================================

MAX WIDTH 767PX OR MIN WIDTH 320PX RESPONSIVE START HERE

============================================================*/

@media (max-width:767px) {

    .topbar .email-box .contact a {
        font-size: 11px;
    }

    .menu ul li {
        display: none;
    }

    .menu ul {
        justify-content: flex-end;
    }

    .menu ul .menu-icon {
        display: block;
    }

    #header .logo {
        width: 80%;
    }

    #header .menu {
        width: 20%;
    }

    #header .logo h1 {
        font-size: 16px;
    }

    #content {
        height: 60vh;
    }

    .group {
        width: 100%;
        display: block;
    }

    .group img {
        margin: 0px;
        margin-bottom: 10px;
        width: 100%;
    }

    .filter {
        margin-right: 0px;
    }

    .filter::before {
        top: 0px;
        height: 100%;
    }

    .filter::after {
        top: 0px;
        height: 100%;
    }

    .welcome-heading h3 {
        margin-bottom: 20px;
    }

    input[type="text"]:focus {
        width: 71%;
    }

    .addmision-gif {
        display: none;
    }

    #tour-to-zicas h1 {
        font-size: 22px;
    }

    #particles-js {
        display: none;
    }

    #features {
        display: none;
    }

    #gallery h1 {
        font-size: 30px;
    }

    #gallery .card {
        width: 90%;
        height: 142px;
    }

    #our-message h1 {
        font-size: 30px;
    }

    .footer-text p {
        font-size: 10px;
    }

    #contact .info-box p {
        font-size: 12px;
    }

    #about .introduction h3 {
        font-size: 13px;
    }

    #news h1 {
        font-size: 25px;
    }

    #news p {
        font-size: 13px;
    }

    #news .spring-gala h1 {
        font-size: 25px;
    }

    #news .spring-gala p {
        font-size: 25px;
    }

    #news .issue-date h1 {
        font-size: 30px;
        margin-top: 30px;
    }

    #news .about-spring-gala h1 {
        font-size: 35px;
        margin-top: 20px;
        line-height: 1;
    }

    #news .about-spring-gala ul li {
        font-size: 25px;
    }

    .welcome-heading h1 {
        font-size: 28px;
    }

    .welcome-heading h1::after {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .welcome-heading p {
        font-size: 15px;
    }

    strong.vision {
        font-size: 28px;
    }

    .welcome-heading h3 {
        font-size: 15px;
    }

    .pre-primary h1 {
        font-size: 20px;
    }

    .pre-curriculum h1 {
        font-size: 20px;
    }

    .pre-primary p {
        font-size: 15px;
    }

    .pre-primary p a {
        font-size: 13px;
    }

    .pre-curriculum p {
        font-size: 15px;
    }

    .pre-curriculum p a {
        font-size: 13px;
    }

    .admission-form {
        width: 90%;
    }

    .admission-form img {
        width: 80%;
    }

    label {
        font-size: 12px;
    }
    #news .admission-img{
        width: 100%;
        margin: 0 auto;
        margin-top: 12px;
      }

      h1.frenchise-txt{
        font-size: 29px;
        margin-bottom: 10px;
      }
      .summer img{
        width: 100%;
      }
      img.newsletter{
        width: 100%;
        margin: 0 auto;
      }
}

/* ==========================================================

MAX WIDTH 767PX OR MIN WIDTH 320PX RESPONSIVE END HERE 

============================================================*/