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

    Template Name: Agntix - Digital Agency & Creative Portfolio HTML Template
    Author: Theme_Pure
    Support: https://help.themepure.net/support/
    Description: Template
    Version: 1.0.3

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

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

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Common Classes
		
	-----------------
    02. COMPONENTS CSS
	-----------------
		2.1 Back to top
		2.2 Buttons
		2.3 Animations
		2.4 Preloader
		2.5 Background
		2.6 Nice Select
		2.7 Breadcrumb
		2.8 Accordion
		2.9 Section Title
		2.10 Accordion
		2.11 Search
		2.12 Magic Cursor

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

    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main Menu
		4.2 Mobile Menu
		4.3 offcanvas Menu

	---------------------------------
	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.5 Footer Style 5
		6.7 Footer Style 7
		6.8 Footer Style 8
		6.9 Footer Style 9
		6.10 Footer Style 10
		6.11 Footer Style 11
		6.12 Footer Style 12
		6.13 Footer Style 13
		6.14 Footer Style 14
		6.15 Footer Style 15
	
	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 Hero css
		7.2 About Css
		7.3 Banner Css
		7.4 Text-slide Css
		7.5 Service Css
		7.6 Project Css
		7.7 Funfact Css
		7.8 Work Css
		7.9 Testimonail Css
		8.0 Award Css
		8.1 Video Css
		8.2 Brand Css
		8.3 Team Css
		8.4 Step Css
		8.5 Choose Css
		8.6 Price Css
		8.7 Faq Css
		8.8 Success Css
		8.9 Instagram Css
		9.0 Feature Css
		9.1 Review Css
		9.2 Stack Css
		9.3 Benefits Css
		9.4 Cta Css
		9.5 Intaractive Css
		9.6 Project Slider Css
		9.7 Career Css
		9.8 Contact Css
		9.9 Portfolio css
		10.0 Shop Css
		10.1 Shop Details Css
		10.2 Login Css
		10.3 Checkout css
		10.4 Cart css
		10.5 Account css
		10.6 Error Css
		10.7 Dark Css Start
		10.8 Light Css Start


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


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

@import url($font-url);

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

html{
	scroll-behavior: smooth;
}


// container-list

@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1510px;
	}
	.container-1830 {
		max-width: 1830px,
	}
	.container-1800{
		max-width: 1800px,
	}
	.container-1750{
		max-width: 1750px,
	}
	.container-1730{
		max-width: 1730px,
	}
	.container-1680{
		max-width: 1680px,
	}
	.container-1630{
		max-width: 1630px,
	}
	.container-1610{
		max-width: 1610px,
	}
	.container-1580{
		max-width: 1580px,
	}
	.container-1550{
		max-width: 1550px,
	}
	.container-1460{
		max-width: 1460px,
	}
	.container-1430{
		max-width: 1430px,
	}
	.container-1350{
		max-width: 1350px,
	}
	.container-1330{
		max-width: 1330px,
	}
	.container-1320{
		max-width: 1320px,
	}
	.container-1300{
		max-width: 1300px,
	}
	.container-1230{
		max-width: 1230px,
	}
	.container-1200{
		max-width: 1200px,
	}
	.container-1030{
		max-width: 1030px,
	}
}


/*---------------------------------
	typography css start 
---------------------------------*/
body {
	font-size: 14px;
	line-height: 26px;
	font-weight: normal;
	color: var(--tp-text-body);
	font-family: var(--tp-ff-body);
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

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

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-weight: 400;
	font-size: 18px;
	line-height: 1.56;
	margin-bottom: 15px;
	letter-spacing: -0.02em;
	font-family: var(--tp-ff-p);
	color: var(--tp-text-body);
}


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;
	height: 60px;
	width: 100%;
	line-height: 26px;
	font-size: 16px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 8px;
	background: rgb(246, 246, 249);
	color: var(--tp-common-black);
	border: 1px solid rgb(246, 246, 249);
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	@include tp-placeholder{
		color: var(--tp-common-black);
	}
	&:focus{
		border-color: var(--tp-common-black);
		&::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-common-black);
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: var(--tp-common-black);
	font-size: 14px;
	opacity: 1;
}

.tp-line-black{
	display: inline;
	transition: all 0.3s linear;
	background-repeat: no-repeat;
	background-size: 0% 1px, 0 1px;
	background-position: 100% 100%, 0 100%;
	
	
	&:hover{
		background-size: 0% 1px, 100% 1px;
	}
}
.tp-line-white{
	display: inline;
	transition: all 0.3s linear;
	background-repeat: no-repeat;
	background-size: 0% 1px, 0 1px;
	background-position: 100% 100%, 0 100%;
	background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
	&.green{
		background-position: 100% 100%, 0 75%;
		background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
	}
	&.cream{
		background-position: 100% 100%, 0 75%;
		background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
	}
	&.cream-2{
		background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
	}
	&:hover{
		background-size: 0% 1px, 100% 1px;
	}
}

.body-padding{
	padding: 0 20px;
	@media #{$xs}{
		padding: 0;
	}
}

.tp_img_reveal {
	visibility: hidden;
	overflow: hidden;
}