// Course Card ==
.site-course-card{
	border-radius: 10px;
    padding: 25px;
	height: 100%;
	border: 0;
	box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
	.card-title{
		color: var(--bs-heading-color);
		margin-bottom: 15px;
		font-weight: 600;
	}
	.card-media{
		position: relative;
		overflow: hidden;
		border-radius: 10px;
		height: 220px;
		margin-bottom: 20px;
		z-index: 1;
		img{
			@include transMedium;
		}
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.review{
			position: absolute;
			bottom: 8px;
			z-index: 1;
			left: 20px;
			span{
				font-size: 15px;
				font-weight: 500;
			}
			ul{
				display: flex;
				align-items: center;
				gap: 2px;
				li{
					i{
						font-size: 14px;
						color: var(--bs-warning);
					}
				}
			}
		}
	}
	.card-body{
		padding: 0;
	}
	.ed-date{
		display: block;
		color: var(--bs-secondary);
		margin-bottom: 5px;
	}
	@include respond('phone'){
		padding: 20px;
	}
	.card-footer{
		background-color: transparent;
		border-top: 2px dashed var(--bs-primary);
		padding: 10px 0 0 0;
		margin-top: 10px;
		ul li{
			display: inline-block;
			font-size: 15px;
			color: var(--title);
			i{
				color: var(--bs-primary);
			}
		}
	}
	&:hover{
		.card-media{
			img{
				transform: scale(1.2) rotate(5deg);
			}
		}
	}
	&.card-flex{
		flex-direction: row;
		.card-media{
			width: 100%;
			height: 100%;
			margin-right: 20px;
			margin-bottom: 0;
		}
		@include respond('tab-land'){
			.card-media{
				display: none;	
			}
		}
	}
}



// Filter Sorting ==
.filter-sort{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bs-white);
	margin-bottom: 40px;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.2);
	border: 1px solid var(--bs-primary);
	.left-filter,
	.right-filter{
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.nav{
		gap: 10px;
		.nav-item .nav-link{
			width: 40px;
			background-color: rgba(var(--bs-primary-rgb), 0.1);
			height: 40px;
			padding: 0;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--bs-secondary);
			&.active{
				color: var(--bs-primary);
			}
		}
	}
	.form-select{
		border-radius: 6px;
		padding: 6px 30px 6px 10px;
		background-position: right 10px center;
	}
}


// Site Courses Detail ==
.site-courses-wrapper{
	// Course Start (left side) ==
	.course-detail-start{
		.cousre-top-content{
			.course-title{
				@include respond ('phone-land-min'){
					font-size: 50px;
				}
			}
		}	
	}
	// Course End (right side) ==
	.course-detail-end{
		position: sticky;
		top: 110px;
		.course-widget{
			padding: 25px;
			background-color: rgba(var(--bs-primary-rgb), 0.05);
			border-radius: var(--bs-border-radius-lg);
			.cousre-video{
				position: relative;
				overflow: hidden;
				border-radius: var(--bs-border-radius-lg);
				margin-bottom: 20px;
				img{
					width: 100%;
				}
				.video-btn{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				&::after{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.50);	
				}
			}

			.detail-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 15px;
				background: $white;
				border-radius: 10px;
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			}
			.course-video-content{
				ul{
					padding: 0 5px;
					margin-bottom: 15px;
					li{
						display: flex;
						align-items: center;
						gap: 10px;
						font-size: 15px;
						padding: 10px 15px;
						justify-content: space-between;
						background: transparent;
						> span{
							display: flex;
							align-items: center;
							i{
								color: var(--bs-primary);
								margin-right: 10px;
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}

	.site-course-meta{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 50px;
		.meta-inner{
			display: flex;
			flex-direction: column;
			span{
				font-size: 14px;
				font-weight: 500;
				color: var(--bs-dark);
				&.text{
					color: var(--bs-body-color);
				}
			}
		}
		@include respond ('phone-land'){
			gap: 20px;
		}
	}
	.edu-media{
		border-radius: var(--bs-border-radius-lg);
		margin-bottom: 20px;
	}
	.description{
		padding: 50px 30px 40px;
		border-radius: var(--bs-border-radius-lg);
		background-color: rgba(var(--bs-primary-rgb), 0.05);
		position: relative;
		p{
			color: var(--bs-heading-color);
			font-weight: 500;
			text-align: justify;
		}
		i{
			position: absolute;
			font-size: 40px;
			opacity: 0.5;
			&.quote-left{
				top: 15px;
				left: 15px;
			}
			&.quote-right{
				bottom: 15px;
				right: 15px;
			}
		}
	}
	.nav{
		position: sticky;
		top: 110px;
		gap: 20px;
		margin-top: 5px;
		.nav-link{
			background-color: transparent;
			position: relative;
			text-align: left;
			border-bottom: 1px solid var(--bs-primary);
			font-weight: 500;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			gap: 10px;
			border-radius: 0;
			z-index: 1;
			&::after{
				content: "";
				position: absolute;
				top: 0;
				bottom: auto;
				left: 0;
				width: 100%;
				height: 0;
				background-color: var(--bs-primary);
				z-index: -1;
				@include transMedium;
			}
			i{
				border-radius: var(--bs-border-radius-sm);
				padding: 10px;
				background-color: rgba(var(--bs-primary-rgb), 0.05);
				@include transMedium;
			}
			&:hover{
				color: $white;
				i{
					background-color: rgba(var(--bs-white-rgb), 0.2);
				}
				&::after{
					bottom: 0;
					top: auto;
					height: 100%;
				}
			}	
			&.active{
				background-color: var(--bs-primary);
				i{
					background-color: rgba(var(--bs-white-rgb), 0.2);
				}
			}
		}
	}
	.tab-content{
		padding: 15px;
		background-color: rgba(var(--bs-primary-rgb), 0.05);
		border-radius: var(--bs-border-radius-sm);
		height: 100%;
		.tab-pane{
			height: 100%;
			position: relative;
			.shape-img{
				position: absolute;
				bottom: 0;
				right: 0;
				width: 25%;
				opacity: 0.1;
			}
		}
	}
	.edu-list{
		display: flex;
		gap: 4px;
		flex-direction: column;
		margin-bottom: 20px;
		li{
			display: inline-flex;
			align-items: center;
			gap:5px;
			font-size: 16px;
			i{
				font-size: 12px;
				color: var(--bs-primary);
			}
		}
	}
	.edu-cousre-review,
	.edu-cousre-instructor,
	.edu-cousre-curriculum,
	.edu-cousre-overview{
		.title-head{
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 10px;
			i{
				color: var(--bs-primary);
			}
			.title{
				margin-bottom: 0;
			}
		}
		p{
			margin-bottom: 20px;
		}
	}
	.instructor-ratting-list{
		display: flex;
		gap: 30px;
		align-items: center;
		margin-bottom: 15px;
		flex-wrap: wrap;
		li{
			display: flex;
			align-items: center;
			gap: 5px;
		}
	}

	.edu-rating-wrapper{
		.rating-num{
			font-size: 50px;
			margin-bottom: 5px;
		}
		.ins-rating > ul{
			justify-content: start;
		}
		.rating-count{
			color: $dark;
		}
		.left-content{
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}
		.left-content,
		.right-content{
			height: 100%;
			padding: 20px;
			background: $white;
			box-shadow: 0 0 20px rgba(113, 113, 113, 0.15);
		}
	}
}