/*
Theme Name: Seed Spring
Theme URI: https://spring.jabont.com/
Author: Jabont
Author URI: https://jabont.com
Description: Starter Theme
Version: 2.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spring
Tags: featured-images, custom-menu
*/

/*
===========================================

This theme use SCSS, please check

1. css/scss/_variables.scss - for some colors & styles.
2. css/scss/mobile.scss - will be compiled to css/mobile.css and used for mobile version.
3. css/scss/desktop.scss - will be compiled to css/desktop.css and used for desktop version.
4. If you set $GLOBALS['s_style_css'] in functions.php to 'enable', you can add CSS to this file to override all CSS.
    
=========================================== 
*/
/*Jayss Edit*/
:root{
	--colophon-bg:#000;
	--footbar-bg:var(--ci3);
}
@media (min-width: 992px){
	.cont,.cont-pd{
		max-width: 990px;
		padding-left: 30px; 
		padding-right: 30px;
	}
}
@media (min-width: 1170px){
	.cont,.cont-pd{
		max-width: 1170px;
		padding-left: 30px; 
		padding-right: 30px;
	}
}

@media (min-width: 992px){
	.site-header a:hover {
		color: var(--link-hover);
	}
}
.site-branding img {
	transition: max-height .2s;
}
img.emoji {
	font-size: 1em;
}
p{
	line-height: 1.7;
}
.p-mg{
	margin-bottom: 1rem;
}
div#content {
	background-color: var(--bg-color);
}
#footbar,body{
	background-color:  var(--footbar-bg);
}
#footbar{
	color: #fff;
}
.site-footer{
	background-color: var(--colophon-bg);
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ol,
.entry-content ul{
	margin-bottom: 1rem;
}

.ffont .elementor-widget-heading .elementor-heading-title {
	font-family: var(--pmr-font);
}
.tfont{
	font-family: var(txt-font);
}

.site-nav-m.active .menu>li {
	width: 100%;
}
.site-nav-m .menu>li:nth-child(1) {
	margin-top: .75em;
}

#hero-video-wrap {
	position: absolute;
	width: 110%;
	top: -25%;
	left: -10%;
	border-radius: 0 0 50px 0;
	overflow: hidden;
	transform: rotate(6deg);
	box-shadow: 0 5px 30px #f60a;
	background-color: #000;
}
body{
	--plyr-color-main:#f60;
}

#hero-cont{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	font-size: 1.5em;
	text-shadow: 0px 0.1em 0.3em #0009,0px 0.1em 0.05em #0003;
}
#hero-video{
	width: 100%;
	aspect-ratio:2/1;
	object-fit: cover;
	mix-blend-mode: luminosity;
}


