/* ------------------------------------------------------------------------------

	Template Name: eLearn
	Template URI: http://www.themeelite.com/
	Description: Full Screen Design Agency Template
	Author: Themeelite
	Author URI: http://www.themeelite.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.0
	
	1. CSS Reset
	2. Document Setup
	3. Header Part
		3.1 Menu Style
		3.2.1 (v1) Header Slideshow
		3.2.2 (v2) Header Slideshow
		3.2.3 (v3) Header Slideshow
		3.2.4 (v4) Header Slideshow
		3.3 Language Dropdown
		3.4 form
	4. Membership Section
	5. Available Courses
		5.1 Watch. Listen. Practice. Learn.
	6. Polular Courses
		6.1 Awesome teacher
	7. Awesome teacher
	8. Pricing tables
	9. Happy Students
	10. Newsletter
	11. Contact 
	12. Bottom Four Column
	13. Footer Style
	14. Responsive style
	
		
--------------------------------------------------------------------------------/*

/*----------------------------------------------------
	1. CSS Reset
------------------------------------------------------*/
* {
	padding: 0;
	margin: 0;
}

body {
	font-size: 14px;
	line-height: 24px;
	color: #8c9099;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	position: relative;
	background: #fff;
	width: 100%;
	height: 100%;
	overflow: scroll;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: #f5d76e;
	outline: none;
}

a:hover,
a:focus {
	color: inherit;
	text-decoration: underline;
}

img {
	max-width: 100%;
}

.logo img {
	height: 80px;
	width: auto;
	display: block;
}

@media (max-width: 767px) {
	.logo img {
		height: 60px;
	}
}

@media (max-width: 991px) {
	.navbar-toggle {
		display: block !important;
		float: right;
		margin-top: 20px;
	}

	.navbar-collapse {
		background: #181a1c;
		margin-top: 10px;
		border: 0;
	}

	.navbar-nav {
		width: 100%;
		text-align: left;
	}

	.navbar-nav>li {
		display: block;
		width: 100%;
	}

	.navbar-nav>li>a {
		padding: 14px 18px !important;
		display: block;
		color: #fff !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.navbar-nav>li>a:hover {
		background: #000 !important;
	}
}

/*----------------------------------------------------
	 2. Document Setup
------------------------------------------------------*/
.wrapper {
	width: 100%;
}

.sec_top_gp {
	padding-top: 68px;
}

.noMar {
	margin: 0 !important;
}

.noPadd {
	padding: 0px !important;
}

.relative {
	position: relative;
}

.section_gap {
	padding: 45px 0 65px;
}

.uppercase {
	text-transform: uppercase;
}

::-webkit-input-placeholder {
	/* WebKit browsers */
	color: #acadbf;
}

:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #acadbf;
	opacity: 1;
}

::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #acadbf;
	opacity: 1;
}

:-ms-input-placeholder {
	/* Internet Explorer 10+ */
	color: #acadbf;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	padding-bottom: 10px;
	margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: #000;
	font-family: 'Montserrat', sans-serif;
}

h1 {
	font-size: 73px;
	line-height: normal;
	font-weight: 700;
	margin: 0px 0 15px;
}

h1 span {
	font-size: 33px;
	line-height: 27px;
}

h2 {
	font-size: 21px;
	color: #273342;
	line-height: 45px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -1px;
	/* margin:0px 0 15px; */
}

h3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	line-height: normal;
	font-weight: 700;
	margin: 0px 0 22px;
}

h4 {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	margin: 0px 0 15px;
}

h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	margin: 0px 0 15px;
}

h4.subHeading {
	font-weight: 600;
	font-size: 18px;
	padding-bottom: 22px;
}

.heading {
	text-align: left;
	padding-bottom: 60px;
}

.heading .container {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	padding-right: 15px;
	padding-left: 15px;
}

.heading h1 {
	color: #273342;
	display: block;
	line-height: 63px;
	text-transform: uppercase;
	padding: 22px;
	border-left: 8px solid;
}

.heading h1 span {
	display: block;
}

.heading p {
	font-size: 16px;
	font-weight: 400;
	color: #8c9099;
	line-height: 24px;
}

.topmar {
	margin-top: 20px;
}

/*----------------------------------------------------
	3. Header Part
------------------------------------------------------*/

header {
	position: relative;
}

/*--------------------------------------
	3.2.1 (v1) Header Slideshow
----------------------------------------*/

.header_v1 .banner {
	overflow: hidden;
	margin: 0 auto !important;
	background: #CACACA;
}

.header_v1 .hedaer-inner {
	height: 100%;
	position: relative;
}

.header_v1 .bannerText {
	width: 580px;
	height: 218px;
	border-left: 3px solid #fff;
	position: absolute;
	left: 0;
	top: 50%;
	text-align: left;
	margin-top: -109px;
	padding: 30px 0 0 30px;
	z-index: 999999;
}

.header_v1 .bannerText h3 {
	color: #fefefe;
	font-size: 37px;
	line-height: 36px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -2px;
	margin-bottom: 20px;
}

.header_v1 .bannerText p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: #fefefe;
	text-transform: none;
	padding-bottom: 25px;
}

.header_v1 .bannerText p a {
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0;
	display: inline-block;
	margin: 0;
}

.header_v1 .bannerText p a i {
	font-size: 17px;
	font-weight: 700;
}

.header_v1 .bannerText p a:hover {
	color: #fff;
}

/*--------------------------------------
	3.2.2 (v2) Header Slideshow
----------------------------------------*/

.header_v2 .banner {
	overflow: hidden;
	margin: 0 auto !important;
	background: #CACACA;
}

.header_v2 .hedaer-inner {
	height: 100%;
	position: relative;
}

.header_v2 .bannerText {
	width: 580px;
	height: 218px;
	border-left: 3px solid #fff;
	position: absolute;
	left: 0;
	top: 50%;
	text-align: left;
	margin-top: -109px;
	padding: 30px 0 0 30px;
	z-index: 999999;
}

.header_v2 .bannerText h3 {
	color: #fefefe;
	font-size: 37px;
	line-height: 36px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -2px;
	margin-bottom: 20px;
}

.header_v2 .bannerText p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: #fefefe;
	text-transform: none;
	padding-bottom: 25px;
}

.header_v2 .bannerText p a {
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0;
	display: inline-block;
	margin: 0;
}

.header_v2 .bannerText p a i {
	font-size: 17px;
	font-weight: 700;
}

.header_v2 .bannerText p a:hover {
	color: #fff;
}

/*--------------------------------------
	3.2.3 (v3) Header Slideshow
----------------------------------------*/

.header_v3 .banner {
	overflow: hidden;
	margin: 0 auto !important;
	background: #CACACA;
}

.header_v3 .hedaer-inner {
	height: 100%;
	position: relative;
}

.header_v3 .bannerText {
	width: 580px;
	height: 218px;
	border-left: 3px solid #fff;
	position: absolute;
	left: 0;
	top: 50%;
	text-align: left;
	margin-top: -109px;
	padding: 30px 0 0 30px;
	z-index: 999999;
}

.header_v3 .bannerText h3 {
	color: #fefefe;
	font-size: 37px;
	line-height: 36px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -2px;
	margin-bottom: 20px;
}

