@media screen and (min-width:1025px){
    
    /*top menu*/
    
    .search-input{
        width: 220px;
    }
    .search-icon{
        left:60%;
        top: 18px;
    
    }
    
     .left-top-menu > a{
        font-size: 20px;
    } 
     
    .container-fluid{
        
        width: 100%;
    }
    
    /*end top menu*/

    /*baner*/
    
     .title2{
        font-size: 1.8rem;
        
     } 
     .b-shop{
        width: 100%;
     }
     .login-container{
        width: 100%;
     }
     label{
        display: inline-block;
        padding: 0;
        text-align: right;
        font-size: 15px;
    }
      /*end baner*/
    /*grid product*/
     .pro-title {
       
        display: flex;
        justify-content: center;
        align-items: center;
        float: none;
    
    } 

    .thumbnail-container{
        width: 90%;
        padding:7px;
        gap:3px;
    
    }
    .thumbnail{
        width:85%;
        margin: 0;
        padding: 7px;
}
     .p-style{
        font-size:14px;
    } 
    .pic-thumnail{
        width:185px ;
    }
    .cake{
        font-size: 1.1rem;
    }
    .container-pro{
        width: 90%;
        grid-template-columns:repeat(4,1fr) ;
    
        padding: 7px;
    
    }
    .info-icon{
        align-items:baseline;
    }
    
    
    /* end grid product*/

    /*off grid*/
    .btn-small{
        font-size: 1rem;
        padding: 10px 16px;
        line-height: 1rem;
    }


    /*end off grid*/
    /*baner-process*/
    .baner-process{
      
        width: 100%;
        margin-bottom: 90px;
    }
    /* end baner-process*/
    /*article*/
    .container-article{
        width: 90%;
    
    }
    .arti-title > h3{
       font-size: 1rem;
        }
    
    .pic-art{
        width:190px ;
        height: 180px;
    }
    .arti-title{
        padding-right:10px;
    }

    /* end article*/
    /*footer*/
    .footer{

        height: 280px;
    }
    .main-footer{
        padding: 5px;
        padding-right: 10px;
        margin: 10px;
        font-size:1.2rem;
    }
    
    
    .social{
       margin-top: 100px;
    }
    .social h6 {
        font-size: 11px;
    }
    .map{
        width: 410px;
        height: 220px;
        margin: 20px;
    
    }
    
    /*end footer*/
    
}

@media screen and (max-width:1024px){

    /*top menu*/
    .right-top-menu{
        font-size:1.5rem ;
    
    }
    
    .search-input{
        width: 200px;
    }
    .search-icon{
        left:60%;
        top: 17px;
    
    }
    
     .left-top-menu > a{
        font-size: 20px;
    }
     
    .container-fluid{
        max-width: 1024px;
        width: 100%;
    }
    
    /*end top menu*/

    /*baner*/
    
     .title2{
        font-size: 1.8rem;
        
     }
    
    .login-container{
      max-width:  1024px;
      width: 100%;
  }
  .form-login{
      margin:17px;
      width: 40%
      
  } 
  label{
    display: inline-block;
    padding: 0;
    text-align: right;
    font-size: 15px;
}
  .baner-shop{
    max-width:1024px;
    
}
.b-shop{
    max-width:1024px;
    width: 100%;
}
      /*end baner*/
    /*grid product*/
     .pro-title {
       
        display: flex;
        justify-content: center;
        align-items: center;
        float: none;
    
    } 

    .thumbnail-container{
        max-width:1024px;
        padding: 10px;
        gap: 7px;
    
    }
    .thumbnail{
        padding: 0;
        margin: 0;
        padding: 7px;
}
     .p-style{
        font-size:15px;
    } 
    .cake{
        max-width: 1024px;
        font-size: 1.1rem;
    }
    .container-pro{
        max-width:1024px;
        width: 90%;
        grid-template-columns:repeat(4,1fr) ;
        gap: 4px;
        padding: 7px;
    
    }
    .info-icon{
        align-items:baseline;
    }
    
    
    /* end grid product*/

    /*off grid*/
    .btn-small{
        font-size: 1rem;
        padding: 10px 16px;
        line-height: 1rem;
    }


    /*end off grid*/
    /*baner-process*/
    .baner-process{
        max-width: 1024px;
        width: 100%;
        
    }
    
    /* end baner-process*/
    /*article*/
    .container-article{
        max-width: 1024px;
    
    }
    .arti-title > h3{
       font-size: 1rem;
        }
    
    .pic-art{
        width:160px ;
        height: 140px;
    }
    .arti-title{
        padding-right: 5px;
    }

    /* end article*/
    /*footer*/
    .footer{
        max-width: 1024px;
        height: 280px;
    }
    .main-footer{
        padding: 5px;
        padding-right: 10px;
        margin: 10px;
        font-size:1.2rem;
    }
    
    
    .social{
       margin-top: 100px;
    }
    .social h6 {
        font-size: 11px;
    }
    .map{
        width: 410px;
        height: 220px;
        margin: 20px;
    
    }
    .copyright{
        max-width: 1024px;
    }
    /*end footer*/
    
}

