*{padding:0;
  margin:0;
  box-sizing: border-box;
  font-family:sans-serif;}

body{position: relative;}

nav{
background-color:#034;
padding:10px 0;
background-size: cover;
z-index: 999;
width: 100%;
position: fixed;
top: -11px;
transition: top 1.5s;}


nav #website-name-wrapper{
	       font-size:30px;
	       color:white;
	       font-style: oblique;
	       font-weight: bold;
	       margin-bottom:1px;
	       text-align:left;
	       padding-left: 1px;
	      font-family:serif;
	     border-bottom: 1px solid rgba(255,255,255,0.2);}

nav #website-name-wrapper img{object-fit: cover;
        width: 40px;
        margin-right: 7px;
        margin-top: 4px;
      float: left;}


nav ul{margin-top: 10px;}


nav ul li{list-style-type: none;
           display:inline;
           padding:5px 25px;
           cursor: pointer;
           color: white;
           text-transform: uppercase;
           font-size: 13px;}


nav ul li i{ font-size:13px; 
             margin-right: 4px;}

nav ul li:hover{color: lightblue;}

nav ul #more-link{display: none;}

nav ul #more-link,#search-link{float: right;}



nav #sidebar{
   margin-top: 35px;
  display: none;}

nav #sidebar ul li{display:block;
                   border-top: 1px solid rgba(255, 255, 255, 0.1);
                    margin:20px auto;}


nav ul .active_link{color:aqua;
                     border-bottom: 1px solid grey;
                  border-radius: 5px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);}


/*hiding the some links on small screen devices*/

@media screen and (max-width:680px){
	.hide-small{display: none;}

	nav ul li i{display:none;}
	nav ul #more-link{display: inline;}
}




/*reducing the fonts of the navbars*/

@media screen and (max-width:500px){
nav ul li{
           padding:5px 15px;}

nav ul li .hide-small{display: none;}
}




.dropdown-wrapper {position: relative;
                    display: inline-block;}

.dropdown-wrapper .dropdown-content {position: absolute;
	display: none;
	background: #034;
	color: white;
	padding: 5px;
	z-index: 9999;
	overflow-y: auto;
    }
.dropdown-wrapper .dropdown-content  .list_group{
    margin-bottom: 10px;
    margin-right: 10px;

    }

.dropdown-wrapper .dropdown-content  .list_group_label{
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    font-size: 15px;

    }


.dropdown-wrapper .dropdown-content  li{
	display: block;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: white;
	text-transform: capitalize;
    }


.dropdown-wrapper .dropdown-content  li:hover{
	color: aqua;
}

#products-link:hover #products-dropdown-content{ display:block; }



#search-wrapper{margin-top: 15px;
                display:none;
               text-align: center;
               padding-left: 5px;
               padding-right: 5px;}

#search-input{
    width: 80%;
    margin-bottom: 0;
    display: inline; 
    padding: 2px;
    padding-left: 10px;
    background:rgba(0, 0, 0, 0.1);
    color: white;
    border: 1.5px solid rgba(254, 250, 250, 0.3);
    font-size: 13px;
    outline: none;
    border-radius: 20px 0 0 20px;
}

#search-input::placeholder{font-size: 12px;}

#search-btn{ width: 20%; 
	        display: inline;
	         padding: 2px;
         border: 1.5px solid rgba(254, 250, 250, 0.3);
       background:rgba(0, 0, 0, 0.2);
    color: white; 
   border-radius:0px 20px 20px 0px;
    font-size: 13px;
   cursor: pointer;
  outline: none;}





/*shopping cart styles*/



#shopping-cart-wrapper{ float: right;
                       position: relative;}


#shopping-cart-wrapper i{ font-size: 16px;
                    cursor: pointer;
                  color:lightblue;
                  padding: 0;
                  margin: 0;
                                }
#shopping-cart-wrapper #cart-items-count{background: crimson;
   color:  white;
    border-radius: 20px;
    position: absolute;
    right: 4px;
    top: -8px;
    font-size: 12px;
   padding:2px 4px;}



main { position:relative; 
      margin-top: 83px; }



main .image-grid-wrapper{display: grid;
                         align-items: center;
                         grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr)); 
                           grid-gap: 3px;
                                                   }
