@charset "UTF-8";
/* CSS Document */
/*import fonts from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Gugi&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia&display=swap');

:root{
	--primary-color: #000013;
	--light-gray: #2b3032a1;
	--border: #2b303218;
	--text-color: #ff686b;
	--roboto: "Roboto", sans-serif;
	--gugi: "Gugi", cursive;
	--sofia: "Sofia", cursive;
}

.primary-color{
	color: var(--primary-color);
}

.bg-primary-color{
	background-color: var(--primary-color) !important;
}

.text-color{
	color: var(--text-color);
}

.font-roboto{
	font-family: var(--roboto);
}

.lightblue{
	color: lightblue;
}

.orange{
	color: orange;
}

/* header */

header{
	background-color: var(--primary-color);
	font-family: var(--roboto);
}

header .site-title{
	font-family: var(--gugi);
}

.container .dropdown-toggle,
.container .dropdown-item{
	font-size: 0.7em;
}

.header-links a{
	font-size: 0.9em;
	text-decoration: none;
	color: white;
}


/* Navigation Menu */

.navbar-nav{
	padding: 0.8em 0em;
}

.navbar-nav .nav-link{
	font-size: 0.9em;
	color: var(--light-gray) !important;
}

.navbar-nav .nav-item .nav-link{
	padding: 0 1.3em;
}

.navbar-nav .basket-icon{
	margin-right: 6.5em !important;
}

/* Slider one */

.site-slider{
	position:relative;
}

.position-top{
	position: absolute;
	top: 50%;
}

.site-slider .slider-btn .prev,
.site-slider .slider-btn .next{
	background-color: var(--primary-color);
	padding: 1rem 1.5rem;
	border-radius: 10rem;
	color: white;
	margin: 0 1rem;
	opacity: 0;
	transition: opacity 1s ease;
}

.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next{
	opacity: 1;
}

.right-0{
	right: 0;
}

/* Slick Dots */

.slick-dots{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 1rem 0;
	list-style-type: none;
	position: absolute;
	bottom: 0;
	right: 50%;
}

.slick-dots li{
	margin: 0 0.6rem;
}

.slick-dots button{
	display: block;
	width: .5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	background-color: white;
	text-indent: -9999px;
	border-radius: 100%;
}

.slick-dots li.slick-active button{
	transform: scale(2.5);
	box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.205);
}

/* Second Slider */

.site-slider-two{
	position: relative;
	height: 30%;
}

.site-slider-two .product{
	height: 15rem;
	position: relative;
	overflow: hidden;
}

.site-slider-two .product img{
	width: 90%;
	margin: auto;
}

.site-btn.btn-span{
	padding: 0.8rem 1.9rem;
	border-radius: 4rem;
	border: 1px solid var(--border);
	background-color: white;
	color: var(--light-gray);
}

.slider-two .slick-track .product:hover span{
	background-color: var(--primary-color);
	color: white;
}

.hr{
	border: 1px dotted var(--border);
}

/* Featured Section */

.container .featured{
	padding: 3rem 0;
}

.container .featured h1{
	font-family:  var(--gugi);
}

.container .featured p{
	padding: 0.5% 25%;
	font-size: 0.9em;
}

/* Third Slider */

.site-slider-three{
	position: relative;
	margin-bottom: 5rem;
}

.site-slider-three .product{
	height: 100%;
	padding: 0em;
}

.site-slider-three .cart-details{
	margin-top: 0.5rem;
	padding: 0 2rem;
}

.rating i{
	font-size: 0.7rem;
	color: lightblue;
}

.site-slider-three .pro-price span{
	color: var(--text-color);
}

.product .cart .site-btn:hover{
	background-color: var(--primary-color);
	color: white;
}

/* Fourth Slider */

.site-slider-four{
	position: relative;
	margin-top: 3rem;
}

.slider-four{
	padding: 0 0.4rem;
}

.site-slider-four .product img{
	width: 80%;
	border: 1px solid var(--border);
}

/* Fifth Slider */

.slider-brand{
	position: relative;
	margin: 2rem 0;
}


/* Footer */

footer h4{
	padding: 1rem 1rem 0;
	font-family: var(--roboto);
}

footer .social i{
	padding: 3% 1%;
}

footer .col-md-2 small{
	color: lightcyan;
	padding: 0.7em 0;
}

.whatsapp:hover{
	color: greenyellow;
}

.facebook:hover{
	color: blue;
}

.youtube:hover{
	color: red;
}

.fedex:hover{
	color: rebeccapurple;
}

.usps:hover{
	color: darkblue;
	background: #FFFFFF;
}

.ups:hover{
	color: saddlebrown;
}

.dhl:hover{
	color: red;
	background: #FDB700;
}

.paypal:hover{
	color: blue;
}

.mastercard:hover{
	color: orange;
}

.apple:hover{
	color: white;
}

.visa:hover{
	color: blue;
}

.googleplus:hover{
	color: #DE5246;
}


/* Go Top
-------------------------------------------------------------- */
.gotop{
	position:fixed;
	right:0px;
	bottom: -100px;
	z-index:10;
	cursor:pointer;
	transform: rotate(-90deg);
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-ms-transition:all 0.4s ease
}

.gotop.goto{
	bottom: 20px;
	transform: rotate(-90deg);
}

/* Breadcrumb */
.breadcrumb{
	padding: 8px 15px;
	margin-bottom: 20px;
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
}

.breadcrumb li + li:before{
	content: "\00a0|\00a0";
	color: #cccccc;
}

@media(max-width:991px){
	.breadcrumb{
		padding: 8px 0px;
		text-align: center;
	}
}

/*  Products Categories & Categories Styles */
.panel.sidebar-menu{
    box-sizing: border-box;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
	width: 40%;
}
.panel.sidebar-menu ul.nav.category-menu{
    margin-bottom: 20px;
}
.panel.sidebar-menu ul.nav.category-menu li a{
    text-transform: uppercase;
    font-weight: 400;
}
.panel.sidebar-menu h3{
    padding: 1px 0px;
    margin: 0px;
	align-content: center;
}

/* Sidebar Heading */
.panel-heading{
	padding: 8px 18px;
	margin-bottom: 10px;
	background: orange;
	border-radius: 5px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
}

@media(max-width:991px){
	.breadcrumb{
		padding: 8px 0px;
		text-align: center;
	}
}

/*  Shop Products Tyles  */

@media(max-width: 768px){
    .center-responsive{
        width: 70%;
        margin: 0px auto;
    }
}
@media(max-width: 550px){
    .center-responsive{
        width: 95%;
        margin: 0px auto;
    }
}

/* Header Styles */

.navbar{
    background: #ffffff;
}
.navbar-collapse .right{
    float: right;
}
.navbar-brand{
    float: left;
    padding: 10px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 70px;
}
.navbar-brand:hover,
.navbar-brand:focus{
    text-decoration: none;
}
.navbar ul.nav > li > a{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}
.navbar ul.nav > li > a:hover{
    background: #e7e7e7;
}
.padding-nav{
    padding-top: 10px;
}
.btn-primary{
    color: rgb(255, 255, 255);
    background: rgb(79, 191, 168);
    border-color: rgb(65, 179, 156);
}

.nav-pills a {
	display: block;
 	color: black;
  	padding-left: 20px;
	padding-right: 20px;
 	text-decoration: none;
  	font-size: 15px;
 	border-radius: 5px;
}

.nav-pills a:hover {
  background-color: black;
  color: white;
}

.nav-pills a.active {
  background-color: dodgerblue;
  color: white;
}