/*=============== All Included font icon and custom global included css ================*/
@import url('animate.css');
@import url('../icon/icofont/icofont.min.css');
@import url('../icon/font-awesome-4.7.0/css/font-awesome.min.css');
@import url('../icon/simple-line-icons-master/css/simple-line-icons.css');
@import url('../icon/pe-icon-7-stroke/css/pe-icon-7-stroke.css');
@import url('../icon/themify/themify-icons.css');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('customize.css');
/*=============== End Of all Included font icon and custom global included css ================*/
html{
	font-family: 'PT Sans', sans-serif;
}
body{
	font-family: 'PT Sans', sans-serif;
}


/*=========== Root Color ===============*/
:root {
  --primary: #3d77db;
  --light-primary: #428bca;
  --secondary: #eceff5;
  --white: #ffffff;
  --action: #e44d3a;
  --engine-red: #CA1F26;
  --focus-engine-red: #b01c21;
  --rock-dark: #2D2D3B;
  --focus-rock-dark: #16161d;
}

body{
	background-color: var(--secondary);
}


::placeholder {
	font-size: 13px;
	color: #aaa;
}


/*====== Container customize =======*/



@media screen and (min-width: 1280px) {
	.container{
		max-width: 1200px;
	}
}

@media screen and (min-width: 1366px) {
	.container{
		max-width: 1300px;
	}
}

@media screen and (min-width: 1366px) {
	.container{
		max-width: 1300px;
	}
}


/*.wraper{
	background-color: var(--secondary);
}
*/

a:hover{
	text-decoration: none;
}


a:focus, .nav-link:focus, button:focus, .btn:focus{
	box-shadow: none;
	outline: none;
}

a:active, .nav-link:active, button:active, .btn:active{
	box-shadow: none;
	outline: none;
}


/*========= text / background / border / button color ================*/

/*========== Color Engine red ============*/
.text-engine-red{
	color: var(--engine-red);
}

a.text-engine-red:hover{
	color: var(--focus-engine-red);
}


.bg-engine-red{
	background-color: var(--engine-red);
}

.border-engine-red{
	border-color: var(--engine-red) !important;
}

.btn-engine-red{
	background-color: var(--engine-red);
	color: #ffffff;
}

a.btn-engine-red:hover, .btn-engine-red:hover{
	background-color: var(--focus-engine-red);
	color: #ffffff;
}


/*========== Color Engine red ============*/
.text-rock-dark{
	color: var(--rock-dark);
}

a.text-rock-dark:hover{
	color: var(--focus-rock-dark);
}


.bg-rock-dark{
	background-color: var(--rock-dark);
}

.border-rock-dark{
	border-color: var(--rock-dark) !important;
}

.btn-rock-dark{
	background-color: var(--rock-dark);
	color: #ffffff;
}

a.btn-rock-dark:hover, .btn-rock-dark:hover{
	background-color: var(--focus-rock-dark);
	color: #ffffff;
}


/*======== Brand / Logo =========*/
.navbar-brand img{
	max-height: 60px;
	width: auto;
}


/*============== Header / Navbar / Menubar ================*/
.header{
	position: relative;
	display: block;
	overflow: hidden;
}


