/*------------------------------------------------------------------
chalkndust.com
@ishorkc
-------------------------------------------------------------------*/
/* -----------------------------------------------------------------
		**************Table of contents ****************
01. =google fonts
02. =variables
03. =overrides variables for -theme dark
04. =base
05. =box
06. =customized bootstrap classes
07. =animation keyframes
08. =section - padding , title
09. =buttons
10. =page loader
11. =circular img
12. =forms
13. =video modal
14. =pagination
15. =breadcrumb
16. =tabs
17. =bubble animation
18. =style switcher
19. =header
20. =footer
21. =banner section
22. =fun facts section
23. =courses section
24. =testimonials section
25. =bai section
26. =course details section
27. =contact section

--------------------------------------------------------------------*/
/*---------01. =google fonts--------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap');

/*---------02. =variables--------------*/
:root{
	--orange: hsl(36, 80%, 50%);
	--white: hsl(0, 0%, 100%);
	--WHITE: hsl(0, 0%, 100%);
	--BLACK: hsl(0, 0%, 0%);
	--black-90: hsl(0, 0%, 10%);
	--black-70: hsl(0, 0%, 30%);
	--black-alpha-40: hsla(0, 0%, 0%, 0.4);
	--yellow-light: hsl(44, 95%, 83%);
	--green-light: hsl(158, 68%, 75%);
	--red-light: hsl(0, 84%, 80%);
	--orange-light: hsl(22, 85%, 80%);
	--select-box-bg-color: hsl(0, 0%, 100%);
	--border-color-1: hsl(0, 0%, 90%);


}

/*---------03. =overrides variables for -theme dark--------------*/
body.t-dark{
	--body-bg-color: hsl(240, 10%, 19%);
	--black-70: hsl(0, 0%, 87%);
	--black-90: hsl(0, 0%, 100%);
	--shadow: 0 0 10px hsla(0, 0%, 0%, 0.08);
	--white: hsl(240, 8%, 21%);
	--select-box-bg-color: hsl(240, 8%, 21%);
	--border-color-2: hsl(240, 9%, 25%);
	--border-color-1: hsl(240, 9%, 30%);
}