.header_v3 .bannerText p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: #fefefe;
	text-transform: none;
	padding-bottom: 25px;
}

.header_v3 .bannerText p a {
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0;
	display: inline-block;
	margin: 0;
}

.header_v3 .bannerText p a i {
	font-size: 17px;
	font-weight: 700;
}

.header_v3 .bannerText p a:hover {
	color: #fff;
}

/*--------------------------------------
	3.2.4 (v4) Header Slideshow
----------------------------------------*/

.header_v4 .banner {
	overflow: hidden;
	margin: 0 auto !important;
	background: #CACACA;
}

.header_v4 .hedaer-inner {
	height: 100%;
	position: relative;
}

.header_v4 .bannerText {
	width: 580px;
	height: 218px;
	border-left: 3px solid #fff;
	position: absolute;
	left: 0;
	top: 50%;
	text-align: left;
	margin-top: -109px;
	padding: 30px 0 0 30px;
	z-index: 999999;
}

.header_v4 .bannerText h3 {
	color: #fefefe;
	font-size: 37px;
	line-height: 36px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -2px;
	margin-bottom: 20px;
}

.header_v4 .bannerText p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: #fefefe;
	text-transform: none;
	padding-bottom: 25px;
}

.header_v4 .bannerText p a {
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0;
	display: inline-block;
	margin: 0;
}

.header_v4 .bannerText p a i {
	font-size: 17px;
	font-weight: 700;
}

.h2O ul li a:hover {
	color: #000 !important;
}

.header_v4 .bannerText p a:hover,
:focus {
	/* color: #fff; */
}


/* .navbar.navbar-inverse.navbar-static-top a:hover {
    color: black !important;
} */
/*------------------------------------
	3.2.5 (v5) Header Video
--------------------------------------*/
.form-container {
	background-color: #f5d76e !important;
}

.header_v5 .banner {
	overflow: hidden;
	margin: 0 auto !important;
	background: #CACACA;
}

.header_v5 .hedaer-inner {
	top: 50%;
	left: 0;
	right: 0;
	position: absolute;
	margin-top: -100px;
}

.header_v5 .bannerText {
	border-left: 3px solid #fff;
	padding: 30px 0 0 30px;
	width: 50%;
	height: auto;
	text-align: left;
}

.header_v5 .bannerText h3 {
	color: #fefefe;
	font-size: 37px;
	line-height: 36px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -2px;
	margin-bottom: 20px;
}

.header_v5 .bannerText p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: #fefefe;
	text-transform: none;
	padding-bottom: 25px;
}

.header_v5 .bannerText p a {
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0;
	display: inline-block;
	margin: 0;
}

.header_v5 .bannerText p a i {
	font-size: 17px;
	font-weight: 700;
}

.header_v5 .bannerText p a:hover {
	color: #fff;
}

.header_v5 .header-video {
	position: relative;
	overflow: hidden;
	margin-bottom: -35px;
}

.header_v5 .header-video iframe,
.header_v5 .header-video video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.header_v5 .header-video iframe {
	height: 120%;
	margin-left: -10%;
	margin-top: -10%;
	width: 120%;
}

.header_v5 .teaser-video {
	width: 100%;
	height: auto;
}

.header_v5 .header-video--media {
	width: 100%;
	height: auto;
}

.header_v5 .video-trigger {
	visibility: hidden;
}




/*----------------------------------------------------
 	3.1 Menu Style
------------------------------------------------------*/
.isStuck {
	left: 0px;
	width: 100%;
}

.menu {
	margin-top: 0px;
	position: fixed;
	z-index: 9999;
	background-color: #f5d76e;
	/* margin-top: 25px; */
	left: 0px;
	right: 0px;
	margin-bottom: -100px;
	display: block;
}

.menu.showmenu {
	display: block;
}

.logo {
	float: left;
	position: relative;
	z-index: 9999;
	width: auto;
	height: auto;
	margin-top: 12px;
}

.logo a {
	font-size: 36px;
	line-height: normal;
	font-weight: 700;
	color: #fff;
	padding: 0 !important;
	outline: none;
	text-decoration: none;
	text-transform: none;
}

.logo a:hover {
	border: none !important;
}

.logo a span {
	font-size: 60px;
	color: #446b97;
	font-weight: 700;
	line-height: 48px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	width: 58px;
	height: 58px;
	margin-right: 10px;
}

.isStuck .logo {
	margin-top: 10px;
	margin-left: 0;
}

.isStuck .logo span {
	color: #273342;
	background-color: #fff;
}

.navArea {
	float: right;
}

.navwrapper .container {
	padding: 0;
	width: auto;
}

.navbar-header {
	display: block !important;
}

.nav>li>a {
	display: inline-block;
}

.navbar-nav>li {
	float: none;
	display: inline-block;
}

.navbar-nav {
	margin: 0 auto;
	float: none;
	text-align: right;
}

.navbar-toggle {
	margin-top: 14px;
}

.navbar-nav>li:hover ul.submenu {
	float: none;
	display: block;
	position: absolute;
	width: 200px;
	background: #000;
}

ul.submenu li {
	list-style: none;
	margin: 0;
}

ul.submenu li a {
	padding: 10px 10px !important;
	display: block;
	text-align: left !important;
	text-decoration: none;
	color: #fff !important;
}

ul.submenu li a:hover {
	color: #000 !important;
}

ul.submenu {
	display: none;
}


/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
	margin-top: 0px;
	height: 85px;
	position: relative;
	z-index: 15;
}

.navbar-wrapper .container {
	padding: 0px;
}

.navbar-collapse {
	padding: 0;
}

