@media(max-width:1024px){
    .top-right{
        display: none;
    }
    .top-left{
        display: none;
    }
    .marquee-text{
        width: 100%;
    }
    .main-nav{
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 200px;
        height: 100%;
        background-color: var(--top-header-color);
        transform: translateX(-100%);
        transition: all 0.5s;
        ul{
            flex-direction: column;
            li{
                margin-bottom: 10px;
                line-height: 50px;
                display: block;
                i{
                  color: #fff;
                }
                .dropdown-menu{
                  background-color: var(--top-header-color);
                  li{
                    line-height: 30px;
                  }
                }
                a{
                    color: #fff;
                }
            }
        }
        &.active3{
            transform: translateX(0px)
        }
    }
    li.dropdown .dropdown-menu{
        position: absolute;
        left: 120px !important;
        top: 22px !important;
    }
    .menu-toggle{
        display: block;
        i{
            font-size: 20px;
            background-color: var(--top-header-color);
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
        }
    }
    .img-box{
        .box{
            padding: 8px !important;
            .frame{
                i{
                    font-size: 40px !important;
                }
            }
            .textover{
                font-size: 20px !important;
                margin-left: 15px !important;
                p{
                    color: #ffff;
                    position: relative;
                    z-index: 99 ;
                }
            }
        }
    }
    /*------register-section--------*/
    .register-text h1 {
        font-size: 40px;
        margin: 10px 0;
      }
      .time-box {
        width: 60px;
        height: 60px;
        padding: 35px;
      }
      .time-box span{
        font-size: 11px;
      }
      .time-box span:first-child {
        font-size: 20px;
    }
    /*-------------------------about page-----------------------------*/
    .banner-all{
        height: 300px;
    }
    .vision .box p{
        font-size: 14px;
      }
      .mission .box p{
        font-size: 14px;
      }
      .aspiration .box p{
        font-size: 14px;
      }
      /*---------------------courses digital marketing ----------------*/
      .dm-left h2 {
        font-size: 24px;
        color: #0c2543;
        line-height: 1.5;
        margin-bottom: 10px;
      }
      .dm-left p{
        font-size: 14px;
        margin-bottom: 20px;
      }
      .section-contact .right-content .box {
        height: 100px;
      }
      .left-content h2 {
        font-size: 30px;
      }
      .franchise-content h2 {
        font-size: 26px;
      }
}

@media(max-width:768px){

  /*--------title--------*/
  .title h2{
    font-size: 26px;
  }
    /*------header-------*/
    .button{
        display: none;
    }

    /*-----slider-image-------*/
    .banner .slide .img-content h3 {
        font-size: 20px;
    }
    .banner .slide .img-content  h2 {
        font-size: 40px;
    }
    .banner .slide .img-content p {
        font-size: 26px;
    }
    .banner .slide img{
        height: 180px;
    }
    .slide .img-box .box{
        display: block;
        text-align: center;
        margin-top: 20px;
    }
    /* .slide::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 350px;
            background-color: #000;
            opacity: 0.7;
        } */
    .slide .img-content{
        top: calc(25% - 100px);
        left: 5%;
    }
    .slide .img-content a{
        font-size: 18px;
        padding: 10px 15px;
        letter-spacing: 0px;
    }
    .slide .img-box{
        position: relative;
    }
    /*--------register section -------*/
    .form-container {
        position: relative;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        color: #000;
        max-width: 400px;
        width: 100%;
      }
      .register-text{
        text-align: center;
      }
      .timer{
        justify-content: center;
      }
      .time-box{
        margin-bottom: 40px;
      }
      /*-----------courses banner all ---------------------*/
      .banner-all .main-content h1{
        font-size: 36px;
      }
      .banner-all .main-content a {
        font-size: 14px;
      }
      .banner-all .main-content span {
        font-size: 15px;
      }
      .section-contact .right-content .box {
        height: 60px;
      }

      #chatbot-container {
        right: 10px !important;     
        width: 95vw;
      }
}

@media(min-width:576px) and (max-width:768px){
  .banner .slide img{
    height: 320px;
}
}