body{font-family: poppins;}

.active-link{ color:red;}



.popup{
background-color: rgba(248,248,248,0.3);  
background-color: rgba(248,248,248,0.3);  
position:fixed;
padding: 4px 8px !important;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
padding:5px;
z-index: 99;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #fff;
display:none;
opacity:0;
transition: 0.3s;
text-align: center;
font-size: 14px !important;
font-family: poppins !important;

}

.popup.active{
display: block;
opacity: 1;
transition: 0.3s;
}

.close{

font-size: 14px;
position: absolute;
top: -6px;
left: 93%;
color:black;
cursor: pointer;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
border-radius: 50%;
background-color: white;
z-index: 1;
}

.close:hover{
opacity: 0.6;
border: none;
outline: none;
 outline: none;
}

ul{
list-style-type:none;
}

ul li{
    
display:block;
margin:5px 10px;
}

ul li a{
color:darkgreen;
}

.wrap{

  padding: 20px;
}

.back-button-container {
    position:absolute; /* Fixed position to stay at the top */
    top: 50px;
    left: 0;
    width: 100%;
    padding: 10px; /* Padding around the button */

}

.back-button {
    text-decoration: none;
    color: #333; /* Text color of the button */
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid white !important; /* Border style */
    border-radius: 4px; /* Rounded corners */
}

.back-button:hover {
    background-color: #333; /* Background color on hover */
    color: white !important; /* Text color on hover */
}











.h6{

  font-size: 13px;
  font-weight: bold;
}

h1 img{

margin-left: 10px;

}

#think{
margin-left: 100px !important;

}

@media only screen and (max-width:797px){
#think{
margin-left: 30px !important;

}
}

@media only screen and (min-width:497px) and (max-width:797px){
#think{

font-size: 1rem;

}
}


@media only screen and (min-width:497px){
   
}


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

.nav_login{

margin-left:40px !important;
font-weight: normal !important;

}


 h6 b{
        font-size:21px !important;
        width:60% !important;
    }

}


/*--------------------------------------------------------------
# compare button
--------------------------------------------------------------*/
.btn-compare{

  margin-left: -2px;
  cursor: pointer;
}

.hide{
  display: none;
  position: absolute;
  color: white ;
  background-color:rgba(0,0,0,0.6);
  margin-top: -23px;
  font-size: 12px;
  padding: 0px 3px;


}


.btn-hover:hover + .hide{

  display: block;




}

#button_navigation img{

  height: 15px;
}

.fa-cart-shopping{

  margin-top: -4px;
}





/*--------------------------------------------------------------
# view icon
--------------------------------------------------------------*/

#noviews{

position:relative;
top:45px;
left:0px;
background-color: rgba(0,0,0,0.8);
color: white;
font-weight: bold;
padding: 7px;
font-size:11px;

}



 
#views{

position:relative;
top:45px;
left:-37px;
background-color: rgba(0,0,0,0.8);
color: white;
font-weight: bold;
padding: 7px;
font-size: 11px;

}





/*--------------------------------------------------------------
# product discount
--------------------------------------------------------------*/


#discount{
background-color: rgba(255,195,50,0.4);
color: rgba(255,95,50,1);
border: 1px solid transparent transparent;
position:relative;
top:45px;
font-weight: bold;
padding:3px;
left: 80%;

font-size:13px;

} 


#share{

  height:14px;
  width: 15px;
}



.fa-cart-shopping{

font-size: 14px;


padding:3px;

}







.fa-check{

font-size: 12px;

color: white;

border:1px solid transparent;

border-radius: 50%;

background-color: darkgreen;
padding:3px;

}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.nav_signup{


border:1px solid none;
border-left:1px solid black;
border-left-color: rgba(192,192,192,1);
margin-left:0px;
color:black !important;

font-weight: normal !important;

}


/*--------------------------------------------------------------
# product list
--------------------------------------------------------------*/



#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 10px;

width:240px;

display: inline-block;
margin:1em 1em;

}

@media only screen and (min-width:430px) and (max-width:498px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 10px;

width:210px;

display: inline-block;
margin:1em 1em;

}



}



@media only screen and (min-width:300px) and (max-width:325px){

#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;

width:10rem !important;

display: inline-block;
margin:1em 0.15em !important;

}

.nav_login,.nav_signup{

margin-left:40px !important;
font-weight: normal !important;
display: none! important;

padding: 2px !important;

border:2px solid white !important;

}


#head-h3{