main .image-grid-items{box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
     padding: 4px;
     cursor:pointer;
     height: 100%;
      }
main .image-grid-items img{object-fit: cover;
                           width: 100%;
                           cursor: pointer;
                           transition: transform 1.5s, opacity 3s;
                           height: 150px;


                            }

main .image-grid-items img:hover{ 
     transform:scale(1.05);
                            }
main .image-grid-items .product-info-wrapper{ padding:5px;
   border-top: 1px solid rgba(0, 0, 0, 0.2);}


main .image-grid-items .product-info-wrapper .product-name{ padding-right:2px;   
               font-weight: bold;
               font-size: 15px;
               color: #035;
               margin-bottom: 5px;

          }

main .image-grid-items .product-info-wrapper .currency{ padding-right:2px;   
               font-size: 20px;
          }

main .image-grid-items .product-info-wrapper .price{
        
               font-size: 23px;
               word-wrap: break-word;
             }

main .image-grid-items .product-info-wrapper .short-description{margin-top:6px;
                      font-size: 13px;
                      word-wrap: break-word;}



#right-section{ padding:5px;
              text-align: center;
                border: 1px solid rgba(0, 0, 0, 0.2);
                display: none;
                overflow-y: auto;
                height: 100%;
                position: fixed;
                right: 0;
                padding-bottom:170px;       
              z-index: 99;
              }

#shopping-cart-data{max-width: 330px;}


#table-wrapper{overflow-x:auto;}

#table-wrapper table{border-collapse: collapse;}

#table-wrapper table tr th{font-size: 13px;}

#table-wrapper  table tr{border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#table-wrapper  table tr:nth-child(even){background: #f2f2f2;}

#table-wrapper  table td{padding: 10px;}


#table-wrapper  table td img{object-fit: cover;
                             width: 60px;
                             height: 60px;}

#table-wrapper table .pro-name{font-size: 15px;}


#table-wrapper  table button{outline: none;
                             background: crimson;
                             color: white;
                             padding: 2px 4px;
                             font-size: 13px;
                             border: 1px solid white;
                              border-radius: 5px;
                              cursor: pointer;
                             }



/* modal  styles */
.modal{display: none; 
                        z-index: 999;
                       position: fixed;
                        top: 0;
                        left: 0;
                        background: rgb(0, 0, 0);
                        background: rgba(0, 0, 0, 0.5);
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                        
                        }


.modal-content{background: rgb(250, 250, 255);
                        padding: 10px;
                      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                     margin: 5% auto;
                   width: 85%;}

/*modifyng the modal size on big devices*/

@media screen and (min-width: 700px){
.modal-content{
                     margin: 5% auto;
                   width: 50%;}
               }

.modal-content .message-title{ font-weight: bold; font-size: 14px;}

.modal-content .message-content{ margin-top: 10px; }

.modal-btn-wrapper{ margin-top: 30px; padding-bottom:15px ;}

.modal-btn-wrapper button{ padding: 5px 15px;
                                    border: none;
                                     outline: none;
                                     border-radius: 3px;
                                     cursor: pointer;
                                      }


.modal-btn-wrapper .ok-btn{margin-right: 25px; }

.modal-btn-wrapper .cancel-btn{border: 1px solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.8);}


.alert-info{font-size:15px;
            font-weight: bold;
            margin-bottom: 5px;}

.alert_ok_btn{
   margin-right: 25px;
    background: #068;
     color: white;
      font-size: 14px;
   padding: 7px 20px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;}



/*loading img & texts styles*/
#loader_img{text-align: center;
            font-size: 16px;
          padding: 100px 2px;
          word-spacing: 1.7px;}

#loader_img img{width: 42px;}

#loader_img #loading-text{margin-top: 10px;
                         color:#027;}


#load_more_products{text-align: center;
                     padding:20px 2px 15px 2px;
                     color: #027;
                     word-spacing: 1.6px;
                     font-size: 16px;
                     cursor:pointer;
                     margin: 2px;
                  background:rgba(0, 0, 0, 0.05);
                  display: none;}
   
.no-products-alert{text-align: center;
                  padding: 30px 2px;
                  font-size: 16px;
                  background:rgba(0, 0, 0, 0.01);
                  word-spacing: 1.7px;
                color: crimson;}



