/* Deafult Margin & Padding */

/*-- Margin Top --*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*-- Margin Bottom --*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mb-200 {
	margin-bottom: 200px;
}
.mt-none-30 {
	margin-top: -30px;
}
.mt-none-40 {
	margin-top: -40px;
}

/*-- Padding Top --*/

.pt-5 {
	padding-top: 5px;
}

.pt-10 {
	padding-top: 10px;
}

.pt-15 {
	padding-top: 15px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-25 {
	padding-top: 25px;
}

.pt-30 {
	padding-top: 30px;
}

.pt-35 {
	padding-top: 35px;
}

.pt-40 {
	padding-top: 40px;
}

.pt-45 {
	padding-top: 45px;
}

.pt-50 {
	padding-top: 50px;
}

.pt-55 {
	padding-top: 55px;
}

.pt-60 {
	padding-top: 60px;
}

.pt-65 {
	padding-top: 65px;
}

.pt-70 {
	padding-top: 70px;
}

.pt-75 {
	padding-top: 75px;
}

.pt-80 {
	padding-top: 80px;
}

.pt-85 {
	padding-top: 85px;
}

.pt-90 {
	padding-top: 90px;
}

.pt-95 {
	padding-top: 95px;
}

.pt-100 {
	padding-top: 100px;
}

.pt-105 {
	padding-top: 105px;
}

.pt-110 {
	padding-top: 110px;
}

.pt-115 {
	padding-top: 115px;
}

.pt-120 {
	padding-top: 120px;
}

.pt-125 {
	padding-top: 125px;
}

.pt-130 {
	padding-top: 130px;
}

.pt-135 {
	padding-top: 135px;
}

.pt-140 {
	padding-top: 140px;
}

.pt-145 {
	padding-top: 145px;
}

.pt-150 {
	padding-top: 150px;
}

.pt-155 {
	padding-top: 155px;
}

.pt-160 {
	padding-top: 160px;
}

.pt-165 {
	padding-top: 165px;
}

.pt-170 {
	padding-top: 170px;
}

.pt-175 {
	padding-top: 175px;
}

.pt-180 {
	padding-top: 180px;
}

.pt-185 {
	padding-top: 185px;
}

.pt-190 {
	padding-top: 190px;
}

.pt-195 {
	padding-top: 195px;
}

.pt-200 {
	padding-top: 200px;
}

/*-- Padding Bottom --*/

.pb-5 {
	padding-bottom: 5px;
}

.pb-10 {
	padding-bottom: 10px;
}

.pb-15 {
	padding-bottom: 15px;
}

.pb-20 {
	padding-bottom: 20px;
}

.pb-25 {
	padding-bottom: 25px;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-35 {
	padding-bottom: 35px;
}

.pb-40 {
	padding-bottom: 40px;
}

.pb-45 {
	padding-bottom: 45px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-55 {
	padding-bottom: 55px;
}

.pb-60 {
	padding-bottom: 60px;
}

.pb-65 {
	padding-bottom: 65px;
}

.pb-70 {
	padding-bottom: 70px;
}

.pb-75 {
	padding-bottom: 75px;
}

.pb-80 {
	padding-bottom: 80px;
}

.pb-85 {
	padding-bottom: 85px;
}

.pb-90 {
	padding-bottom: 90px;
}

.pb-95 {
	padding-bottom: 95px;
}

.pb-100 {
	padding-bottom: 100px;
}

.pb-105 {
	padding-bottom: 105px;
}

.pb-110 {
	padding-bottom: 110px;
}

.pb-115 {
	padding-bottom: 115px;
}

.pb-120 {
	padding-bottom: 120px;
}

.pb-125 {
	padding-bottom: 125px;
}

.pb-130 {
	padding-bottom: 130px;
}

.pb-135 {
	padding-bottom: 135px;
}

.pb-140 {
	padding-bottom: 140px;
}

.pb-145 {
	padding-bottom: 145px;
}

.pb-150 {
	padding-bottom: 150px;
}

.pb-155 {
	padding-bottom: 155px;
}

.pb-160 {
	padding-bottom: 160px;
}

.pb-165 {
	padding-bottom: 165px;
}

.pb-170 {
	padding-bottom: 170px;
}

.pb-175 {
	padding-bottom: 175px;
}

.pb-180 {
	padding-bottom: 180px;
}

.pb-185 {
	padding-bottom: 185px;
}

.pb-190 {
	padding-bottom: 190px;
}

.pb-195 {
	padding-bottom: 195px;
}

.pb-200 {
	padding-bottom: 200px;
}

/*-- Padding Left --*/

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

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

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

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

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

.pl-25 {
	padding-left: 35px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pl-85 {
	padding-left: 80px;
}

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

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

.pl-100 {
	padding-left: 100px;
}
.pl-105 {
	padding-left: 105px;
}
.pl-110 {
	padding-left: 110px;
}
.pl-115 {
	padding-left: 115px;
}
.pl-120 {
	padding-left: 120px;
}
.pl-125 {
	padding-left: 125px;
}
.pl-130 {
	padding-left: 130px;
}
.pl-135 {
	padding-left: 135px;
}
.pl-140 {
	padding-left: 140px;
}
.pl-145 {
	padding-left: 145px;
}
.pl-150 {
	padding-left: 150px;
}
.pl-155 {
	padding-left: 155px;
}
.pl-160 {
	padding-left: 160px;
}
.pl-160 {
	padding-left: 160px;
}
.pl-160 {
	padding-left: 160px;
}
.pl-160 {
	padding-left: 160px;
}
.pl-160 {
	padding-left: 160px;
}
.pl-160 {
	padding-left: 160px;
}
.pl-165 {
	padding-left: 165px;
}
.pl-170 {
	padding-left: 170px;
}
.pl-175 {
	padding-left: 175px;
}
.pl-180 {
	padding-left: 180px;
}
.pl-185 {
	padding-left: 185px;
}
.pl-190 {
	padding-left: 190px;
}
.pl-195 {
	padding-left: 195px;
}
.pl-200 {
	padding-left: 200px;
}

/*-- Padding Right --*/

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

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

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

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

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

.pr-25 {
	padding-right: 35px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pr-85 {
	padding-right: 80px;
}

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

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

.pr-100 {
	padding-right: 100px;
}
.pr-105 {
	padding-right: 105px;
}
.pr-110 {
	padding-right: 110px;
}
.pr-115 {
	padding-right: 115px;
}
.pr-120 {
	padding-right: 120px;
}
.pr-125 {
	padding-right: 125px;
}
.pr-130 {
	padding-right: 130px;
}
.pr-135 {
	padding-right: 135px;
}
.pr-140 {
	padding-right: 140px;
}
.pr-145 {
	padding-right: 145px;
}
.pr-150 {
	padding-right: 150px;
}
.pr-155 {
	padding-right: 155px;
}
.pr-160 {
	padding-right: 160px;
}
.pr-165 {
	padding-right: 165px;
}
.pr-170 {
	padding-right: 170px;
}
.pr-175 {
	padding-right: 175px;
}
.pr-180 {
	padding-right: 180px;
}
.pr-185 {
	padding-right: 185px;
}
.pr-190 {
	padding-right: 190px;
}
.pr-195 {
	padding-right: 195px;
}
.pr-120 {
	padding-right: 120px;
}

/* font weight */

.f-700 {
	font-weight: 700;
}

.f-600 {
	font-weight: 600;
}

.f-500 {
	font-weight: 500;
}

.f-400 {
	font-weight: 400;
}

.f-300 {
	font-weight: 300;
}
/* Background Color */

.gray_bg {
	background: #dce8eb;
}

.white_bg {
	background: #fff;
}
.black_thm_bg {
	background: #1b2026;
}

.theme_bg {
	background: #0073ff;
}

.primary_bg {
	background: #222;
}

.footer_bg {
	background: #000;
}

/* Color */

.white-color {
	color: #fff;
}

.black-color {
	color: #222;
}

.theme-color {
	color: #222;
}

.primary-color {
	color: #222;
}

/* black overlay */
[data-overlay] {
	position: relative;
}

[data-overlay]::before {
	background: #000 none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

[data-overlay="3"]::before {
	opacity: 0.3;
}

[data-overlay="4"]::before {
	opacity: 0.4;
}

[data-overlay="5"]::before {
	opacity: 0.5;
}

[data-overlay="6"]::before {
	opacity: 0.6;
}

[data-overlay="7"]::before {
	opacity: 0.7;
}

[data-overlay="8"]::before {
	opacity: 0.8;
}

[data-overlay="9"]::before {
	opacity: 0.9;
}

.pos-rel {
	position: relative;
}

/* back to top start */
#thetop {
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	position: absolute;
}
#backtotop {
	right: 15px;
	width: 40px;
	height: 40px;
	z-index: 999;
	bottom: 70px;
	display: none;
	position: fixed;
	border-radius: 100%;
	background-color: #fff;
	box-shadow: 0px 10px 30px 1px rgba(0, 0, 0, 0.15);
}

#backtotop #scroll {
	z-index: 1;
	width: 100%;
	height: 100%;
	color: #0c0c0c;
	display: block;
	font-size: 15px;
	overflow: hidden;
	line-height: 42px;
	text-align: center;
	position: relative;
}
#backtotop #scroll i {
	left: 50%;
	position: absolute;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#backtotop #scroll i:nth-child(1) {
	top: 53%;
	-webkit-transform: translate(-50%, -53%);
	-ms-transform: translate(-50%, -53%);
	transform: translate(-50%, -53%);
}

#backtotop #scroll i:nth-child(2) {
	top: 100%;
	opacity: 0;
}

#backtotop #scroll:hover i:nth-child(1) {
	top: -100%;
	opacity: 0;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

#backtotop #scroll:hover i:nth-child(2) {
	top: 53%;
	opacity: 1;
	-webkit-transform: translate(-50%, -53%);
	-ms-transform: translate(-50%, -53%);
	transform: translate(-50%, -53%);
}