.navbar.navbar-inverse.navbar-static-top {
	margin: 0px auto;
	background: none;
	color: #fff;
	border: none;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.navbar.navbar-inverse.navbar-static-top a {
	color: #000;
	padding: 45px 12px;
	line-height: 18px;
	text-align: center;
}

.navbar.navbar-inverse.navbar-static-top a:hover {
	background-color: inherit;
	background: none;
	border-bottom: 2px solid;
}

.inner-page .navbar.navbar-inverse.navbar-static-top a:hover,
.inner-page .isStuck .navbar-inverse .navbar-nav>.active>a,
.isStuck .navbar-inverse .navbar-nav>.active>a:focus {
	border: none;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus {
	color: #fff !important;
}

.navbar-inverse .navbar-nav>.active>a:hover {
	color: #fff;
}

.hideClass {
	display: none;
}

.isStuck .navbar-inverse .navbar-nav>.active>a,
.isStuck .navbar-inverse .navbar-nav>.active>a:focus {
	color: #fff;
	background-color: #000 !important;
}

.isStuck .navbar.navbar-inverse.navbar-static-top a:hover {
	color: #fff;
	background-color: #000 !important;
	border: none;
}

.isStuck .navbar.navbar-inverse.navbar-static-top a {
	color: #000;
}

.stuckMenu {
	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;

	background: none;
}

.isStuck {

	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
}


/*----------------------------------------------------
	3.3 Language Dropdown
------------------------------------------------------*/
ul.language {
	position: absolute;
	right: 13px;
	top: 18px;
	padding: 0 0 0 23px;
	margin: 0;
	z-index: 99999;
}

ul.language li {
	display: block;
}

ul.language li i {
	margin: 2px 0 0 7px;
	color: #c6c8cd;
	font-size: 11px;
}

ul.language li a {
	font-size: 12px;
	line-height: 13px;
	color: #fff;
	font-weight: 400;
	padding-left: 26px;
	background: url(../images/flag.png) 0 3px no-repeat !important;
}

ul.language li a:hover {
	border: none !important;
}

ul.language li a.french {
	background-position: 0 -22px !important;
}

ul.language li a.italian {
	background-position: 0 -53px !important;
}

ul.language li a.spanish {
	background-position: 0 -83px !important;
}

ul.language li a.portuguese {
	background-position: 0 -114px !important;
}

ul.language li ul {
	background-color: #1d385a;
	padding: 15px 20px;
	margin: 0;
	right: 0;
	top: 35px;
	left: inherit;
	-webkit-border-radius: 0;
	border-radius: 0;
	box-shadow: none;
}

ul.language li ul li {
	font-size: 13px;
	line-height: normal;
	color: #d7dee4;
	padding: 0;
	margin: 0;
}

ul.language li ul li a {
	font-size: 13px;
	line-height: 24px;
	color: #d7dee4;
}

ul.language li ul li a:hover,
ul.language li ul li a:focus {
	background-color: inherit;
	color: #fff;
	border: none !important;
}


/*----------------------------------------------------
	3.4 form
------------------------------------------------------*/
.form-header {
	position: absolute;
	left: 0;
	right: 0;
	top: 160px;
	margin: 0 auto;
}

.form-container {
	width: 472px;
	height: auto;
	padding: 40px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.form-container h2 {
	font-size: 36px;
	line-height: 24px;
	color: #2f4e71;
	font-weight: 700;
	letter-spacing: -2px;
	text-transform: uppercase;
	padding: 0;
	margin: 0 0 10px;
}

.form-container h2 span {
	font-size: 17px;
	text-transform: none;
	line-height: 40px;
	color: #333850;
	letter-spacing: -1px;
	display: block;
}

.form-row {
	margin-bottom: 17px;
	font-size: 0;
	letter-spacing: 0;
}

input.normal,
select.normal,
textarea.normal {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: normal;
	color: #acadbf;
	font-weight: 400;
	padding: 15px 25px;
	width: 100%;
	height: auto;
	background: #fff;
	display: inline-block;
	border: none;
	border-bottom: 3px solid rgba(0, 0, 0, .2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

select.normal {
	padding: 15px 20px;
}

input.normal.small {
	width: 48%;
}

input.normal.last {
	float: right;
}

textarea.medium {
	height: 116px;
	overflow: auto;
	resize: none;
}

input.button {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 52px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	padding: 0;
	width: 100%;
	height: 53px;
	background: #2f4e71;
	border: none;
	border-bottom: 3px solid #243c58;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

h3.succes_message {
	color: #3C3;
}

/* banner overlay */
.patternOverlay {
	/* background: #1c416a; */
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}

/* Preloader */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	/* change if the mask should have another color then white */
	z-index: 9999999999;
	/* makes sure it stays on top */
}

#status {
	width: 200px;
	height: 200px;
	color: #fff;
	position: absolute;
	left: 50%;
	/* centers the loading animation horizontally one the screen */
	top: 50%;
	/* centers the loading animation vertically one the screen */
	background-image: url(../images/preloader.gif);
	/* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
	/* is width and height divided by two */
}

#status p {
	text-align: center;
}


/* backgrounds */
.white_section {
	background-color: #fff;
}

.grey_section {
	background-color: #fafafb;
}

.yellow_section {}

.blue_section {
	background-color: #2f4e71;
}

/*----------------------------------------------------
	4. Membership Section
------------------------------------------------------*/


.membership_listing {
	padding: 0 0 0 79px;
	position: relative;
}

.membership_listing h3 {
	line-height: 16px;
	margin-bottom: 18px;
}

.membership_listing span {
	color: #fff;
	font-size: 30px;
	display: block;
	width: 48px;
	height: 48px;
	text-align: center;
	line-height: 53px;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

/*----------------------------------------------------
	5. Available Courses
------------------------------------------------------*/

.tab_text {
	padding-left: 0;
}

/* tabnav */
.custom-nav-tabs {
	border: none;
	margin-right: 53px;
	border-right: 8px solid;
}

.custom-nav-tabs>li {
	float: none;
	margin: 0 0 1px;
}

.custom-nav-tabs>li>a {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	line-height: 59px;
	background: #2f4e71;
	border: none;
	padding: 0;
	margin: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	outline: none;
}

.custom-nav-tabs>li.active>a,
.custom-nav-tabs>li.active>a:hover,
.custom-nav-tabs>li.active>a:focus,
.custom-nav-tabs>li>a:hover,
.custom-nav-tabs>li>a:focus {
	color: #000;
	padding: 0;
	border: none;
}

/*----------------------------------------------------
	5.1 Watch. Listen. Practice. Learn.
------------------------------------------------------*/
.watch_text {
	padding-left: 5px;
}

.video_preview {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
}

.video_preview img {
	border-radius: 10px;
}

.play-btn {
	text-align: center;
	color: #d5d6d9;
	font-size: 35px;
	display: block;
	width: 84px;
	height: 84px;
	line-height: 84px;
	border: 2px solid #d5d6d9;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -42px 0 0 -42px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.play-btn i {
	margin-left: 5px;
}

.play-btn:hover {}

/*----------------------------------------------------
	6. Polular Courses
------------------------------------------------------*/

.hover_listing {
	font-size: 0;
	letter-spacing: 0;
	padding: 0;
	margin: 0 -10px 30px 0;
}

.hover_listing li {
	border-right: 2px solid #fafafb;
}

.hover_listing li .img {
	display: block;
	width: 100%;
	height: 100%;
	margin-bottom: 25px;
	position: relative;
}

.hover_listing li h3 {
	line-height: normal;
	margin-bottom: 10px;
}

.hover_listing li h3 a {
	color: inherit;
}

.hover_listing li h3 a:hover {
	text-decoration: none;
}

.hover_listing li .img img {
	-webkit-transition: opacity 400ms ease-in-out;
	-moz-transition: opacity 400ms ease-in-out;
	transition: opacity 400ms ease-in-out;
}

.hover_listing li .img:hover img {
	opacity: .1;
}

.hover_listing li .img .play-btn {
	width: 64px;
	height: 64px;
	color: #fff;
	border-color: #fff;
	line-height: 64px;
	font-size: 25px;
	display: block;
	margin-top: -32px;
	margin-left: -32px;
	opacity: 0;
	-webkit-transition: opacity 400ms ease-in-out;
	-moz-transition: opacity 400ms ease-in-out;
	transition: opacity 400ms ease-in-out;
}

.hover_listing li .img:hover .play-btn {
	opacity: .9;
}

.btn-primary {
	line-height: 50px;
	font-size: 15px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	background: #2f4e71;
	border: none;
	border-bottom: 3px solid #243c58;
	display: inline-block;
	padding: 0 47px;
	-webkit-border-radius: 0;
	border-radius: 0;
}

/*----------------------------------------------------
	6.1 Awesome teacher
------------------------------------------------------*/

.numbers_section {
	padding: 65px 0 0;
}

.numbers {
	font-size: 0;
	letter-spacing: 0;
	text-align: center;
	margin: 0;
}

.numbers li {
	width: 19.5%;
	color: #fff;
	text-align: left;
	display: inline-block;
	padding: 0;
	margin: 0 0 65px 0;
}

.numbers li h3 {
	font-family: 'Roboto', sans-serif;
	font-size: 27px;
	line-height: 22px;
	color: #fff;
	text-align: left;
	font-weight: 700;
	display: inline-block;
	padding: 0;
	margin: 0;
}

.numbers li span {
	display: block;
	font-size: 13px;
	line-height: 15px;
	font-weight: 300;
	text-transform: uppercase;
	white-space: pre;
}

.numbers li i {
	font-size: 56px;
	color: #fff;
	font-weight: normal;
	display: block;
	float: left;
	margin-right: 20px;
}

/*----------------------------------------------------
	7. Awesome teacher
------------------------------------------------------*/
#teachers .hover_listing {
	margin-bottom: 0;
}

#teachers .hover_listing li p:last-child {
	padding-bottom: 0;
}

.hover_listing li .img ul.hover-social-icons {
	display: none;
}

.hover_listing li .img:hover ul.hover-social-icons {
	display: block;
}

ul.hover-social-icons {
	font-size: 0;
	letter-spacing: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	margin: -20px 0 0 0;
}

ul.hover-social-icons li {
	display: inline-block;
	vertical-align: middle;
	border: none;
}

ul.hover-social-icons li a {
	width: 40px;
	height: 40px;
	font-size: 18px;
	display: block;
	text-align: center;
	line-height: 40px;
	color: #eed580;
	text-decoration: none;
	padding: 0;
	margin: 0 12px 0 0;
	background-color: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

ul.hover-social-icons li a:hover {
	color: #fff;
	background-color: #000;
}

/*----------------------------------------------------
	 8. Pricing tables
------------------------------------------------------*/

.pricingtables {
	background: url(../images/blue-pattern.jpg) 0 0 repeat;
}

.pricingtables.section_gap {
	padding-bottom: 40px;
}

.pricingtables .heading {
	margin-bottom: 30px;
}

.pricingtables .heading h1 {
	color: #fff;
}

.pricingtables .heading p {
	color: #d4d8de;
}

ul.pricing-boxes {
	float: left;
	margin: 0;
	padding: 0px;
	list-style: none;
}

ul.pricing-boxes li {
	float: left;
	list-style: none;
	text-align: center;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

ul.pricing-boxes li.best-plan {
	position: relative;
	top: -40px;
}

ul.pricing-boxes li.best-plan h4 {
	font-size: 15px;
}

ul.pricing-boxes li.best-plan:hover {
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.20)
}

ul.pricing-boxes.three li {
	width: 33%;
	/*width: 313px;*/
	;
}

ul.pricing-boxes li.best-plan .btn-primary {
	border-color: #d7bb58;
}

ul.pricing-boxes li.best-plan .plan-name {
	padding: 30px 0 15px 0
}

ul.pricing-boxes li.best-plan .plan-features {
	padding: 0px 0px 40px 0px
}

.plan-name {
	background: #112a46;
	padding: 15px 0 10px 0;
	min-height: 88px;
	position: relative;
}

.plan-name:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(17, 42, 70, 0);
	border-top-color: #112a46;
	border-width: 12px;
	margin-left: -12px;
}

ul.pricing-boxes li.best-plan .plan-name:after {
	border-color: rgba(245, 215, 110, 0);
	border-top-color: inherit;
	border-width: 15px;
	margin-left: -15px;
}

.plan-name.color {
	min-height: 128px;
}

.plan-name h2 {
	font-family: "Roboto", sans-serif;
	color: #FFF;
	font-size: 33px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: -1px;
	padding: 0;
	margin: 0;
}

.plan-name h4 {
	font-family: "Roboto", sans-serif;
	color: #FFF;
	font-size: 14px;
	line-height: 14px;
	font-weight: 300;
	letter-spacing: -1px;
	padding: 0;
	margin: 0;
}

.plan-name h1 {
	color: #FFF;
	text-align: center;
	margin-bottom: 5px;
	line-height: 64px;
	margin-top: 7px;
}

.plan-name h1 i {
	color: #FFF;
	border-radius: 100%;
	border: 2px solid #FFF;
	padding: 15px;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.plan-price {
	background-color: #f8f8f8;
	min-height: 86px;
	border-left: 1px solid #e7e7e7;
}

.plan-price.last-child {
	border-right: 1px solid #e7e7e7;
}

.plan-price h4 {
	color: #434343;
	font-size: 37px !important;
	line-height: 86px;
	font-weight: 700;
	padding: 0;
	margin: 0;
}

ul.pricing-boxes li:hover .plan-name,
ul.pricing-boxes li:hover .plan-price {
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.plan-features {
	font-family: 'Open Sans', sans-serif;
	background-color: #f8f8f8;
	border: 1px solid #e7e7e7;
	border-top: 0;
	padding: 0px 0px 25px 0px;
	float: left;
}

ul.pricing-boxes li .plan-features {
	border-right: none
}

ul.pricing-boxes li:last-child .plan-features {
	border: 1px solid #e6e9ee
}

ul.pricing-boxes.standalone li .plan-features {
	border: 1px solid #e6e9ee !important
}

.plan-features ul {
	float: left;
	list-style: none;
	margin-bottom: 25px;
	background-color: #fff;
}

ul.pricing-boxes li.best-plan .plan-features ul {
	margin-bottom: 50px;
}

.plan-features ul li {
	padding: 8px 0;
	font-size: 14px;
	color: #7d7d7d;
	font-weight: 400;
	text-align: center;
	border-bottom: 1px solid #f6f6f6;
	float: left;
	width: 100%;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	width: 100% !important;
	float: left;
}

.plan-features ul li i {
	margin-right: 10px;
	font-size: 16px;
}

.plan-features ul li:hover {
	box-shadow: none
}

.plan-name.dark {
	background: #656d78
}

.plan-price.dark {
	background: #434a54
}


/*----------------------------------------------------
	 9. Happy Students
------------------------------------------------------*/

#testimonial.section_gap {
	padding-bottom: 60px;
}

.imageSlide {
	text-align: center;
	padding-bottom: 60px;
}

.imageBox {
	background-color: #00aeda;
	width: 98px;
	height: 98px;
	overflow: hidden;
	display: inline-block;
	margin-left: 6px;
	margin-right: 6px;
	vertical-align: top;
	margin-bottom: 13px;
	opacity: 1;
}

.imageBox.activeImage {
	opacity: 1;
	position: relative;
}

.imageBox.activeImage:hover img,
.imageBox.activeImage img {
	opacity: 0.2;
}

.imageBox.activeImage:after {
	content: "";
	width: 27px;
	height: 23px;
	background: url(../images/testi-hover.png) no-repeat 0 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -13px;
}

.footerTopContent {
	margin-top: 65px;
	text-align: center;
	position: relative;
}

.quote {
	display: block;
	width: 31px;
	height: 26px;
	position: absolute;
	top: -65px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.quote i {
	font-size: 32px;
}

.footerTopContent li {
	display: block;
	width: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.footerTopContent li.activeTest {
	opacity: 1;
}

.footerTopContent p {
	font-size: 16px;
	line-height: 24px;
	color: #8c9099;
	margin-bottom: 25px;
}

/*----------------------------------------------------
	 10. Newsletter
------------------------------------------------------*/
#blog.section_gap {
	padding: 70px 0;
}

.signup_text {
	font-size: 25px;
	color: #fff;
	font-weight: 700;
	line-height: 49px;
	margin: 0;
}

.button {
	padding: 0;
}

/*----------------------------------------------------
	 11. Contact 
------------------------------------------------------*/
#contact.section_gap {
	padding: 80px 0 90px;
}

.mapArea {
	height: 356px;
	overflow: hidden;
	width: 100%;
	margin: 0;
	background: #3b323c;
}

.mapArea iframe {
	width: 100%;
	height: 100%;
}

.error_message {
	color: #ff675f;
	font-weight: 500;
	padding-bottom: 15px;
}

/*----------------------------------------------------
	 12. Bottom Four Column 
------------------------------------------------------*/

.bottomfourcol h5 {
	color: #fff;
}

.bottomfourcol h5.heading {
	font-size: 17px;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
	margin-bottom: 20px;
	padding: 0;
}

.bottomfourcol p {
	color: #dcdce5;
	font-weight: 400;
	font-size: 13px;
	line-height: 24px;
	margin-bottom: 20px;
	padding: 0;
}

.socialshare {
	font-size: 0;
	letter-spacing: 0;
}

.socialshare a {
	background: #242526;
	display: inline-block;
	vertical-align: top;
	height: 30px;
	width: 30px;
	line-height: 30px;
	margin: 2px;
	text-align: center;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.socialshare a i {
	color: #fff;
	font-size: 20px;
	line-height: 30px;
}

.socialshare a:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
}

.socialshare a:hover i {
	color: #fff;
}

ul.footerLinks {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.footerLinks li {
	font-family: 'Open Sans', sans-serif;
	display: block;
	padding: 12px 0;
	margin: 0;
	border-bottom: 1px solid #4e6886;
}

ul.footerLinks li a {
	font-size: 13px;
	line-height: 24px;
	font-weight: 400;
	color: #dcdce5;
	text-decoration: none;
}

ul.footerLinks li span {
	display: block;
	color: #c0c0ca;
}

ul.footerLinks li span a {}

.contactInfo ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0;
	letter-spacing: 0;
}

.contactInfo ul li {
	display: inline-block;
	margin: 0 7px 0 0;
	padding: 0;
}

ul.list {
	padding: 0;
	margin: 0;
	list-style-position: inside;
}

ul.list li {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 24px;
	font-weight: 400;
	color: #dcdce5;
	text-decoration: none;
	padding: 0;
	margin: 0 0 5px;
}


/*----------------------------------------------------
	 13. Footer Style
------------------------------------------------------*/
.footer {
	background-color: #243c58;
	padding: 39px 0;
}

.footer p {
	font-size: 13px;
	color: #dcdce5;
	padding: 0;
}

.gototop {
	display: inline-block;
	font-size: 13px;
	color: #dcdce5;
}

.gototop i {
	color: #dcdce5;
	line-height: 13px;
	margin-left: 8px;
}

.gototop:hover {
	color: #fff;
}


/*----------------------------------------------------
	 14. Responsive style
------------------------------------------------------*/

@media screen and (min-width: 960px) and (max-width: 1280px) {

	.bannerText {
		width: 50%;
	}

	.form-container {
		padding: 20px;
	}

	.form-container h2 {
		font-size: 32px;
	}

	.form-container h2 span {
		font-size: 15px;
	}

	input.normal,
	select.normal,
	textarea.normal {
		font-size: 14px;
		padding: 10px 15px;
	}

}

@media screen and (max-width: 810px) {

	h1 {
		font-size: 45px;
	}

	h1 span {
		font-size: 26px;
		line-height: 22px;
	}

	h2 {
		font-size: 30px;
		line-height: normal;
	}

	.logo {
		float: none;
		left: 0px;
		/* margin-top: 17px; */
		position: absolute;
	}

	.section_gap {
		padding: 40px 0;
	}

	.navbar-toggle {
		float: left;
		margin-left: 20px;
		margin-top: 23px;
	}

	.navArea {
		float: none;
	}

	.navbar-collapse.collapse {
		display: none !important;
		visibility: hidden !important;
		border: none;
	}

	.navbar-collapse.collapse.in {
		display: block !important;
		visibility: visible !important;
	}

	.navbar-nav {
		width: 100%;
		color: #fff;
		background: #181a1c;
		text-align: center;
	}

	.nav>li>a {
		display: block;
	}

	.navbar.navbar-inverse.navbar-static-top a:hover {
		background-color: none;
	}

	.navbar-nav>li {
		float: none;
		display: block;
	}

	.navbar-nav>li>a {
		padding: 15px 0 !important;
		color: #fff !important;
	}

	.navbar-nav>li>a:hover,
	.navbar-nav>li.active>a:hover {
		background: #000 !important;
	}

	.navbar-inverse .navbar-toggle:hover,
	.navbar-inverse .navbar-toggle:focus {
		background-color: inherit;
	}

	.navbar-inverse .navbar-toggle.active,
	.navbar-inverse .navbar-toggle.active:focus {
		background-color: #000;
	}

	.navbar-inverse .navbar-toggle.active .icon-bar,
	.navbar-inverse .navbar-toggle.active:focus .icon-bar {
		background-color: #fff;
	}

	.navbar-inverse .navbar-toggle .icon-bar {
		/* background-color: #000; */
	}

	.navbar-toggle {
		display: block !important;
	}

	.isStuck .navbar-toggle {
		display: block;
	}

	.navbar-header {
		float: none;
	}

	.isStuck .logo {
		margin-left: 15px;
	}

	.navbar-toggle {
		margin-top: 23px;
	}

	.navbar .container {
		padding: 0;
	}

	.isStuck.navbar-wrapper .navArea {
		display: block;
	}

	.navbar-header .navbar-brand {
		float: right;
	}

	.navbar-nav>li:hover ul.submenu {
		float: none;
		display: block;
		position: relative;
		width: 100%;
		background: #565656;
	}

	ul.submenu {
		display: block;
		background-color: #676767;
	}

	ul.submenu li {
		list-style: none;
		margin: 0;
	}

	ul.submenu li a {
		padding: 10px 10px !important;
		display: block;
		text-align: center !important;
		text-decoration: none;
	}

	.navbar-nav>li:hover ul.submenu li a:hover {
		background: #272727;
	}


	.navArea {
		margin: 0;
	}

	.navbar-header {
		height: 70px;
	}

	.navbar-collapse {
		max-height: 340px;
	}

	.navbar-collapse.in {
		overflow-y: auto;
	}

	.form-header {
		position: static;
	}

	.form-container {
		position: static;
		width: 100%;
		margin: 15px 0;
		padding: 15px;
	}

	.form-container h2 {
		font-size: 28px;
	}

	input.normal.small {
		width: 100%;
	}

	input.normal.small:first-child {
		margin-bottom: 17px;
	}

	.custom-nav-tabs {
		margin-bottom: 15px;
	}

	.tab-pane img {
		margin: 0 0 15px;
	}

	.hover_listing {
		margin: 0;
	}

	.custom-nav-tabs {
		margin-right: 0;
	}

	.skills-col {
		padding-top: 50px;
	}

	.numbers li {
		width: 40%;
	}

	.video_preview {
		display: block;
	}

	.hover_listing li {
		text-align: center;
		border: none;
		border-bottom: 2px solid #fafafb;
	}

	.hover_listing li .img {
		background: none;
	}

	.hover_listing li .img:hover {}

	.hover_listing li .img {
		text-align: center;
	}

	ul.pricing-boxes.three li {
		width: 100%;
	}

	ul.pricing-boxes li.best-plan {
		top: 0;
	}

	.purchasebar .anchor {
		margin-top: 20px;
	}

	.button {
		padding: 0 15px;
	}

	.mapArea {
		margin-bottom: 15px;
	}

	.footer {
		text-align: center;
	}

	.footer .pull-left,
	.footer .pull-right {
		float: none !important;
	}

	ul.portfolioContainer li.col-xs-6 {
		width: 49%;
		min-height: 85px;

	}

	.bottomfourcol .col-sm-6 {
		margin-bottom: 15px;
	}

	.header_v5 .bannerText {
		width: auto;
		left: 25px;
	}

	.header_v5 .video-header {
		padding-bottom: 40px;
	}

	.header_v5 .hedaer-inner {
		position: static;
		width: 100%;
		margin: 0;
		padding-top: 0;
	}

	.header_v5 .bannerText h1 {
		font-size: 45px;
		font-weight: 600;
		color: #2b2b3d;
		margin-bottom: 10px;
	}

	.header_v5 .bannerText h3 {
		color: #76767e;
		font-weight: 600;
		font-size: 25px;
		margin-bottom: 10px;
	}

	.header_v5 .bannerText p {
		font-size: 13px;
		color: #76767e;
		line-height: normal;
	}
}

@media screen and (min-width: 768px) {

	.header_v5 {
		position: relative;
	}

	.header_v5 .hedaer-inner {
		left: 0;
		margin-top: -70px;
		position: absolute;
		right: 0;
		top: 50%;
	}

	.header_v5 .bannerText h3,
	.header_v5 .bannerText p {
		color: #fff;
	}
}

@media screen and (max-width: 680px) {


	.header_v5 .hedaer-inner {
		margin: 0;
		position: static;
	}

	.header_v1 .bannerText,
	.header_v2 .bannerText,
	.header_v3 .bannerText,
	.header_v4 .bannerText {
		height: auto;
		width: auto;
		left: 20px;
		right: 20px;
		padding: 15px 0 0 15px;
	}

	.header_v5 .bannerText {
		padding: 0;
	}

	.header_v1 .bannerText h3,
	.header_v2 .bannerText h3,
	.header_v3 .bannerText h3,
	.header_v4 .bannerText h3 {
		font-size: 32px;
		font-weight: 400;
	}

	.watch_text {
		padding-left: 15px;
		padding-top: 20px;
	}

	.tab_text {
		padding-left: 15px;
	}

}


@media screen and (max-width: 400px) {

	.numbers li {
		width: 100%;
	}

}







.services-section {
	padding: 80px 0;
	background: #f8f9fb;
}

.section-title {
	text-align: center;
	margin-bottom: 50px;
}

.section-title h2 {
	font-size: 36px;
	font-weight: 700;
}

.section-title p {
	color: #666;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}

.service-card {
	background: #fff;
	padding: 30px 20px;
	border-radius: 12px;
	text-align: center;
	transition: 0.3s;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
	transform: translateY(-6px);
}

.service-card .icon {
	font-size: 40px;
	margin-bottom: 15px;
}

.service-card h4 {
	font-size: 18px;
	margin-bottom: 10px;
}

.service-card p {
	font-size: 14px;
	color: #666;
}

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

@media (max-width: 575px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
}

.service-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 20px;
	text-align: left;
}

.service-list li {
	font-size: 13px;
	color: #555;
	padding-left: 18px;
	position: relative;
}

.service-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #1f3b8f;
	font-weight: bold;
}

@media (max-width: 575px) {
	.service-list {
		grid-template-columns: 1fr;
	}
}

.cta-section {
	padding: 30px 0 0 0;
	background: #f8f9fb;
}

.cta-box {
	display: grid;
	grid-template-columns: 1.4fr .8fr;
	gap: 24px;
	background: #fff;
	border-radius: 18px;
	padding: 38px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	border: 1px solid rgba(0, 0, 0, .06);
}

.cta-left h2 {
	font-size: 36px;
	margin: 0 0 12px;
	font-weight: 800;
}

.cta-left p {
	margin: 0 0 22px;
	color: #667085;
	line-height: 1.7;
	max-width: 650px;
}

.cta-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: .2s;
}

.cta-btn.primary {
	background: #1f3b8f;
	color: #fff;
}

.cta-btn.primary:hover {
	transform: translateY(-2px);
}

.cta-btn.outline {
	border: 2px solid #1f3b8f;
	color: #1f3b8f;
	background: transparent;
}

.cta-btn.outline:hover {
	background: #1f3b8f;
	color: #fff;
}

.cta-mini {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	color: #344054;
	font-weight: 600;
}

.cta-mini span {
	background: #f2f4f7;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 13px;
}

.cta-right {
	display: flex;
	align-items: center;
}

.cta-card {
	width: 100%;
	background: linear-gradient(135deg, rgba(31, 59, 143, .10), rgba(228, 198, 90, .14));
	border: 1px solid rgba(31, 59, 143, .12);
	padding: 22px;
	border-radius: 16px;
}

.cta-card h4 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
}