.fac-sec{
	--d1:3s;
	--d2:3s;
	--d3:3s;
	position: relative;
	background-image: linear-gradient(to top,#FFf5,#FFF 80%),var(--bg);
	background-color: #ccc;
	background-size: cover;
	background-blend-mode: screen;
	transition: .3s;
	perspective: 10px;
}
.fac-sec:hover{
	background-color: var(--ci2);
}
.fac-sec>div{
	position: relative;
	z-index: 1;
	font-size: 1.2em;
}
.fac-sec[data-mode="1"] .fac-sec-text{
	text-align: right;
}
.fac-sec[data-mode="1"] theboxes{
	flex-direction: row-reverse;
}
.fac-sec::before{
	content: " ";
	width: 110%;
	height: 100px;
	position: absolute;
	top: -50px;
	left: -5%;
	z-index: 1;
	background-color: #fff;
	transform: rotate(3deg);
}
.fac-sec[data-mode="1"]::before{
	transform: rotate(-3deg);
}

.fac-sec>div::after{
	content: " ";
	position: absolute;
	width: 200px;
	/*aspect-ratio: 1/.8;*/
	height: 250px;
	/*background-color: var(--ci2);*/
	background-image: linear-gradient(0, var(--ci1), var(--ci2),#fff0);
	right: -5%;
	bottom: 10%;
	border-radius: 100%;
	opacity: .5;
	filter: blur(0);
	box-shadow: none;
	transform: rotateZ(-10deg) translateZ(-3px);
	transform-style: preserve-3d;
	animation: bb_roll var(--d1) infinite linear,bb_shape var(--d2) infinite linear,bb_height var(--d3) infinite alternate;
	mix-blend-mode: multiply;
	z-index: 100;
	pointer-events: none;
}

.fac-sec[data-mode="0"]>div::after{
	left: -5%;
	right: none;
}
@keyframes bb_height{
	from{bottom:10%;}
	to{bottom:50%;}
}
@keyframes bb_shape{
	0%,100%{
		width: 200px;
		height: 250px;
	}
	25%{
		width: 100px;
		height: 200px;
	}
	50%{
		width: 240px;
		height: 200px;
	}
	85%{
		width: 200px;
		height: 100px;
	}
}
@keyframes bb_roll{
	0%,100%{
		transform: rotateZ(-80deg) translateY(60px) translateX(15px) translateZ(-3px);
	}
	20%{
		transform: rotateZ(90deg) translateY(-60px) translateX(60px) translateZ(-5px);
	}
	40%{
		transform: rotateZ(-90deg) translateY(-100px) translateX(-80px) translateZ(-3px);
	}
	60%{
		transform: rotateZ(50deg) translateY(100px) translateX(-20px) translateZ(-3px);
	}
	80%{
		transform: rotateZ(0deg) translateY(-60px) translateX(10px) translateZ(-5px);
	}
}
.fac-img{
	transition: all .3s;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat:no-repeat;
	mask-size: contain;
	mask-position: center;
	mask-repeat:no-repeat;
	background-color: var(--ci1);
	background-blend-mode: luminosity;
}
.fac-img{
	-webkit-mask-image: url(img/the-mask-1.png)
}
.fac-img:hover {
	transform: rotate(2deg) scale(1.1);
}
.fac-btn{
	font-family: var(--pmr-font);
	font-weight: bold;
	padding: .5em 1em;
	border:3px solid;
	border-radius: 1000px;
	box-shadow: 0px 2px 5px #0001;
	color: var(--ci2);
	/*color: #999;*/
	/*background-color: #fff;*/
}
.fac-sec:hover .fac-btn{
	color: var(--ci2);
}

.fac-btn:hover{
	color: #fff !important;
	background-color: var(--ci2);
	border-color:  var(--ci2);
}
/*.img-bd-1{border-radius: 20% 40% 100% 100%}*/



#taxonomy_header{
	text-shadow: 0px 2px 4px #0004;
}

.round-l{
	border-radius: 10px;
}

.taxonomy-course-container{
	margin-top: -6em;
}

.course-card .course-sp{
	width: 20%;
	transition: all .3s;
	opacity: 1;
}
.course-card:hover .course-sp{
	width: 50%;
	opacity: .5;
}

.course-card-thumb {
	transition: all .3s;
	transform-style: preserve-3d;
	transform: rotateX(    0   ) rotateY(    0   ) translateY(0) scale(1);
}
.course-card:hover .course-card-thumb {
	transform-style: preserve-3d;
	transform: rotateX(    -15deg   ) rotateY(    22deg   ) translateY(0) scale(1) translateX(5%);
}

#course_header_bg{
	position: absolute;
	width: 100%;
	top: 0;
	aspect-ratio:16/9;	
	-webkit-mask-image: url(img/cover-top.png);
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:top;
	-webkit-mask-size:cover;
}

#course_header{
	aspect-ratio:16/9;	
}

.round-l{
	border-radius: 1rem;
	overflow: hidden;
}
.single-curriculum article ul li{
	list-style-type: none;
	line-height: 1.75;
}
.single-curriculum article ul{
	margin-bottom: .75em;
}
.single-curriculum article ul li::before {
	content: "\f0da";
	font-family: "Font Awesome 5 Free";
	color: var(--ci2);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.course-gallery-wrap{
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

.course-gallery-wrap img{
	width: 105%;
	margin-bottom: 1.5rem;
	display: inline-block;
	border:10px solid white;
	box-shadow: 0px 4px 4px #0008;
}
/*-- Mobile Version --*/
@media (max-width: 768px) {


	#course_header_bg,#course_header{
		aspect-ratio:1/2;	
		-webkit-mask-image: none;
	}
	.course-gallery-wrap{
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	.course-gallery-wrap img{
		border:4px solid white;
	}
}

.content-pagination a:focus, .content-pagination a:hover {
    color: var(--ci2);
    border-color: var(--ci2);
    opacity: .5;
}