@use '../abstract' as *;

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

    Theme Name: Educal – Online Learning and Education HTML5 Template
    Author: Theme Pure
    Support: basictheme@gmail.com
    Description: Educal – Online Learning and Education HTML5 Template
    Version: 1.0

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

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

    01. Common CSS
    02. Header CSS
    03. Hero CSS
    04. Category CSS
    05. Banner CSS
    06. Course CSS
    07. Events CSS
    08. Price CSS
    09. Cta CSS
    10. Product CSS
    11. Services CSS
    12. About CSS
    13. What CSS
    14. Why CSS
    15. Counter CSS
    16. Testimonial CSS
    17. Blog CSS
    18. Slider CSS
    19. Brand CSS
    20. Teacher CSS
    21. Page Title CSS
    22. Contact CSS
    23. Error CSS
    24. Login CSS
    00. Footer CSS


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


*/

/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 body {
	font-family: $hind;
	font-size: 16px;
	font-weight: normal;
	color: $body-text-color;
	line-height: 26px;
}

a{
	text-decoration: none;
}

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


a,
.btn,
button,
span,
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;
}
button:hover{
	cursor: pointer;
}
button:focus{outline: 0; border:0}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $hind;
	color: $heading-color;
	margin-top: 0px;
	font-weight: 700;
	line-height: 1.2;
	@include transition(.3s);
}

h1 {
	font-size: 40px;
}
h2 {
	font-size: 36px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 20px;
}
h5 {
	font-size: 16px;
}
h6 {
	font-size: 14px;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
	list-style: none;
}
p {
	font-family: $hind;
	font-size: 16px;
	font-weight: normal;
	color: $body-text-color;
	margin-bottom: 15px;
	line-height: 26px;
}

*::-moz-selection {
	background: $e-blue;
	color: $white;
	text-shadow: none;
}
::-moz-selection {
	background: $e-blue;
	color:$white;
	text-shadow: none;
}
::selection {
	background: $e-blue;
	color: $white;
	text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
	color: $black;
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: $black;
	font-size: 14px;
	opacity: 1;
}


/*--
    - Common Classes
-----------------------------------------*/
.fix {
    overflow:hidden
}
.clear{
    clear: both;
}

.f-left {
	float: left
}
.f-right {
	float: right
}

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

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

.p-relative{
	position: relative;
}
.p-absolute{
	position: absolute;
}
/*--
    - Background color
-----------------------------------------*/
.grey-bg {
	background: $grey;
}
.grey-bg-2 {
	background: $grey-2;
}
.grey-bg-5 {
	background: $grey-5;
}

.blue-bg {
	background:$e-blue;
}
.blue-bg-3 {
	background:$e-blue-3;
}
.blue-bg-4 {
	background:$e-blue-4;
}

.pink-bg{
	background: $e-pink-3;
}

.purple-bg{
	background: $e-purple-2;
}

.green-bg{
	background: $e-green-2;
}

.white-bg {
	background:$white;
}
.black-bg {
	background: $black;
}
.footer-bg {
	background: $footer-bg;
}


// .primary-bg {
// 	background: #222;
// }

/*--
    - color
-----------------------------------------*/

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: $white !important;
}

.white-color {
	color: $white;
}

.theme-color {
	color: $e-blue !important;
}
.black-color {
	color: $black;
}


// spacing

.pl-245{
	padding-left: 245px;
}

.pr-245{
	padding-right: 245px;
}

.mb-22{
	margin-bottom: 22px;
}

.ml-270{
	margin-left: 270px;
}

.mb--120{
	margin-bottom: -120px;
}

.mb--100{
	margin-bottom: -100px;
}

.mt--210{
	margin-top: -210px;
}

.mt--80{
	margin-top: -80px;
}

.mb-130{
	margin-bottom: -130px;
}

.section-padding{
	padding-left: 50px;
	padding-right: 50px;
	@media #{$xl}{
		padding-left: 30px;
		padding-right: 30px;
	}
	@media #{$xs}{
		padding-left: 0px;
		padding-right: 0px;
	}
}