/*---------04. =base--------------*/
body{
	background-color: var(--body-bg-color);
	font-family: 'Poppins', 'sans-serif';
	font-size: 16px;
	font-weight: 300;
	color: var(--black-70);
	min-height: 100vh;
	overflow-x: hidden;

}
a{
	color: var(--main-color);
	text-decoration: none;
}
a:hover{
	color: var(--main-color);
}
img{
	max-width: 100%;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6{
	color: var(--black-90);
	line-height: 1.3;
}
h3{
	font-size: 20px;
}
::selection{
	color: var(--WHITE);
	background-color: var(--main-color);
}
/*---------05. =box--------------*/
.box{

	background-color: var(--white);
	border-radius: 5px;
	box-shadow: var(--shadow);
	padding: 30px;
}

/*---------06. =customized bootstrap classes--------------*/
.container{
	--bs-gutter-x: 15px;
	max-width: 1140px;
}
.row{
	--bs-gutter-x: 30px;
}

/*---------07. =animation keyframes--------------*/
@keyframes spin{ 
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes bubble{
	0%{
		transform: translateY(0vh);
		opacity: 0;
	}
	5%,95%{
		opacity: 1;
	}
	100%{
		transform: translateY(-100vh);
		opacity: 0;
	}
}
@keyframes loader{
	0%{
		transform: rotate(0deg);
	}
	25%, 50%{
		transform: rotate(180deg);
	}
	75%, 100%{
		transform: rotate(360deg);
	}
}
@keyframes loaderIn{
	0%, 25%, 100%{
		height: 0%;
	}
	50%, 75%{
		height: 100%;
	}
}

/*---------08. =section - padding , title--------------*/
.section-padding{
	padding: 60px 0;
}
.section-title{
	margin-bottom: 40px;
}
.section-title .title{
	font-size: 20px;
	color: var(--main-color);
	text-transform: capitalize;
}
.section-title .sub-title{
	font-size: 35px;
	font-weight: 600;
	color: var(--black-90);
}

/*---------09. =buttons--------------*/
.btn-theme{
	background-color: var(--main-color);
	color: var(--WHITE);
	font-size: 16px;
	text-transform: capitalize;
	font-weight: 500;
	padding: 8px 20px;
	transition: all 0.3s ease;
}
.btn-theme:hover{
	color: var(--WHITE);
	background-color: var(--button-hover-color);
}
.btn-theme focus{
	box-shadow: 0 0 8px var(--main-color);
}
.btn-block{
	width: 100%;
}
.btn-form{
	height: 48px;
}
/*---------10. =page loader--------------*/
.page-loader{
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1001;
	display: flex;
	background-color: var(--white);
}
.page-loader.fade-out{
	opacity: 0;
	transition: all 0.6s ease;
}
.page-loader div{
	margin: auto;
	height: 32px;
	width: 32px;
	border: 4px solid var(--main-color);
	position: relative;
	animation: loader 2s linear infinite;
}
.page-loader div::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: var(--main-color);
	left: 0;
	top: 0;
	animation: loaderIn 2s linear infinite;
}

/*---------11. =circular img--------------*/
.circular-img{
	max-width: 360px;
	margin: auto;
	position: relative;
	z-index: 1;
}
.circular-img-inner{
	text-align: center;
	border-radius: 0 0 180px 180px;
	overflow: hidden;
}
.circular-img-circle{
	height: 360px;
	width: 360px;
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 50%;

}
.circular-img img{
	position: relative;
	z-index: 1;
}

/*---------12. =forms--------------*/
.form-title{
	font-size: 24px;
	margin: 0 0 30px;
	font-weight: 600;
}
.form-control::placeholder{
	color: var(--black-70);
}
.form-group{
	margin-bottom: 25px;
	position: relative;
}
.form-control {
	height: 48px;
	border-color: var(--border-color-1);
	color: var(--black-90);
	background-color: transparent;
}
.form-control:focus{
	background-color: transparent;
	border-color: var(--border-color-1);
	color: var(--black-90);
	box-shadow: none;
}
.select-icon{
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 13px;
}
select.form-control:focus option{
	background-color: var(--select-box-bg-color);
}
textarea.form-control{
	height: 120px;
	resize: none;
}
/*---------13. =video modal--------------*/
.video-modal .btn-close{
	background-color: red;
	height: 35px;
	width: 35px;
	background-image: none;
	border-radius: 50%;
	opacity: 1;
	z-index: 1;
	position: absolute;
	right: 0;
	top: -35px;
	color: var(--WHITE);
	font-size: 16px;
}

/*---------14. =pagination--------------*/
.page-item.disabled .page-link,
.page-link{
	border: none;
	background-color: transparent;
	color: var(--black-70);
}
.page-item.active .page-link{
	background-color: var(--main-color);
}
.page-link:hover{
	background-color: var(--main-color);
	color: var(--WHITE);
}

/*---------15. =breadcrumb--------------*/
.breadcrumb-nav{
	padding: 10px 0;
}
.breadcrumb-nav .breadcrumb-item{
	font-size: 14px;
	text-transform: capitalize;
}
.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-nav .breadcrumb-item.active{
	color: var(--black-70);
}
.headernotes{
		font-size: 50px;
	}
/*---------16. =tabs--------------*/
.nav-tabs .nav-link{
	background-color: var(--white);
	text-transform: capitalize;
	border-color: var(--border-color-2);
	padding: 5px 12px;
	margin: 0 5px 10px;
	border-radius: 5px;
	color: var(--black-70);
	font-size: 16px;
}
.nav-tabs .nav-link:hover{
	border-color: var(--border-color-2);
}
.nav-tabs .nav-link.active{
	background-color: var(--main-color);
	border-color: transparent;
	color: var(--WHITE);
}

/*---------17. =bubble animation--------------*/
.bubble-animation-item{
	position: absolute;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: 2px solid transparent;
	z-index: -1;
}
.bubble-animation-item:nth-child(1){
	border-color: var(--yellow-light);
	top: 120%;
	left: 10%;
	animation: bubble 30s linear infinite;
}
.bubble-animation-item:nth-child(2){
	border-color: var(--green-light);
	top: 60%;
	left: 50%;
	animation: bubble 40s linear infinite;
}
.bubble-animation-item:nth-child(3){
	border-color: var(--red-light);
	top: 90%;
	left: 90%;
	animation: bubble 50s linear infinite;
}
.bubble-animation-item:nth-child(4){
	border-color: var(--yellow-light);
	top: 80%;
	left: 60%;
	animation: bubble 60s linear infinite;
}
.bubble-animation-item:nth-child(5){
	border-color: var(--green-light);
	top: 30%;
	left: 10%;
	animation: bubble 70s linear infinite;
}
.bubble-animation-item:nth-child(6){
	border-color: var(--red-light);
	top: 20%;
	left: 30%;
	animation: bubble 80s linear infinite;
}
.bubble-animation-item:nth-child(7){
	border-color: var(--yellow-light);
	top: 100%;
	left: 5%;
	animation: bubble 60s linear infinite;
}
.bubble-animation-item:nth-child(8){
	border-color: var(--green-light);
	top: 110%;
	left: 33%;
	animation: bubble 70s linear infinite;
}
.bubble-animation-item:nth-child(9){
	border-color: var(--red-light);
	top: 120%;
	left: 65%;
	animation: bubble 80s linear infinite;
}

/*---------18. =style switcher--------------*/
.style-switcher{
	width: 250px;
	position: fixed;
	height: 100%;
	background-color: var(--white);
	right: -250px;
	top: 0;
	z-index: 10;
	padding: 30px;
	box-shadow: var(--shadow);
	transition: right 0.3s ease;
}
.style-switcher.open{
	right: 0;
}

.style-switcher-toggler{
	height: 40px;
	width: 40px;
	position: absolute;
	top: 28%;
	left: -40px;
	background-color: var(--main-color);
	color: var(--WHITE);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px 0 0 8px;
	cursor: pointer;

}
.style-switcher h3{
	font-size: 18px;
	text-transform: capitalize;
	border-bottom: 1px solid var(--border-color-1);
	padding: 0 0 10px;
}
.style-switcher-item{
	padding: 10px 0;
	border-bottom: 1px solid var(--border-color-1);
}
.theme-colors button{
	height: 30px;
	width: 30px;
	border: none;
	border-radius: 50%;
	vertical-align: middle;
	padding: 0;
	position: relative;

}
.theme-colors button::before{
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 12px;
	color: var(--WHITE);
	transition: all 0.3s ease;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;

}
.theme-colors button.active::before{
	opacity: 1;
}
.theme-colors .color-1{
	background-color: hsl(0, 74%, 61%);
}
.theme-colors .color-2{
	background-color: hsl(230, 74%, 61%);
}
.theme-colors .color-3{
	background-color: hsl(36, 74%, 61%);
}
.theme-colors .color-4{
	background-color: hsl(277, 74%, 61%);
}
.theme-colors .color-5{
	background-color: hsl(164, 74%, 61%);
}
/*---------19. =header--------------*/

.header{
	border-bottom: 1px solid var(--border-color-2);
	background-color: var(--white);
	box-shadow: var(--shadow);
}

.header-logo a{
	font-size: 26px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--black-70);
}
.header-logo span{
	color: var(--main-color);
}

