@use '../abstracts' as *;

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

    Theme Name: Outstock - Clean, Minimal eCommerce HTML5 Template
    Author: Basic Theme
    Support: mdsalim400@gmail.com
    Description:  Clean, Minimal eCommerce HTML5 Template
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
    02. Header CSS
    03. Slider CSS
    04. Banner CSS
    05. Features CSS
    06. Shop CSS
    07. Sale CSS
    08. Blog CSS
    09. Subscribe CSS
    10. Caterories CSS
    11. Testimonial CSS
    12. Brand CSS
    00. Footer CSS


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

/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 body {
	font-family: $rubik;
	font-size: 13px;
	font-weight: normal;
	color: $body-text-color;
	line-height: 24px;
}

a{
	text-decoration: none;
}

.w-img{
	& img{
		width: 100%;
	}
}
.m-img{
	& img{
		max-width: 100%;
	}
}

input{
	outline: none;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
	@include transition(.3s);
}
a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}
a:focus,
a:hover
{
	color: inherit;
	text-decoration: none;
}
a,
button {
	color: inherit;
	outline: none;
	border: none;
}

button{
	background: transparent;
}
button:hover,
select:hover{
	cursor: pointer;
}

.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $rubik;
	color: $heading-color;
	margin-top: 0px;
	font-weight: 500;
	line-height: 1.2;
	@include transition(.3s);
}

h1 {
	font-size: 40px;
}
h2 {
	font-size: 36px;
}
h3 {
	font-size: 27px;
}
h4 {
	font-size: 20px;
}
h5 {
	font-size: 16px;
}
h6 {
	font-size: 14px;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
	list-style: none;
}
p {
	font-family: $rubik;
	font-size: 14px;
	font-weight: normal;
	color: $body-text-color;
	margin-bottom: 15px;
	line-height: 24px;
}

*::-moz-selection {
	background: $t-yellow;
	color: $white;
	text-shadow: none;
}
::-moz-selection {
	background: $t-yellow;
	color:$white;
	text-shadow: none;
}
::selection {
	background: $t-yellow;
	color: $white;
	text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
	color: $black;
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: $black;
	font-size: 14px;
	opacity: 1;
}


/*--
    - Common Classes
-----------------------------------------*/
.fix {
    overflow:hidden
}
.clear{
    clear: both;
}

.f-left {
	float: left
}
.f-right {
	float: right
}

.p-relative{
	position: relative;
}
.p-absolute{
	position: absolute;
}
/*--
    - Background color
-----------------------------------------*/
.grey-bg {
	background: $grey;
}
.grey-bg-2 {
	background: $grey-2;
}

.theme-bg {
	background: $t-yellow;
}
.white-bg {
	background:$white;
}
.black-bg {
	background: $black;
}
.black-bg-2 {
	background: $black-2;
}

.footer-bg {
	background: $footer-bg;
}

.footer-bg-2 {
	background: $footer-bg-2;
}
.footer-bottom-bg {
	background: $footer-bottom-bg;
}


// .primary-bg {
// 	background: #222;
// }

/*--
    - color
-----------------------------------------*/

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: $white !important;
}

.white-color {
	color: $white;
}

.theme-color {
	color: $t-yellow !important;
}
.black-color {
	color: $black;
}


.body-overlay{
	background-color: rgba($color: #000000, $alpha: .5);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	left: 0;
	opacity: 0;
	visibility: hidden;
	@include transition(.3s);
  }
  .body-overlay.opened{
	  opacity: 1;
	  visibility: visible;
  }
  

/* section title */

.section{
	&__head{
		padding-bottom: 6px;
		border-bottom: 1px solid $border;
		position: relative;
		&::after{
			position: absolute;
			content: '';
			bottom: -1px;
			left: 0;
			height: 2px;
			width: 50px;
			background: $t-yellow;
		}
		&-2{
			&::after{
				background: $t-red-dark;
			}
		}
	}
	&__title{
		@media #{$sm}{
			margin-bottom: 20px;
		}
		@media #{$xs}{
			margin-bottom: 20px;
		}
		& h3{
			font-size: 24px;
			font-weight: 500;
			margin-bottom: 0;
			& span{
				font-weight: 300;
			}
		}
	}
}


/* rating */

.rating{
	margin-bottom: 5px;
	&-2{
		margin-bottom: 15px;
	}
	& ul{
		& li{
			display: inline-block;
			& a{
				color: $t-yellow;
			}
		}
	}
	&__shop{
		& ul{
			& li{
				& a{
					font-size: 16px;
				}
			}
		}
	}
}

/* back to top */

.back-to-top-btn {
	width: 100%;
	& a{
		display: block;
		border-radius: 0;
		background: #4d5669;
		color: $white;
		text-transform: uppercase;
		padding: 20px 0;
		width: 100%;
		font-weight: 500;
	}
	&:hover{
		& a{
			color: $t-yellow;
		}
	}
	&-2{
		& a{
			background: $black-2;
		}
	}
	&-4{
		position: fixed;
		bottom: 30px;
		right: 30px;
		z-index: 99;
		& a{
			display: inline-block;
			font-size: 20px;
			height: 50px;
			width: 50px;
			line-height: 50px;
			text-align: center;
			color: $white;
			border: 1px solid $t-red-dark;
			@include border-radius(50%);
			background: $t-red-dark;
			z-index: 9999;
			&:hover{
				background: $white;
				color: $black;
			}
		}
	}
}
 /* display laptop none */

 @media #{$laptop}{
	.d-laptop-none{
		display: none;
	}
}


/* common nav */

.t-nav{
	& .owl-nav{
		display: flex;
		position: absolute;
		top: -77px;
		right: 0;

		@media #{$sm}{
			display: none;
		}
		@media #{$xs}{
			display: none;
		}
		& div{
			margin: 0 7px;
			& button{
				font-size: 24px;
				color: #333;
				background: transparent;
				@include transition(.1s);
				&:hover{
					color: $t-yellow;
					@include transform(scale(1.7));
				}
			}
		}
	}
}


// basic pagination

.basic-pagination{
	& ul{
		& li{
			display: inline-block;
			&:not(:last-child){
				margin-right: 10px;
			}
			& a{
				display: inline-block;
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				@include border-radius(50%);
				font-size: 14px;
				font-weight: 600;
				background: $white;
				&:hover,
				&.active{
					background: $t-yellow;
					color: $white;
				}
			}
		}
	}
	&-border{
		border-top: 1px solid #e6e6e6;
	}
}