// theme btn

.e-btn{
	display: inline-block;
	height: 50px;
	line-height: 52px;
	text-align: center;
	padding: 0 25px;
	color: $white;
	background: $e-blue;
	@include border-radius(4px);
	font-weight: 500;
	@include sentence-case();
	&:hover{
		color: $white;
		@include box-shadow(0px 10px 24px 0px rgba(4, 23, 118, 0.3));
	}
	&-2{
		height: 34px;
		line-height: 36px;
		padding: 0 20px;
		font-size: 14px;
		text-transform: capitalize;
	}
	&-3{
		padding: 0 28px;
	}
	&-4{
		height: 46px;
		line-height: 44px;
		border: 2px solid $e-blue;
		background: $e-blue;
		color: $white;
	}
	&-5{
		padding-left: 22px;
		padding-right: 22px;
	}
	&-6{
		padding-left: 60px;
		padding-right: 60px;
	}
	&-7{
		height: 44px;
		line-height: 46px;
	}
	&-border{
		height: 46px;
		line-height: 44px;
		border: 2px solid $border-4;
		color: $black;
		background: transparent;
		&:hover{
			background: $e-blue;
			border-color: $e-blue;
			color: $white;
		}
		&-2{
			height: 46px;
			line-height: 44px;
			border: 2px solid rgba($color: $white, $alpha: .3);
			background: transparent;
			padding: 0 20px;
			&:hover{
				background: $white;
				border-color: $white;
				color: $black;
			}
		}
	}
	&-white{
		height: 54px;
		line-height: 58px;
		background: $white;
		color: $black;
		padding: 0 45px;
		&:hover{
			color: $black;
		}
	}
}


/* link btn */

.link-btn{
	position: relative;
	font-size: 16px;
	color: $e-text-3;
	font-weight: 500;
	padding-right: 21px;
	display: inline-block;
	& i{
		font-size: 14px;
		position: absolute;
		top: 12px;
		@include transform(translateY(-50%));
		transition: all ease .2s;
		-webkit-transition: all ease .2s;
		-moz-transition: all ease .2s;
		-ms-transition: all ease .2s;
		-o-transition: all ease .2s;
		&:first-child{
			right: 10%;
			visibility: hidden;
			opacity: 0;
		}
		&:last-child{
			right: 0;
		}
	}
	&:hover{
		color: $e-blue;
		& i{
			&:first-child{
				right: 0;
				visibility: visible;
				opacity: 1;
			}
			&:last-child{
				right: -10%;
				visibility: hidden;
				opacity: 0;
			}
		}
	}
	&.link-prev{
		padding-right: 0;
		padding-left: 21px;
		& i{
			&:first-child{
				left: 10%;
				right: auto;
			}
			&:last-child{
				left: 0;
				right: auto;
			}
		}
		&:hover{
			& i{
				&:first-child{
					left: 0%;
					right: auto;
				}
				&:last-child{
					left: -10%;
					right: auto;
				}
			}
		}
	}
}

.link-btn-2{
	position: relative;
	font-size: 12px;
	font-weight: 500;
	color: $black;
	text-transform: uppercase;
	padding-right: 25px;
	width: 40px;
	height: 40px;
	display: inline-block;
	line-height: 36px;
	@include border-radius(50%);
	border: 2px solid rgba($color: $white, $alpha: .2);
	overflow: hidden;
	& i{
		position: absolute;
		top: 50%;
		@include transform(translateY(-50%));
		transition: all ease .2s;
		-webkit-transition: all ease .2s;
		-moz-transition: all ease .2s;
		-ms-transition: all ease .2s;
		-o-transition: all ease .2s;
		&:first-child{
			left: -100%;
			visibility: hidden;
			opacity: 0;

		}
		&:last-child{
			right: 35%;
		}
	}
	&:hover{
		color: $white;
		& i:first-child{
			left: 35%;
			visibility: visible;
			opacity: 1;
		}
		& i:last-child{
			right: -100%;
			visibility: hidden;
			opacity: 0;
		}
	}
}


