@use '../utils' as *;
/*-----------------------------------------------------------------------------------

    Template Name: Template Name – HTML5 Template
    Author: Theme Pure
    Support: basictheme400@gmail.com
    Description: Template Name  – HTML5 Template
    Version: 1.0

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

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Common Classes
		1.3 Default Spacing
		
	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Back to top
		2.2 Theme Settings
		2.3 Buttons
		2.4 Animations
		2.5 Preloader
		2.6 Background 
		2.7 Carousel
		2.8 Nice Select
		2.9 Pagination
		2.10 Offcanvas
		2.11 Breadcrumb
		2.12 Accordion
		2.13 Tab
		2.14 Modal
		2.15 Section Title
	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1
		3.2 Header Style 2
		3.3 Header Style 3
		3.4 Header Style 4
		3.5 Header Style 5
		3.6 Header Style 6
		3.7 Header Style 7

    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main menu css
		4.2 Meanmenu css
		4.3 Mobile menu css

	---------------------------------
	05. BLOG CSS
	---------------------------------
		5.1 Postbox css
		5.2 Recent Post css
		5.3 Sidebar css
		5.4 Blog css

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer Style 1
		6.2 Footer Style 2
		6.3 Footer Style 3
		6.4 Footer Style 4
		6.5 Footer Style 5
		6.6 Footer Style 6
		6.7 Footer Style 7
	
	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 Slider css
		7.2 About css
		7.3 Brand css
		7.4 Cart css
		7.5 Checkout css
		7.6 Contact css
		7.7 Counter css
		7.8 CTA css
		7.9 FAQ css
		7.10 Feature css
		7.11 Form css
		7.12 Order CSS
		7.13 Portfolio css
		7.14 Pricing css
		7.15 Product css
		7.16 Services css
		7.17 Team css
		7.18 Testimonial css

	---------------------------------
	08. ECOMMERCE CSS
	---------------------------------
		8.1 Cart css
		8.2 ECOMMERCE css
		8.3 Product css


**********************************************/


/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/

@import url($font-url);

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
	font-family: var(--tp-ff-body);
	font-size: var(--tp-fz-body);
	font-weight: normal;
	color: var(--tp-text-white);
	line-height: 26px;
	overflow-X: hidden !important;
}

a{
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tp-ff-heading);
	color: var(--tp-heading-primary);
	margin-top: 0px;
	font-weight: 400;
	line-height: 1.1;
	@include tp-transition(color);
}

h1 {
	font-size: 40px;
}
  
h2 {
font-size: 36px;
}

h3 {
font-size: 28px;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 20px;
}

h6 {
font-size: 16px;
}

ul {
	margin: 0px;
	padding: 0px;
}

p {
	font-family: var(--tp-ff-p);
	font-size: 20px;
	font-weight: 400;
	color: var(--tp-text-black);
	margin-bottom: 15px;
	line-height: 30px;
}


a,
button,
p,
input,
select,
textarea,
li,
.transition-3{
	@extend %tp-transition-common;
}
a:not([href]):not([class]), 
a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}
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;
	background: transparent;
}
button:hover{
	cursor: pointer;
}
button:focus{
    outline: 0; 
}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea{
	outline: none;
	background-color: #EFF0F2;
	height: 54px;
	width: 100%;
	line-height: 54px;
	font-size: 18px;
	border: 2px solid #EFF0F2;
	color: var(--tp-text-body);
	padding-left: 29px;
	padding-right: 29px;

	@include rtl{
		text-align: right;
	}

	@include tp-placeholder{
		color: #84848B;
	}

}
input[type="color"] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	height: 100%;
	width: 100%;
	padding: 0;
	border-radius: 50%;
}
*::-moz-selection {
	background: var(--tp-common-black);
	color: var(--tp-common-white);
	text-shadow: none;
}
::-moz-selection {
	background: var(--tp-common-black);
	color: var(--tp-common-white);
	text-shadow: none;
}
::selection {
	background: var(--tp-common-black);
	color: var(--tp-common-white);
	text-shadow: none;
}


*::-moz-placeholder {
	color: var(--tp-common-black);
	font-size: var(--tp-fz-body);
	opacity: 1;
}
*::placeholder {
	color: var(--tp-common-black);
	font-size: var(--tp-fz-body);
	opacity: 1;
}


img {
	max-width: 100%;
}

.w-img {
	width: 100%;
}

.test-class{
	padding: 5px 20px;
	background-color: green;
	color: #000;
	position: relative;
	overflow: hidden;
	&::after,
	&::before{
		position: absolute;
		content: '';
		left: -23px;
		bottom: -7px;
		width: 79%;
		height: 10px;
		background-color: #fff;
		border-radius: 50%;
	}

	&::before{
		left: auto;
		right: -23px;
		top: -7px;
		bottom: auto;
	}

	& span{
		position: relative;

		&::after,
		&::before{
			position: absolute;
			content: '';
			left: -23px;
			bottom: -7px;
			width: 79%;
			height: 10px;
			background-color: red;
			border-radius: 50%;

		}
	}
}
.container-fluid {
	padding-right: var(--bs-gutter-x,15px);
	padding-left: var(--bs-gutter-x,15px);
}
.cursor-outer {
	margin-left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	border: 2px solid #CD5F37;
	box-sizing: border-box;
	z-index: 10000000;
	transition: all 0.08s linear;
}
.mouseCursor {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border-radius: 50%;
	transform: translateZ(0);
	text-align: center;
	&.my-class{
		mix-blend-mode: difference;
		background-color: #fff;
		&.cursor-outer{
			width: 72px;
			height: 72px;
		}
		&.cursor-inner{
			display: none;
		}
	}
}
.cursor-inner {
	margin-left: -3px;
	margin-top: -3px;
	width: 6px;
	height: 6px;
	z-index: 10000001;
	background-color: #CD5F37;
	transition: all 0.08s linear;
}
.cursor-inner span {
	color: #fff;
	line-height: 80px;
	opacity: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
  }
.cursor-inner.cursor-big span {
	opacity: 1;
}

.gx-6 {
	--bs-gutter-x: 15px;
}