.cta-card p {
	margin: 0 0 14px;
	color: #475467;
	line-height: 1.6;
}

.w-100 {
	width: 100%;
}

@media(max-width:991px) {
	.cta-box {
		grid-template-columns: 1fr;
		padding: 26px;
	}

	.cta-left h2 {
		font-size: 28px;
	}
}

.cta-hero {
	position: relative;
	background: url("../css/images/contact-1.webp") center/cover no-repeat;
	padding: 50px 0;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.cta-content {
	position: relative;
	max-width: 850px;
	margin: auto;
	z-index: 2;
}

.cta-content h2 {
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 15px;
	color: white;
}

.cta-content p {
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 30px;
	opacity: 0.95;
}

.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.cta-btn {
	padding: 14px 24px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
	display: inline-block;
}

.cta-btn.primary {
	background: #2e9df7;
	color: #fff;
}

.cta-btn.primary:hover {
	transform: translateY(-2px);
}

.cta-btn.secondary {
	background: #20c97a;
	color: #fff;
	text-decoration: none;
}

.cta-btn.secondary:hover {
	transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 767px) {
	.cta-content h2 {
		font-size: 28px;
	}

	.cta-content p {
		font-size: 15px;
	}

	.cta-hero {
		padding: 80px 0;
	}
}

.scr {
	scroll-margin-top: 120px;
}

:root {
	--ct-bg: #f7f8fb;
	--ct-card: #ffffff;
	--ct-border: #e8ebf2;
	--ct-text: #0f172a;
	--ct-muted: #64748b;
	--ct-primary: #4f46e5;
	/* icon circle */
	--ct-yellow: #f4b400;
	/* button */
	--ct-radius: 14px;
}

.ct-contact-wrap {
	padding: 70px 0;
	background: #fff;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--ct-text);
}

.ct-container {
	width: min(1150px, 92%);
	margin: 0 auto;
}

.ct-grid {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 26px;
	align-items: start;
}

/* LEFT CARDS */
.ct-left {
	display: grid;
	gap: 18px;
}

.ct-card {
	background: var(--ct-card);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	padding: 18px;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ct-icon {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(79, 70, 229, 0.12);
	color: var(--ct-primary);
	font-size: 20px;
}

.ct-content h4 {
	margin: 2px 0 6px;
	font-size: 16px;
	font-weight: 700;
}

.ct-content p {
	margin: 0;
	color: var(--ct-muted);
	line-height: 1.55;
	font-size: 14px;
}

/* RIGHT FORM BOX */
.ct-right {
	background: var(--ct-card);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	padding: 26px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ct-right h2 {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ct-sub {
	margin: 0 0 18px;
	color: var(--ct-muted);
	line-height: 1.6;
	font-size: 14px;
	max-width: 680px;
}

.ct-form {
	margin-top: 10px;
}

.ct-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 12px;
}

.ct-field input,
.ct-field textarea {
	width: 100%;
	border: 1px solid var(--ct-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	outline: none;
	background: #fff;
	transition: 0.2s ease;
}

.ct-field textarea {
	resize: vertical;
	min-height: 140px;
}

.ct-field input:focus,
.ct-field textarea:focus {
	border-color: rgba(79, 70, 229, 0.55);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.ct-btn {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	background: var(--ct-yellow);
	color: #111827;
	font-weight: 800;
	padding: 12px 18px;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(244, 180, 0, 0.25);
	transition: transform .15s ease, box-shadow .15s ease;
}

.ct-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(244, 180, 0, 0.28);
}

.ct-arrow {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.12);
	display: grid;
	place-items: center;
	font-size: 16px;
	line-height: 1;
}

/* RESPONSIVE */
@media (max-width: 991px) {
	.ct-grid {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 640px) {
	.ct-row {
		grid-template-columns: 1fr;
	}

	.ct-card {
		grid-template-columns: 52px 1fr;
		padding: 16px;
	}

	.ct-icon {
		width: 52px;
		height: 52px;
	}
}

.pad {
	padding: 50px;
}

.success {
	height: 100px;
	width: 100px;
}

/* NEW UNIQUE hamburger (doesn't touch Bootstrap .navbar-toggle) */
.sr-hamburger {
	display: none;
	/* hidden on desktop */
	width: 44px;
	height: 40px;
	padding: 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
	z-index: 9999;
}

/* the 3 lines */
.sr-hamburger__bar {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px auto;
	background: #000;
	/* change if your header is light */
	transition: transform .25s ease, opacity .2s ease;
	border-radius: 2px;
}

/* show hamburger only on mobile */
@media (max-width: 991px) {
	.sr-hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* ensure header row spacing doesn't break */
	/* .navbar-header {
    width: 100%;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
  } */
}

@media (max-width: 991px) {

	/* show hamburger */
	.sr-hamburger {
		display: block !important;
		float: right !important;
		margin-top: 18px !important;
		margin-right: 15px !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		outline: none !important;
		padding: 10px !important;
	}

	.sr-hamburger:focus,
	.sr-hamburger:active {
		background: transparent !important;
		outline: none !important;
		box-shadow: none !important;
	}

	/* hide old bootstrap hamburger if still exists anywhere */
	.navbar-toggle {
		display: none !important;
	}

	/* menu dropdown style (same as your existing) */
	#mainNav {
		background: #181a1c;
		margin-top: 10px;
		border: 0;
	}

	#mainNav .navbar-nav>li>a {
		color: #fff !important;
		padding: 14px 18px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	#mainNav .navbar-nav>li>a:hover {
		background: #000 !important;
	}
}

/* Animate to X when menu is open (Bootstrap adds .in) */
@media (max-width: 991px) {
	#mainNav.in~* {}

	/* (no-op, keep safe) */

	/* We'll apply "is-open" via tiny JS below for smooth animation */
	.sr-hamburger.is-open .sr-hamburger__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.sr-hamburger.is-open .sr-hamburger__bar:nth-child(2) {
		opacity: 0;
	}

	.sr-hamburger.is-open .sr-hamburger__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

.sr-hamburger.is-open .sr-hamburger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sr-hamburger.is-open .sr-hamburger__bar:nth-child(2) {
	opacity: 0;
}

.sr-hamburger.is-open .sr-hamburger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}



/* ===== iPad / Tablet FIX (768px to 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {

	/* 1) FIX: your template sets width:auto; which makes menu panel narrow */
	.navwrapper .container,
	.navbar.navbar-inverse.navbar-static-top .container {
		width: 100% !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* 2) Keep logo normal (your template makes it absolute at <=810px) */
	.logo {
		position: relative !important;
		left: auto !important;
		float: left !important;
		margin-top: 12px !important;
	}

	/* 3) Keep hamburger on right */
	.sr-hamburger {
		display: block !important;
		float: right !important;
		margin-top: 18px !important;
		margin-right: 10px !important;
	}

	/* 4) Make dropdown menu open FULL WIDTH below the header */
	.navbar.navbar-inverse.navbar-static-top {
		position: relative !important;
	}

	#mainNav {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		margin-top: 0 !important;
		background: #181a1c !important;
		z-index: 99999 !important;
	}

	/* 5) Ensure menu items align properly */
	#mainNav .navbar-nav {
		width: 100% !important;
		text-align: left !important;
		background: transparent !important;
	}

	#mainNav .navbar-nav>li {
		display: block !important;
		width: 100% !important;
	}

	#mainNav .navbar-nav>li>a {
		display: block !important;
		padding: 14px 18px !important;
		color: #fff !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	#mainNav .navbar-nav>li>a:hover {
		background: #000 !important;
	}
}

