/*****************************************
Table Of Contents:

01. General Styles
02. Preloader
03. Navigation
04. Header
05. Registration
06. Partners
07. Instructor
08. Description
09. Students
10. Details Lightbox
11. Video
12. Takeaways
13. Testimonials
14. Date
15. Newsletter
16. Contact
17. Footer
18. Copyright
19. Back To Top Button
20. Extra Pages
21. Media Queries
22. Achievements
23. Gallery
24. Milstones
******************************************/

/*****************************************
Colors:
- Backgrounds - light gray #fbf9f5
- Backgrounds, buttons - yellow #33CC33
- Headings text, navbar links - black #333
- Body text - dark gray #555
******************************************/


/******************************/
/*     01. General Styles     */
/******************************/
body,
html {
    width: 100%;
	height: 100%;
}

body, p {
	color: #555; 
	font: 400 1rem/1.625rem "Montserrat", sans-serif;
}

.p-large {
	font: 400 1.125rem/1.75rem "Montserrat", sans-serif;
}

.p-small {
	font: 400 0.875rem/1.5rem "Montserrat", sans-serif;
}

.p-heading {
	margin-bottom: 3.75rem;
}

h1 {
	color: #333;
	font: 700 2.75rem/3.375rem "Montserrat", sans-serif;
}

h2 {
	color: #333;
	font: 700 2.25rem/2.875rem "Montserrat", sans-serif;
}

h3 {
	color: #333;
	font: 700 1.625rem/2.125rem "Montserrat", sans-serif;
}

h4 {
	color: #333;
	font: 700 1.25rem/1.875rem "Montserrat", sans-serif;
}

h5 {
	color: #333;
	font: 700 1.125rem/1.75rem "Montserrat", sans-serif;
}

h6 {
	color: #333;
	font: 700 1rem/1.625rem "Montserrat", sans-serif;
}

.testimonial-text {
	font-style: italic;
}

.testimonial-author {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.625rem;
}

.li-space-lg li {
	margin-bottom: 0.375rem;
}

.indent {
	padding-left: 1.25rem;
}

a {
	color: #555;
	text-decoration: underline;
}

a:hover {
	color: #555;
	text-decoration: underline;
}

.white {
	color: #eee;
}