font-size: 18px;

}


 .flickity-page-dots .dot{

  width:40px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
  display: none;
  
}


#icon_add{
position: absolute;
top: 10px !important;
right: 0px !important;
padding: 5px !important;
display: none;

}







.featured{

width: 100%;
padding: 0px;


}


.featured #package{

width: 10rem;
padding: 0px;
text-transform:capitalize !important;

}

#post{

  display: block;
}


}


@media only screen and (min-width:326px) and (max-width:365px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;

width:9.8rem !important;

display: inline-block;
margin:1em 0.15em !important;

}



.nav_login,.nav_signup{

margin-left:40px !important;
font-weight: normal !important;
display: none! important;

padding: 2px !important;

border:2px solid white !important;

}


#head-h3{

font-size: 18px;

}


 .flickity-page-dots .dot{

  width:40px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
  display: none;
  
}


#icon_add{
position: absolute;
top: 10px !important;
right: 0px !important;
padding: 5px !important;
display: none;

}


.featured{

width: 100%;
padding: 0px;


}


.featured #package{

width: 10rem;
padding: 5px;


}


#post{

  display: block;
}

 .flickity-page-dots .dot{

  width:10px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
 
  

}


}





@media only screen and (min-width:366px) and (max-width:403px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;

width:10.3rem !important;

display: inline-block;
margin:1em 0.10em !important;

}

.nav_login,.nav_signup{

margin-left:40px !important;
font-weight: normal !important;
display: none! important;

padding: 2px !important;

border:2px solid white !important;

}


#head-h3{

font-size: 18px;

}


 .flickity-page-dots .dot{

  width:10px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
  display: none;
  
}


#icon_add{
position: absolute;
top: 10px !important;
right: 0px !important;
padding: 5px !important;
display: none;

}







.featured{

width: 100%;
padding: 0px;


}


.featured #package{

width: 10rem;
padding: 0px;


}


#post{

  display: block;
}




}




@media only screen and (min-width:377px) and (max-width:390px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;

width:10.3rem !important;

display: inline-block;
margin:1em 0.4em !important;

}

.nav_login,.nav_signup{

margin-left:40px !important;
font-weight: normal !important;
display: none! important;

padding: 2px !important;

border:2px solid white !important;

}

#think{

  font-size: 0.84rem !important;
}


 .flickity-page-dots .dot{

  width:10px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
 
  

}



}











@media only screen and (min-width:400px) and (max-width:414px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;

width:11.6rem !important;

display: inline-block;
margin:1em 0.15em !important;

}

.nav_login,.nav_signup{

margin-left:40px !important;
font-weight: normal !important;
display: none! important;

padding: 2px !important;

border:2px solid white !important;

}



 .flickity-page-dots .dot{

  width:10px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
 
  

}











}




@media only screen and (min-width:300px) and (max-width:430px){


.section_search{
text-align: left !important;
}


.section_search span{

font-size: 12px;
position: relative;
left: -3px;

}


.section_search input[type=search] {

  font-size: 14px;
    width:160px !important;
    margin-left: 8px;

}



 .flickity-page-dots .dot{

  width:10px !important;
  height: 4px;
  margin: 0 !important;
  border-radius: 0 !important;
 
  

}



}











@media only screen and (min-width:415px) and (max-width:430px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;

width:12rem !important;

display: inline-block;
margin:1em 0.15em !important;

}



.nav_login,.nav_signup{

margin-left:40px !important;
font-weight: normal !important;
display: none! important;
padding: 2px !important;
border:2px solid white !important;


}






}


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

#discount{
background-color: rgba(255,195,50,0.4);
color: rgba(255,95,50,1);
border: 1px solid transparent transparent;
position:relative;
top:45px;
font-weight: bold;
padding:3px;
left: 77% !important;


font-size:12px !important;

} 


}



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

#noviews{

position:relative;
top:45px;
left:5px;
background-color: rgba(0,0,0,0.8);
color: white;
font-weight: bold;
padding: 3px;
font-size:11px;

}



 
#views{

position:relative;
top:45px;
left:-35px !important;
background-color: rgba(0,0,0,0.8);
color: white;
font-weight: bold;
padding: 3px;
font-size: 11px;

}


}






















@media only screen and (min-width:499px) and (max-width:797px){


#package{

background-color:rgba(243,243,243,0.1);padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 10px;

width:250px;

display: inline-block;
margin:1em 1em;

}



}








#coca_cola img{

  
width:100%;




}

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

#coca_cola{

  
width:100%;