.header-sub-logo{
	font-size: 12px;
	position: absolute;
	padding-top: 35px;
	padding-left: 3px;
}
.header-sub-logo a{
	color: var(--black-70);
}
.header .menu-item{
	display: inline-block;
	margin-left: 50px;
	position: relative;
}


.header .menu-item1{
	color: var(--white);
    background-color: var(--main-color);
    padding: 5px 15px;
    border: 1px solid var(--white);
    border-radius: 5px;
    text-decoration: none;
}

.header .btn-sm:hover {
    background-color: var(--main-color);
    color: var(--white);
}
.header .menu-item > a{
	display: block;
	padding: 24px 0;
	font-weight: 500;
	font-size: 18px;
	color: var(--black-90);
	text-transform: capitalize;
	transition: color 0.3s ease;
}
.header > a{
	display: block;
	padding: 24px 0;
	font-weight: 500;
	font-size: 18px;
	color: var(--black-90);
	text-transform: uppercase;
	transition: color 0.3s ease;
}
.header .sub-menu-item a:hover,
.header .menu-item:hover > a{
	color: var(--main-color);
}
.menu-item1:hover > a{
	color: var(--main-color);
}
.header .menu-item > a i{
	font-size: 13px;
	margin-left: 3px;
	pointer-events: none;
	transition: transform 0.3s ease;
}
.header .sub-menu{
	position: absolute;
	top: 100%;
	background-color: var(--white);
	left: 0;
	width: 210px;
	padding: 10px 0;
	border-radius: 5px;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	transform: translate(10px);
}
@media(min-width: 992px){
	.header .menu-item:hover > .sub-menu{
		visibility: visible;
		opacity: 1;
		transform: translate(0);
	}
}
.header .sub-menu-item a{
	display: block;
	padding: 10px 20px;
	color: var(--black-90);
	text-transform: capitalize;
	font-weight: 400;
	transition: color 0.3s ease;
}

.header-backdrop, 
.header-close-btn,
.header-hamburger-btn{
	display: none;
}


/*---------20. =footer--------------*/
.footer-top{
	padding: 50px 0 20px;
	border-top: 1px solid var(--border-color-2);
}
.footer-item{
	margin: 0 0 30px;
}
.footer-item h3{
	text-transform: capitalize;
	margin: 0 0 20px;
}
.footer-item .footer-logo{
	color: var(--black-70);
	text-transform: uppercase;
}
.footer-item .footer-logo span{
	color: var(--main-color);
}
.footer-item ul li:not(:last-child){
	margin-bottom: 8px;
}
.footer-item ul a{
	text-transform: capitalize;
	color: var(--black-70);
	transition: color 0.3s ease;
	position: relative;
}
.footer-item ul a:hover{
	color: var(--main-color);
}
.footer-item ul a::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	background-color: var(--main-color);
	transition: width 0.3s ease;
}
.footer-item ul a:hover::before{
	width: 100%;
}
.footer-item ul a .social-icon{
	margin-right: 5px;
}
.footer-bottom{
	border-top: 1px solid var(--border-color-2);
}
.footer-bottom p{
	font-size: 14px;
}
/*---------21. =banner section--------------*/
.banner-section{
	
	padding: 80px 0;
	min-height: 680px;
}
.banner-text h2{
	font-size: 20px;
	color: var(--main-color);
}
.banner-text h1{
	font-size: 45px;
	font-weight: 700;

}
.banner-section .circular-img-circle{
	background-color: #219ebc;
}

