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

    Template Name: Aleric - Digital Agency & Creative Portfolio HTML Template
    Author: AQLOVA
    Support: basictheme400@gmail.com
    Description: Aleric - Digital Agency & Creative Portfolio HTML Template
    Version: 1.0.2

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

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

	-----------------
    01. THEME CSS
	-----------------
		1.1 Common Classes
		1.2 init style
		1.3 Default Spacing
		
	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Animations
		2.2 Background
		2.3 scrollToTop
		2.4 Breadcrumb
		2.5 Buttons
		2.6 Magic Cursor css start
		2.7 Nice Select
		2.8 offcanvas
		2.9 Preloader
		2.10 Search css start
		2.11 Section Title

	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style

    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main menu css
		4.2 Mobilemenu css

	---------------------------------
	05. BLOG CSS
	---------------------------------
		5.1 blog css
		5.2 Postbox css
		5.3 Sidebar css

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer Style
	
	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 about css start
		7.2 awards css start
		7.3 banner css start
		7.4 brand
		7.5 Cart css
		7.6 Checkout css
		7.7 contact css start
		7.8 counter css start
		7.9 cta css start
		7.10 dark css start
		7.11 Error Css
		7.12 faq css start
		7.13 feature css start
		7.14 Funfact Css
		7.15 gallery css start
		7.16 Hero css start
		7.17 intaractive
		7.18 light css start
		7.19 Login Css
		7.20 map
		7.21 portfolio css start
		7.22 pricing css start
		7.23 process css start
		7.24 product css start
		7.25 profile css start
		7.26 service
		7.27 skill css start
		7.28 skill css start
		7.29 team css start
		7.29 techonolgy css start
		7.30 testimonial css start
		7.31 text css start
		7.32 video css start

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


/*----------------------------------------*/
/*  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: 16px;
	font-weight: normal;
	color: var(--tp-common-black);
	line-height: 26px;
}

a{
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tp-ff-heading);
	color: var(--tp-common-black);
	margin-top: 0px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	@include transition(color);
}

h1 {
	font-size: 70px;
}
  
h2 {
font-size: 50px;
}

h3 {
font-size: 36px;
}

h4 {
font-size: 26px;
}

h5 {
font-size: 20px;
}

h6 {
font-size: 16px;
}

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

p {
	font-family: var(--tp-ff-p);
	color: var(--tp-grey-1);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 15px;
}
img {
	max-width: 100%;
}


a,
button,
p,
input,
select,
textarea,
li,
.transition-3{
	@extend %transition;
}

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: var(--tp-common-white);
	height: 52px;
	width: 100%;
	line-height: 52px;
	font-size: 16px;
	color: var(--tp-theme-primary);
	padding-left: 25px;
	padding-right: 25px;
	border-radius: 4px;
	border: 1px solid var(--tp-common-white);

	@include placeholder{
		color: var(--tp-grey-2);
	}
	@include rtl{
		text-align: right;
	}

	&:focus{
		border-color: var(--tp-theme-primary);
		&::placeholder{
			opacity: 0;
		}
	}

}

textarea{
	line-height: 1.4;
	padding-top: 17px;
	padding-bottom: 17px;
}

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-theme-primary);
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: var(--tp-theme-primary);
	font-size: 14px;
	opacity: 1;
}


.z-index{
	z-index: 1;
}
.z-index-2{
	z-index: 2;
}
.z-index-3{
	z-index: 3;
}
.z-index-4{
	z-index: 4;
}
.z-index-5{
	z-index: 5;
}
.z-index-6{
	z-index: 6;
}
.z-index-7{
	z-index: 7;
}
.z-index-8{
	z-index: 8;
}



.gx-10{
	--bs-gutter-x: 10px;
}
.gx-12{
	--bs-gutter-x: 12px;
}
.gx-15{
	--bs-gutter-x: 15px;
}
.gx-20{
	--bs-gutter-x: 20px;
}
.gx-23{
	--bs-gutter-x: 23px;
}
.gx-25{
	--bs-gutter-x: 25px;
}
.gx-30{
	--bs-gutter-x: 30px;
}
.gx-35{
	--bs-gutter-x: 35px;
}
.gx-40{
	--bs-gutter-x: 40px;
}
.gx-45{
	--bs-gutter-x: 45px;
}
.gx-50{
	--bs-gutter-x: 50px;
	@media #{$lg,$md,$sm,$xs}{
		--bs-gutter-x: 15px;
	}
}
.gx-60{
	--bs-gutter-x: 60px;
	@media #{$lg,$md,$sm,$xs}{
		--bs-gutter-x: 30px;
	}
}
.gx-90{
	--bs-gutter-x: 90px;
	@media #{$xl}{
		--bs-gutter-x: 50px;	
	}
	@media #{$lg,$md,$sm,$xs}{
		--bs-gutter-x: 30px;
	}
}