@use '../utils' as *;

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

    Theme Name: Printx - Printing Services HTML Template 
    Author: Theme Pure
    Support: https://help.themepure.net/support/
    Version: 1.0

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

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

    01. theme default css
	02. header css start
	03. about css start 
	04. banner css start
	05. blog css start
	06. brand css start
	07. busienss css start
	08. cart css start
	09. catagori css start
	10. checkout css start
	11. choose css start 
	12. contact css start
	13. cta css start
	14. deal css start
	15. error css start 
	16. faq css start 
	17. feature css start
	18. instagram css start
	19. process css start
	20. product css start 
	21. project css start
	22. service css start 
    23. slider css start  
	24. team css start 
	25. testimonial css start 
	26. work css start 
	27. footer css start

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

/*----------------------------------------
 01. THEME DEFAULT CSS START
----------------------------------------*/

@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1250px;
    }
    .container-large{
        max-width: 1490px;
    }
    .custom-container-1{
        max-width: 1270px;  
    } 
    .custom-container-3{
        max-width: 1330px;  
    } 
    .custom-container-4{
        max-width: 1420px;  
    } 
}

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

/*---------------------------------
	typography css start 
---------------------------------*/
body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    overflow-x: hidden;
    color: var(--tp-text-body);
    font-family: var(--tp-ff-body);
}
html,body{
    overflow-x: hidden;
}
a {
    text-decoration: none;
    transition: .3s;
}

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

img {
    max-width: 100%;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

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: 16px;
    line-height: 24px;
    color: var(--tp-text-body);
    font-family: var(--tp-ff-body);
}

.z-index {
    position: relative;
    z-index: 2;
}
.z-index-3 {
    position: relative;
    z-index: 3;
}
.z-index-4 {
    position: relative;
    z-index: 4;
}
.z-index-5 {
    position: relative;
    z-index: 5;
}
.z-index-6 {
    position: relative;
    z-index: 6;
}
.z-index-9 {
    position: relative;
    z-index: 99999;
}

a,
.btn,
button,
input,
select,
textarea,
li,
img,
.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;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

input,
textarea {
    outline: none;
    color: var(--tp-theme-2);
    @include tp-placeholder{
        color: rgba(116, 116, 116, 1);       
    }
}

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-1);
    font-size: var(--tp-fz-body);
    opacity: 1;
}

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

/*---------------------------------
    common classes css start 
---------------------------------*/

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

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

.fix {
    overflow: hidden
}

.clear {
    clear: both;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.overflow-y-visible {
    overflow-x: hidden;
    overflow-y: visible;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.include-bg {
    @include background();
}

.gx-10 {
    --bs-gutter-x: 10px;
}
.gx-15 {
    --bs-gutter-x: 15px;
}
.gx-30 {
    --bs-gutter-x: 30px;
}
.gx-40 {
    --bs-gutter-x: 40px;
}

.gx-50 {
    --bs-gutter-x: 50px;
    @media #{$lg,$xs}{
        --bs-gutter-x: 30px;
    }
}
.gx-60 {
    --bs-gutter-x: 60px;
}
.gx-20 {
    --bs-gutter-x: 20px;
}
.gx-25 {
    --bs-gutter-x: 25px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], textarea {
	outline: none;
	background-color: #fff;
	height: 64px;
	width: 100%;
	line-height: 56px;
	font-size: 14px;
	color: var(--tp-common-black);
	padding-left: 25px;
	padding-right: 25px;
    border: 0;
}