.no-products-alert .btn-wrapper{margin-top:20px;
                              text-align: center;}

.no-products-alert .btn-wrapper button{
                           padding: 5px 20px;
                          background: #068;
                          color: white;
                        border-radius: 20px;
                     font-weight: normal;
                   border: 1px solid white;
                 word-spacing: 1.6px;
                 cursor: pointer;
                 font-size: 14px;}




#product-full-view {}


#full-pic-wrapper {border: 1px solid rgba(0, 0, 0, 0.1);}



#add-to-cart-btn{padding: 10px 5px;
                 outline: none;
                border-radius: 5px;
                  background: #086;
               color: white;
              border:1px solid white;
              box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
             cursor: pointer;
          font-size: 14px;}


#full-pic-wrapper{text-align: center;
                  position: relative;}

#full-pic-wrapper img {width: 400px;
                        object-fit: cover;

                        }  

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


#full-pic-wrapper img {width:100%;}     
}


.pic-sliders {position: absolute;
     top: 50%;
    font-weight: bold;
    font-size: 15px;
    background: rgba(0, 0, 0, 0.1);
   padding: 2px 4px;
  cursor: pointer;
  color: white;}

#previous-pic {left: 0;
               border-radius: 20px 0 0 20px;
              }

#next-pic { right: 0; 
           border-radius: 0px 20px 20px 0px;}

#full-product-description{padding: 10px;
                         font-size: 15px;
                         word-spacing: 1.7px;
                         line-height: 25px;
                        word-wrap: break-word;}

/*total product amount styles*/

#place-order-wrappper{text-align:left;
                      padding: 10px;
                      border: 1px solid rgba(0, 0, 0, 0.2);}


#total-amount-wrapper{border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 4px;}

#total-amount-text{font-size: 14px;
                   padding-right: 2px;}
#total-currency{padding-right: 2px;
               font-size: 18px;}

#total-amount{ font-weight: bold;
               font-size: 20px;}

#submit-order-wrapper{}

#buyer-credentials-info{padding:10px; 
                       word-spacing: 1.6px;
                       line-height: 24px; 
                       word-wrap: break-word;
                       font-size: 14px;
                    color: #034;
                 width: 280px;}


#submit-order-wrapper input { 
                              padding:5px;
                               outline: none;
                             border: 1px solid rgba(0, 0, 0, 0.2);
                             margin-bottom: 15px;
                           font-size: 13px;
                           opacity: 0.9;
                           display: block;
                       }

#submit-order-wrapper input::placeholder{color:#037;
opacity: 0.9;}



#submit-order-wrapper button{padding:10px;
                          background: #086;
                          color: white;
                        border-radius: 3px;
                     font-weight: normal;
                   border: 1px solid rgba(255, 255, 255, 0.5);
                 word-spacing: 1.6px;
                 cursor: pointer;
                 font-size: 14px;
              display: block;

              margin: 10px 2px;}


/* footer styles*/

footer{
       background-color:rgba(0, 0, 0, 0.09);
       color: #034;
       position: absolute;
       bottom:-150px;
       width: 100%;
       text-align:center; 
       padding:10px;
       margin-top: 90px;
       font-size:13px;}


footer span {word-spacing: 2px; font-size: 12.3px;}

footer button{ padding: 4px 25px; 
              background-color: #057;
             color: white;
            outline: none;
           border: 1px solid white;
        margin:10px auto;
    border-radius: 20px;
  word-spacing: 1.8px;
 cursor: pointer;}



/* showing the right section */
@media screen and (min-width:1350px){
#right-section{display: block;}
#main-section{margin-right: 4px;}

main {display: grid;
       grid-template-columns: 75% 25%;
      }

footer{ width:75%;}
#load_more_products,#loader_img{width:75%;}

}


@media screen and (max-width:750px){
    #shopping-cart-modal-content{width: 95%;}
}



@media screen and (max-width:500px){
    #shopping-cart-modal-content{width: 100%;
                                 padding: 5px;}

nav ul li{padding:5px 12px;}
}


@media screen and (min-width:500px){
   #shopping-cart-wrapper #cart-items-count{
    right: 25%;
    top: -8px;}
}