/* play btn animation */

.video-icon {
	position: absolute;
	background: #ffffff;
	color: #0c0c0c;
	height: 90px;
	width: 90px;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 20px;
	line-height: 90px;
	transform: translateY(-50%);
	border-radius: 50%;
	-webkit-border-radius: -50%;
	-moz-border-radius: -50%;
	-ms-border-radius: -50%;
	-o-border-radius: -50%;
}

.video-icon:hover {
	color: #ff4600;
}

.video-icon::before, .video-icon::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
	opacity: 0.15;
	z-index: -10;
}

.video-icon::before {
	z-index: -10;
	-webkit-animation: inner-ripple 2000ms linear infinite;
	-moz-animation: inner-ripple 2000ms linear infinite;
	animation: inner-ripple 2000ms linear infinite;
}

.video-icon::after {
	z-index: -10;
	-webkit-animation: outer-ripple 2000ms linear infinite;
	-moz-animation: outer-ripple 2000ms linear infinite;
	animation: outer-ripple 2000ms linear infinite;
}
/* animation */
@keyframes outer-ripple {
	0% {
	  transform: scale(1);
	  filter: alpha(opacity=50);
	  opacity: 0.5;
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  -webkit-filter: alpha(opacity=50);
	}
	80% {
	  transform: scale(1.5);
	  filter: alpha(opacity=0);
	  opacity: 0;
	  -webkit-transform: scale(1.5);
	  -moz-transform: scale(1.5);
	  -ms-transform: scale(1.5);
	  -o-transform: scale(1.5);
	}
	100% {
	  transform: scale(2.5);
	  filter: alpha(opacity=0);
	  opacity: 0;
	  -webkit-transform: scale(2.5);
	  -moz-transform: scale(2.5);
	  -ms-transform: scale(2.5);
	  -o-transform: scale(2.5);
	}
}
@-webkit-keyframes outer-ripple {
	0% {
	  transform: scale(1);
	  filter: alpha(opacity=50);
	  opacity: 0.5;
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	}
	80% {
	  transform: scale(2.5);
	  filter: alpha(opacity=0);
	  opacity: 0;
	  -webkit-transform: scale(2.5);
	  -moz-transform: scale(2.5);
	  -ms-transform: scale(2.5);
	  -o-transform: scale(2.5);
	}
	100% {
	  transform: scale(3.5);
	  filter: alpha(opacity=0);
	  opacity: 0;
	  -webkit-transform: scale(3.5);
	  -moz-transform: scale(3.5);
	  -ms-transform: scale(3.5);
	  -o-transform: scale(3.5);
	}
}
@-moz-keyframes outer-ripple {
	0% {
	  transform: scale(1);
	  filter: alpha(opacity=50);
	  opacity: 0.5;
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	}
	80% {
	  transform: scale(2.5);
	  filter: alpha(opacity=0);
	  opacity: 0;
	  -webkit-transform: scale(2.5);
	  -moz-transform: scale(2.5);
	  -ms-transform: scale(2.5);
	  -o-transform: scale(2.5);
	}
	100% {
	  transform: scale(3.5);
	  filter: alpha(opacity=0);
	  opacity: 0;
	  -webkit-transform: scale(3.5);
	  -moz-transform: scale(3.5);
	  -ms-transform: scale(3.5);
	  -o-transform: scale(3.5);
	}
}
/* order & unorder list reset - start */
.ul_li, .ul_li_right, .ul_li_center {
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ul_li>li, .ul_li_right>li, .ul_li_center>li {
	float: left;
	list-style: none;
	display: inline-block;
}

.ul_li {
	justify-content: flex-start;
}

.ul_li_center {
	justify-content: center;
}

.ul_li_right {
	justify-content: flex-end;
}

.ul_li_block {
	margin: 0px;
	padding: 0px;
	display: block;
}

.ul_li_block > li {
	display: block;
	list-style: none;
}
/* backtoup */
.progress-wrap {
	position: fixed;
	right: 40px;
	bottom: 50px;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset 0 0 0 2px rgba(95, 58, 252,0.2);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	transform: translateY(15px);
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	-ms-transform: translateY(15px);
	-o-transform: translateY(15px);
}
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	content: '\f176';
	font-family: "Font Awesome 5 Pro";
	text-align: center;
	line-height: 40px;
	font-size: 15px;
	color: #23cc88;
	left: 0;
	top: 0;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.progress-wrap svg path { 
    fill: none; 
}
  
.progress-wrap svg.progress-circle path {
    stroke: #23cc88;
    stroke-width: 4;
    box-sizing:border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
/* button style */
.thm-btn {
	background-color: #ff9c00;
	background-image: linear-gradient( 145deg, rgb(225, 161, 31) 0%, rgb(243, 162, 70) 100%);
	color: #fff;
	font-size: 14px;
	padding: 23px 34px;
	line-height: 1;
	-webkit-transition: all 300ms linear 0ms;
	-khtml-transition: all 300ms linear 0ms;
	-moz-transition: all 300ms linear 0ms;
	-ms-transition: all 300ms linear 0ms;
	-o-transition: all 300ms linear 0ms;
	transition: all 300ms linear 0ms;
	border-radius: 2px;
	position: relative;
	display: inline-block;
	position: relative;
	overflow: hidden;
	z-index: 1;
	border: 0;
	font-weight: 700;
	outline: none;
    text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0px 4px 7px 0px rgba(234, 167, 74, 0.36);
}
.thm-btn:hover {
	color: #fff;
}
.thm-btn::before, .thm-btn::after {
	background-color: #fff;
	content: "";
	height: 100%;
	left: -110%;
	opacity: .1;
	position: absolute;
	top: 0;
	-webkit-transition: all .5s ease 0s;
	-khtml-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	-webkit-transform: skewX(25deg);
	-khtml-transform: skewX(25deg);
	-moz-transform: skewX(25deg);
	-ms-transform: skewX(25deg);
	-o-transform: skewX(25deg);
	transform: skewX(25deg);
	width: 100%;
	z-index: -1;
}
.thm-btn:hover::before, .thm-btn:focus::before, .thm-btn:active::before {
	left: -10%;
	-webkit-transition: all .3s ease 0s;
	-khtml-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;
	-ms-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}
.thm-btn:hover::after, .thm-btn:focus::after, .thm-btn:active::after {
	left: -20%;
}



/* button style */

.thm-btn-2 {
	background-image: linear-gradient( 145deg, rgb(255,79,88) 0%, rgb(255,180,0) 100%);
	box-shadow: 0px 4px 6px 0px rgba(255, 114, 58, 0.36);

}

/* ======================
   ABOUT SECTION LAYOUT 
   ====================== */
   .about-area {
	background: #f8faff;
	padding: 100px 0;
	position: relative;
	overflow: hidden;
  }
  
  /* Container and row alignment */
  .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
  }
  
  .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	align-items: center;
  }
  
  /* ======================
	 IMAGE COLUMN (LEFT)
	 ====================== */
  .col-lg-6 {
	width: 50%;
	padding: 0 15px;
	position: relative;
  }
  
  .about-image-wrapper {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(238, 236, 236, 0.1);
	transform: perspective(1000px);
  }
  
  .about-img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
  }
  
  .about-image-wrapper:hover .about-img {
	transform: scale(1.03);
  }
  
  /* Floating animation elements */
  .animated-shapes {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
  }
  
  .shape {
	position: absolute;
	border-radius: 50%;
	background: rgba(222, 223, 227, 0.851);
	animation: float 8s infinite ease-in-out;
  }
  
  .shape-1 {
	width: 150px;
	height: 150px;
	top: -30px;
	left: -30px;
  }
  
  .shape-2 {
	width: 100px;
	height: 100px;
	bottom: -20px;
	right: -20px;
	animation-delay: 2s;
  }
  
  @keyframes float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(10px, 15px); }
  }
  
  /* ======================
	 CONTENT COLUMN (RIGHT)
	 ====================== */
  .about-content {
	padding-left: 30px;
  }
  
  .section-title {
	margin-bottom: 30px;
  }
  
  .section-title .title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #111112;
	margin-bottom: 20px;
	line-height: 1.3;
	position: relative;
  }
  
  .section-title .title:after {
	content: '';
	position: absolute;
	width: 60px;
	height: 4px;
	background: #fff;
	bottom: -15px;
	left: 0;
	border-radius: 2px;
  }
  
  .section-title p {
	color: #070707;
	font-size: 1.1rem;
	line-height: 1.8;
  }
  
  /* Features list */
  .about-features {
	list-style: none;
	padding: 0;
	margin: 25px 0;
  }
  
  .about-features li {
	position: relative;
	padding: 12px 0 12px 35px;
	margin-bottom: 8px;
	color: #eae4e4;
	font-size: 1.05rem;
	font-weight: 500;
  }
  
  .about-features li i {
	color: #edeef4;
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 1.2rem;
  }
  
  /* Highlight box */
  .highlight-box {
	background: rgba(242, 242, 247, 0.05);
	border-left: 4px solid #ecedf0;
	padding: 20px;
	margin: 25px 0;
	border-radius: 0 8px 8px 0;
  }
  
  .highlight-box p {
	margin: 0;
	color: #f1eaea;
	font-size: 1rem;
	line-height: 1.7;
  }
  
  /* Button */
  .btn-primary {
	background: #e0a333;
	color: white;
	padding: 12px 30px;
	border-radius: 50px;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(236, 238, 243, 0.3);
	border: none;
	cursor: pointer;
  }
  
  .btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(234, 189, 84, 0.4);
  }
  
  /* ======================
	 RESPONSIVE ADJUSTMENTS
	 ====================== */
  @media (max-width: 991px) {
	.col-lg-6 {
	  width: 100%;
	}
	
	.about-content {
	  padding-left: 0;
	  padding-top: 50px;
	}
	
	.about-area {
	  padding: 70px 0;
	}
	
	.section-title .title {
	  font-size: 2rem;
	}
	
	.animated-shapes {
	  display: none;
	}
  }
  
  @media (max-width: 767px) {
	.about-features li {
	  font-size: 1rem;
	  padding-left: 30px;
	}
	
	.section-title p,
	.highlight-box p {
	  font-size: 1rem;
	}
  }

  .kid-course-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    border: 3px solid #f0f0f0;
}