/*---------22. =fun facts section--------------*/
.fun-facts-item{
	padding: 15px 0;
}
.fun-facts-item h2{
	font-weight: 700;
	font-weight: 30px;
	text-transform: uppercase;
}
.fun-facts-item p{
	margin: 0;
	text-transform: uppercase;
}
.fun-facts-item .style-1{
	color: var(--black-70);
}
.fun-facts-item .style-2{
	color: var(--green-light);
}
.fun-facts-item .style-3{
	color: var(--red-light);
}
.fun-facts-item .style-4{
	color: var(--orange-light);
}
/*---------23. =courses section--------------*/
.courses-section .section-title h2{
	font-size: 30px;


}
.courses-section .section-title  p{
	font-size: 16px;
}
.courses-item{
	margin-bottom: 30px;
	position: relative;
	transition: transform 0.3s ease;
}


.courses-item:hover {
        transform: scale(1.05); /* Slightly enlarges the box */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Adds a deeper shadow on hover */
       transition: transform 0.3s ease;
       
    }

    /* Responsive text */
    @media (max-width: 400px) {
        .courses-item {
            font-size: 1.2rem; /* Smaller font on small screens */
        }
    }
.courses-item .img-box img{
	width: 100%;
	border-radius: 5px;
	height: 233px; 
	object-fit: cover;
}
.courses-item .link{
	color: var(--black-70);
	
}
.courses-item .title{
	text-transform: capitalize;
	font-size: 24px;
	font-weight: 500px;
	margin: 15px 0;
	transition: color 0.3s ease;
}
.courses-item:hover .title{
	color: var(--main-color);
}
.courses-item .instructor{
	text-transform: capitalize;
	margin: 0 0 12px;
}
.courses-item .instructor img{
	width: 30px;
	border-radius: 50%;
	margin-right: 5px;
}
.courses-item .rating{
	font-size: 14px;
}
.courses-item .average-rating{
	font-weight: 600;
	color: var(--main-color);
}
.courses-item .average-stars i{
	color: var(--main-color);
}
.courses-item .read{
	margin-top: 10px;
	text-align: center;
	justify-content: center;
}
.courses-item-inner{
	text-align: center;

}
.instructornotes{
	font-size: 13px;
	align-items: center;
	display: block;
}

/*---------24. =testimonials section--------------*/
.testimonials-section .img-box{
	height: 150px;
	width: 150px;
	background-color: var(--red-light);
	margin: 30px auto 50px;
}
.testimonials-section .img-box::before,
.testimonials-section .img-box::after{
	content: '';
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--red-light);
	animation: spin 15s linear infinite;
}
.testimonials-section .img-box::before{
	height: 180px;
	width: 180px;
	left: -15px;
	top: -15px;
	border-left: 1px solid transparent;
}
.testimonials-section .img-box::after{
	height: 210px;
	width: 210px;
	left: -30px;
	top: -30px;
	border-right: 1px solid transparent;
}
.testimonials-item h3{
	text-transform: capitalize;
}
.testimonials-item .text-2{
	margin: 0;
	text-transform: capitalize;
}

.testimonials-section .carousel-control-prev,
.testimonials-section .carousel-control-next{
	position: relative;
	height: 35px;
	width: 35px;
	background-color: var(--main-color);
	display: inline-block;
	border-radius: 50%;
	margin: 0 4px;
}
.testimonials-section .decoration-circles-item{
	position: absolute;
	border-radius: 50%;
	opacity: 0.4;
}
.testimonials-section .decoration-circles-item:nth-child(1){
	left: 10%;
	top: 20%;
	height: 30px;
	width: 30px;
	background-color: var(--yellow-light);
}
.testimonials-section .decoration-circles-item:nth-child(2){
	left: 40%;
	top: 40%;
	height: 50px;
	width: 50px;
	background-color: var(--green-light);
}
.testimonials-section .decoration-circles-item:nth-child(3){
	left: 70%;
	top: 70%;
	height: 30px;
	width: 30px;
	background-color: var(--red-light);
}
.testimonials-section .decoration-circles-item:nth-child(4){
	left: 20%;
	top: 50%;
	height: 20px;
	width: 20px;
	background-color: var(--red-light);
}
.testimonials-section .decoration-imgs-item{
	position: absolute;
	border-radius: 50%;
	opacity: 0.4;
}
.testimonials-section .decoration-imgs-item:nth-child(1){
	height: 60px;
	width: 60px;
	left: 20%;
	top: 30%;
	background-color: var(--yellow-light);
}
.testimonials-section .decoration-imgs-item:nth-child(2){
	height: 80px;
	width: 80px;
	left: 90%;
	top: 40%;
	background-color: var(--red-light);
}
.testimonials-section .decoration-imgs-item:nth-child(3){
	height: 40px;
	width: 40px;
	left: 10%;
	top: 60%;
	background-color: var(--green-light);
}

