img.ccbc-logo {
	width: 7rem;
}
.companyImage img{ 
    width: 100%;
    margin-left: 15%;
    margin-top: -10%;
}
.container{
    max-width: 2600px;
}

.banner{
    margin: 0;
    position: absolute; 
    top: 25% !important;
}
.hero_shape {
	position: absolute;
	opacity: 0.1;
	height: 100vh;
}
.header_hero_content{
    padding: 5rem;
}
.header_hero_content .hero_title span {
	color: #f94f4f;
	font-size: 6rem;
	font-family: sans-serif;
	font-weight: bold;
}

.header_shape {
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	height: 100%;
}

.header_shape::before {
	display: none;
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 1000%;
	height: 100%;
	opacity: 100%;
	background-color: #f5f5fc;
	transform: skewX( -15deg);
}

.header_hero_content ul li {
	margin-left: 30px;
	margin-top: 30px;
}

.header_navbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	background-color: #3e3b3b;
}


#wrapper {
	
	width: 100%;
	
}

#txt {
	color: #eaeaea;
}

#wheel {
	width: 40rem;
	height: 40rem;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	border: 8px solid #fff;
	box-shadow: rgb(0 0 0 / 20%) 0px 0px 10px, rgb(0 0 0 / 5%) 0px 3px 0px;
	transform: rotate( 0deg);
}

#wheel:before {
	content: '';
	position: absolute;
	border: 4px solid rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: 1000;
}

#inner-wheel {
	width: 100%;
	height: 100%;
	-webkit-transition: all 6s cubic-bezier(0, .99, .44, .99);
	-moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
	-o-transition: all 6s cubic-bezier(0, .99, .44, .99);
	-ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
	transition: all 6s cubic-bezier(0, .99, .44, .99);
}

#wheel div.sec {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30rem 10rem 0;
	border-color: rgb(0, 72, 98) transparent;
	transform-origin: 50% 100%;
	left: 26%;
	top: -26%;
	opacity: 1;
}

#wheel div.sec:nth-child(1) {
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	border-color: #01110e transparent;
}

#wheel div.sec:nth-child(2) {
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	border-color: #2980b9 transparent;
}

#wheel div.sec:nth-child(3) {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	border-color: #34495e transparent;
}

#wheel div.sec:nth-child(4) {
	transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	border-color: #f39c12 transparent;
}

#wheel div.sec:nth-child(5) {
	transform: rotate(150deg);
	-webkit-transform: rotate(150deg);
	-moz-transform: rotate(150deg);
	-o-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	border-color: #d35400 transparent;
}

#wheel div.sec:nth-child(6) {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	border-color: #c0392b transparent;
}

#wheel div.sec:nth-child(7) {
	transform: rotate(210deg);
	-webkit-transform: rotate(210deg);
	-moz-transform: rotate(210deg);
	-o-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	border-color: #16a085 transparent;
}

#wheel div.sec:nth-child(8) {
	transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	-moz-transform: rotate(240deg);
	-o-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	border-color: #2980b9 transparent;
}

#wheel div.sec:nth-child(9) {
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	border-color: #34495e transparent;
}

#wheel div.sec:nth-child(10) {
	transform: rotate(300deg);
	-webkit-transform: rotate(300deg);
	-moz-transform: rotate(300deg);
	-o-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	border-color: #f39c12 transparent;
}

#wheel div.sec:nth-child(11) {
	transform: rotate(330deg);
	-webkit-transform: rotate(330deg);
	-moz-transform: rotate(330deg);
	-o-transform: rotate(330deg);
	-ms-transform: rotate(330deg);
	border-color: #d35400 transparent;
}

#wheel div.sec:nth-child(12) {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	border-color: #c0392b transparent;
}

#wheel div.sec .fa {
	margin-top: -19rem;
	color: rgb(255 255 255 / 63%);
	position: relative;
	z-index: 10000000;
	display: block;
	text-align: center;
	font-size: 2rem;
	text-shadow: rgb(255 255 255 / 72%) 0px -1px 0px, rgb(0 0 0 / 20%) 0px 1px 0px;
	transform: rotate( 90deg);
}

#spin {
	width: 68px;
	height: 68px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
	z-index: 1000;
	background: #fff;
	cursor: pointer;
	font-family: 'Exo 2', sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#spin:after {
	content: "SPIN";
	text-align: center;
	line-height: 68px;
	color: #CCC;
	text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0, 0, 0, 0.3);
	position: relative;
	z-index: 100000;
	width: 68px;
	height: 68px;
	display: block;
}

#spin:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 28px 20px;
	border-color: transparent transparent #ffffff transparent;
	top: -12px;
	left: 14px;
}

#inner-spin {
	width: 54px;
	height: 54px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: red;
	z-index: 999;
	box-shadow: rgba(255, 255, 255, 1) 0px -2px 0px inset, rgba(255, 255, 255, 1) 0px 2px 0px inset, rgba(0, 0, 0, 0.4) 0px 0px 5px;
	background: rgb(255, 255, 255);
	/* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
	/* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
	/* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
	/* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
	/* IE10+ */
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=1);
	/* IE6-9 fallback on horizontal gradient */
}

