/*
    ======================================================
    General
    ======================================================
*/

	html {
		scroll-behavior: smooth;
	}

	body{
		color: #282828;
    	font-family: 'Roboto', sans-serif;
		font-size: 1rem;
		font-weight: 400;
		overflow-x: hidden;
	}
	a{
		color: #6ab5e2;
		transition: all .4s ease;
		text-decoration: none;
	}
	a:hover{
		color: #6d6e71;
		text-decoration: none;
	}
	h1,h2,h3,h4,h5{
		font-weight: 700;
	}
	section, .section{
		padding: 3rem 0;
	}
	.section-title{
		display: block;
		text-align: center;
		font-size: 3rem;
	}
	.section-title span{
		font-weight: 400;
	}
	
	.highlighted-title{
		background-color: #9f2330;
		color: #fff;
		display: inline-block;
		padding: 0 10px;
		text-transform: uppercase;
	}
	
	.highlighted-title2{
		background-color: #ffffff;
		display: inline-block;
		padding: 0 10px;
		text-transform: uppercase;
	}
	
	img{
		display: block;
		max-width: 100%;
		border-style: none;
}
	}
	.btn-primary{
		background-color: #606060;
		border-color: #606060;
	}
	.btn-primary:hover,
	.btn-primary:focus, .btn-primary.focus{
		background-color: #282828;
		border-color: #282828;
	}
	.form-control{
		border-radius: 8px;
	}
	.block-title{
		font-weight: 700;
		position: relative;
		text-transform: uppercase;
		padding: .5rem 0;
		margin-bottom: 1rem;
	}
	.block-title:before{
		content: '';
		height: 8px;
		width: 50px;
		background-color: #6ab5e2;
		position: absolute;
		left: 0;
		bottom: 0;
	}
}
/*
    ======================================================
    Navbar
    ======================================================
*/
	/*Navbar*/

	.navbar{

		box-shadow: 2px 2px 10px rgba(0,0,0,.4);

	}

	.navbar-brand img{

		max-height: 70px;

	}

	.info-inline{

		display: flex;

		flex-direction: column;

		margin-left: auto;

		letter-spacing: 1px;

		font-size: 13px;

	}

	.info-inline i{

		color: #2d2f6a;

	}
	
	.big_hero-navbar{

		min-height: calc(100vh - 90px);

	}


/*Navbar END*/
/*
    ======================================================
    Hero
    ======================================================
*/
	.hero{
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		min-height: 900px;
		padding: 7rem 0;
		position: relative;
	}
	.hero:before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,.3);
	}
	.hero .container{
		position: relative;
		margin-top: 2rem;
	}
	.hero-title{
		color: #6d6e71;
		display: block;
		margin-bottom: 2rem;
	}
	.hero-title h2{
		line-height: 1;
		color: #6ab5e2;
		font-size: 3rem;
	}
	.hero-title h3{
		font-size: 1.5rem;
	}
	.hero-title h4{
		font-size: 1.25rem;
	}
	.hero-title span{
		font-weight: 400;
	}
/*
    ======================================================
    Hero form
    ======================================================
*/
	.hero-form{
		padding: 2rem;
		background-color: #2d2f6a;
		box-shadow: 4px 4px 10px rgba(0,0,0,.3);
		color: #fff;
		text-align: center;
		font-size: 1.25rem;
		margin: auto;
		border-radius: 8px;
	}
	.hero-form label{
		display: block;
		margin-bottom: 1rem;
	}
	.hero-form p{
		font-size: 1rem;
	}
	.hero-form .form-group{
		position: relative;
		display: flex;
		align-items: center;
	}
	.hero-form .form-group img{
		position: absolute;
		left: 10px;
		max-width: 20px;
		max-height: 20px;
	}
	.hero-form .form-control{
		font-size: 0.80rem;
	}
	.hero-form .btn{
		text-transform: uppercase;
		font-weight: 700;
		min-width: 200px;
		padding: .25rem 1rem;
		font-size: 1.25rem;
		margin: auto;
	}
/*
    ======================================================
    Main Area
    ======================================================
*/
	.main-area{
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: top;
	}
/*
    ======================================================
    Welcome
    ======================================================
*/
	.welcome{
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		clip-path: polygon(0 100px, 100% 0, 100% 100%, 0% 100%);
		margin-top: -100px;
		padding: 150px 0 100px;
		position: relative;
	}
	
	.welcome h4{
		font-weight: 500;
		text-transform: uppercase;
	}
	.welcome label{
		color: #6ab5e2;
	}
	.welcome p{
		font-size: 15px;
	}
	
