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

    Template Name: tryesy - Digital Agency HTML Template
    Author: Theme_Pure
    Support: https://help.themepure.net/support/
    Description: tryesy - Digital Agency HTML Template
    Version: 1.0

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

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

	-----------------
    01. THEME CSS
	-----------------
		1.1 Common Classes
		
	-----------------
    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
		2.16 Search
		2.17 Hotspot
		2.18 Ragne Slider

	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1
		3.3 Header Style 3
		3.4 Header Style 4


    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main menu css
		4.2 Mobilemenu 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

	
	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 about css
		7.2 brand css
		7.3 contact css
		7.4 cta css
		7.5 dashboard css
		7.6 faq css
		7.7 funfact css
		7.8 goal css
		7.9 Hero css
		7.10 price css
		7.11 project css
		7.12 service css
		7.13 skill css
		7.14 slider css
		7.15 step css
		7.16 team css
		7.17 testimonial css
		7.18 text-anim css
		7.19 text slide css
		7.20 video css
		7.21 vission css

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


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

@import url($font-url);

@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1230px;
		--bs-gutter-x: 30px;
	}
	.container-1680{
		max-width: 1680px;
	}
}

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

html{
	scroll-behavior: smooth;
}

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

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-size: 14px;
	font-weight: 400;
	margin-bottom: 15px;
	line-height: 26px;
	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: 56px;
	width: 100%;
	line-height: 56px;
	font-size: 14px;
	padding-left: 26px;
	padding-right: 26px;
	color: var(--tp-common-black);
	border: 1px solid var(--tp-common-black);
	background-color: var(--tp-common-white);
	@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%;
	background-image: linear-gradient(#141820, #141820), linear-gradient(#141820, #141820);
	&: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(#fff, #fff), linear-gradient(#fff, #fff);
	&:hover{
		background-size: 0% 1px, 100% 1px;
	}
}