#spin:active #inner-spin {
	box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px inset;
}

#spin:active:after {
	font-size: 15px;
}

#shine {
	width: 250px;
	height: 250px;
	position: absolute;
	top: 0;
	left: 0;
	background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
	/* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(1%, rgba(255, 255, 255, 0.99)), color-stop(9%, rgba(255, 255, 255, 0.91)), color-stop(100%, rgba(255, 255, 255, 0)));
	/* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
	/* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
	/* IE10+ */
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
	/* IE6-9 fallback on horizontal gradient */
	opacity: 0.1;
}

@-moz-keyframes rotating {
	0% {
		-moz-transform: rotate(0deg);
	}
	/* 50% { -moz-transform: rotate(20deg); } */
	100% {
		-moz-transform: rotate(3600deg);
	}
}

@-webkit-keyframes rotating {
	0% {
		-webkit-transform: rotate(0deg);
	}
	/* 50% { -webkit-transform: rotate(20deg); } */
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotating {
	0% {
		transform: rotate(0deg);
	}
	/* 50% { transform: rotate(20deg); } */
	100% {
		transform: rotate(360deg);
	}
}

.wheel {
	width: 30rem;
	-webkit-animation: rotating 40s ease-in-out infinite;
	-moz-animation: rotating 40s ease-in-out infinite;
	-ms-animation: rotating 40s ease-in-out infinite;
	-o-animation: rotating 40s ease-in-out infinite;
	animation: rotating 40s ease-in-out infinite;
}

.spin {
	-webkit-animation: hh 0.1s;
	/* Chrome, Safari, Opera */
	animation: hh 0.1s;
}

.footer_area {
	background-color: #000000;
	position: relative;
	z-index: 9;
}

.img-fluid {
	height: 100vh;
	width: min-content;
}

.header_navbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	background-color: #000000;
}

h2.hero_title.wow.fadeInUp {
	font-family: sans-serif;
}

.header_hero_content .hero_title span {
	color: #e21f26;
	font-size: 6rem;
	font-family: sans-serif;
	font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: nunito, sans-serif;
	font-weight: 700;
	color: #000000;
	margin: 0;
}

.footer_flow img {
	position: relative;
	/* top: -16rem; */
	width: 100%;
}

div#home {
	background: linear-gradient( 45deg, #ffffffba, #ffffff8a), url(/assets/images/bus-background.png);
	background-size: cover;
	height: 85rem !important;
    width: 100vw;
    position: relative;
}

.transport-flow {
	position: absolute;
	margin: auto;
	bottom: 0;
}

img.footer_flow_img {
	width: 100vw;
}

.work_image {
	height: 20rem;
}

.work_area {
	background-color: #ffffff;
}

 @media (max-width: 576px) {
    .banner {
        margin: 0;
        position: absolute;
        top: 5%;
    }
    .wheel {
		width: 90% !important;
        margin-left: 1.25rem;
        margin-top: 1.5rem;
	
	} 
    div#home{
        height: 70rem !important;
    }
	.header_hero_content
    {
        margin-top: -10rem;
        padding: 2.5rem;
    }
    .companyImage img{
        margin: 0;
    } 
}

@media (min-width: 768px) {
    .banner {
        margin: 0;
        position: absolute;
        top: 5%;
    }
    /* .wheel {
		width: 60% !important;
        margin-left:8.25rem;
        margin-top: 1.5rem;
	
	}  */
    div#home{
        height: 80rem;
    }
	.header_hero_content
    {
        margin-top: 1rem;
        padding: 2.5rem;
    }
    .companyImage img{
        margin: 0;
    } 
}

@media (min-width: 992px) {
    .navbar{
        margin: 0 7%;
    }
    .banner {
        margin: 0;
        position: absolute;
        top: 5%;
    }
    /* .wheel {
		width: 60% !important;
        margin-left:8.25rem;
        margin-top: 1.5rem;
	
	}  */
    div#home{
        height: 80rem;
    }
	.header_hero_content
    {
        margin-top: 1rem;
        padding: 2.5rem;
    }
    .companyImage img{
        margin: 0;
    } 
}

@media (min-width: 1200px) {
    .navbar{
        margin: 0 10%;
    }
    div#home{
        height: 70rem !important;
    }
    .companyImage img{
        margin: 0;
    } 
}

@media only screen and (min-width: 1400px) {
	.navbar{
        margin: 0 12%;
    }
}

@media only screen and (min-width: 1600px) {
	.navbar{
        margin: 0 12%;
    }
}

@media only screen and (min-width: 1800px) {
	.navbar{
        margin: 0 14%;
    }
}

@media only screen and (min-width: 2000px) {
	.navbar{
        margin: 0 15%;
    }
}

@media only screen and (min-width: 2200px) {
	.navbar{
        margin: 0 16%;
    }
}

@media only screen and (min-width: 2400px) {
	.navbar{
        margin: 0 16%;
    }
    div#home{
        height: 85rem !important;
    }
}

@media only screen and (min-width: 2600px) {
	.navbar{
        margin: 0 17%;
    }
    div#home{
        height: 85rem !important;
    }
    .companyImage img {
        margin: auto;
    }
}