/*---------25. =bai section--------------*/
.bai-section .circular-img-circle{
	background-color: var(--yellow-light);
}

/*---------26. =course details section--------------*/
	/* course header */
	.course-header h1{
		font-size: 30px;
		margin: 0 0 15px;
		font-weight: 600;
	}
	.course-header .average-rating{
		font-weight: 600;
		color: var(--orange);
	}
	.course-header .average-stars i{
		font-size: 14px;
		color: var(--orange);
	}
	.course-header .rating span{
		vertical-align: middle;
	}
	.course-header ul li{
		margin: 6px 0 0;
		text-transform: capitalize;
	}
	.course-header ul li span{
		margin-left: 5px;
	}

	/* course tabs */
	.course-tabs{
		margin: 30px 0 20px;
	}
	.course-tabs .nav-link{
		margin: 0 10px 10px 0;
	}
	/* course curriculum */
	.course-curriculum .accordion-item{
		border-color: var(--border-color-1);
		background-color: transparent;
	}
	.course-curriculum .accordion-button span{
		position: absolute;
		right: 17px;
		font-size: 14px;
		top: 30%;
	}
	.course-curriculum .accordion-button::after{
		content: "\f077";
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		background-image: none;
		position: absolute;
		left: 17px;
		top: 50%;
		transform: translateY(-50%);
		height: auto;
		width: auto;
		line-height: 1;
	}
	.course-curriculum .accordion-button{
		background-color: transparent;
		color: var(--black-90);
		font-weight: 300;
		flex-wrap: wrap;
		padding-left: 50px;
		padding-right: 160px;
		line-height: 1.5;
	}
	.course-curriculum .accordion-button:focus{
		box-shadow: none;
	}
	.course-curriculum .accordion-button:not(.collapsed) span{
		font-weight: 500;
	}
	.course-curriculum .accordion-button:not(.collapsed)::after{
		transform: translateY(-50%) rotate(-180deg);
	}
	.course-curriculum .accordion-button:not(.collapsed){
		font-weight: 600;
		border-bottom: 1px solid var(--border-color-1);
		transition: none;
		box-shadow: none;
	}
	.course-curriculum ul li{
		position: relative;
		padding: 0 50px 0 20px;
	}
	.course-curriculum ul li:not(:last-child){
		margin-bottom: 10px;
	}
	.course-curriculum ul li span{
		position: absolute;
		font-size: 14px;
		right: 0;
		top: 0;
	}
	.course-curriculum ul li  i{
		position: absolute;
		left: 0;
		top: 6px;
		color: var(--black-70);
		font-size: 12px;
	}

	/* course description */
	.course-description h4{
		font-size: 16px;
	}
	
	/* course notes */
	.notes h4{
		font-size: 16px;
		color: var(--main-color);
	}
	.notes h3{
		font-size: 24px;
		color: var(--main-color);
	}
	.notes p{
		font-size: 14px;
		text-align: justify;
	}
	.notes ul li {
		font-size: 14px;
		list-style-type: circle;
		list-style-position: outside;
	}
	.notes ol li {
		font-size: 14px;
		list-style-type: circle;
		list-style-position: outside;
	}
	.notes img{
		height: 250px;
		width: 200px;
		}
	.notes .img1{
		height: 250px;
		width: 200px;
	}
	.notes .img4{
		height: 350px;
		width: 650px;
	}
	.notes .img3{
		height: 300px;
		width: 650px;
	}
	.notes .img5{
		height: 200px;
		width: 320px!important;
	}
	.notes .img6{
		height: 100px;
		width: 600px!important;
	}
	.notes .img7{
		height: 250px;
		width: 400px!important;
		justify-content: center;
	}
	.notes .img8{
		height: 200px;
		width: 300px!important;
		justify-content: center;
	}
		.notes .img9{
		height: 650px;
		width: 600px!important;
		justify-content: center;
	}

	


	/* course instructor */
	.course-instructor .img-box img{
		max-width: 128px;
		margin-bottom: 15px;
	}
	.course-instructor h4{
		font-size: 16px;
		text-transform: capitalize;
		margin-bottom: 10px;
	}
	.course-instructor h4 span{
		font-weight: 300;
	}
	.course-instructor ul li i{
		color: var(--main-color);
		margin-right: 5px;
	}
	.course-instructor ul li:not(:last-child){
		margin-bottom: 5px;
	}
	/* course reviews */
	.rating-summary .average-rating{
		font-size: 40px;
		font-weight: 700;
		color: var(--black-90);
	}
	.rating-summary .average-stars i{
		color: var(--orange);
	}
	.rating-summary .rating-bars-item{
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}
	.rating-summary .progress{
		height: 8px;
		background-color: var(--border-color-2);
		width: calc(100% - 120px);
		margin-right: 20px;
		border-radius: 0;
	}
	.rating-summary .progress-bar{
		background-color: var(--main-color);
	}
	.rating-summary .star-text{
		min-width: 60px;
		color: var(--orange);
	}
	.reviews-filter{
		margin: 0 0 35px;
		width: 200px;
	}
	.reviews-item{
		position: relative;
		margin-bottom: 30px;
		padding-left: 65px;
	}
	.reviews-item .img-box{
		max-width: 50px;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
	}
	.reviews-item h4{
		font-size: 16px;
		font-weight: 500;
		text-transform: capitalize;
		margin: 0 0 5px;
		color: var(--black-90);
	}
	.reviews-item .stars-rating i{
		color: var(--orange);
		font-size: 14px;
	}
	.reviews-item .stars-rating .date{
		margin-left: 5px;
		font-size: 14px;
		display: inline-block;
	}
	.reviews-item p{
		margin: 5px 0 0;
	}
	/* course sidebar */
	.course-sidebar .img-box{
		margin-bottom: 20px;
		border-radius: 5px;
		overflow: hidden;
		cursor: pointer;
	}
	.course-sidebar .img-box::before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: var(--black-alpha-40);
	}
	.course-sidebar .img-box .play-icon{
		position: absolute;
		height: 50px;
		width: 50px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: var(--main-color);
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: var(--WHITE);
	}
	.course-sidebar .img-box p{
		position: absolute;
		color: var(--WHITE);
		top: calc(50% + 40px);
		font-weight: 500;
		width: 100%;
	}
	.course-sidebar .price span{
		margin-right: 8px;
	}
	.course-sidebar .price-new{
		font-size: 30px;
		font-weight: 700;
		color: var(--black-90);
	}
	.course-sidebar .price-discount{
		color: var(--main-color);
	}
	.course-sidebar .features-list{
		margin: 0 0 20px;
	}
	.course-sidebar .features-list li{
		position: relative;
		padding-left: 21px;
		margin-bottom: 8px;
	}
	.course-sidebar .features-list li::before{
		content: '';
		height: 6px;
		width: 6px;
		background-color: var(--main-color);
		position: absolute;
		left: 0;
		top: 9px;
		border-radius: 50%;
	}