/* ===== iPad fix: menu should be hidden until .in ===== */
@media (min-width: 768px) and (max-width: 991px) {

	/* default = hidden */
	#mainNav.collapse {
		display: none !important;
		visibility: hidden !important;
	}

	/* when open (.in in Bootstrap 3) */
	#mainNav.collapse.in {
		display: block !important;
		visibility: visible !important;
	}
}

/* iPad / tablet: prevent menu from looking always open */
@media (min-width: 768px) and (max-width: 991px) {
	#mainNav.collapse {
		display: none !important;
		visibility: hidden !important;
	}

	#mainNav.collapse.in {
		display: block !important;
		visibility: visible !important;
	}
}

.stats-cta {
	background: #eaf5fb;
	padding: 40px 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stats-cta__container {
	width: min(1200px, 92%);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* LEFT STATS */
.stats-cta__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 18px;
	flex-wrap: wrap;
}

.stat-card {
	/* width: 220px; */
	background: #fff;
	border: 2px dashed #c9d3db;
	border-radius: 18px;
	padding: 20px 22px;
	position: relative;
	box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
}

/* green shadow corner like screenshot */
.stat-card::after {
	content: "";
	position: absolute;
	right: -8px;
	bottom: -8px;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	background: rgba(34, 197, 94, .18);
	z-index: -1;
}

.stat-card__num {
	font-size: 44px;
	font-weight: 900;
	letter-spacing: .5px;
	color: #111827;
	line-height: 1.1;
}

.stat-card__num .plus {
	font-size: 28px;
	font-weight: 900;
}

.stat-card__num .pct {
	font-size: 22px;
	font-weight: 900;
}

.stat-card__label {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #111827;
}

/* ARROW */
.stats-cta__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
}

