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

    Theme Name: Orfarm - Multipurpose eCommerce HTML5 Template
    Author: Theme Pure
    Support: basictheme@gmail.com
    Description: Template Name  – HTML5 Template
    Version: 1.0

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

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

    01. THEME DEFAULT CSS
    02. HEADER CSS
    03. MEAN MENU CSS
    04. SLIDER CSS
    05. TEAM CSS
    06. SERVICES CSS
    07. PORTFOLIO CSS
    08. BLOG CSS
    09. EFFECT CSS
    10. CATEGORY CSS
    11. PRODUCT CSS
    12. PRODUCT-DETAILS CSS
    13. BANNER CSS
    14. COUNDOWN CSS
    15. FEATURE CSS
    16. ABOUT CSS
    17. CHOOSE CSS
    18. BRAND-PRODUCT CSS
    19. TESTIMONIAL CSS
    20. SHOP CSS
    21. CART CSS
    22. COMING-SOON CSS
    23. SHOP-LOCATION CSS
    24. CONTACT CSS
    25. LOG-IN CSS
    26. FAQ CSS
    27. FOOTER CSS


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




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

@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: 400;
	color: var(--tp-text-body);
	line-height: 23px;
	overflow-X: hidden !important;
}

a{
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tp-ff-heading);
	color: #2D2A6E;
	margin-top: 0px;
	font-weight: var(--tp-fw-sbold);
	line-height: 1.2;
	@include transition(.3s);
}

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

h3 {
font-size: 30px;
}

h4 {
font-size: 26px;
}

h5 {
font-size: 22px;
}

h6 {
font-size: 18px;
}

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

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


a,
.btn,
button,
p,
i,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
.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{
	outline: none;
}

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;
}
input {
	&::placeholder {
		font-weight: 400;
		font-size: 13px;
		color: #79819C;
	}
}
// *::placeholder {
// 	color: var(--tp-common-black);
// 	font-size: var(--tp-fz-body);
// 	opacity: 1;
// }
.custom-container {
	max-width: 1200px;
}

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

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

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

.fix {
    overflow:hidden
}
.clear{
    clear: both;
}

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

.p-relative{
	position: relative;
}
.p-absolute{
	position: absolute;
}

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

.custom-row {
	display: flex;
	justify-content: space-between;
}
.gx-6 {
	--bs-gutter-x: 40px;
}

/* scroll up */ 
.scroll-top {
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 50px;
	z-index: 99;
	background-color: var(--tp-heading-secondary);
	opacity: .5;
	font-size: 16px;
	color: var(--tp-common-white);
	cursor: pointer;
	@include transition(.3s);
	border: none;
	bottom: -10%;
	position: fixed;
	right: 50px;
	&:hover {
		opacity: 1;
	}
	&::after {
		position: absolute;
		z-index: -1;
		content: '';
		top: 100%;
		left: 5%;
		height: 10px;
		width: 90%;
		background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
	}
}
.scroll-top.open{
	bottom: 30px;
}

.gx-7 {
	--bs-gutter-x: 20px;
}