/*---------27. =contact section--------------*/
.contact-item{
	position: relative;
	padding-left: 55px;
	margin-bottom: 40px;
}
.contact-item .icon-box{
	position: absolute;
	height: 40px;
	width: 40px;
	background-color: var(--main-color);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	left: 0;
	top: 0;
	color: var(--WHITE);
}

/*---------28. =blog section--------------*/
.container p{
	text-align: justify;
}
.intro-header {
  background-color: #777777;
  background: no-repeat center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: auto;
  -o-background-size: cover;
  margin-bottom: 50px;
}
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
  padding: 100px 0 90px;
  color: var(--WHITE);
}
.intro-header .site-heading{
	color: var(--WHITE);

}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading,
  .intro-header .post-heading,
  .intro-header .page-heading {
    padding: 150px 0;
  }
}
.intro-header .site-heading,
.intro-header .page-heading {
  text-align: center;
}
.intro-header,
.intro-header .page-heading h1, .post-title {
  margin-top: 0;
  font-size: 50px;
}
.site-heading h1{
	font-size: 50px;
}
.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
  font-size: 24px;
  line-height: 1.1;
  display: block;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 10px 0 0;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading h1,
  .intro-header .page-heading h1 {
    font-size: 80px;
  }
}
.intro-header .post-heading h1 {
  font-size: 35px;
}
.intro-header .post-heading .subheading,
.intro-header .post-heading .meta {
  line-height: 1.1;
  display: block;
}
.intro-header .post-heading .subheading {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 24px;
  margin: 10px 0 30px;
  font-weight: 600;
}
.intro-header .post-heading .meta {
  font-family: 'Lora', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
}
.intro-header .post-heading .meta a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .post-heading h1 {
    font-size: 55px;
  }
  .intro-header .post-heading .subheading {
    font-size: 30px;
  }
}
.post-preview > a {
  color: var(--BLACK);
}
.post-preview > a:hover,
.post-preview > a:focus {
  text-decoration: none;
  color: var(--main-color);
}
.post-preview > a > .post-title {
  font-size: 30px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.post-preview > a > .post-subtitle {
  margin: 0;
  font-weight: 300;
  margin-bottom: 10px;
}

.post-preview > .post-meta {
  color: var(--black-70);
  font-size: 18px;
  font-style: italic;
  margin-top: 0;
}
.img-responsive{

}
.post-preview > .post-meta > a {
  text-decoration: none;
  color: #333333;
}
.post-preview > .post-meta > a:hover,
.post-preview > .post-meta > a:focus {
  color: #0085A1;
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .post-preview > a > .post-title {
    font-size: 36px;
  }
}
.section-heading {
  font-size: 36px;
  margin-top: 60px;
  font-weight: 700;
}

.caption {
  text-align: center;
  font-size: 14px;
  padding: 10px;
  font-style: italic;
  margin: 0;
  display: block;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 1.5em;
  background: none;
  box-shadow: none !important;
  resize: none;
}
.floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease,opacity 0.3s ease;
  -moz-transition: top 0.3s ease,opacity 0.3s ease;
  -ms-transition: top 0.3s ease,opacity 0.3s ease;
  transition: top 0.3s ease,opacity 0.3s ease;
}
.floating-label-form-group::not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
.floating-label-form-group-with-focus label {
  color: #0085A1;
}
form .row:first-child .floating-label-form-group {
  border-top: 1px solid #eeeeee;
}
.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 15px 25px;
}
.btn-lg {
  font-size: 16px;
  padding: 25px 35px;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #0085A1;
  border: 1px solid #0085A1;
  color: white;
}
.pager {
  margin: 20px 0 0;
}