.stats-cta__arrow svg {
	max-width: 110px;
}

/* RIGHT CONTENT */
.stats-cta__content h3 {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 900;
	color: #111827;
}

.stats-cta__content p {
	margin: 0 0 14px;
	color: #475569;
	font-weight: 600;
}

.stats-cta__btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.btn-green,
.btn-blue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 800;
	text-decoration: none;
	color: #fff;
	box-shadow: 0 12px 20px rgba(0, 0, 0, .08);
	transition: .15s ease;
	white-space: nowrap;
}

.btn-green {
	background: #16a34a;
}

.btn-blue {
	background: #2ea3e6;
}

.btn-green:hover,
.btn-blue:hover {
	transform: translateY(-1px);
}

/* RESPONSIVE */
@media (max-width: 991px) {
	.stats-cta__container {
		flex-direction: column;
		align-items: flex-start;
	}

	.stats-cta__arrow {
		display: none;
		/* hide arrow on mobile */
	}

	.stat-card {
		width: min(260px, 100%);
	}
}

.btn-green:hover {
	color: #fff;
	text-decoration: none;
}

.btn-blue:hover {
	color: #fff;
	text-decoration: none;
}

.faq-section {
	padding: 80px 0;
	background: #ffffff;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.faq-section .container {
	width: min(1100px, 92%);
	margin: 0 auto;
}