// play btn
.play-btn{
	display: inline-block;
	width: 44px;
	height: 44px;
	text-align: center;
	line-height: 47px;
	@include border-radius(50%);
	background: $white;
	color: $e-blue;
	-webkit-animation: pulse 2s infinite;
	-moz-animation: pulse 2s infinite;
	-o-animation: pulse 2s infinite; 
	animation: pulse 2s infinite;
	font-size: 12px;
}

@-webkit-keyframes pulse {
	0% {
	  -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
	}
	70% {
		-webkit-box-shadow: 0 0 0 45px rgba(255,255,255, 0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
	}
}
@keyframes pulse {
0% {
	-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
	box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
}
70% {
	-moz-box-shadow: 0 0 0 45px rgba(255,255,255, 0);
	box-shadow: 0 0 0 45px rgba(255,255,255, 0);
}
100% {
	-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
	box-shadow: 0 0 0 0 rgba(255,255,255, 0);
}
}

// section title

.section{
	&__sub-title{
		font-size: 18px;
		font-weight: 500;
		color: $e-blue;
		display: inline-block;
		margin-bottom: 5px;
	}
	&__title{
		font-size: 40px;
		color: $black;
		text-transform: capitalize;
		z-index: 1;
		margin-bottom: 3px;

		@media #{$xs}{
			font-size: 33px;
		}
		& span{
			position: relative;
			& img{
				position: absolute;
				left: -14px;
				bottom: 12px;
				z-index: -1;
				-webkit-animation: section-animation 3s infinite;
				animation: section-animation 3s infinite;
			}
			&.yellow-bg-big{
				& img{
					bottom: 15px;
					width: 120%;
					-webkit-animation: section-animation-2 3s infinite;
					animation: section-animation-2 3s infinite;
				}
			}
			&.yellow-bg-sm{
				& img{
					bottom: 10px;
					width: 120%;
					-webkit-animation: section-animation-2 3s infinite;
					animation: section-animation-2 3s infinite;
				}
			}
		}
	}
	&__title-wrapper{
		position: relative;
		z-index: 1;
		& p{
			font-size: 16px;
			color: $e-text-4;
		}
	}
}

@keyframes section-animation {
	0% {
	  width: 0;
	}
	15% {
	  width: 100%;
	}
	85% {
	  opacity: 1;
	}
	90% {
	  width: 100%;
	  opacity: 0;
	}
	to {
	  width: 0;
	  opacity: 0;
	}
}

@keyframes section-animation-2 {
	0% {
	  width: 0;
	}
	15% {
	  width: 125%;
	}
	85% {
	  opacity: 1;
	}
	90% {
	  width: 125%;
	  opacity: 0;
	}
	to {
	  width: 0;
	  opacity: 0;
	}
}

/* basic pagination */

.basic-pagination{
	& ul{
		& li{
			display: inline-block;
			margin-right: 20px;
			@media #{$xs}{
				margin-right: 5px;
			}
			&.prev,
			&.next{
				& a{
					width: inherit;
					height: inherit;
					line-height: inherit;
					@include border-radius(0);
					border: none;
					&:hover{
						color: $e-blue;
						background: inherit;
					}
				}
			}
			&.active{
				& a{
					color: $white;
					background: $e-blue;
					border-color: $e-blue;
				}
			}
			& a{
				position: relative;
				overflow: hidden;
				background: transparent;
				display: inline-block;
				width: 40px;
				height: 40px;
				line-height: 38px;
				text-align: center;
				@include border-radius(4px);
				font-weight: 500;
				font-size: 16px;
				border: 2px solid #eef0f6;
				color: $black;
				&:hover{
					background: $e-blue;
					color: $white;
					border-color: $e-blue;
				}
			}
		}
	}
}



// overlay

 .body-overlay{
    background-color: rgba($color: #000000, $alpha: .5);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	left: 0;
	opacity: 0;
	visibility: hidden;
	@include transition(.3s);

	&:hover{
		cursor: pointer;
	}
}
.body-overlay.opened{
	opacity: 1;
    visibility: visible;
}