.btn-solid-reg {
	display: inline-block;
	padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
	border: 0.125rem solid #33CC33;
	border-radius: 2rem;
	background-color: #33CC33;
	color: #333;
	font: 600 0.875rem/0 "Montserrat", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-reg:hover {
	border: 0.125rem solid #333;
	background-color: transparent;
	color: #333;
	text-decoration: none;
}

.btn-solid-lg {
	display: inline-block;
	padding: 1.375rem 2.625rem 1.375rem 2.625rem;
	border: 0.125rem solid #33CC33;
	border-radius: 2rem;
	background-color: #33CC33;
	color: #333;
	font: 600 0.875rem/0 "Montserrat", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-lg:hover {
	border: 0.125rem solid #333;
	background-color: transparent;
	color: #333;
	text-decoration: none;
}

.btn-outline-reg {
	display: inline-block;
	padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
	border: 0.125rem solid #333;
	border-radius: 2rem;
	background-color: transparent;
	color: #333;
	font: 600 0.875rem/0 "Montserrat", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-reg:hover {
	border: 0.125rem solid #33CC33;
	background-color: #33CC33;
	color: #333;
	text-decoration: none;
}

.btn-outline-lg {
	display: inline-block;
	padding: 1.375rem 2.625rem 1.375rem 2.625rem;
	border: 0.125rem solid #333;
	border-radius: 2rem;
	background-color: transparent;
	color: #333;
	font: 600 0.875rem/0 "Montserrat", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-lg:hover {
	border: 0.125rem solid #33CC33;
	background-color: #33CC33;
	color: #333;
	text-decoration: none;
}

.btn-outline-sm {
	display: inline-block;
	padding: 1rem 1.625rem 0.875rem 1.625rem;
	border: 0.125rem solid #333;
	border-radius: 2rem;
	background-color: transparent;
	color: #333;
	font: 600 0.875rem/0 "Montserrat", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-sm:hover {
	border: 0.125rem solid #33CC33;
	background-color: #33CC33;
	color: #333;
	text-decoration: none;
}

.form-group {
	position: relative;
	margin-bottom: 1.25rem;
}

.form-group.has-error.has-danger {
	margin-bottom: 0.625rem;
}

.form-group.has-error.has-danger .help-block.with-errors ul {
	margin-top: 0.375rem;
}

.label-control {
	position: absolute;
	top: 0.87rem;
	left: 1.375rem;
	color: #555;
	opacity: 1;
	font: 400 0.875rem/1.375rem "Montserrat", sans-serif;
	cursor: text;
	transition: all 0.2s ease;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.label-control {
		top: 0.9375rem;
	}
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
	top: 0.125rem;
	opacity: 1;
	font-size: 0.75rem;
	font-weight: 700;
}

.form-control-input,
.form-control-select {
	display: block; /* needed for proper display of the label in Firefox, IE, Edge */
	width: 100%;
	padding-top: 1.0625rem;
	padding-bottom: 0.0625rem;
	padding-left: 1.3125rem;
	border: 1px solid #c4d8dc;
	border-radius: 0.25rem;
	background-color: #fff;
	color: #555;
	font: 400 0.875rem/1.875rem "Montserrat", sans-serif;
	transition: all 0.2s;
	-webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

.form-control-select {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	height: 3rem;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.form-control-input {
		padding-top: 1.25rem;
		padding-bottom: 0.75rem;
		line-height: 1.75rem;
	}

	.form-control-select {
		padding-top: 0.875rem;
		padding-bottom: 0.75rem;
		height: 3.125rem;
		line-height: 2.125rem;
	}
}

select {
    /* you should keep these first rules in place to maintain cross-browser behavior */
    -webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('../images/down-arrow.png');
    background-position: 96% 50%;
    background-repeat: no-repeat;
    outline: none;
}

select::-ms-expand {
    display: none; /* removes the ugly default down arrow on select form field in IE11 */
}

.form-control-textarea {
	display: block; /* used to eliminate a bottom gap difference between Chrome and IE/FF */
	width: 100%;
	height: 8rem; /* used instead of html rows to normalize height between Chrome and IE/FF */
	padding-top: 1.25rem;
	padding-left: 1.3125rem;
	border: 1px solid #c4d8dc;
	border-radius: 0.25rem;
	background-color: #fff;
	color: #555;
	font: 400 0.875rem/1.75rem "Montserrat", sans-serif;
	transition: all 0.2s;
}

.form-control-input:focus,
.form-control-select:focus,
.form-control-textarea:focus {
	border: 1px solid #a1a1a1;
	outline: none; /* Removes blue border on focus */
}

.form-control-input:hover,
.form-control-select:hover,
.form-control-textarea:hover {
	border: 1px solid #a1a1a1;
}

.checkbox {
	font-size: 0.75rem;
	line-height: 1.25rem;
}

input[type='checkbox'] {
	vertical-align: -15%;
	margin-right: 0.375rem;
}

/* IE10+ hack to raise checkbox field position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	input[type='checkbox'] {
		vertical-align: -9%;
	}
}

.form-control-submit-button {
	display: inline-block;
	width: 100%;
	height: 3.125rem;
	border: 0.125rem solid #33CC33;
	border-radius: 1.5rem;
	background-color: #33CC33;
	color: #333;
	font: 600 0.875rem/0 "Montserrat", sans-serif;
	cursor: pointer;
	transition: all 0.2s;
}

.form-control-submit-button:hover {
	border: 0.125rem solid #333;
	background-color: transparent;
	color: #333;
}

/* Form Success And Error Message Formatting */
#rmsgSubmit.h3.text-center.tada.animated,
#nmsgSubmit.h3.text-center.tada.animated,
#cmsgSubmit.h3.text-center.tada.animated,
#pmsgSubmit.h3.text-center.tada.animated,
#rmsgSubmit.h3.text-center,
#nmsgSubmit.h3.text-center,
#cmsgSubmit.h3.text-center,
#pmsgSubmit.h3.text-center {
	display: block;
	margin-bottom: 0;
	color: #333;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1rem;
}

.help-block.with-errors .list-unstyled {
	font-size: 0.75rem;
	line-height: 1.125rem;
	text-align: left;
}

.help-block.with-errors ul {
	margin-bottom: 0;
}
/* end of form success and error message formatting */

/* Form Success And Error Message Animation - Animate.css */
@-webkit-keyframes tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada;
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/* end of form success and error message animation - Animate.css */

/* Fade-move Animation For Details Lightbox - Magnific Popup */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	transition: all 0.2s ease-out;
	-webkit-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
	-ms-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
	transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective(37.5rem) rotateX(0); 
	-ms-transform: translateY(0) perspective(37.5rem) rotateX(0); 
	transform: translateY(0) perspective(37.5rem) rotateX(0); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;
	-webkit-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
	-ms-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
	transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
}

/* dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}
/* end of fade-move animation for details lightbox - magnific popup */

/* Fade Animation For Image Lightbox - Magnific Popup */
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

.fadeIn {
	-webkit-animation: fadeIn 0.6s;
	animation: fadeIn 0.6s;
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

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

.fadeOut {
	-webkit-animation: fadeOut 0.8s;
	animation: fadeOut 0.8s;
}
/* end of fade animation for details lightbox - magnific popup */


/*************************/
/*     02. Preloader     */
/*************************/
.spinner-wrapper {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fbf9f5;
}

.spinner {
	position: absolute;
	top: 50%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	width: 3.75rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */ 
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background-color: #33CC33;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/**************************/
/*     03. Navigation     */
/**************************/
.navbar-custom {
	z-index: 2000;
	background-color: #fff;
	box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.04);
	font: 600 1rem/1rem "Montserrat", sans-serif;; /*0.875rem/0.875rem "Montserrat", sans-serif;*/
	transition: all 0.2s;
}

.navbar-custom .navbar-brand.logo-image img {
    width: 16rem;/*6.5625rem;*/
	height: 3.5rem;/*1.875rem;*/
}

.navbar-custom .navbar-brand.logo-text {
	font: italic 600 2rem/1.5rem "Montserrat", sans-serif;
	color: #33CC33;
	text-decoration: none;
}

.navbar-custom .navbar-nav {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.navbar-custom .nav-item .nav-link {
	padding: 0.625rem 0.75rem;
	color: #333;
	text-decoration: none;
	transition: all 0.2s ease;
}

.navbar-custom .nav-item .nav-link:hover,
.navbar-custom .nav-link:focus,
.navbar-custom .nav-item .nav-link.active {
	color:#33CC33;
}


/* Highlight active nav links in green */
.navbar-custom .nav-link.active,
.navbar-custom .dropdown-item.active {
    color: #33cc33 !important;
}

/* Submenu item active */
.navbar-custom .dropdown-item.active {
    color: #33cc33 !important;
    font-weight: bold;
}

/* Parent dropdown also green when child is active */
.navbar-custom .nav-item.dropdown.active > .nav-link {
    color: #33cc33 !important;
}


/* Dropdown Menu */
.navbar-custom .dropdown:hover > .dropdown-menu {
	display: block; /* this makes the dropdown menu stay open while hovering it */
	min-width: auto;
	animation: fadeDropdown 0.2s; /* required for the fade animation */
}

@keyframes fadeDropdown {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.navbar-custom .dropdown-toggle:focus { /* removes dropdown outline on focus */
	outline: 0;
}

.navbar-custom .dropdown-menu {
	margin-top: 0;
	border: none;
	border-radius: 0.25rem;
	background-color: #fff;
}

.navbar-custom .dropdown-item {
	color: #333;
	text-decoration: none;
}

.navbar-custom .dropdown-item:hover {
	background-color: #fff;
}

.navbar-custom .dropdown-item .item-text {
	font: 600 1rem/1rem "Montserrat", sans-serif; /*0.875rem/0.875rem "Montserrat", sans-serif;*/
}

.navbar-custom .dropdown-item:hover .item-text {
	color: #33CC33;
}

.navbar-custom .dropdown-divider {
	width: 100%;
	height: 1px;
	margin: 0.75rem auto 0.725rem auto;
	border: none;
	background-color: #c4d8dc;
	opacity: 0.2;
}
/* end of dropdown menu */

.navbar-custom .social-icons {
	display: none;
}

.navbar-custom .navbar-toggler {
	padding: 0;
	border: none;
	color: #333;
	font-size: 2rem;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-times{
	display: none;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-bars{
	display: inline-block;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-bars{
	display: none;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-times{
	display: inline-block;
	margin-right: 0.125rem;
}


/*********************/
/*    04. Header     */
/*********************/
.header {
	position: relative;
	padding-top: 8rem;
	padding-bottom: 40%;
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/header-background.jpg') center center no-repeat;
	background-size: cover;
	text-align: center;
}

.header .countdown {
	margin-bottom: 0.5rem;
	color: #fff;
	text-align: center;
}

.header .countdown #clock .counter-number {
	display: inline-block;
	width: 6.5rem;
	height: 6.5rem;
	margin-right: 0.5rem;
	margin-bottom: 1.25rem;
	margin-left: 0.5rem;
	padding-top: 2rem;
	border: 0.125rem solid #fff;
	border-radius: 50%;
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 1.25rem;
	text-align: center;
}

.header .countdown #clock .counter-number .timer-text {
	font-size: 0.75rem;
	line-height: 1rem;
	text-align: center;
}

.header h1 {
	margin-bottom: 0.75rem;
	color: #eee;
}

.header .p-large {
	margin-bottom: 1.75rem;
	color: #ddd;
}

.header .btn-solid-lg {
	margin-right: 0.5rem;
	margin-bottom: 1.125rem;
	margin-left: 0.5rem;
}

.header .btn-solid-lg:hover {
	border: 0.125rem solid #33CC33;
	color: #33CC33;
}

.header .btn-outline-lg {
	border: 0.125rem solid #fff;
	color: #fff;
}

.header .btn-outline-lg:hover {
	background-color: #fff;
	color: #333;
}

.header .outer-container {
	position: absolute;
	right: 0;
	bottom: -2rem;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

.header .slider-container {
	position: relative;
}

.header .swiper-container {
	position: static;
	width: 80%;
	border-radius: 0.75rem;
}

.header .swiper-container img {
	border-radius: 0.75rem;
}

.header .swiper-button-prev:focus,
.header .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.header .swiper-button-prev {
	left: 0.25rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.header .swiper-button-next {
	right: 0.25rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}


/****************************/
/*     05. Registration     */
/****************************/
.form-1 {
	padding-top: 6rem;
	padding-bottom: 6.25rem;
	background-color: #33CC33;
}

.form-1 h2 {
	margin-bottom: 1.25rem;
}

.form-1 p,
.form-1 .list-unstyled,
.form-1 .help-block,
.form-1 .checkbox,
.form-1 .checkbox a {
	color: #333;
}

.form-1 p {
	margin-bottom: 1.5rem;
}

.form-1 .list-unstyled .fas {
	color: #333;
	font-size: 0.5rem;
	line-height: 1.5rem;
}

.form-1 .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.form-1 .form-control-input {
	border: 1px solid #ffedd0;
	background-color: #ffedd0;
}

.form-1 .form-control-input:hover {
	border: 1px solid #fff;
}

.form-1 .form-control-submit-button {
	border: 0.125rem solid #333;
	background-color: transparent;
}

.form-1 .form-control-submit-button:hover {
	border: 0.125rem solid #ffedd0;
	background-color: #ffedd0;
}


/************************/
/*     06. Partners     */
/************************/
.slider-1 {
	padding-top: 3.5rem;
	padding-bottom: 3rem;
	background-color: #fbf9f5;
	text-align: center;
}

.slider-1 .p-small {
	color: #797fa7;
}

.slider-1 .slider-container {
	margin-right: 1.5rem;
	margin-left: 1.5rem;
}


/**************************/
/*     07. Instructor     */
/**************************/
.basic-1 {
	padding-top: 3.75rem;
	padding-bottom: 3.5rem;
	background-color: #fbf9f5;
}

.basic-1 h2 {
	margin-bottom: 1.25rem;
}

.basic-1 img {
	margin-bottom: 2.5rem;
	border-radius: 0.25rem;
}


/***************************/
/*     08. Description     */
/***************************/
.basic-2 {
	padding-top: 3.5rem;
	padding-bottom: 2.75rem;
	background-color: #fbf9f5;
}

.basic-2 h2 {
	margin-bottom: 3.75rem;
	text-align: center;
}

.basic-2 .li-space-lg li {
	margin-bottom: 1.375rem;
}

.basic-2 .list-unstyled .bullet {
	margin-right: 0.625rem;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background-color: #33CC33;
	color: #333;
	font-style: normal;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 2rem;
	text-align: center;
}


/************************/
/*     09. Students     */
/************************/
.basic-3 {
	padding-top: 2.75rem;
	padding-bottom: 4rem;
	background-color: #fbf9f5;
}

.basic-3 .text-container {
	margin-bottom: 3.5rem;
}

.basic-3 h2 {
	margin-bottom: 1.25rem;
}

.basic-3 p {
	margin-bottom: 1.375rem;
}

.basic-3 img {
	border-radius: 0.25rem;
}


/********************************/
/*     10. Details Lightbox     */
/********************************/
.lightbox-basic {
	margin: 2.5rem auto;
	padding: 2rem 1.5rem 2rem 1.5rem;
	border-radius: 0.25rem;
	background: #fbf9f5;
	text-align: left;
}

.lightbox-basic .container {
	padding-right: 0;
	padding-left: 0;
}

.lightbox-basic .image-container {
	max-width: 33.75rem;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
}

.lightbox-basic .image-container img {
	border-radius: 0.25rem;
}

.lightbox-basic h3 {
	margin-bottom: 0.5rem;
}

.lightbox-basic hr {
	width: 2.5rem;
	height: 0.125rem;
	margin-top: 0;
	margin-bottom: 0.875rem;
	margin-left: 0;
	border: 0;
	background-color: #555;
	text-align: left;
}

.lightbox-basic h4 {
	margin-bottom: 1rem;
}

.lightbox-basic .list-unstyled .fas {
	color: #555;
	font-size: 0.5rem;
	line-height: 1.5rem;
}

.lightbox-basic .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.lightbox-basic .btn-outline-reg,
.lightbox-basic .btn-solid-reg {
	margin-top: 0.75rem;
}

/* Signup Button */
.lightbox-basic .btn-solid-reg.mfp-close {
	position: relative;
	width: auto;
	height: auto;
	color: #333;
	opacity: 1;
}

.lightbox-basic .btn-solid-reg.mfp-close:hover {
	color: #333;
}
/* end of signup Button */

/* Back Button */
.lightbox-basic a.mfp-close.as-button {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0.375rem;
	color: #333;
	opacity: 1;
}

.lightbox-basic a.mfp-close.as-button:hover {
	color: #333;
}
/* end of back button */

.lightbox-basic button.mfp-close.x-button {
	position: absolute;
	top: -0.125rem;
	right: -0.125rem;
	width: 2.75rem;
	height: 2.75rem;
	color: #707984;
}


/*********************/
/*     11. Video     */
/*********************/
.basic-4 {
	padding-top: 4rem;
	padding-bottom: 3rem;
	background-color: #fbf9f5;
}

.basic-4 h2 {
	margin-bottom: 2.75rem;
	text-align: center;
}

.basic-4 .image-container {
	margin-bottom: 2rem;
}

.basic-4 .image-container img {
	border-radius: 0.75rem;
}

.basic-4 .video-wrapper {
	position: relative;
}

/* Video Play Button */
.basic-4 .video-play-button {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	display: block;
	box-sizing: content-box;
	width: 2rem;
	height: 2.75rem;
	padding: 1.125rem 1.25rem 1.125rem 1.75rem;
	border-radius: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-4 .video-play-button:before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	display: block;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background: #33CC33;
	animation: pulse-border 1500ms ease-out infinite;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-4 .video-play-button:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: block;
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
	background: #33CC33;
	transition: all 200ms;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-4 .video-play-button span {
	position: relative;
	display: block;
	z-index: 3;
	top: 0.375rem;
	left: 0.25rem;
	width: 0;
	height: 0;
	border-left: 1.625rem solid #fff;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
}
  
/* Star inside button */
.basic-4 .video-play-button .star span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	background: #fff;
	clip-path: polygon(
		50% 0%, 61% 35%, 98% 35%, 
		68% 57%, 79% 91%, 50% 70%, 
		21% 91%, 32% 57%, 2% 35%, 39% 35%
	);
	transform: translate(-50%, -50%);
	z-index: 3;

	/* Rotation animation */
	animation: spinStar 8s linear infinite;
}

@keyframes spinStar {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes pulse-border {
	0% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}
/* end of video play button */


/*************************/
/*     12. Takeaways     */
/*************************/
.cards {
	padding-top: 3rem;
	padding-bottom: 2rem;
	background-color: #fbf9f5;
}

.cards h2 {
	margin-bottom: 1rem;
	text-align: center;
}

.cards p {
	text-align: center;
}

.cards .card {
	max-width: 21rem;
	margin-right: auto;
	margin-bottom: 4rem;
	margin-left: auto;
	padding: 3rem 1.625rem 1.75rem 1.625rem;
	border: none;
	background-color: #fff;
	text-align: center;
}

.cards .card-image {
	width: 6rem;
	height: 6rem;
	margin-right: auto;
	margin-bottom: 1.5rem;
	margin-left: auto;
	border-radius: 50%;
	background-color: #fbf9f5;
}

.cards .fas,
.cards .far {
	color: #33CC33;
	font-size: 3rem;
	line-height: 6rem;
}

.cards .card-body {
	padding: 0;
}

.cards .card-title {
	margin-bottom: 0.5rem;
}


/****************************/
/*     13. Testimonials     */
/****************************/
.slider-2 {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
	background-color: #fbf9f5;
}

.slider-2 h3 {
	margin-bottom: 3.75rem;
	text-align: center;
}

.slider-2 .slider-container {
	position: relative;
}

.slider-2 .swiper-container {
	position: static;
	width: 88%;
	text-align: center;
}

.slider-2 .image-wrapper {
	width: 6rem;
	margin-right: auto;
	margin-bottom: 1.5rem;
	margin-left: auto;
}

.slider-2 .image-wrapper img {
	border-radius: 0.25rem;
}

.slider-2 .testimonial-text {
	margin-bottom: 0.5rem;
}

.slider-2 .testimonial-author {
	color: #333;
}

.slider-2 .swiper-button-prev,
.slider-2 .swiper-button-next {
	width: 1.125rem;
}

.slider-2 .swiper-button-prev:focus,
.slider-2 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-2 .swiper-button-prev {
	left: -0.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.slider-2 .swiper-button-next {
	right: -0.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}


/********************/
/*     14. Date     */
/********************/
.basic-5 {
	background-color: #fbf9f5;
}

.basic-5 .text-container {
	padding-top: 6rem;
	padding-bottom: 6.125rem;
	border-radius: 0.75rem;
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/date-background.jpg') center center no-repeat;
	background-size: cover;
	text-align: center;
}

.basic-5 h2 {
	width: 90%;
	margin-right: auto;
	margin-bottom: 2rem;
	margin-left: auto;
	color: #eee;
}

.basic-5 p {
	width: 88%;
	margin-right: auto;
	margin-bottom: 1.75rem;
	margin-left: auto;
	color: #ddd;
}

.basic-5 .btn-solid-lg:hover {
	border: 0.125rem solid #fff;
	color: #fff;
}


/**************************/
/*     15. Newsletter     */
/**************************/
.form-2 {
	padding-top: 8.125rem;
	padding-bottom: 5.75rem;
	background-color: #fbf9f5;
}

.form-2 h3 {
	margin-bottom: 3.25rem;
	text-align: center;
}

.form-2 form {
	margin-bottom: 3rem;
}

.form-2 .icon-container {
	text-align: center;
}

.form-2 .fa-stack {
	width: 2em;
	margin-bottom: 0.75rem;
	margin-right: 0.375rem;
	font-size: 1.5rem;
}

.form-2 .fa-stack .fa-stack-1x {
    color: #333;
	transition: all 0.2s ease;
}

.form-2 .fa-stack .fa-stack-2x {
	color: #33CC33;
	transition: all 0.2s ease;
}

.form-2 .fa-stack:hover .fa-stack-1x {
	color: #33CC33;
}

.form-2 .fa-stack:hover .fa-stack-2x {
    color: #333;
}


/***********************/
/*     16. Contact     */
/***********************/
.form-3 {
	padding-top: 6.125rem;
	padding-bottom: 5.125rem;
	background-color: #33CC33;
}

.form-3 .text-container {
	margin-bottom: 3rem;
}

.form-3 h2 {
	margin-bottom: 1.125rem;
}

.form-3 p {
	color: #333;
	margin-bottom: 2rem;
}

.form-3 h3 {
	margin-bottom: 0.875rem;
}

.form-3 .list-unstyled,
.form-3 .list-unstyled a {
	color: #333;
}

.form-3 .list-unstyled .fas {
	color: #333;
	font-size: 1rem;
	line-height: 1.625rem;
}

.form-3 .list-unstyled .media-body {
	margin-left: 0.75rem;
}

.form-3 .list-unstyled .media-body .fas.fa-globe {
	margin-left: 1.125rem;
	margin-right: 0.75rem;
}

.form-3 .form-control-input,
.form-3 .form-control-textarea {
	border: 1px solid #ffedd0;
	background-color: #ffedd0;
}

.form-3 .form-control-input:hover,
.form-3 .form-control-textarea:hover {
	border: 1px solid #fff;
}

.form-3 .help-block,
.form-3 .checkbox,
.form-3 .checkbox a {
	color: #333;
}

.form-3 .form-control-submit-button {
	border: 0.125rem solid #333;
	background-color: transparent;
}

.form-3 .form-control-submit-button:hover {
	border: 0.125rem solid #ffedd0;
	background-color: #ffedd0;
}


/**********************/
/*     17. Footer     */
/**********************/
.footer {
	padding-top: 4.75rem;
	padding-bottom: 2rem;
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/header-background.jpg') center center no-repeat;
	background-size: cover;
}

.footer .footer-col {
	margin-bottom: 2.25rem;
}

.footer h5 {
	margin-bottom: 0.5rem;
}

.footer a { 
	text-decoration: none;
}

.footer h5,
.footer p,
.footer a {
	color: #bbb;
}

.footer .list-unstyled .fas {
	color: #bbb;
	font-size: 0.5rem;
	line-height: 1.375rem;
}

.footer .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.footer .fab {
	margin-bottom: 0.75rem;
	margin-right: 1rem;
	color: #ccc;
	font-size: 1.25rem;
	transition: all 0.2s ease;
}

.footer .fab:hover {
	color: #33CC33;
}


/*************************/
/*     18. Copyright     */
/*************************/
.copyright {
	padding-top: 1.5rem;
	padding-bottom: 0.375rem;
	background-color: #000;
	text-align: center;
}

.copyright .p-small {
	color: #999;
	font-size: 0.75rem;
	line-height: 1.375rem;
}

.copyright a {
	color: #999;
}


/**********************************/
/*     19. Back To Top Button     */
/**********************************/
a.back-to-top {
	position: fixed;
	z-index: 999;
	right: 0.75rem;
	bottom: 0.75rem;
	display: none;
	width: 2.625rem;
	height: 2.625rem;
	border-radius: 1.875rem;
	background: #33CC33 url("../images/up-arrow.png") no-repeat center 47%;
	background-size: 1.125rem 1.125rem;
	text-indent: -9999px;
}

a:hover.back-to-top {
	background-color:  #33CC33
}


/***************************/
/*     20. Extra Pages     */
/***************************/
.ex-header {
	padding-top: 8rem;
	padding-bottom: 5rem;
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/header-background.jpg') center center no-repeat;
	background-size: cover;
	text-align: center;
}

.ex-basic-1 {
	padding-top: 2rem;
	padding-bottom: 0.875rem;
	background-color: #efebe5;
}

.ex-basic-1 .breadcrumbs {
	margin-bottom: 1.125rem;
}

.ex-basic-1 .breadcrumbs .fa {
	margin-right: 0.5rem;
	margin-left: 0.625rem;
	font-size: 0.875rem;
}

.ex-basic-2 {
	padding-top: 4.75rem;
	padding-bottom: 4rem;
	background-color: #fbf9f5;
}

.ex-basic-2 h3 {
	margin-bottom: 1rem;
}

.ex-basic-2 .text-container {
	margin-bottom: 3.625rem;
}

.ex-basic-2 .text-container.last {
	margin-bottom: 0;
}

.ex-basic-2 .text-container.dark {
	padding: 1.625rem 1.5rem 0.75rem 2rem;
	background-color: #efebe5;
}

.ex-basic-2 .image-container-large {
	margin-bottom: 4rem;
}

.ex-basic-2 .image-container-large img {
	border-radius: 0.375rem;
}

.ex-basic-2 .image-container-small img {
	border-radius: 0.375rem;
}

.ex-basic-2 .list-unstyled .fas {
	color: #33CC33;
	font-size: 0.5rem;
	line-height: 1.5rem;
}

.ex-basic-2 .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.ex-basic-2 .form-container {
	margin-top: 3rem;
}

.ex-basic-2 .btn-solid-reg {
	margin-top: 1.5rem;
}


/*****************************/
/*     21. Media Queries     */
/*****************************/	
/* Min-width width 768px */
@media (min-width: 768px) {
	
	/* General Styles */
	.p-heading {
		width: 85%;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of general styles */


	/* Header */
	.header {
		padding-top: 9rem;
	}

	.header h1 {
		font-size: 4rem;
		line-height: 4.875rem;
		letter-spacing: -0.3px;
	}

	.header .btn-solid-lg {
		margin-bottom: 0;
		margin-left: 0;
	}

	.header .outer-container {
		bottom: -4rem;
	}

	.header .swiper-button-prev {
		left: 1.5rem;
	}
	
	.header .swiper-button-next {
		right: 1.5rem;
	}
	/* end of header */


	/* Registration */
	.form-1 {
		padding-top: 9rem;
	}
	/* end of registration */


	/* Description */
	.basic-2 h2 {
		width: 41rem;
		margin-right: auto;
		margin-left: auto;
	}

	.basic-2 .list-unstyled .bullet {
		width: 3.25rem;
		height: 3.25rem;
		margin-right: 1rem;
		font-size: 1.375rem;
		line-height: 3.25rem;
	}
	/* end of description */


	/* Newsletter */
	.form-2 form {
		width: 31.875rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of newsletter */


	/* Extra Pages */
	.ex-header {
		padding-top: 11rem;
		padding-bottom: 9rem;
	}

	.ex-basic-2 .text-container.dark {
		padding: 2.5rem 3rem 2rem 3rem;
	}

	.ex-basic-2 .form-container {
		margin-top: 0;
	}
	/* end of extra pages */
}
/* end of min-width width 768px */


/* Min-width width 992px */
@media (min-width: 992px) {
	
	/* Navigation */
	.navbar-custom {
		padding: 8px 1.5rem 8px 2rem; ;/*2.125rem 1.5rem 2.125rem 2rem;*/
        background: #FFFF;/*transparent;*/
		box-shadow: none;
	}
	
	.navbar-custom .navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}

	.navbar-custom .nav-item .nav-link {
		padding: 0.25rem 0.75rem;
		color: #333;
	}

	.navbar-custom.top-nav-collapse {
        padding: 0.5rem 1.5rem 0.5rem 2rem;
		background-color: #fff;
		box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.05);
	}

	.navbar-custom.top-nav-collapse .nav-item .nav-link {
		color: #333;
	}

	.navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
	.navbar-custom.top-nav-collapse .nav-item .nav-link.active {
		color:#33CC33;
	}

	.navbar-custom .dropdown-menu {
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-top: 0.75rem solid rgba(0, 0, 0, 0);
		border-radius: 0.25rem;
	}

	.navbar-custom.top-nav-collapse .dropdown-menu {
		border-top: 0.5rem solid rgba(0, 0, 0, 0);
		box-shadow: 0 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.02);
	}

	.navbar-custom .dropdown-item {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.navbar-custom .dropdown-divider {
		width: 84%;
	}

	.navbar-custom .social-icons {
		display: block;
		margin-right: 0.5rem;
		margin-left: 0.5rem;
	}

	.navbar-custom .fa-stack {
		width: 2em;
		margin-left: 0.25rem;
		font-size: 0.75rem;
	}
	
	.navbar-custom .fa-stack-2x {
		color: #33CC33;
		transition: all 0.2s ease;
	}
	
	.navbar-custom .fa-stack-1x {
		color: #333;
		transition: all 0.2s ease;
	}

	.navbar-custom .fa-stack:hover .fa-stack-2x {
		color: #ffff;
	}

	.navbar-custom .fa-stack:hover .fa-stack-1x {
		color: #33CC33;
	}
	/* end of navigation */


	/* General Styles */
	.p-heading {
		width: 65%;
	}
	/* end of general styles */


	/* Header */
	.header h1,
	.header .p-large {
		width: 47rem;
		margin-right: auto;
		margin-left: auto;
	}

	.header .swiper-button-prev {
		left: 3rem;
	}
	
	.header .swiper-button-next {
		right: 3rem;
	}
	/* end of header */


	/* Registration */
	.form-1 {
		padding-top: 10rem;
	}
	/* end of registration */


	/* Instructor */
	.basic-1 {
		padding-bottom: 4.5rem;
	}

	.basic-1 img {
		margin-bottom: 0;
	}
	/* end of instructor */


	/* Description */
	.basic-2 {
		padding-top: 4.5rem;
		padding-bottom: 3.5rem
	}
	/* end of description */


	/* Students */
	.basic-3 {
		padding-top: 3.5rem;
		padding-bottom: 4.5rem;
	}

	.basic-3 .text-container {
		margin-bottom: 0;
	}
	/* end of students */


	/* Details Lightbox */
	.lightbox-basic {
		max-width: 62.5rem;
		padding: 2.5rem 2.5rem 2.5rem 2.5rem;
	}

	.lightbox-basic .image-container {
		max-width: 100%;
		margin-right: 2rem;
		margin-bottom: 0;
		margin-left: 0.5rem;
	}
	
	.lightbox-basic h3 {
		margin-top: 0.5rem;
	}
	/* end of details lightbox */


	/* Video */
	.basic-4 {
		padding-top: 4.5rem;
		padding-bottom: 3.5rem;
	}
	/* end of video */


	/* Takeaways */
	.cards {
		padding-top: 3.5rem;
		padding-bottom: 3rem;
	}

	.cards .card {
		display: inline-block;
		width: 17.75rem;
		max-width: 100%;
		vertical-align: top;
	}

	.cards .card:nth-child(3n+2) {
		margin-right: 2rem;
		margin-left: 2rem;
	}
	/* end of takeaways */


	/* Testimonials */
	.slider-2 {
		padding-bottom: 9rem;
	}

	.slider-2 h3 {
		width: 37.5rem;
		margin-right: auto;
		margin-left: auto;
	}

	.slider-2 .swiper-container {
		width: 92%;
		text-align: left;
	}

	.slider-2 .image-wrapper {
		float: left;
		width: 6rem;
		margin-bottom: 0;
	}

	.slider-2 .text-wrapper {
		max-width: 100%;
		margin-left: 7.375rem;
	}

	.slider-2 .swiper-button-prev {
		left: 0;
	}
	
	.slider-2 .swiper-button-next {
		right: 0;
	}
	/* end of testimonials */


	/* Date */
	.basic-5 h2 {
		width: 70%;
	}
	/* end of date */


	/* Newsletter */
	.form-2 {
		padding-top: 9rem;
	}

	.form-2 h3 {
		width: 37.5rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of newsletter */


	/* Contact */
	.form-3 .text-container {
		margin-bottom: 0;
	}
	/* end of contact */


	/* Extra Pages */
	.ex-header h1 {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}

	.ex-basic-2 {
		padding-bottom: 5rem;
	}
	/* end of extra pages */
}
/* end of min-width width 992px */


/* Min-width width 1200px */
@media (min-width: 1200px) {
	
	/* Header */
	.header {
		padding-bottom: 23rem;/*31rem;*/
	}

	.header .outer-container {
		width: 69.375rem;
		bottom: -6rem;
	}

	.header .swiper-container {
		width: 100%;
	}

	.header .swiper-button-prev {
		left: -2.25rem;
	}
	
	.header .swiper-button-next {
		right: -2.25rem;
	}
	/* end of header */
	

	/* Registration */
	.form-1 {
		padding-top: 12rem;
	}

	.form-1 .text-container {
		margin-top: 1rem;
		margin-right: 3.5rem;
	}

	.form-1 form {
		margin-left: 1.5rem;
	}
	/* end of registration */


	/* Instructor */
	.basic-1 .text-container {
		margin-top: 3.125rem;
		margin-left: 2.5rem;
	}
	/* end of instructor */


	/* Description */
	.basic-2 .list-unstyled.first {
		margin-right: 1.625rem;
	}

	.basic-2 .list-unstyled.second {
		margin-left: 1.625rem;
	}
	/* end of description */


	/* Students */
	.basic-3 .text-container {
		margin-top: 2.5rem;
		margin-right: 3.5rem;
	}
	/* end of instructor */


	/* Takeaways */
	.cards .card {
		width: 21rem;
	}

	.cards .card:nth-child(3n+2) {
		margin-right: 2.875rem;
		margin-left: 2.875rem;
	}
	/* end of takeaways */


	/* Testimonials */
	.slider-2 .swiper-container {
		width: 90%;
	}

	.slider-2 .text-wrapper {
		margin-top: 0;
	}
	/* end of testimonials */


	/* Date */
	.basic-5 h2 {
		width: 50%;
	}

	.basic-5 p {
		width: 74%;
	}
	/* end of date */


	/* Contact */
	.form-3 .text-container {
		margin-top: 2.25rem;
		margin-right: 3.5rem;
	}
	/* end of contact */


	/* Footer */
	.footer .footer-col.first {
		margin-right: 1.5rem;
	}

	.footer .footer-col.second {
		margin-left: 3rem;
	}

	.footer .footer-col.third {
		margin-left: 2.75rem;
	}

	.footer .footer-col.fourth {
		margin-left: 1.5rem;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-header h1 {
		width: 60%;
		margin-right: auto;
		margin-left: auto;
	}

	.ex-basic-2 .form-container {
		margin-left: 1.75rem;
	}

	.ex-basic-2 .image-container-small {
		margin-left: 1.75rem;
	}
	/* end of extra pages */
}
/* end of min-width width 1200px */



/*
22. ACHIEVEMENTS A
*/

/*ADD THIS TO HEAD

<link rel="stylesheet" href="https://cdn.lineicons.com/1.0.1/LineIcons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600&amp;display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

*/


/*.timeline-wrapper * {
	box-sizing: border-box;
  }*/
  
  .timeline-wrapper {
	font-size: 14px;
	background: #f6f9fc;
	font-family: "Open Sans", sans-serif;
	color: #525f7f;
  }
  .timeline-wrapper h2 {
	margin-top: 5%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 0;
	text-align: center;
	font-size: 2rem;
	font-weight: 100;
  }
  
  /* timeline core */
  .timeline {
	display: flex;
	flex-direction: column;
	margin: 20px auto;
	position: relative;
  }
  .timeline__event {
	margin-bottom: 20px;
	position: relative;
	display: flex;
	margin: 20px 0;
	border-radius: 6px;
	align-self: center;
	width: 50vw;
  }
  .timeline__event:nth-child(2n + 1) {
	flex-direction: row-reverse;
  }
  .timeline__event:nth-child(2n + 1) .timeline__event__date {
	border-radius: 0 6px 6px 0;
  }
  .timeline__event:nth-child(2n + 1) .timeline__event__content {
	border-radius: 6px 0 0 6px;
  }
  .timeline__event:nth-child(2n + 1) .timeline__event__icon:before {
	content: "";
	width: 2px;
	height: 100%;
	background: #f6a4ec;
	position: absolute;
	top: 0%;
	left: 50%;
	right: auto;
	z-index: -1;
	transform: translateX(-50%);
	animation: fillTop 2s forwards 4s ease-in-out;
  }
  .timeline__event:nth-child(2n + 1) .timeline__event__icon:after {
	content: "";
	width: 100%;
	height: 2px;
	background: #f6a4ec;
	position: absolute;
	right: 0;
	left:auto;
	z-index: -1;
	top: 50%;
	transform: translateY(-50%);
	animation: fillLeft 2s forwards 4s ease-in-out;
  }
  
  /* timeline details */
  .timeline__event__title {
	font-size: 1rem;
	line-height: 1.4;
	text-transform: uppercase;
	font-weight: 600;
	color: #9251ac;
	letter-spacing: 1.5px;
  }
  .timeline__event__content {
	padding: 20px;
	box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
	  0 18px 36px -18px rgba(0, 0, 0, 0.3),
	  0 -12px 36px -8px rgba(0, 0, 0, 0.025);
	background: #fff;
	width: calc(40vw - 84px);
	border-radius: 0 6px 6px 0;
  }
  .timeline__event__date {
	color: #f6a4ec;
	font-size: 1rem;
	font-weight: 600;
	background: #9251ac;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 0 20px;
	border-radius: 6px 0 0 6px;
  }
  .timeline__event__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9251ac;
	align-self: center;
	margin: 0 20px;
	background: #f6a4ec;
	border-radius: 100%;
	width: 20px;
	height: 40px;
	box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
	  0 18px 36px -18px rgba(0, 0, 0, 0.3),
	  0 -12px 36px -8px rgba(0, 0, 0, 0.025);
	padding: 40px;
	position: relative;
  }
  .timeline__event__icon i {
	font-size: 32px;
  }
  .timeline__event__icon:before {
	content: "";
	width: 2px;
	height: 100%;
	background: #f6a4ec;
	position: absolute;
	top: 0%;
	z-index: -1;
	left: 50%;
	transform: translateX(-50%);
	animation: fillTop 2s forwards 4s ease-in-out;
  }
  .timeline__event__icon:after {
	content: "";
	width: 100%;
	height: 2px;
	background: #f6a4ec;
	position: absolute;
	left: 0%;
	z-index: -1;
	top: 50%;
	transform: translateY(-50%);
	animation: fillLeftOdd 2s forwards 4s ease-in-out;
  }
  .timeline__event__description {
	flex-basis: 60%;
  }
  
  /* type variations */
  
  .timeline__event--type2:after {
	background: #555ac0;
  }
  .timeline__event--type2 .timeline__event__date {
	color: #87bbfe;
	background: #555ac0;
  }
  .timeline__event--type2:nth-child(2n + 1) .timeline__event__icon:before,
  .timeline__event--type2:nth-child(2n + 1) .timeline__event__icon:after {
	background: #87bbfe;
  }
  .timeline__event--type2 .timeline__event__icon {
	background: #87bbfe;
	color: #555ac0;
  }
  .timeline__event--type2 .timeline__event__icon:before,
  .timeline__event--type2 .timeline__event__icon:after {
	background: #87bbfe;
  }
  .timeline__event--type2 .timeline__event__title {
	color: #555ac0;
  }
  
  .timeline__event--type3:after {
	background: #24b47e;
  }
  .timeline__event--type3 .timeline__event__date {
	color: #aff1b6;
	background-color: #24b47e;
  }
  .timeline__event--type3:nth-child(2n + 1) .timeline__event__icon:before,
  .timeline__event--type3:nth-child(2n + 1) .timeline__event__icon:after {
	background: #aff1b6;
  }
  .timeline__event--type3 .timeline__event__icon {
	background: #aff1b6;
	color: #24b47e;
  }
  .timeline__event--type3 .timeline__event__icon:before,
  .timeline__event--type3 .timeline__event__icon:after {
	background: #aff1b6;
  }
  .timeline__event--type3 .timeline__event__title {
	color: #24b47e;
  }
  .timeline__event:last-child .timeline__event__icon:before {
	content: none;
  }
  
  /* responsive */
  @media (max-width: 786px) {
	.timeline__event {
	  flex-direction: column;
	  align-self: center;
	}
	.timeline__event__content {
	  width: 100%;
	}
	.timeline__event__icon {
	  border-radius: 6px 6px 0 0;
	  width: 100%;
	  margin: 0;
	  box-shadow: none;
	}
	.timeline__event__icon:before,
	.timeline__event__icon:after {
	  display: none;
	}
	.timeline__event__date {
	  border-radius: 0;
	  padding: 20px;
	}
	.timeline__event:nth-child(2n + 1) {
	  flex-direction: column;
	  align-self: center;
	}
	.timeline__event:nth-child(2n + 1) .timeline__event__date {
	  border-radius: 0;
	  padding: 20px;
	}
	.timeline__event:nth-child(2n + 1) .timeline__event__icon {
	  border-radius: 6px 6px 0 0;
	  margin: 0;
	}
  }
  
  /* animations */
  @keyframes fillLeft {
	100% {
	  right: 100%;
	}
  }
  @keyframes fillTop {
	100% {
	  top: 100%;
	}
  }
  @keyframes fillLeftOdd {
	100% {
	  left: 100%;
	}
  }
  

  /*
22. ACHIEVEMENTS B
*/


/*ADD THIS In HEAD of achievements2.php

<link rel="stylesheet" href="https://yourwebsite.com/style.css">
<link rel="stylesheet" href="https://codepen.io/username/pen/aBcDef.css">
*/

/* Fonts */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

.timeline2-body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0 4em;
}

.timeline2-main {
  min-width: 300px;
  max-width: 500px;
  margin: auto;
}

.timeline2-main p {
  font-size: 1em;
  line-height: 1.75em;
  border-top: 3px solid;
  border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
  border-image-slice: 1;
  border-width: 3px;
  margin: 0;
  padding: 40px;
  counter-increment: section;
  position: relative;
  color: #34435E;
}

/* Number badges */
.timeline2-main p:before {
  content: counter(section);
  position: absolute;
  border-radius: 50%;
  padding: 10px;
  height: 1.25em;
  width: 1.25em;
  background-color: #34435E;
  text-align: center;
  line-height: 1.25em;
  color: #ffffff;
  font-size: 1em;
}

/* Odd paragraphs */
.timeline2-main p:nth-child(odd) {
  border-right: 3px solid;
  padding-left: 0;
}
.timeline2-main p:nth-child(odd):before {
  left: 100%;
  margin-left: -20px;
}

/* Even paragraphs */
.timeline2-main p:nth-child(even) {
  border-left: 3px solid;
  padding-right: 0;
}
.timeline2-main p:nth-child(even):before {
  right: 100%;
  margin-right: -20px;
}

/* First and last paragraph */
.timeline2-main p:first-child {
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.timeline2-main p:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}


/*
22. ACHIEVEMENTS C
*/


/*ADD THIS In HEAD of achievements3.php

<link rel="stylesheet" href="https://yourwebsite.com/style.css">
<link rel="stylesheet" href="https://codepen.io/username/pen/aBcDef.css">
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap");

/*.timeline2-wrapper *,
.timeline2-wrapper *::before,
.timeline2-wrapper *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}*/


.timeline2-wrapper {
  --color: rgba(30, 30, 30);
  --bgColor: rgba(245, 245, 245);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: "Poppins", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}

.timeline2-wrapper h1 {
  text-align: center;
}

.timeline2 {
  --col-gap: 2rem;
  --row-gap: 2rem;
  --line-w: 0.25rem;
  display: grid;
  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;
  column-gap: var(--col-gap);
  list-style: none;
  width: min(60rem, 90%);
  margin-inline: auto;
}

.timeline2::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  background: rgb(225, 225, 225);
  border-radius: calc(var(--line-w) / 2);
}

.timeline2 li:not(:last-child) {
  margin-bottom: var(--row-gap);
}

.timeline2 li {
  grid-column: 2;
  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);
  grid-row: span 2;
  display: grid;
  grid-template-rows: min-content min-content min-content;
}

.timeline2 li .date {
  --dateH: 3rem;
  height: var(--dateH);
  margin-inline: calc(var(--inlineP) * -1);
  text-align: center;
  background-color: var(--accent-color);
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  display: grid;
  place-content: center;
  position: relative;
  border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

.timeline2 li .date::before {
  content: "";
  width: var(--inlineP);
  aspect-ratio: 1;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

.timeline2 li .date::after {
  content: "";
  position: absolute;
  width: 2rem;
  aspect-ratio: 1;
  background: var(--bgColor);
  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

.timeline2 li .title,
.timeline2 li .descr {
  background: var(--bgColor);
  position: relative;
  padding-inline: 1.5rem;
}

.timeline2 li .title {
  overflow: hidden;
  padding-block-start: 1.5rem;
  padding-block-end: 1rem;
  font-weight: 500;
}

.timeline2 li .descr {
  padding-block-end: 1.5rem;
  font-weight: 300;
}

.timeline2 li .title::before,
.timeline2 li .descr::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
}

.timeline2 li .title::before {
  bottom: calc(100% + 0.125rem);
}

.timeline2 li .descr::before {
  z-index: -1;
  bottom: 0.25rem;
}

@media (min-width: 40rem) {
  .timeline2 {
    grid-template-columns: 1fr var(--line-w) 1fr;
  }
  .timeline2::before {
    grid-column: 2;
  }
  .timeline2 li:nth-child(odd) {
    grid-column: 1;
  }
  .timeline2 li:nth-child(even) {
    grid-column: 3;
  }
  .timeline2 li:nth-child(2) {
    grid-row: 2/4;
  }
  .timeline2 li:nth-child(odd) .date::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
  }
  .timeline2 li:nth-child(odd) .date::after {
    transform: translate(-50%, -50%);
    left: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  .timeline2 li:nth-child(odd) .date {
    border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
  }
}

.credits {
  margin-top: 1rem;
  text-align: right;
}
.credits a {
  color: var(--color);
}



/*
22. ACHIEVEMENTS D
*/


/*ADD THIS In HEAD of achievements4.php

<link rel="stylesheet" href="https://yourwebsite.com/style.css">
<link rel="stylesheet" href="https://codepen.io/username/pen/aBcDef.css">
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/*.timeline3-wrapper *,
.timeline3-wrapper *::before,
.timeline3-wrapper *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  perspective: 800px;
}*/

.timeline3-wrapper {
  background-color: #227093;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline3 {
  width: 800px;
  background-color: #072736;
  color: #fff;
  padding: 30px 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}

.timeline3 ul {
  list-style-type: none;
  border-left: 2px solid #094a68;
  padding: 10px 5px;
}

.timeline3 ul li {
  padding: 20px 20px;
  position: relative;
  cursor: pointer;
  transition: .5s;
}

.timeline3 ul li span {
  display: inline-block;
  background-color: #1685b8;
  border-radius: 25px;
  padding: 2px 5px;
  font-size: 15px;
  text-align: center;
}

.timeline3 ul li .content h3 {
  color: #34ace0;
  font-size: 17px;
  padding-top: 5px;
}

.timeline3 ul li .content p {
  padding: 5px 0px 15px 0px;
  font-size: 15px;
}

.timeline3 ul li:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background-color: #34ace0;
  border-radius: 50%;
  left: -11px;
  top: 28px;
  transition: .5s;
}

.timeline3 ul li:hover {
  background-color: #071f2a;
}

.timeline3 ul li:hover:before {
  background-color: #0F0;
  box-shadow: 0px 0px 10px 2px #0F0;
}

@media (max-width: 300px) {
  .timeline3 {
    width: 100%;
    padding: 30px 5px 30px 10px;
  }

  .timeline3 ul li .content h3 {
    color: #34ace0;
    font-size: 15px;
  }
}




/*
23. GALLERY 4
*/

/*ADD THIS In HEAD of achievements4.php

<link rel="stylesheet" href="https://yourwebsite.com/style.css">
<link rel="stylesheet" href="https://codepen.io/username/pen/aBcDef.css">
*/

/*.event-timeline-wrapper * {
	box-sizing: border-box;
  }*/
  .event-timeline-wrapper,
.event-timeline-wrapper * {
  box-sizing: border-box;
}
  
  .event-timeline-wrapper img {
	width: 100%;
	border-radius: 5px;
  }
  @media screen and (max-width: 599px) {
	.event-timeline-wrapper img {
	  height: 250px;
	  object-fit: cover;
	}
  }
  
  .event-timeline-wrapper {
	background: #2b2a2b;
	color: white;
	margin: 0;
	padding: 0;
  }
  
  .event-timeline-wrapper main {
	padding: 2rem;
	max-width: 1400px;
	margin: auto;
  }
  
  .event-timeline-wrapper h1 {
	font-family: 'Poppins', sans-serif;
  }
  .event-timeline-wrapper h2 {
	color: #ed666f;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
  }
  .event-timeline-wrapper h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	margin: 0.5rem 0;
  }
  
  .event-timeline-wrapper .grid-wrapper {
	/* Grid layout for screen size above 600px */
  }
  @media screen and (min-width: 600px) {
	.event-timeline-wrapper .grid-wrapper {
	  display: grid;
	  grid-auto-flow: column;
	  grid-gap: 1rem;
	}
  }
  @media screen and (min-width: 1025px) {
	.event-timeline-wrapper .grid-wrapper {
	  grid-template-columns: 1fr 2fr 1fr 2fr;
	}
  }
  @media screen and (min-width: 600px) and (max-width: 1024px) {
	.event-timeline-wrapper .grid-wrapper {
	  grid-template-columns: 1fr 2fr;
	}
  }
  
  .event-timeline-wrapper article {
	padding-bottom: 1rem;
	border-bottom: 1px solid #4d4d4d;
  }
  .event-timeline-wrapper article p {
	font-family: 'Karla', sans-serif;
	font-size: 0.95rem;
	color: #c8c8c8;
  }
  
  /* Grid area tweaks */
  .event-timeline-wrapper article:nth-child(4) {
	grid-area: 1/2/4/3;
  }
  .event-timeline-wrapper article:nth-child(8) {
	/* Desktop */
  }
  @media screen and (min-width: 1025px) {
	.event-timeline-wrapper article:nth-child(8) {
	  grid-area: 1/4/4/-1;
	}
  }
  @media screen and (min-width: 600px) and (max-width: 1024px) {
	.event-timeline-wrapper article:nth-child(8) {
	  grid-area: 4/2/8/3;
	}
  }
  @media screen and (min-width: 1025px) {
	.event-timeline-wrapper article:nth-child(4n+3) {
	  border-bottom: 0;
	}
  }
  @media screen and (min-width: 1025px) {
	.event-timeline-wrapper article:nth-child(4) {
	  border-right: 1px solid #4d4d4d;
	  padding-right: 1rem;
	}
  }
  @media screen and (min-width: 600px) {
	.event-timeline-wrapper article:nth-child(4n) {
	  border-left: 1px solid #4d4d4d;
	  border-bottom: 0;
	  padding-left: 1rem;
	}
  }
  
  .event-timeline-wrapper .footer-note {
	text-align: center;
	font-family: 'Karla', sans-serif;
	font-size: 0.9rem;
	background: white;
	padding: 1rem;
	color: black;
	border-radius: 5px;
  }
  .event-timeline-wrapper .footer-note a {
	color: inherit;
	font-weight: 600;
  }
  

  /*
23. GALLERY 2
*/

/*ADD THIS In HEAD of achievements4.php

<link rel="stylesheet" href="https://yourwebsite.com/style.css">
<link rel="stylesheet" href="https://codepen.io/username/pen/aBcDef.css">
*/
/*.carousel-wrapper * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }*/
 
  
  .carousel-wrapper {
	position: relative;
	font-family: "Space Grotesk", sans-serif;
	background-color: #16181b;
  }
  
  .carousel-wrapper .container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	gap: 3rem;
	flex-flow: column;
	position: relative;
  }
  
  .carousel-wrapper .carousel {
	max-width: 80%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
	transform: perspective(1000px);
  }
  
  .carousel-wrapper .carousel .item {
	width: 20%;
	height: 250px;
	max-width: 250px;
	margin: 2px;
	transition: 0.5s;
	object-fit: cover;
	filter: brightness(1);
  }
  
  .carousel-wrapper .carousel .item:hover {
	filter: brightness(1);
	transform: translateZ(170px);
  }
  
  .carousel-wrapper .carousel .item:hover + * {
	filter: brightness(0.6);
	transform: translateZ(120px) rotateY(25deg);
  }
  
  .carousel-wrapper .carousel .item:hover + * + * {
	filter: brightness(0.4);
	transform: translateZ(50px) rotateY(15deg);
  }
  
  .carousel-wrapper .carousel .item:has(+ *:hover) {
	filter: brightness(0.6);
	transform: translateZ(120px) rotateY(-25deg);
  }
  
  .carousel-wrapper .carousel .item:has(+ * + *:hover) {
	filter: brightness(0.4);
	transform: translateZ(50px) rotateY(-15deg);
  }
  
  .carousel-wrapper .code-by {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	background-color: #ffffff4a;
	width: 100%;
	padding: 20px 0;
	transition: 0.9s;
  }
  
  .carousel-wrapper .code-by:hover {
	background-color: transparent;
  }
  
  .carousel-wrapper .code-by h2 {
	color: aliceblue;
	font-size: 30px;
  }
  
  .carousel-wrapper .code-by h2 span {
	text-transform: uppercase;
	position: relative;
	font-size: 30px;
  }
  
  .carousel-wrapper .code-by h2 span::before {
	content: attr(data);
	position: absolute;
	bottom: 0;
	left: 0;
	color: rgb(22, 77, 126);
	text-transform: uppercase;
	opacity: 0;
	transition: 0.99s;
  }
  
  .carousel-wrapper .code-by h2 span:hover::before {
	width: 100%;
	opacity: 1;
  }
  

  /*
  24. Milestones
  */
.stats-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   background-color: #ffffff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   gap: 30px;
   
   width: 90%;
   margin: auto;
 }

 .stat-item {
   text-align: center;
   padding: 10px 20px;
 }

 .stat-number {
   font-size: 3em;
   font-weight: bold;
   color: #33CC33;
   margin-bottom: 5px;
   display: inline-block;
   min-width: 80px;
 }

 .stat-label {
   font-size: 1.1em;
   color: #555;
 }

 /* Responsive Layout */
 @media (max-width: 900px) {
   .stats-container {
	 grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 500px) {
   .stats-container {
	 grid-template-columns: 1fr;
   }
 }  



 /*
 
 Video playing 
*/

.abcde-video-wrapper {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: auto;
	border-radius: 10px;
	overflow: hidden;
  }
  
  .abcde-video {
	width: 100%;
	display: block;
	border-radius: 10px;
  }
  
  .abcde-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	border: none;
	border-radius: 50%;
	background: #33CC33;
	cursor: pointer;
	z-index: 2;
  }
  
  .abcde-play-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-left: 20px solid #fff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
  }
  
  .abcde-play-button.paused::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 24px;
	background: repeating-linear-gradient(
	  to right,
	  #fff,
	  #fff 6px,
	  transparent 6px,
	  transparent 10px
	);
  }
  

  /*
  VIDEO IN GALLERY
  */
  .abcde-video-wrapper {
	position: relative;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
  }
  
  .abcde-video {
	width: 100%;
	display: block;
	border-radius: 10px;
  }
  
  /* Your custom play button */
  .video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
	cursor: pointer;
	z-index: 2;
  }
  
  .video-play-button span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-left: 20px solid #fff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
  }
  
  .video-play-button.paused span {
	border: none;
	width: 18px;
	height: 24px;
	background: repeating-linear-gradient(
	  to right,
	  #fff,
	  #fff 6px,
	  transparent 6px,
	  transparent 10px
	);
	transform: translate(-50%, -50%);
  }