display:none !important;


}

}
.discount_main{

  padding-top: 10px;

  margin-top: 15px;

  width: 100%;

  height: 50px;

  background-color: rgba(192,192,192,0.4);


  border:1px solid transparent;

  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);

  text-align: center;
}


.discount_main p{ 
font-size: 13px;
}




.nav_login{
margin-left:80px;
color:black;
font-weight: normal !important;

}


/*--------------------------------------------------------------
# navigation bar mobile
--------------------------------------------------------------*/

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

.button_navigation{


font-size:12px;

cursor: pointer;

color:black !important;

padding:5px 0px;

margin-right:11px !important;

font-weight: bold;

}


}


/*--------------------------------------------------------------
# navigation bar 
--------------------------------------------------------------*/


.button_navigation{

font-family:poppins;

float:left;

font-size:13px;

cursor: pointer;

color:black;

padding:8px 1px;

margin-right:32px;

font-weight: bold;

}

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

.button_navigation{

display: none;

}





}

.button_navigation:hover{

opacity: 0.8;

text-decoration: none;



}


.nav-container{
  width: 100%;
  margin-top: 30px;
  /*display: flex;
  align-items: center;
  justify-content: space-between;*/ }


/*--------------------------------------------------------------
# anchor category
--------------------------------------------------------------*/

.category{

  margin:10px;

  margin-right: 10px;

  font-size: 12px;

  border:1px solid rgba(0,0,0,0.2);

  padding: 2px 10px;

  border-radius: 15px;

  text-transform: capitalize;

  color: black;

  text-decoration: none;


}


.category:hover{
color:white !important;
}


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


.category{



  margin-right:5px;

  font-size: 12px;

  border:1px solid rgba(0,0,0,0.2);

  padding: 2px 10px;

  border-radius: 15px;

  text-transform: capitalize;

  color: black;

  text-decoration: none;


}





}





.category:hover{

  
background-color: skyblue;

color:white;

text-decoration: none;

transition: 0.3s ease-in-out;

}


.category :nth-child(3){

  background-color: rgba(192,192,192,0.4);
}



/*--------------------------------------------------------------
# navigation bar img
--------------------------------------------------------------*/


.button_navigation img{

width: 20px;
height: 15px;

}


/*--------------------------------------------------------------
# navigation search bar
--------------------------------------------------------------*/


#input_search{

font-size: 12px;

border:1px solid transparent;
font-weight: normal;

background-color: rgba(192,192,192,0.5);
border-radius: 12px;

width: 390px;


}


/*--------------------------------------------------------------
# navigation search bar button
--------------------------------------------------------------*/


#btn-search{

  font-size: 10px;
  border-radius:0px 13px 13px 0px;
  margin-left: -80px;
  padding: 7px 8px;
  position: relative;
z-index: 9;
color: white !important;
}


/*--------------------------------------------------------------
# section product  mobile
--------------------------------------------------------------*/

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


#package{

width:12.5em;



}


}


/*--------------------------------------------------------------
# product list
--------------------------------------------------------------*/


#priceitem{

font-family:Poppins;
font-weight: bold;
color:black;
opacity: 0.8;
text-transform:capitalize;
font-size:13px;
padding:10px;
position: relative;
margin-bottom: 8px;


}




#conitem,#locitem,#catitem{
font-size:12px;
font-family:poppins;
color: rgba(0,0,0,0.9);
padding:10px;
width:100%;

font-weight: bold;
text-transform: capitalize;


}




#imgitem{
height: 120px;
width:100%;

}



#nameitem a{
  font-size:12px;
  font-weight:normal;
  padding-left:10px;
  text-transform:capitalize;
  color: rgba(0,0,0,0.4);
  padding-top: 8px;

 word-wrap:break-word;
 text-align:center;
  font-family:poppins;  
}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

.footer h6{

  font-weight: bold;

  font-size: 16px;

  margin-bottom: 10px;
}

@media only screen and (min-width:497px) {


.footer h6{

  font-weight: bold;

  font-size: 23px !important;

  margin-bottom: 10px;
}



}


.footer p{

  font-size: 14px;
}


.footer{
  padding: 10px 20px;

  background-color: rgba(192,192,192,0.5);
}


.footer img{

width: 140px;

}

.footer button{

  font-size: 13px;

  border:1px solid transparent;

  background-color: rgba(0,0,0,0.6);

  color: white;

  margin-bottom: 8px;


}

.footer{

  margin-top: 30px;
}




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

.button_navigation{

display: none;

}





}