body{

	font-family: poppins;
}




.back-button-container {
    position:absolute; /* Fixed position to stay at the top */
    top: 80px;
    left: 0;
    width: 100%;
    padding: 10px; /* Padding around the button */
    z-index:; /* Ensure it's above other content */
}

.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 */
}



.main .flickity-page-dots .dot{

  width:15px;
  height: 4px;
  margin: 0;
  border-radius: 0;
  
}

h1 img{

  margin-left: 10px;
}



.flickity-page-dots{
bottom: -35px;
}


 .flickity-page-dots .dot{

  width:20px !important;
  height: 6px;
  margin: 0 !important;
  border-radius: 0 !important;
  
}

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


 .flickity-page-dots .dot{

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


}



.flickity-page-dots .dot.is-selected{

  background-color:rgba(255,165,50,1);
}






#data_price,#data_name{

  padding-left: 20px;
  font-size: 13px;
  text-transform: capitalize;
}



#assets_container .package  img{


width: 210px !important;
height: 180px !important;
float: right;

}




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




#assets_container .package  img{


width: 100%;

height: 80px;


}


#assets_container .package{


display: inline-block;

margin-right: 20px !important;

border:1px solid rgba(0,70,90,0.1);

padding: 1px;

width:215px !important;


}


h6{
    
    font-size:21px !important;
}



}


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

#assets_container .package  img{


width: 17em;

height: 80px;

}


#assets_container .package{


display: inline-block;

margin-right: 20px;

border:1px solid rgba(0,70,90,0.1);

padding: 1px;


}

}



#assets_container .package{


display: inline-block;

margin-right: 20px;

border:1px solid rgba(0,70,90,0.1);

padding: 1px;

width:100%;

}


#assets_container {

font-size: 10px;

width: 100%;

margin-top: 30px;

}





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

}

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

}
}


@media only screen and (max-width:497px){
#think{
margin-left: 25px !important;
font-size: 0.8rem;

}
}





.open-btn{

}

#noviews{

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


}



 
#views{

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

}



.count{position: relative;top:89%;left: 23%;padding:10px;color:white;font-weight: bold;border:1px solid transparent transparent transparent; background-color:rgba(0,0,0,0.8);z-index: 999;}



/*--------------------------------------------------------------
# discount styles
--------------------------------------------------------------*/

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

font-size:11px;

} 













.nav_signup{


border:1px solid none;
border-left:1px solid white;
border-left-color: rgba(192,192,192,1);
margin-left:0px;
font-weight: normal !important;



}

.nav_login{
margin-left:50px;

font-weight: normal !important;
}




#coca_cola img{
width:100%;
}


.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;
  text-transform: capitalize;
}


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


h6{

	text-transform: capitalize;
}


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



@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;


}


#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.9rem !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;

}


 
#views{

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

}



 .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;


}


#post{

  display: block;
}


}

@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: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;


}


#post{

  display: block;
}

 
#views{

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

}



}














------------------------------------------------------------*/

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

#noviews{

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


}

#views{

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

}


 .flickity-page-dots .dot{

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


}



@media only screen and (min-width:376px) 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;

}



#noviews{

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


}



 
#views{

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

}






.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:13px !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;

}

 .flickity-page-dots .dot{

  width:15px !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.2rem !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:400px) and (max-width:414px){

 .flickity-page-dots .dot{

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


}










#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: 0px;
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: 0px;
width:200px;
display: inline-block;
margin:1em 1em;

}


 .flickity-page-dots .dot{

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

}


@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: 0px;

width:200px;

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

}


 .flickity-page-dots .dot{

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

}



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


#priceitem{

font-family:Poppins;
font-weight: bold;
color:black;
opacity: 0.8;
text-transform:capitalize;
font-size:14px;
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: 150px;
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;  
}


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

.main  .flickity-page-dots .dot.is-selected{

  background-color:rgba(255,165,50,1);
}


.main .flickity-page-dots .dot{

  width:15px;
  height: 4px;
  margin: 0;
  border-radius: 0;
  
}

}


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

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

.button_navigation{


font-size:12px;
cursor: pointer;
color:black;
padding:5px 0px;
margin-right:10px !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;

}



.button_navigation:hover{

opacity: 0.8;
text-decoration: none;


}

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

#main  .flickity-page-dots .dot{

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

}






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


.button_navigation img{

width: 20px;
height:15px;
margin-top: -3px;

}


/*--------------------------------------------------------------
# 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;


}


#search_page{

  margin-left: -350px;
}




/*--------------------------------------------------------------
# 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;
}





.category{

	margin-top: 15px;
  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;


}


@media only screen and (max-width:431px) 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);
}



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

.footer h6{

font-weight: bold;
font-size: 16px;
margin-bottom: 10px;

}

@media only screen and (max-width:497px){
 
 .footer h6{

font-weight: bold;
font-size: 21px;
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;

}
}