/*
    ======================================================
    Service
    ======================================================
*/
	.services{
		position: relative;
		padding: 100px 0 120px;
		z-index: 1;
	}
	.services .section-title{
		color: #fff;
		margin-bottom: 1rem;
	}
	.services .container{
		position: relative;
		padding-bottom: 200px;
		z-index: 1;
	}
	.services:before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.1);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92.5%);
	}
	.services:after{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to top left, #6ab5e2, #2d2f6a);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92.5%);
		opacity: 1;
	}
	.services div[class*="col-"]{
		margin: 1rem 0;
	}
	.service-block{
		border: 2px solid #fff;
		color: #fff;
		padding: 2rem;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	



	.service-block h3{
		text-transform: uppercase;
		font-weight: 500;
		margin-bottom: 1rem;
		margin-top: 1rem;
	}
	.service-block ul{
		margin: 0;
		padding: 0 0 0 15px;
	}
	.service-experience{
		color: #fff;
		position: absolute;
		right: 0;
		bottom: 0px;
		display: flex;
	}
	.service-experience img{
		margin-right: 15px;
		max-height: 70px;
	}
	.service-experience h3{
		font-size: 3rem;
		margin-bottom: 0;
		line-height: 1;
	}
	.service-experience p{
		font-size: 2rem;
		margin-bottom: 0;
		line-height: 1;
	}
	.red-title{
		color: #6ab5e2;
		margin: 1rem 0;
	}

/*Blue Section*/

	.blue_section{

		background-color: #6ab5e2;

		color: #fff;

		padding: 1rem;

	}

	.blue_section h1, .blue_section h2, 

	.blue_section h3, .blue_section h4,

	.blue_section h5{

		margin-bottom: 0;

		text-align: center;

	}

	.blue_section a{

		text-decoration: underline;

		transition: all .4s ease;

		color: #fff;

	}
	
	.blue_section span{

		font-weight:300

	}

	.blue_section a:hover{

		opacity: .7;

	}

/*Blue Section END*/
	
	
/*
    ======================================================
    Social Media
    ======================================================
*/
	.social-media{
		text-align: center;
		margin-top: 1rem;
		width: 100%;
	}
	.social-media-nav{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.social-media-nav a{
		display: inline-flex;
		margin: 15px;
	}
	.social-media-nav a img{
		max-height: 40px;
		transition: all .4s ease;
	}
	.social-media-nav a img:hover{
		opacity: .7;
	}
/*
    ======================================================
    Owl Slide
    ======================================================
*/
	.c-slide{
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
	}
	.c-slide h2{
		text-align: center;
		color: #fff;
		margin-bottom: 2rem;
	}
	.c-slide .row{
		margin-left: -7.5px;
		margin-right: -7.5px;
	}
	.c-slide div[class*="col-"]{
		padding: 0 7.5px;
		margin: 7.5px 0;
	}
	.c-slide img{
		display: block;
		width: 100%;
	}
	.c-slide .carousel-inner{
		width: 90%;
		margin: auto;
	}
	.c-slide .carousel-control{
		width: 5%;
		color: #fff;
		font-size: 2rem;
	}
/*
    ======================================================
    Footer
    ======================================================
*/
	footer{
		padding: 2rem 0 !important;
	}
	footer h3{
		color: #2c8b44;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}
	.footer-block{
		display: flex;
		align-items: center;
		font-size: 14px;
	}
	.footer-block .footer-img{
		margin-right: 5px;
	}
	.footer-block .footer-img img{
		display: block;
		max-width: 50px;
	}
	.footer-block .footer-content a{
		display: inline-flex;
		text-decoration: none;
		font-size: 1rem;
		font-weight: 700;
		color: #282828;
	}
	.footer-block .footer-content a:hover{
		color: #6d6e71;
	}
	.copyright{
		background-color: #b91e2d;
		padding: 1rem 0;
		color: #fff;
		font-weight: 600;
		text-align: center;
	}
	.copyright p{
		font-size: 12px;
		margin-bottom: 0;
	}
	
	
	/*
    ======================================================
    Service2
    ======================================================
*/
	.topics-list{
		padding: 0;
		margin: 0 0 2rem;
		list-style: none;
	}
	.topics-list li{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		padding-left: 25px;
		font-size: 20px;
	}
	.topics-list li:before{
		content: '\f058';
		color: #E32636;
		display: inline-flex;
		font-family: "Font Awesome 5 Pro";
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		position: absolute;
		left: 0;
		top: 5px;
		font-size: 18px;
	}
	.course-topics{
		padding: 3rem 0 4rem;
	}
	.course-topics div[class*="col-"]{
		margin: 1rem 0;
	}
	.featured-box {
		color: #fff;
		border: 2px solid #2d2f6a;
		padding: 1rem;
		text-align: center;
		height: 100%;
		font-size: 18px;
		background-color:#2d2f6a;
	}
	.featured-box img{
		max-height: 70px;
		margin: 1rem auto;
	}
	
	
	
	
	
	
	
/*
    ======================================================
    Responsive
    ======================================================
*/
	@media (min-width: 768px){
	}
	@media (min-width: 992px){
		.hero-title{
			margin-bottom: 0;
		}
		.hero-title-container{
			display: flex;
			align-items: center;
		}
		.hero-title h2{
			line-height: 1;
			color: #282b6c;
			font-size: 4rem;
			letter-spacing: -3px
		}
		.hero-title h3{
			font-size: 2rem;
		}
		.hero-title h4{
			font-size: 1.75rem;
		}
		.welcome{
			font-size: 15px;
			clip-path: polygon(0 240px, 100% 0, 100% 100%, 0% 100%);
			margin-top: -240px;
			padding: 300px 0 0;
		}
		.welcome h3{
			font-size: 2.5rem;
		}
		.welcome h4{
			font-size: 1.75rem;
		}
		.service-experience h3{
			font-size: 3.5rem;
		}
		.service-experience p{
			font-size: 2.5rem;
		}
		.services{
			padding-bottom: 200px;
		}
		.services:before,
		.services:after{
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
		}
		.footer-block{
			justify-content: center;
		}
		.footer-block-right-lg{
			justify-content: flex-end;
		}
	}
	@media (max-width: 991px){
		.hero{
			padding-bottom: 8rem;
		}
		.footer-brand{
			margin-bottom: 2rem;
		}
		.footer-brand img{
			margin: auto;
		}
	}
	@media (max-width: 767px){
		.navbar-main{
			flex-wrap: wrap;
		}
		.navbar-main .navbar-brand{
			width: 100%;
			margin-right: 0;
			margin-bottom: 1rem;
		}
		.navbar-main .navbar-brand img{
			display: block;
			margin: auto;
		}
		.navbar .nav-item{
			margin: auto;
			width: 100%;
			justify-content: center;
		}
		.services .row{
			margin-bottom: 2rem;
		}
	}
	
	
	
	
	
	
	@media (min-width: 1200px){
		.container {
			max-width: 1170px;
		}
		.hero-description{
			font-size: 1.75rem;
		}
		.course-topics{
			margin-bottom: 0px;
		}
		.big-form .urban-figure img{
			margin-left: -6%;
		}
		.hero-block{
			padding: 0 1rem;
		}
	}
	@media (min-width: 1440px){
		.hero .container{
			max-width: 1400px;
		}
		.big-form .urban-figure img{
			margin-left: 0%;
		}
	}
	@media (max-width: 1199px){
		.urban-figure img{
			width: 180%;
			margin-left: -40%;
		}
	}
	@media (max-width: 991px){
		.hero:before{
		background-color: rgba(256,256,256,.6);
		}
		.navbar{

			min-height: 90px;

		}
	}
	
	/*
	======================================================
	Contact Us
	======================================================
*/
	.section.contact{
		background-size: 90%;
		background-repeat: no-repeat;
		background-position: top right;
		padding-bottom: 120px;
	}
	.section.contact .form-group{
		margin-bottom: 3rem;
	}
	.section.contact .form-control{
		background-color: rgba(255,255,255,.7);
	}
	.contact-us-page .gmap-section{
		margin-top: -150px !important;
	}
	.mapouter{
		position: relative;
		text-align: right;
		height: 700px;
		width: 100%;
	}
	.mapouter .container{
		position: relative;
	}
	.gmap_canvas{
		overflow: hidden;
		background: none!important;
		height: 700px;
		width: 100%;
	}
	.contact-info{
		background-color: #2d2f6a;
		color: #fff;
		position: absolute;
		right: 15px;
		top: 150px;
		padding: 1rem 1.5rem;
		max-width: 300px;
		text-align: center;
	}
	.contact-info ul{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.contact-info li{
		display: flex;
		padding: 1rem 0;
		text-align: left;
	}
	.contact-info li:not(:last-child){
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
	.contact-info li img{
		max-width: 40px;
		min-width: 40px;
		margin-right: 15px;
	}
	.contact-info li p{
		margin-bottom: 0;
	}
/*