.faq-head {
	text-align: center;
	margin-bottom: 28px;
}

.faq-head h2 {
	margin: 0 0 10px;
	font-size: 34px;
	font-weight: 900;
	color: #0f172a;
}

.faq-head p {
	margin: 0 auto;
	max-width: 720px;
	color: #64748b;
	line-height: 1.6;
	font-weight: 600;
}

.faq-wrap {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	gap: 14px;
}

.faq-item {
	border: 1px solid #e8ebf2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
	overflow: hidden;
}

.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 18px;
	font-weight: 800;
	color: #111827;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	user-select: none;
}

/* remove default arrow */
.faq-item summary::-webkit-details-marker {
	display: none;
}

/* custom + / - */
.faq-item summary::after {
	content: "+";
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(79, 70, 229, .10);
	color: #4f46e5;
	font-size: 20px;
	font-weight: 900;
	flex: 0 0 34px;
}

.faq-item[open] summary::after {
	content: "–";
	background: rgba(22, 163, 74, .12);
	color: #16a34a;
}

.faq-body {
	padding: 10px 18px 16px 18px;
	color: #475569;
	line-height: 1.7;
	font-weight: 600;
}

/* nice divider line under question */
.faq-item[open] summary {
	border-bottom: 1px solid #eef2f7;
}