@media screen and (max-width: 991px) {
	.header > .header-container{
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}


@media screen and (min-width: 992px) {
	.header{
		background-color: var(--engine-red);
	}


	.nav-after-white{
		position: relative;
	}

	.nav-after-white:after{
		content: '';
		position: absolute;
		width: 100%;
		background-color: #F8F9FA;
		left: 100%;
		top: 0;
		bottom: 0;
	}

	.nav-after-rock-dark{
		position: relative;
	}

	.nav-after-rock-dark:after{
		content: '';
		position: absolute;
		width: 100%;
		background-color: var(--rock-dark);
		left: 100%;
		top: 0;
		bottom: 0;
	}

	.header-brand{
		position: relative;
		display: flex;
		align-items: center;
		padding-right: 30px;
	}

	.header-brand:after{
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 100%;
		z-index: 1;
		background: var(--engine-red);
		transform-origin: bottom left;
		-ms-transform: skew(0deg, 45deg);
		-webkit-transform: skew(0deg, 45deg);
		transform: skew(0deg, 45deg);
	}
}


/*========= After  / Before skew ==============*/



.after-skew {
	position: relative;
	padding: 10px 20px 10px 10px;
	font-size: 20px;
	color: #FFF;
	z-index: 1;
}
.after-skew:after {
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	transform-origin: top left;
	-ms-transform: skew(30deg, 0deg);
	-webkit-transform: skew(30deg, 0deg);
	transform: skew(30deg, 0deg);
}



.before-skew {
	position: relative;
	padding: 10px 20px 10px 10px;
	font-size: 20px;
	position: relative;
	color: #FFF;
	z-index: 1;
}
.before-skew:after {
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	transform-origin: top left;
	-ms-transform: skew(-30deg, 0deg);
	-webkit-transform: skew(-30deg, 0deg);
	transform: skew(-30deg, 0deg);
}


.after-skew-light:after{
	background-color: #f0f0f0;
}

.after-skew-engine-red:after{
	background-color: var(--engine-red);
}

.after-skew-rock-dark:after{
	background-color: var(--rock-dark);
}

.before-skew-light:after{
	background-color: #f0f0f0;
}

.before-skew-engine-red:after{
	background-color: var(--engine-red);
}

.before-skew-rock-dark:after{
	background-color: var(--rock-dark);
}





	/*================= Banner ================*/
.banner-form{
	background-color: #ffffff;
	border-radius: .5rem;
	padding: 1.5rem;
	width: 100%;
	max-width: 468px;
}

.banner-form input.form-control{
	border-color: #f5f5f5;
	border-radius: 0;
	background-color: #f5f5f5;
}

.banner-form input.form-control:focus{
	box-shadow: none;
	background-color: #f0f0f0;
}


/*===================  Box with icon and skew ================*/
.skew-icon-box-item{
	padding: 1.5rem;
	height: 100%;
}

@media screen and (min-width: 768px) {
	.skew-icon-box-item{
		padding: 0;
	}
	.skew-icon-box {
		position: relative;
		width: 120px;
		padding: 10px 20px 10px 10px;
		font-size: 20px;
		color: #FFF;
		background-color: #ddd;
		z-index: 1;
		display: flex;
		align-items: center;
		text-align: center;
	}
	.skew-icon-box:after {
		content: " ";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #ddd;
		transform-origin: top left;
		-ms-transform: skew(15deg, 0deg);
		-webkit-transform: skew(15deg, 0deg);
		transform: skew(15deg, 0deg);
	}

	.skew-content-box{
		width: 100%;
		padding: 1rem 1rem 1rem 3.5rem;
	}

	.skew-content-box-2{
		width: 100%;
		padding: 100px;
	}
}


/*=================== box with overlay icon ==================*/

.box-with-overlay-icon{
    height: 100%;
    border: 1px solid #aaaaaa;
    position: relative;
}
.box-with-overlay-icon-header{
    padding: 32px;
    margin-bottom: 32px;
}

.box-with-overlay-icon-header img{
    max-height: 60px;
}

.box-with-overlay-icon{
    height: 100%;
    background-color: #fff;
}

.box-with-overlay-icon-body{
    padding: 32px 32px 64px 32px;
}

.box-with-overlay-icon-footer{
    background-color: var(--engine-red);
    padding: 64px 32px 32px 32px;
    position: sticky;
    top: 100%;
}


.overlay-pro-box{
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #aaaaaa;
    background-color: #ffffff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.overlay-pro-box img{
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/*============ Footer ==============*/

.footer{
    background-color: var(--rock-dark);
    overflow: hidden;
    padding-top: 32px;
    padding-bottom: 32px;
}


.skew-box{
    position: relative;
}

.skew-brand{
    position: relative;
}

@media screen and (min-width: 992px) {
    .footer{
        background-color: var(--engine-red);
        /*overflow: hidden;*/
        padding-top: 0;
        padding-bottom: 0;
    }

    .skew-content{
        position: relative;
        padding-left: 128px;
        /*background-color: var(--rock-dark);*/
        width: 100%;
        z-index: 1;
    }

    .skew-content:after {
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background: var(--rock-dark);
        transform-origin: bottom left;
        -ms-transform: skew(-30deg, 0deg);
        -webkit-transform: skew(-30deg, 0deg);
        transform: skew(-30deg, 0deg);
    }

    .skew-box:after{
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 100%;
        z-index: 1;
        background: var(--rock-dark);
    }

    .skew-brand{
        padding-top: 64px;
        padding-bottom: 62px;
    }

    .skew-content{
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

@media screen and (max-width: 991px) {
    .skew-box{
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;

    }
}