::-moz-selection {
  color: white;
  text-shadow: none;
  background: #0085A1;
}
::selection {
  color: white;
  text-shadow: none;
  background: #0085A1;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
.blog-img{
	height: 100%;
	width: 100%;
}
/*---------29. =terms and conditions--------------*/
.terms-section .terms h2{
	font-size: 20px;
}
.terms-section .terms p{
	font-size: 16px;
}

/**** blog *****/
  .badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 50%;
}

.badge-primary {
  color: #fff;
  background-color: var(--main-color);
}

a.badge-primary:hover, a.badge-primary:focus {
  color: #fff;
  background-color: #117a8b;
}

a.badge-primary:focus, a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.post-carousel .owl-nav {
  position: absolute;
  width: 100%;
  height: 35px;
  top: 50%;
  left: 0;
  margin-top: -20px;
  padding: 0 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.post-carousel .owl-nav .owl-prev,
.post-carousel .owl-nav .owl-next {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00394f;
  background: #17a2b8;
  border-radius: 30px;
  font-size: 18px;
  opacity: .1;
  transition: .3s;
}

.post-carousel:hover .owl-nav .owl-prev,
.post-carousel:hover .owl-nav .owl-next {
  opacity: 1;
}
 .media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 5px;
}

home
/* Blog Section */
.blog-section {
    padding: 50px 20px;
    text-align: center;
}