@media (max-width: 640px) {
	.faq-head h2 {
		font-size: 28px;
	}

	.faq-item summary {
		padding: 14px 14px;
	}

	.faq-body {
		padding: 0 14px 14px 14px;
	}
}

.desktop {
  display: none;
}

.mobile {
  display: none !important;
}

@media screen and (min-device-width: 601px) {
  .desktop {
    display: block;
  }



}

@media screen and (max-device-width: 600px) {
  .mobile {
    display: block !important;
  }
  .stats-cta__stats{
	grid-template-columns: 1fr;
  }

  .stats-cta__btns{
	justify-content: center;
  }
  .stats-cta__content{
	text-align: center;
  }

      .stats-cta__container{
		align-items: center;
	  }
}

.mm-btn{
  padding:10px 16px;
  border:0;
  border-radius:8px;
  background:#ff7a00;
  color:#fff;
  cursor:pointer;
  font-weight:600;
}

.mm-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.mm-overlay.is-open{ display:flex; }



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


.mm-top{
  padding:22px 22px 18px;
  text-align:center;
}

.mm-logo{
  height:8	0px;
  width:auto;
  object-fit:contain;
}

.mm-icons{
  margin:14px 0 8px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.mm-ic{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f6f7fb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.mm-title{
  margin:8px 0 4px;
  font-size:18px;
  font-weight:800;
  color:#111;
}

.mm-sub{
  margin:0 0 12px;
  font-size:13px;
  color:#666;
  line-height:1.5;
}

.mm-cta{
  display:inline-block;
  padding:10px 14px;
  border-radius:8px;
  background:#ff7a00;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
}

.mm-divider{
  height:1px;
  background:#e9e9e9;
}

.mm-body{
  padding:18px 22px 22px;
}

.mm-head{
  text-align:center;
  margin:0 0 14px;
  font-size:22px;
  font-weight:900;
}

.mm-form label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#333;
  margin:0 0 6px;
}

.mm-form input,
.mm-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #dcdcdc;
  border-radius:8px;
  outline:none;
  font-size:14px;
}

.mm-form input:focus,
.mm-form textarea:focus{
  border-color:#ff7a00;
  box-shadow:0 0 0 3px rgba(255,122,0,.15);
}

.mm-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:12px;
}

.mm-field{ margin-bottom:12px; }

.mm-submit{
  width:100%;
  border:0;
  border-radius:8px;
  padding:12px 14px;
  background:#ff7a00;
  color:#fff;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
}

@media (max-width:520px){
  .mm-row{ grid-template-columns:1fr; }
}



/* MAIN POPUP BOX */
.mm-modal{
  width:100%;
  max-width:480px;     /* ⭐ smaller popup width */
  max-height:85vh;     /* ⭐ prevents touching top/bottom */
  overflow-y:auto;     /* ⭐ scroll inside popup */

  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  position:relative;
}

/* Reduce top spacing */
/* .mm-top{
  padding:18px;
} */

.mm-body{
  padding:18px;
}

/* smaller heading */
.mm-head{
  font-size:20px;
  margin-bottom:10px;
}

body.popup-open{
  overflow:hidden;
}

.mm-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:99999;          /* ✅ make it on top */
  pointer-events:auto;    /* ✅ ensure clickable */

  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f2f2f2;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}


.enquire-btn{
  position: fixed;
  right: 20px;              /* ✅ gap from edge */
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;

  background: #262e68;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 99999;

  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.enquire-btn:hover{
  /* opacity: .9; */
  text-decoration: none;
  color: #fff;
}

.enquire-btn{
	text-decoration: none;
}

/* Breadcrumb fix */
.page_head{
  padding: 40px 0;
  background: #f5d76e; /* same yellow like your screenshot */
}

#breadcrumbs{
  margin-top: 8px;
}

#breadcrumbs ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

#breadcrumbs ul li{
  font-size: 13px;
  color: #111;   /* IMPORTANT: visible on yellow */
}

#breadcrumbs ul li a{
  color: #111;
  text-decoration: none;
}

#breadcrumbs ul li a:hover{
  text-decoration: underline;
}

/* separator */
#breadcrumbs ul li + li:before{
  content: "/";
  margin-right: 10px;
  color: #111;
}