.kid-course-card:hover {
    transform: translateY(-10px);
    border-color: #FFD166;
}

.course-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.course-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 10px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.course-content {
    padding: 20px;
}

.course-content .title a {
    color: #333;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

.course-content p {
    color: #666;
    margin: 10px 0;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    font-size: 14px;
}

.course-meta span {
    display: flex;
    align-items: center;
    color: #555;
}

.course-meta i {
    margin-right: 5px;
    color: #4ECDC4;
}

.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

.enroll-btn {
    background: #f89557;
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.enroll-btn:hover {
    background: #f89557;
    transform: scale(1.05);
}

.course-price {
    font-weight: bold;
    color: #333;
    font-size: 18px;
}

/* Ensure equal height for all feature boxes */
.feature-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-content {
    flex: 1;
}

/* Remove margin between boxes */
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* Add subtle separation between boxes */
.feature-item {
    border-right: 1px solid #f0f0f0;
}

.feature-item:last-child {
    border-right: none;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .feature-item {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .feature-item:last-child {
        border-bottom: none;
    }
}

/* Card Image Styling  home*/
.card-img-container {
    overflow: hidden;
    height: 200px; /* Fixed height for consistency */
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintains aspect ratio while covering the area */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

/* Optional hover effect - scales image slightly on hover */
.card:hover .card-img-top {
    transform: scale(1.05);
}

/* Card general styling */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.card-text {
    color: #555;
    margin-bottom: 1rem;
}

.card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1.5rem;
}

/* Section styling */
.class-area {
    background-color: #f9f9f9;
}

.section-title .title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-title p {
    color: #666;
    font-size: 1.1rem;
}
/* contact*/

body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.contact-section {
    background: #fff;
    padding: 50px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-section .form-control {
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.contact-section .form-control:focus {
    border-color: #072c53;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.2);
}

.contact-section textarea.form-control {
    resize: none;
}

.contact-btn .btn {
    background-color: #072648;
    color: white;
    font-size: 18px;
    padding: 12px 30px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

.contact-btn .btn:hover {
    background-color: #0056b3;
}

.contact-page-btn {
	display: inline-block;
	margin-top: 15px;
	padding: 10px 20px;
	background-color: #007bff; /* Blue color (change as needed) */
	color: white !important; /* Ensures white text */
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
	transition: background-color 0.3s;
}
.contact-page-btn:hover {
	background-color: #0056b3; /* Darker blue on hover */
	color: white;
}

footer {
    color: #ffffff;
}

footer h3,
footer h4,
footer h5,
footer p,
footer a,
footer span,
footer li,
footer ul,
footer .footer-widget,
footer .footer-top-content,
footer .footer-contact-item,
footer .copyright-text,
footer .footer-social span {
    color: #ffffff !important;
}

footer a:hover {
    color: #cccccc;
}

.kid-course-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.kid-course-card .course-img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.kid-course-card .course-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.kid-course-card .course-img,
.kid-course-card .course-img img {
    padding: 0;
    margin: 0;
    max-width: 100%;
}
.enroll-btn {
    display: inline-block;
    background-color: #edab47;
    color: #fff;
    font-weight: bold;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(229, 164, 43, 0.4);
}

.enroll-btn:hover {
    background-color: #f0a645;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(255, 59, 46, 0.5);
}
.about-area {
    color: #fff;
}

.about-area .title,
.about-area p,
.about-area li,
.about-area .highlight-box,
.about-area .highlight-box p,
.about-area .about-features li i {
    color: #fff;
}

.about-area .btn-primary {
    background-color: #f4ad44;
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(255, 111, 97, 0.4);
}

.about-area .btn-primary:hover {
    background-color: #f49848;
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(223, 136, 43, 0.5);
}

/*features home*/
.feature-item {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #7e9ace 0%, #819fea 100%);
    color: #fff;
}

.feature-item:hover h3,
.feature-item:hover p {
    color: #fff;
}

.feature-shape img {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.feature-item:hover .feature-shape img {
    transform: rotate(10deg) scale(1.1);
}
/* Style only images and text content without affecting header or footer */
body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    background-color: #fef9f4;
    color: #333;
}

.course-hero.data-hero {
    background: linear-gradient(to right, #ffecd2, #fcb69f);
    text-align: center;
    padding: 50px 20px;
    color: #4a148c;
}

.course-hero h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.course-hero p {
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}

.about-course {
    padding: 30px 20px;
    background-color: #ffffff;
    border-top: 5px solid #ffe0b2;
    border-bottom: 5px solid #ffe0b2;
    text-align: left;
}

.about-course h2 {
    font-size: 28px;
    color: #2e7d32;
    margin-bottom: 15px;
}

.about-course p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

.data-lab {
    background-color: #e3f2fd;
    padding: 30px 20px;
    text-align: center;
}

.data-lab h2 {
    font-size: 26px;
    color: #1976d2;
    margin-bottom: 15px;
}

.data-lab p {
    font-size: 17px;
    margin-bottom: 20px;
    color: #555;
}

.data-tool img {
    max-width: 90%;
    height: auto;
    border: 4px dashed #64b5f6;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.6;
}

.container {
	width: 85%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Hero Section */
.app-dev-hero {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('./assets/bg-img/app-dev-hero.jpg');
	background-size: cover;
	background-position: center;
	padding: 120px 0;
	text-align: center;
	color: white;
}

.app-dev-hero h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.app-dev-hero p {
	font-size: 1.5rem;
	max-width: 800px;
	margin: 0 auto;
}

/* About Course Section */
.about-app-course {
	padding: 80px 0;
	background-color: #f9f9f9;
}

.about-app-course h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.course-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.course-col {
	flex: 1;
	min-width: 300px;
}

.course-col img {
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.course-col img:hover {
	transform: scale(1.02);
}

.feature-box {
	background-color: #e3f2fd;
	padding: 25px;
	border-radius: 10px;
	margin-top: 30px;
	border-left: 5px solid #2196f3;
}

.feature-box h4 {
	color: #0d47a1;
	margin-top: 0;
}

/* Projects Showcase */
.app-projects {
	padding: 80px 0;
	background-color: white;
}

.app-projects h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}

.project-card {
	background: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

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

.project-card h4 {
	padding: 20px;
	margin: 0;
	color: #2c3e50;
}

/* Interactive Demo */
.app-lab {
	padding: 80px 0;
	background-color: #f5f7fa;
}

.app-lab h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 20px;
}

.app-lab p {
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 40px;
	color: #7f8c8d;
}

.simulator-container {
	background: white;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	max-width: 800px;
	margin: 0 auto;
}

.simulator-placeholder {
	background: #eceff1;
	height: 400px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #78909c;
	font-size: 1.2rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.app-dev-hero h1 {
		font-size: 2.2rem;
	}
	
	.app-dev-hero p {
		font-size: 1.2rem;
	}
	
	.course-row {
		flex-direction: column;
	}

}

 /* Hero Section */
 .ai-hero {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('./assets/bg-img/ai-hero.jpg');
	background-size: cover;
	background-position: center;
	padding: 120px 0;
	text-align: center;
	color: white;
}

.ai-hero h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.ai-hero p {
	font-size: 1.5rem;
	max-width: 800px;
	margin: 0 auto;
}

/* About Course Section */
.about-ai-course {
	padding: 80px 0;
	background-color: #f9f9f9;
}

.about-ai-course h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.ai-content {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.ai-text {
	flex: 1;
	min-width: 300px;
}

.ai-visual {
	flex: 1;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ai-visual img {
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.ai-feature {
	background-color: #fff8e1;
	padding: 25px;
	border-radius: 10px;
	margin-top: 30px;
	border-left: 5px solid #ffc107;
}

.ai-feature h4 {
	color: #ff8f00;
	margin-top: 0;
}

/* AI Concepts Section */
.ai-concepts {
	padding: 80px 0;
	background-color: white;
}

.ai-concepts h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.concepts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
}

.concept-card {
	background: white;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	text-align: center;
	transition: transform 0.3s ease;
}

.concept-card:hover {
	transform: translateY(-10px);
}

.concept-icon {
	font-size: 3rem;
	margin-bottom: 20px;
	color: #2196f3;
}

/* Interactive Demo */
.ai-lab {
	padding: 80px 0;
	background-color: #f5f7fa;
}

.ai-lab h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 20px;
}

.ai-lab p {
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 40px;
	color: #7f8c8d;
}

.demo-container {
	background: white;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.demo-placeholder {
	background: #eceff1;
	height: 300px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #78909c;
	font-size: 1.2rem;
	margin-bottom: 20px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.ai-hero h1 {
		font-size: 2.2rem;
	}
	
	.ai-hero p {
		font-size: 1.2rem;
	}
}

/* Hero Section */
.cyber-hero {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('./assets/bg-img/cyber-hero.jpg');
	background-size: cover;
	background-position: center;
	padding: 120px 0;
	text-align: center;
	color: white;
}

.cyber-hero h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.cyber-hero p {
	font-size: 1.5rem;
	max-width: 800px;
	margin: 0 auto;
}

/* About Course Section */
.about-cyber-course {
	padding: 80px 0;
	background-color: #f9f9f9;
}

.about-cyber-course h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.cyber-content {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.cyber-text {
	flex: 1;
	min-width: 300px;
}

.cyber-visual {
	flex: 1;
	min-width: 300px;
}

.cyber-visual img {
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.cyber-feature {
	background-color: #e8f5e9;
	padding: 25px;
	border-radius: 10px;
	margin-top: 30px;
	border-left: 5px solid #4caf50;
}

.cyber-feature h4 {
	color: #2e7d32;
	margin-top: 0;
}

/* Skills Section */
.cyber-skills {
	padding: 80px 0;
	background-color: white;
}

.cyber-skills h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
}

.skill-card {
	background: white;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	border-top: 4px solid #2196f3;
}

.skill-card h3 {
	color: #2196f3;
	margin-top: 0;
}

/* Interactive Demo */
.cyber-lab {
	padding: 80px 0;
	background-color: #f5f7fa;
}

.cyber-lab h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 20px;
}

.cyber-lab p {
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 40px;
	color: #7f8c8d;
}

.cyber-demo {
	background: white;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	max-width: 800px;
	margin: 0 auto;
}

.password-tester {
	background: #f5f5f5;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.password-meter {
	height: 10px;
	background: #e0e0e0;
	border-radius: 5px;
	margin-top: 10px;
	overflow: hidden;
}

.meter-fill {
	height: 100%;
	width: 0%;
	background: #f44336;
	transition: width 0.3s, background 0.3s;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.cyber-hero h1 {
		font-size: 2.2rem;
	}
	
	.cyber-hero p {
		font-size: 1.2rem;
	}
}

.app-projects {
	padding: 80px 0;
	background-color: #f8f9fa;
}

.app-projects h2 {
	text-align: center;
	font-size: 2.5rem;
	color: #2c3e50;
	margin-bottom: 50px;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}

.project-card {
	background: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.project-image-container {
	position: relative;
	width: 100%;
	padding-top: 100%; /* Creates a square container (1:1 aspect ratio) */
	overflow: hidden;
}

.project-image-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.project-card:hover .project-image-container img {
	transform: scale(1.05);
}

.project-card h4 {
	padding: 20px 20px 10px;
	margin: 0;
	color: #2c3e50;
	font-size: 1.3rem;
}

.project-card p {
	padding: 0 20px 20px;
	margin: 0;
	color: #7f8c8d;
	font-size: 0.95rem;
}

@media (max-width: 768px) {
	.projects-grid {
		grid-template-columns: 1fr;
	}
	
	.project-card {
		max-width: 400px;
		margin: 0 auto;
	}
}

/*navbar*/
.menu-item-has-children {
    position: relative;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 180px;
    border: 1px solid #ddd;
    z-index: 1000;
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

.sub-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    background: #fff;
}

.sub-menu li a:hover {
    background-color: #f0f0f0;
}

.feature-shape,
.feature-shape-2,
.feature-shape-3,
.feature-shape-4 {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto !important; /* force horizontal centering */
    background-color: #f0f0f0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    float: none !important;
}
.feature-shape img,
.feature-shape-2 img,
.feature-shape-3 img,
.feature-shape-4 img {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 0 auto !important; /* force image to center */
}

.course-hero.web-hero {
    background-color: #f8f9fa;
    padding: 60px 0;
    text-align: center;
}

.course-hero.web-hero h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
}

.course-hero.web-hero p {
    font-size: 1.2em;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

.about-course, .web-lab {
    padding: 60px 0;
}

.about-course h2, .web-lab h2 {
    text-align: center;
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
}

.about-course p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 30px;
}

.web-lab p {
    font-size: 1.2em;
    color: #555;
    text-align: center;
    margin-bottom: 30px;
}

.web-tool img {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Blog Wrapper */
.blog-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.blog-wrapper .post-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.blog-wrapper .post-item:last-child {
    border: none;
}

/* Blog Image */
.post-thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Blog Content */
.post-meta span {
    font-size: 14px;
    color: #777;
    margin-right: 15px;
}

.post-title {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0;
}

.post-title a {
    color: #222;
    text-decoration: none;
}

.post-text p {
    font-size: 15px;
    color: #555;
}

.read-more a.thm-btn {
    display: inline-block;
    padding: 8px 18px;
    background-color: #e3af46;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more a.thm-btn:hover {
    background-color: #f1ba5b;
}

/* Contact Form Styles */
.contact-form-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.contact-form-box h3 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #333;
}

.contact-form-box input,
.contact-form-box textarea {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
}

.contact-form-box button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.contact-form-box button:hover {
    background-color: #0056b3;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-form-box {
        margin-top: 40px;
    }
}


/* Base Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding: 0 15px;
}

.col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
}

/* Blog Content Area */
.blog-content-area {
    background-color: #fff;
}

.post-details {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}

.post-content {
    padding: 30px;
}

.post-meta {
    margin-bottom: 20px;
}

.post-meta span {
    margin-right: 15px;
    font-size: 14px;
    color: #666;
}

.post-meta span a {
    color: #666;
    text-decoration: none;
}

.post-meta span a:hover {
    color: #4a6ee0;
}

.post-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #222;
}

.post-content p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #555;
}

/* Blog Images */
.blog-inner-img {
    margin: 30px 0;
}

.blog-inner-img img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Tags and Share */
.post-tag-wrapper {
    padding-top: 25px;
    margin-top: 30px;
    border-top: 1px solid #eee;
}

.single-post-tag a {
    display: inline-block;
    padding: 5px 12px;
    background: #f3f5ff;
    color: #4a6ee0;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    text-decoration: none;
}

.single-post-tag a:hover {
    background: #4a6ee0;
    color: #fff;
}

.blog-share-icon a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #f3f5ff;
    color: #4a6ee0;
    border-radius: 50%;
    margin-left: 8px;
}

.blog-share-icon a:hover {
    background: #4a6ee0;
    color: #fff;
}

/* Contact Form */
.conatct-post-form input,
.conatct-post-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.conatct-post-form textarea {
    height: 150px;
    resize: vertical;
}

.thm-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #eab251;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thm-btn:hover {
    background: #e9cf68;
}

/* Sidebar */
.blog-sidebar {
    position: sticky;
    top: 20px;
}

.widget {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
    margin-bottom: 30px;
}

.widget-header {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    color: #222;
}

.widget-post {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-post li {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.widget-post li:last-child {
    border-bottom: none;
}

.widget-post-thumb {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
}

.widget-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.widget-post-content {
    width: calc(100% - 100px);
    padding-left: 15px;
}

.widget-post-content h5 {
    font-size: 16px;
    margin-bottom: 5px;
}

.widget-post-content h5 a {
    color: #222;
    text-decoration: none;
}

.widget-post-content h5 a:hover {
    color: #4a6ee0;
}

.widget-post-content span {
    font-size: 13px;
    color: #666;
}

.about-widget p {
    margin-bottom: 15px;
    font-size: 15px;
    color: #555;
}

.about-social a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #f3f5ff;
    color: #4a6ee0;
    border-radius: 50%;
    margin-right: 8px;
}

.about-social a:hover {
    background: #4a6ee0;
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .col-lg-8, .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .blog-sidebar {
        margin-top: 40px;
    }
}

 /* 404 Page Specific Styles */
 .error-page {
	text-align: center;
	padding: 80px 0;
	background-color: #f9f9ff;
}

.error-content {
	max-width: 600px;
	margin: 0 auto;
}

.error-code {
	font-size: 120px;
	font-weight: 700;
	color: #4a6ee0;
	line-height: 1;
	margin-bottom: 20px;
}

.error-title {
	font-size: 36px;
	margin-bottom: 20px;
	color: #222;
}

.error-text {
	font-size: 18px;
	color: #555;
	margin-bottom: 30px;
}

.error-image {
	max-width: 400px;
	margin: 40px auto;
}

.error-btn {
	display: inline-block;
	padding: 15px 35px;
	background: #4a6ee0;
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 2px solid #4a6ee0;
}

.error-btn:hover {
	background: transparent;
	color: #4a6ee0;
}

@media (max-width: 767px) {
	.error-code {
		font-size: 80px;
	}
	
	.error-title {
		font-size: 28px;
	}
}

/* Thank You Page Specific Styles */
.thank-you-section {
	text-align: center;
	padding: 100px 0;
	background-color: #f9f9ff;
}

.thank-you-content {
	max-width: 600px;
	margin: 0 auto;
	padding: 40px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.thank-you-icon {
	font-size: 80px;
	color: #4CAF50;
	margin-bottom: 20px;
}

.thank-you-title {
	font-size: 36px;
	margin-bottom: 20px;
	color: #222;
}

.thank-you-text {
	font-size: 18px;
	color: #555;
	margin-bottom: 30px;
}

.thank-you-image {
	max-width: 300px;
	margin: 30px auto;
}

.thank-you-btn {
	display: inline-block;
	padding: 15px 35px;
	background: #4a6ee0;
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 2px solid #4a6ee0;
	margin: 10px;

}

.thank-you-btn:hover {
	background: transparent;
	color: #4a6ee0;
}

.thank-you-btn.secondary {
	background: #f3f5ff;
	color: #4a6ee0;
	border-color: #f3f5ff;
}

.thank-you-btn.secondary:hover {
	background: transparent;
	border-color: #4a6ee0;
}

@media (max-width: 767px) {
	.thank-you-content {
		padding: 30px 20px;
	}
	
	.thank-you-title {
		font-size: 28px;
	}
}

/* Main menu styling */
.menu-item-has-children {
    position: relative;
    display: inline-block;
}

.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.menu-item-has-children > a:hover {
    color: #3498db;
    background-color: #f8f9fa;
}

/* Dropdown menu styling */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 10px 0;
    margin-top: 5px;
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li {
    display: block;
    margin: 0;
}

.sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sub-menu li a:hover {
    background-color: #f8f9fa;
    color: #3498db;
    border-left: 3px solid #3498db;
    padding-left: 17px;
}

/* Dropdown arrow - aligned naturally with text */


.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

.blog-sidebar {
    position: sticky;
    top: 80px; /* Adjust this value */
    align-self: flex-start; /* Ensures proper alignment */
    margin-top: 20px; /* Optional: adds some spacing from top */
}

.app-lab {
	padding: 80px 0;
	background-color: #f9fafc;
}

.simulator-container {
	margin-top: 30px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	overflow: hidden;
}

.simulator-workspace {
	display: flex;
	min-height: 500px;
}

.blocks-panel {
	width: 250px;
	background: #f8f9fa;
	padding: 20px;
	border-right: 1px solid #eaeaea;
}

.block {
	background: white;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 15px;
	cursor: grab;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	border-left: 4px solid;
	transition: all 0.2s ease;
}

.block:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.block-logic { border-color: #ff6b6b; }
.block-ui { border-color: #4a6bff; }
.block-data { border-color: #1dd1a1; }
.block-event { border-color: #feca57; }

.canvas {
	flex-grow: 1;
	padding: 25px;
	position: relative;
}

.drop-zone {
	border: 2px dashed #ddd;
	border-radius: 8px;
	min-height: 150px;
	margin-bottom: 25px;
	padding: 20px;
	background: #f8f9fa;
	transition: all 0.3s;
}

.drop-zone.highlight {
	background: #edf2ff;
	border-color: #4a6bff;
}

.block.dragging {
	opacity: 0.9;
	transform: scale(1.02);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.output {
	background: #81add9;
	color: white;
	padding: 20px;
	border-radius: 8px;
	font-family: 'Courier New', monospace;
	min-height: 80px;
}

@media (max-width: 768px) {
	.simulator-workspace {
		flex-direction: column;
	}
	
	.blocks-panel {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #eaeaea;
	}
}

@keyframes float {
	0% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-20px) rotate(5deg); }
	100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes twinkle {
	0% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
	100% { opacity: 0.3; transform: scale(0.8); }
}

@keyframes pulse {
	0% { transform: scale(1); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
	50% { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
	100% { transform: scale(1); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

.notify-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.social-icons a:hover {
	transform: translateY(-5px) scale(1.2);
}


/* CSS for Bounce-In Effect */
.thm-btn {
    animation: bounceIn 1s ease-out;
    transform-origin: center bottom;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}