/*--------js---------*/
#navbar.active{
    right:0px;
}

/*--------Ipad -mmini----*/
@media (max-width:799px){
    .section-padding1 {
        padding: 40px 40px;
    }
    /*-------navbar media query-------*/
    #navbar {
        align-items: flex-start;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        list-style: none;
        right:-300px;
        top:0;
        background-color:#E3e6f3;
        padding:80px 0 0 10px;
        position: fixed;
        width:300px;
        height:100vh;
        box-shadow: 0 40px 60px rgba(0,0,0,0.1);
        transition:0.3s;
    }
    #navbar li{
        margin-bottom: 25px;     
    }
    #mobile{
        display: flex;
       align-items: center;  
    }
    #mobile i{
        color: #1a1a1a;
        font-size:18px;
        padding-left: 20px;
        color:#0C6170;
    }
    #shop-cart{
        display: none;
    }
    #close{
        display:initial;
        position:absolute;
        top:30px;
        left:30px;
        font-size: 25px;
        color:#37BEB0;
    }
    .home {
        padding: 0 70px;
        height: 70vh;
        background-position:  top 30% right 35%;
    }
    .home h2,h1{
          font-size:40px;
    }
    .home p{
        font-size:15px;
    }
    #feature {
        display: flex;
        justify-content:center; 
    }
    #feature .feature-box {
        
        margin: 15px 15px;
    }
    #product1 .prod-container {
        justify-content:center;   
    }
    #product1 .pro {
        margin:15px;
    }
    #banner {
        height: 30vh;
    }
    #new-banner .banner-box {
        min-width: 100%;
        height: 30vh;
    }
    #banner3 {
       
        padding: 0 40px;
    }
    #banner3 .banner-box1 {
       width:30%;
    }
    .banner-box1 h2 {
        font-size: 22px;
        line-height:20px;
        margin-bottom: 10px;
    }
    .banner-box1 h3 {
        font-size: 15px;
        line-height:20px;
       
    }
    #newletter .sec-div
    {
    width:70%; 
    }
}

@media (max-width: 477px){
    .header {
       padding:10px 30px;
    }
    .home {
        padding: 0 20px;  
        background-position: 65%;
    }
    h2{
    font-size:30px;
    }
    h1{
        font-size:30px;
     }
    .home p{
        font-size:15px;
    }
    #feature{
        justify-content: space-between;
    }
    #feature .feature-box{
        width:140px;
        margin: 0 0 15px 0;
    }
    #product .pro{
        width:40vh;
    }
    #banner {
        height: 30vh;
    }
    #new-banner .banner-box {
        min-width: 100%;
        height: 40vh;
    }
    #new-banner .box2{
        margin-top: 20px;
    }
    #banner3{
        padding: 0 20px;
    }
    #banner3 .banner-box1{
        width:100%;
    }
    #newletter {
        padding-top:10px ;
        padding-left: 20px;
    }
    #newletter .sec-div {
        width: 100%;
    }
    #newletter button{ 
        padding:0;
    }
    #newletter h2{
        font-size: 25px;;
    }
    #newletter p{
        font-size: 15px;;
    }
    footer .copyright{
        text-align: start;
        line-height: 5px;
    }


}