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

    Theme Name: Tutorgo - Online Learning and Education HTML Template
    Author: Theme Pure
    Support: https://themepure.net/help/support/login
    Description: Tutorgo – Education Template is a clean and modern HTML5 , Bootstrap Education Template. 
    Version: 1.0

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

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

    01. THEME DEFAULT CSS
    02. HEADER CSS
    03. MEAN MENU CSS
	04. SLIDER CSS
	05. HERO CSS
	06. ABOUT CSS
	07. TEAM CSS
	08. SERVICES CSS
	09. PORTFOLIO CSS
	10. COURSES CSS
	11. EVENT CSS
	12. CTA CSS
	13. COUNTER CSS 
	14. FEATURE CSS
	15. TESTIMONIAL CSS
	16. BRAND CSS
	17. BLOG CSS
	18. CHECKOUT CSS
	19. CART CSS
	20. LOGIN CSS
	21. 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: var(--tp-fz-body);
	font-weight: normal;
	color: var(--tp-text-body);
	line-height: 26px;
}

a {
	text-decoration: none;
}

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

h1 {
	font-size: var(--tp-fz-h1);
}

h2 {
	font-size: var(--tp-fz-h2);
}

h3 {
	font-size: var(--tp-fz-h3);
}

h4 {
	font-size: var(--tp-fz-h4);
}

h5 {
	font-size: var(--tp-fz-h5);
}

h6 {
	font-size: var(--tp-fz-h6);
}

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

p {
	font-family: var(--tp-ff-p);
	font-size: var(--tp-fz-p);
	font-weight: var(--tp-fw-normal);
	color: var(--tp-text-body);
	margin-bottom: 15px;
	line-height: 26px;
}


a,
button,
p,
input,
select,
textarea,
li,
.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;

	@include tp-placeholder {
		color: var(--tp-text-3);
	}
}

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;

	@include tp-placeholder {
		color: var(--tp-text-3);
	}
}

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

	@include tp-placeholder {
		color: var(--tp-text-3);
	}
}

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

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

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

.fix {
	overflow: hidden
}

.clear {
	clear: both;
}


.z-index-1 {
	z-index: 1;
}

.z-index-11 {
	z-index: 11;
}

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

.p-relative {
	position: relative;
}

.p-absolute {
	position: absolute;
}

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



/*----------------------------------------
    Body Overlay 
-----------------------------------------*/


.body-overlay {
	background-color: var(--tp-common-black);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 98;
	right: 0;
	opacity: 0;
	visibility: hidden;
	@include transition(.3s);

	&:hover {
		cursor: url(../img/icons/cross-out.png), pointer;
	}
}

.body-overlay.opened {
	opacity: .7;
	visibility: visible;

}


/*----------------------------------------
    Progress Wrap
-----------------------------------------*/

.progress-wrap {
	@media #{$xs} {
		right: 15px;
		bottom: 15px;
	}
}


// basic pagination

.basic-pagination {
	& ul {
		& li {
			display: inline-block;
			margin-bottom: 30px;
			&:not(:last-child) {
				margin-right: 10px;
				@media #{$xs} {
					margin-right: 3px;
				}
			}

			& a,
			& span {
				display: inline-block;
				width: 50px;
				height: 50px;
				line-height: 46px;
				text-align: center;
				@include border-radius(7px);
				border: 2px solid #f1f1f1;
				font-size: 18px;
				font-weight: 600;

				&:hover,
				&.current {
					background: var(--tp-theme-primary);
					border-color: var(--tp-theme-primary);
					color: var(--tp-common-white);
				}
			}
		}
	}
}


// nice select arrow

.nice-select {
	&::after {
		border: none;
		background-color: transparent;
		@include transform(translateY(-50%));
		margin-top: 0;
		right: 0;
		content: '\f107';
		font-family: var(--tp-ff-fontawesome);
		transform-origin: center;
		color: var(--tp-common-black);
		font-weight: 500;
		height: auto;
		width: auto;
	}

	&.open {
		&::after {
			@include transform(translateY(-50%) rotate(-180deg));
			;
		}
	}
}

/* cart plus minus default style css */

// back to top

.tp-backtotop {
	position: fixed;
	bottom: 0;
	right: 40px;
	background: var(--tp-theme-primary);
	z-index: 6;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	font-size: 16px;
	box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
	opacity: 0;
	transition: .6s;
	z-index: 99;
	font-size: 20px;
	border-radius: 5px;

	&.show {
		top: auto;
		bottom: 40px;
		opacity: 1;
	}

	&:hover {
		background-color: var(--tp-theme-secondary);
	}
}
.cart-plus,
.cart-minus{
    width: 25px;
    height: 30px;
	line-height: 30px;
    // border: 2px solid var(--tp-border-1);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
	@include transition(.3s);
	& input {

	}
    &:hover{
        cursor: pointer;
        // color: var(--tp-common-white);
        // background: var(--tp-theme-primary);
        // border-color: var(--tp-theme-primary);
    }
}
.product-quantity input {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  width: 40px;
}
.cart-input{
    height:30px;
    width: 32px;
    text-align: center;
    font-size: 14px;
    border: none;
    border-top: 2px solid var(--tp-border-1);
    border-bottom: 2px solid var(--tp-border-1);
    display: inline-block;
    vertical-align: middle;
    margin: 0 -3px;
    padding-bottom: 0px;
    &:focus{
        outline: none;
    }
} 

/* dropcap */

.tp-dropcap {
	display: inline-block;
	font-size: 50px;
	font-weight: 700;
	float: left;
	height: 70px;
	width: 70px;
	line-height: 70px;
	text-align: center;
	color: var(--tp-common-black);
	background-color: var(--tp-common-white);
	box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
	margin-right: 20px;
}

.course__view h4 {
	font-size: 15px;
	font-weight: 500;
	color: #53545b;
	display: inline-block;
	margin-bottom: 0;
}

.course__sort-inner  {
	& .nice-select{
		background-color: var(--tp-grey-2);
		&::after{
			right: 10px;
			background-color: var(--tp-grey-2);
		}
	}
}