/*
* Created by CeLa
* Copyright 2023 by CeLa 
* Theme styles
*/

/*
 * Default variables
 */
:root {
	--base-color: #343f52;
	--pri-color: #5eb9f0;
	--sec-color: #b0dffe;
	--thd-color: #fbb446;
	
	--pri-font:  'Rubik';
}


/*
 * Html defauls styles
 */
html, body {
	font-family: var(--pri-font);
	font-size: 1rem;
	font-weight: 300;
	color: var(--base-color);
}

/*
 * Layout styles
 */

.heading {
	margin-bottom: 2.5rem;
}
.main-content {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/*
 * Navbar styles
 */
 
.navbar.sticky-top {
    top: -150px;
    transition: .5s;
}
.main-navbar {
	box-shadow: 0 0 1.25rem rgba(30,34,40,.06);
}
.main-navbar.bg-light {
	background-color: rgba(255,255,255,1) !important;
}
.main-navbar .navbar-brand,
.main-navbar ul.navbar-nav > li > a {
	padding-top: 12px;
	padding-bottom: 12px;
	font-weight: 500;
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: color linear .25s;
}
.main-navbar .navbar-brand,
.main-navbar ul.navbar-nav > li > a {
	color: var(--base-color);
}
.main-navbar .navbar-brand:hover,
.main-navbar ul.navbar-nav > li > a:hover {
	color: var(--pri-color);
}
.main-navbar .navbar-toggler {
	border: 0;
	border-radius: 0;
}
.navbar-toggler:focus {
	box-shadow: none !important;
}

/*
 * Breadcrumb
 */
.breadcrumb-outer {
	padding: 1rem 0;
	border-bottom: 1px solid #eee;
}
.breadcrumb-outer ol.breadcrumb {
	margin: 0;
}
.breadcrumb-outer ol.breadcrumb > li.breadcrumb-item {
	font-size: .875rem;
	font-weight: 400;
}
.breadcrumb-outer ol.breadcrumb > li.breadcrumb-item > a {
	text-decoration: none;
}

/*
 * Carousel
 */
.carousel-indicators [data-bs-target] {
	height: 8px;
	width: 8px;
	border-top: 0;
	border-bottom: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	transition: .5s;
}
.carousel-indicators .active {
	width: 22px;
}
.carousel .carousel-control-prev .carousel-control-prev-icon,
.carousel .carousel-control-next .carousel-control-next-icon {
	visibility: hidden;
	opacity: 1;
}
/* Animate arrows*/
.carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel .carousel-control-next:hover .carousel-control-next-icon {
	visibility: visible;
	animation-duration: .75s;
	transition-timing-function: linear;
}
.carousel .carousel-control-prev:hover .carousel-control-prev-icon {
	animation-name: FadeInPrev;
}
.carousel .carousel-control-next:hover .carousel-control-next-icon {
	animation-name: FadeInNext;
}
@keyframes FadeInPrev {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@keyframes FadeInNext {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
/* Custom carousel style */
.main-carousel {
	margin-top: 30px;
}
.main-carousel .carousel-inner .carousel-item {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	overflow: hidden;
}


/*
 * Processbar
 */
:root {
	font-size: 20px;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--grey: #ecedf3;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
}
.progress-wrap {
	position: fixed;
	right: 50px;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	content: 'x';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--grey);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
	content: 'y';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing: border-box;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}

.error-image {
	max-width: 600px;
	margin: 45px auto;
}
.error-image img {
	max-width: 100%;
	height: auto;
}

/*
 * Categories
 */
.categories-outer {}
.category-list {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(3, 1fr);
}
.category-list .category {
	padding: 15px;
	border: 1px solid #f1f1f1;
	background-color: #fff;
}
.category-list .category .image img {
	max-width: 100%;
	height: auto;
}
/* Category details */
.category {
	background-color: #f1f1f1;
	border: 1px solid #f1f1f1;
}
@media(min-width: 768px){
	.category.grid-style {
		display: flex;
		gap: 30px;
		align-items: center;
	}
	.category.grid-style .image {
		margin-bottom: 0;
		flex-basis: 25%;
	}
	.category.grid-style .body {
		flex: 1;
	}
	
}

.category .image img {
	max-width: 100%;
	height: auto;
}


/*
 * Widget styles
 */
.sale-badge {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	margin: 0;
	padding: 0;
	background-color: #d63638;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.products-widget {
	padding: 60px 0;
}
.products-widget .widget-inner {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(4, 1fr);
}
.products-widget .product {
	position: relative;
	padding: 15px;
	border: 1px solid #f1f1f1;
	z-index: 95;
}
.products-widget .product .sale-badge {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 105;
}
.products-widget .product .image img {
	max-width: 100%;
	height: auto;
}
.products-widget .product .head {
	font-size: 1.25rem;
}
.products-widget .product .infos {
	font-size: .875rem;
}
.products-widget .product .prices {
	margin-top: 15px;
}
.products-widget .product .price {}
.products-widget .product .sale-price {}
.products-widget .product .old-price {
	text-decoration-line: line-through;
}
.products-widget .product .link {
	margin-top: 15px;
}
.products-widget .products-link {
	margin-top: 30px;
	text-align: center;
}