@media screen and (max-width:850px){

    /*top menu*/
.right-top-menu{
    font-size:1rem ;

}

.search-input{
    width: 150px;
}
.search-icon{
    left:61%;
    top: 17px;

}
.left-top-menu{
    width: 25%;
    font-size: 20px;
}
.left-top-menu > a{
    font-size: 13px;
}

.container-fluid{
  max-width: 850px;
  width: 100%;
}

.nav-link{
    font-size:12px;
    margin-left: 15px;
}
.icon{
    font-size: 20px;

}
.info-icon{
    align-items:baseline;
}
/*end top menu*/
/*baner*/
.baner{

    max-width:850px;
   
  }
  .baner-shop{
    max-width: 850px;
    
}
.b-shop{
    max-width:850px;
    width: 100%;
}
  .login-container{
    max-width: 849px;
    width: 100%;
}
.form-login{
    margin:17px;
    width: 40%;
    
}
.main-input{
    width: 210px;

}
label{
    display: inline-block;
    padding: 0;
    text-align: right;
    font-size: 13px;
}

.title2{
      font-size: 1.2rem;
     
  }
  .text-baner{
      margin-top: 15px;
     padding-right: 13px;
  }
  .input-group > input{
    width: 200px;

  /*end baner*/
/*grid product*/
.pro-title {
   
    display: flex;
    justify-content: center;
    align-items: center;
    float: none;


}
.product-title h1 {
    
 display: flex;
 justify-content: center;
 align-items: center;

}
.thumbnail-container{
    max-width: 850px;
    grid-template-columns:repeat(2,1fr) ;
    grid-template-rows: repeat(2,1fr);
    gap: 4px;
    padding: 7px;
}
.p-style{
    font-size:15px;
}
.cake{
    max-width: 648px;
    font-size: 1.1rem;
}
.container-pro{
    max-width:849px;
    grid-template-columns:repeat(2,1fr) ;
    grid-template-rows: repeat(2,1fr);
    gap: 4px;
    padding: 7px;

}


/* end grid product*/
/*baner-process*/
.baner-process{
max-width: 850px;
width: 100%;
}
/* end baner-process*/
/*article*/
.container-article{
max-width: 850px;
grid-template-columns: 1fr;
grid-template-rows: repeat(2,1fr);
}
.arti-title h3{
    font-size: 17px;
}

/* end article*/
/*footer*/
.footer{
    max-width: 850px;
    height: 250px;
}
.main-footer{
   padding: 5px;
    margin: 12px;
    font-size: 12px;
}
.links > li{
    font-size: 10;

}
.a-blak{
    font-size: 10px;
    margin: 5px;
}
.social{
   margin-top: 100px;
}
.social h6 {
font-size: 10px;
}
.map{
    width: 310px;
    height: 190px;
    margin: 15px;

}
.copyright{
    max-width: 850px;
}
/*end footer*/



  }
}
@media screen  and (max-width:648px){
/*top menu*/
.right-top-menu{
    font-size:1rem ;

}

.search-input{
    width: 150px;
}
.search-icon{
    left:63%;
    top: 17px;
   
}
.left-top-menu{
    width: 25%;
    font-size: 20px;
}
.left-top-menu > a{
    font-size: 13px;
}

.container-fluid{
  max-width: 648px;
  width: 100%;
}

.nav-link{
    font-size:12px;
    margin-left: 15px;
}
.icon{
    font-size: 20px;

}
/*end top menu*/
/*baner*/
.baner{
  max-width:648px;
  width: 100%;
  height:360px;
}
.baner-shop{
    max-width: 648px;
    
}
.b-shop{
    max-width: 648px;
    width: 100%;
}
 .login-container{
    max-width: 648px;
    width: 100%;

}

.form-login{
    font-size:10px; 
    font-weight: lighter;
}  

label{
    display: inline-block;
    padding: 0;
    font-size: 10px;
    padding-right: 5px;

}
.main-text{
    font-size:13px;

}

.input-group > input{
    width: 200px;
    padding: 7px;
    margin: 5px;
   
   
}


.main-input{
    width: 87%;
    padding: 7px;
    margin: 5px;
    
}
.input-group h4{
    padding: 5px;
}  


.title2{
    font-size: 1.1rem;
   
}
.text-baner{
    margin-top: 15px;
   padding-right: 13px;
}
/*end baner*/
/*grid product*/
.pro-title {
   
    display: flex;
    justify-content: center;
    align-items: center;
    float: none;


}
.info-icon{
    align-items:baseline;
}
.product-title h1 {
    
 display: flex;
 justify-content: center;
 align-items: center;

}
.thumbnail-container{
    max-width: 648px;
    grid-template-columns:repeat(2,1fr) ;
    grid-template-rows: repeat(2,1fr);
    gap: 4px;
    padding: 7px;
}
.p-style{
    font-size:15px;
}
.cake{
    max-width: 648px;
    font-size: 1.1rem;
}
.container-pro{
    max-width: 648px;
    grid-template-columns:repeat(2,1fr) ;
    grid-template-rows: repeat(2,1fr);
    gap: 4px;
    padding: 7px;

}


/* end grid product*/
/*baner-process*/
.baner-process{
max-width: 648px;
width: 100%;
}
/* end baner-process*/
/*article*/
.container-article{
max-width: 648px;
grid-template-columns: 1fr;
grid-template-rows: repeat(2,1fr);
}
.arti-title h3{
    font-size: 17px;
}

/* end article*/
/*footer*/
.footer{
    max-width: 648px;
    height: 250px;
}
.main-footer{
   padding: 5px;
    margin: 12px;
    font-size: 12px;
}
.links > li{
    font-size: 10;

}
.a-blak{
    font-size: 10px;
    margin: 5px;
}
.social{
   margin-top: 100px;
}
.social h6 {
font-size: 10px;
}
.map{
    width: 180px;
    height: 150px;
    margin: 25px auto;

}
.copyright{
    max-width: 648px;
}
/*end footer*/
}