.blog-section h1 {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: var(--main-color);
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.notes-cards{
	width: 100%;
	margin: 10px;
    max-width: 350px; /* Sets max width for larger screens */
    height: 100%;
    max-height: 450px; /* Keeps the card height fixed */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.notes-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.notes-cards:hover .notes-image {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Blog content container */
.notes-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

/* Author and category styling */
.notes-author {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.notes-categories {
    font-size: 14px;
    color: #888;
}

/* Blog text content */
.notes-text {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    overflow-y: auto;
    max-height: 150px; /* Limit content height */
    padding-right: 5px;
    position: relative;
}

/* Custom scrollbar */
.notes-text::-webkit-scrollbar {
    width: 6px;
}

.notes-text::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
}

/* Responsive design */
@media (max-width: 768px) {
    .notes-card {
        max-width: 100%;
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .notes-card {
        max-width: 100%;
        height: auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Softer shadow on mobile */
    }

    .notes-image {
        height: 150px; /* Smaller image for mobile */
    }

    .notes-content {
        padding: 15px;
    }

    .notes-author, .notes-categories, .notes-text {
        font-size: 14px; /* Adjust font sizes for smaller screens */
    }
}
/* Blog Card Styling */
.blog-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s,
}

.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.blog-title {
    font-size: 1.5em;
    margin: 0;
    color: #333;
}

/* Card Info Styling */
.card-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    color: #666;
    margin: 10px 0;
    flex-wrap: wrap;
}

.card-info span {
    display: flex;
    align-items: center;
    color: var(--main-color);
    font-size: 0.9em;
}

.card-info i {
    margin-right: 5px;
    font-size: 0.9em;
}

/* Blog Excerpt and Read More Button */
.blog-excerpt {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
}

.read-more {
    color: var(--main-color);
    text-decoration: none;
    font-weight: bold;
}

.read-more i {
    margin-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blog-section h1 {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    .card-info {
        font-size: 0.8em;
        gap: 5px;
    }

    .blog-section h1 {
        font-size: 1.8em;
    }
}


.read-more-btn {
    display: inline-block; /* Keep it inline-block for centering */
    padding: 8px 16px;
    color: var(--main-color);
    background-color: transparent;
    border: 2px solid var(--main-color);
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9em;
    margin-top: 10px; /* Add some space above the button */
}

/* Centering the Button */
.card-content {
    text-align: center; /* Center content within the card */
}

/* Hover Effect */
.read-more-btn:hover {
    background-color: var(--main-color);
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .read-more-btn {
        padding: 6px 12px;
        font-size: 0.85em;
    }
}

/* new blog show */
.top {
    display: flex;
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    margin-bottom: 20px;
}
.top:hover{
	color: var(--main-color);
}


/* Container styles */
.tagscloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20 px;
    justify-content: center;
    text-align: center;
}

/* Tag button styles */
.tagscloud .tag {
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: var(--main-color);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
}

/* Hover effect */
.tagscloud .tag:hover {
    background-color: var(--white);
    color: var(--main-color);
    border-color: var(--main-color);
    transform: scale(1.1);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    
}
.tagscloud .tag a{
	color: var(--WHITE);
}
/* Responsive font sizes */
@media (max-width: 768px) {
    .tagscloud .tag {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .tagscloud .tag {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* Animation */
.tagscloud .tag {
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    /* Base styles for Login and Join Us buttons */
.login-btn, .join-btn {
    font-size: 0.9rem; /* Small font size */
    padding: 5px 10px; /* Compact padding for a small look */
    background-color: var(--white); /* Default background color */
    color: var(--main-color); /* Default text color */
    border: 1px solid var(--main-color); /* Border to match main color */
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-left: 8px; /* Spacing between buttons */
}

.login-btn:hover, .join-btn:hover {
    background-color: var(--main-color); /* Background on hover */
    color: var(--white); /* Text color on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-btn, .join-btn {
        font-size: 0.8rem; /* Slightly smaller for mobile and tablets */
        padding: 4px 8px;
         display: flex;
        flex-direction: column; /* Stack buttons vertically */
         gap: 15px; /* Add space between buttons */

    }
}

@media (max-width: 480px) {
    .login-btn, .join-btn {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        gap: 15px; /* Add space between buttons */
        font-size: 20px; /* Even smaller font for extra small screens */


        border: none;
        margin-left: 6px; /* Less spacing on very small screens */
        margin-top: 20px;

    }
}

}
/* Container for the user profile */
/* Container for the user profile */
.user-profile {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align items to the start */
    transition: transform 0.3s ease; /* Animation for hover effect */
    padding: 12px; /* Add padding for better spacing */
    border-radius: 10px; /* Slight rounding for the container */
    background-color: var(--white); /* Background for contrast */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
    margin: 10px 0; /* Margin for spacing between profiles */
}

/* Profile information container */
.profile-info {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center vertically */
    transition: color 0.3s ease; /* Smooth color change */
}

/* Style for the user image */
.user-img {
    width: 35px; /* Increased size for better visibility */
    height: 35px; /* Maintain aspect ratio */
    border-radius: 50%; /* Make it circular */
    margin-right: 0px; /* Spacing between image and name */
    object-fit: cover; /* Cover the area without distortion */
    transition: transform 0.3s; /* Animation for scaling effect */
}

/* Hover effect on image */
.user-img:hover {
    transform: scale(2.0); /* Slightly enlarge on hover */
}

/* Style for the user name */
.user-name {
    color: var(--black-70); /* Default text color */
    font-size: 0.9rem; /* Slightly larger font size */
    font-weight: bold; /* Bold text for emphasis */
    transition: color 0.3s ease; /* Smooth color change */
}

/* Hover effect for user profile */
.user-profile:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-img {
        width: 50px; /* Smaller image for tablets */
        height: 50px;
    }

    .user-name {
        font-size: 1rem; /* Adjust font size for tablets */
    }
}

@media (max-width: 480px) {
    .user-profile {
        padding: 15px; /* More padding for touch devices */
        text-align: center; /* Center text on mobile */
        background-color: var(--main-color); /* Change background on mobile for contrast */
    }

    .user-img {
        width: 45px; /* Smaller image for mobile *//* Container for the user profile */

    }
.user-profile {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align items to the start */
    transition: transform 0.3s ease; /* Animation for hover effect */
    padding: 12px; /* Add padding for better spacing */
    border-radius: 10px; /* Slight rounding for the container */
    background-color: var(--white); /* Background for contrast */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
    margin: 10px 0; /* Margin for spacing between profiles */
}

/* Profile information container */
.profile-info {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center vertically */
    transition: color 0.3s ease; /* Smooth color change */
}

/* Style for the user image */


/* Hover effect for user profile */
.user-profile:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}
.user-name {
        font-size: 0.9rem; /* Adjust font size for mobile */
        color: var(--white); /* Change text color for contrast */
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .user-img {
        width: 50px; /* Smaller image for tablets */
        height: 50px;
    }

    
}