html{
    scroll-behavior: smooth;
}
@media screen and (min-width: 578px) {
    .login-box{
        width: 500px;
        float: right;
        top: 24px;
    }
  }
@media (max-width:1200px){

}

@media(max-width:1030px){
    /* --Header section -- */
        .header .navbar-nav a.nav-link{
            padding: 0.8rem 1rem;
        }
    /* --end header section -- */
    /* Banner Section */
        .banner_content h4{
            padding-top: 6rem;
        }
        .banner_content h2{
            font-size: 3.3rem;
        }
        .bg-hero{
            min-height: 510px;
        }
    /* end banner section */
    /* Footer section */
    .footer{
        clip-path: polygon(68% 1%,100% 0,100% 97%,100% 100%,0 100%,0 3%);
    }
    /*End Footer section */
}
/* Ipad screen */
@media(max-width:992px){
    /* --Mobile menu ICon-- */
    .menu-toggle{
        position: relative;
    }
    .menu-toggle span{
        width: 2rem;
        height: 0.2rem;
        display: block;
        background: var(--primary-color);
        margin: 0.3rem;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -ms-transition: all 0.3s;
    }
    .menu-toggle.active span:nth-child(1){
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        position: relative;
        top: 0.2rem;
    }
    .menu-toggle.active span:nth-child(2){
        display: none;
        transition: all 0.3s;
    }
    .menu-toggle.active span:nth-child(3){
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        position: relative;
        top:-0.3rem;
    }
    #navbarSupportedContent ul{
        text-align: center;
    }
    /* --end Mobile menu ICon-- */

    /* Banner Section */
    .banner_content h4{
        padding-top: 4rem;
        font-size:2rem;
    }
    .banner_content h2{
        font-size: 2.5rem;
        width:100%;
    }
    .bg-hero{
        min-height: 510px;
    }
/* end banner section */

}

@media(max-width:767px){
    .banner_box{
        left: 0;
    }
    /* Header section */
    .header .navbar{
        padding: 0.5rem 0;
    }
    /* END Header section */
    /* Footer section */
    .footer-widget{
        margin-top: 2rem;
    }
    /*End Footer section */
    /* Banner */
    .bg-hero{
        clip-path: polygon(68% 0, 100% 0,100% 97%,38% 99%,0 100%,0 0);
    }
    .products{
        clip-path: polygon(100% 0,100% 0,100% 97%,38% 99%,0 100%, 0 3%);
    }

    
}
/* MObile  */
@media(max-width:576px){
    .login-box{
        width: 100%;
        left: 0;
        right: 0;
        margin: 0px auto;
    }
    .banner_content{
        padding:5rem;       
    }
    .banner_content{
        text-align: center;
    }
}