/*
 * Table of Contents:
 * 	   - Media Queries
 *   0 - media screen and (max-width: 1170px)
 *   1 - media screen and (max-width: 1152px) 
 *   2 - media screen and (max-width: 1024px)
 *   3 - media screen and (max-width: 992px)
 *   4 - media screen and (max-width: 800px)
 *   5 - media screen and (max-width: 768px)
 *   6 - media screen and (max-width: 728px)
 *   7 - media screen and (max-width: 640px)
 *   8 - media screen and (max-width: 500px)
 *   9 - media screen and (max-width: 480px)
 *  10 - media screen and (max-width: 414px)
 *  11 - media screen and (max-width: 375px)
 * 	12 - media screen and (max-width: 360px)
 *  13 - media screen and (max-width: 320px)
---------------------------------------------------------------------- */

/* 1.0 - Common Styles
---------------------------------------------------------------------- */

body, div, a, p, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
	font-family: 'Tajawal', sans-serif;
	color: #444;
	font-size: 17px;
	font-weight: 400;
	line-height: 21px;
}
a.whatsapp {
background-color: #2fb842;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 25px;
text-decoration: none;
border-radius: 100%;
text-align: center;
width: 50px;
height: 50px;
position: fixed;
left: 10px;
bottom: 20px;
margin: 0;
z-index: 2;
}
h1 {
	font-family: 'Michroma', sans-serif;
	color: #000;
	margin-bottom: 10px;
	margin-top: 0px;
	font-size: 40px;
	font-weight: 700;
}
h2 {
	font-family: 'Michroma', sans-serif;
	color: #000;
	margin-bottom: 10px;
	margin-top: 0px;
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
}
h3 {
	font-family: 'Michroma', sans-serif;
	color: #000;
	margin-bottom: 10px;
	margin-top: 0px;
	font-weight: 600;
	font-size: 30px;
}
h4 {
	font-family: 'Michroma', sans-serif;
	color: #000;
	margin-bottom: 10px;
	margin-top: 0px;
	font-weight: 600;
	font-size: 20px;
}
h5 {
	font-family: 'Michroma', sans-serif;
	color: #000;
	margin-bottom: 10px;
	margin-top: 0px;
	font-weight: 600;
	font-size: 16px;
}
a {
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-ms-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	transition: all .25s ease-in;
}
a:hover {
	text-decoration: none;
	cursor: pointer;
	color: #5a68b0;
}
.btn:hover {
	text-decoration: none;
	cursor: pointer;
}
.container {
	padding: 0px;
	width: 100%;
	max-width: 1220px;
}
.sky {
	color: #5a68b0;
}
.mt-3 {
	margin-top: 30px!important;
}
/* 1.0 - main header
---------------------------------------------------------------------- */
.top_header {
	background-color: #1d2128;
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	float: left;
}
.top_header a {
	color: #fff;
	line-height: 40px;
	font-size: 14px;
	float: left;
	padding-right: 20px;
}
.top_right {
	float: right;
}
.top_right a.btn {
	background-color: #5a68b0;
	color: #fff;
	float: right;
	line-height: 22px;
	border-radius: 0px;
	text-transform: uppercase;
	height: 40px;
}
.top_right ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	float: left;
}
.top_right ul li {
	float: left;
}
.top_right ul li a {
	text-transform: uppercase;
	font-size: 14px;
}
.top_header a i {
	padding: 5px 5px 0 0;
	font-size: 16px;
}
.main_navigation {
	width: 100%;
	padding: 15px 0;
	display: inline-block;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.8);
}
.logo {
	float: left;
	padding-top: 15px;
}
.navigation_bar {
	float: right;
	padding: 10px 0;
}
/* 1.0 - header service
---------------------------------------------------------------------- */
.ccr_header {
	display: inline-block;
	float: left;
	width: 100%;
	border-top: 1px solid #ddd;
	background-color: #f9f9f9;
}
.ccr_header ul {
	list-style: none;
	padding: 0px;
	float: left;
	width: 100%;
	margin: 0px;
}
.ccr_header ul li {
	float: left;
	width: 14.2%;
}
.ccr_header ul li a {
	float: left;
	width: 100%;
	padding: 10px 0px;
	border-left: 1px soolid #fff;
	border-right: 1px soolid #fff;
	text-align: center;
}
.ccr_header ul li span {
	padding-right: 5px;
	display: inline-block;
}
.ccr_header ul li span img {
	float: left;
	width: 50px;
}
.ccr_header ul li strong {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	padding-top: 7px;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	color: #222;
}
.ccr_header ul li a:hover {
	background-color: #eee;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.ccr_banner {
	display: inline-block;
	width: 100%;
	float: left;
}
.carousel-indicators {
	bottom: 30px;
}
.carousel-caption {
	right: 0;
	left: 0px;
	width: 1170px;
	margin: auto;
	text-align: left;
	top: 14%;
}
.carousel-caption h2 {
	color: #fff;
	font-size: 46px;
	line-height: 54px;
	text-transform: uppercase;
	font-family: 'Michroma', sans-serif;
}
.carousel-caption p {
	color: #fff;
	font-size: 20px;
	padding: 5px 0;
	font-family: 'Tajawal', sans-serif;
	line-height: 28px;
	font-weight: 300;
}
.banner_text {
	width: 80%;
	text-align: center;
	margin: 15% auto;	
	padding: 25px 25px 35px; background-color:rgba(0, 0, 0, 0.6);
}
.seo_btn {
	background-color: #a8030d;
	color: #fff;
	line-height: 22px;
	border-radius: 0px;
	text-transform: uppercase;
	padding: 10px 20px;
	font-size: 16px;
	border: 0px;
	margin-right: 7px;
	margin-top: 20px;
}
.carousel-caption .read_btn {
	background-color: #fff;
	color: #5a68b0;
	line-height: 22px;
	border-radius: 0px;
	text-transform: uppercase;
	padding: 6px 20px;
	border: 0px;
	margin-top: 20px;
	font-size: 16px;
}
/* 1.0 - service section
---------------------------------------------------------------------- */
.ccr_section {
	display: inline-block;
	width: 100%;
	padding: 50px 0;
}
.b_box h4 {
	text-transform: uppercase;
	margin-top: 15px;
	color: #fff;
	font-family: 'Michroma', sans-serif;
	font-size: 16px;
}
.b_box p {
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	padding: 10px 0;
}
.b_box {
	position: relative;
}
.ser_box {
	position: absolute;
	top: 15px;
	opacity: 0;
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-ms-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	transition: all .25s ease-in;
	bottom: 15px;
	left: 15px;
	right: 15px;
	background: rgba(41, 39, 51, 0.6);
	display: flex;
	padding: 20px;
	flex-wrap: wrap;
	align-items: center;
	text-align: center;
}
.ser_box .div {
	margin: 0 auto;
	text-align: center;
	display: inline-block;
}
.b_box:hover .ser_box {
	opacity: 1;
}
.b_box .btn {
	background-color: #a8030d;
	margin-top: 0px;
	font-size: 18px;
	border: 0px;
	padding: 6px 20px;
	border-radius: 0;
	text-transform: uppercase;
}
/* 1.0 - what is seo section
---------------------------------------------------------------------- */
.seo_section {
	/*background-color: #a8030d;*/
	padding: 60px 0; background-image:url(../images/banne.png); background-repeat:no-repeat; background-position:top center; background-attachment:fixed; width:100%; background-size:cover;
}
.seo_section h1 {
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.seo_section p {
	font-size: 18px;
	color: #fff;
	line-height: 24px; padding-bottom:15px;
}
.btn_trail {
	margin-top: 15px;
	background-color: #5a68b0;
	height: 40px;
	padding: 0 25px;
	border-color: #5a68b0;
	text-transform: uppercase;
}
/* 1.0 - services section
---------------------------------------------------------------------- */
.services_box h3 {
	margin-top: 20px;
	color: #fff;
	font-size: 24px;
}
/* 1.0 - blog section
---------------------------------------------------------------------- */
.blog_box {
	display: inline-block;
	width: 100%;
	margin-top: 25px;
}
.blog_box h4 {
	margin: 20px 0 15px 0;
	font-size: 18px;
	line-height: 24px;
}
.blog_box span {
	padding-right: 20px;
	font-size: 13px;
	color: #666;
}
.blog_box span i {
	padding-right: 5px;
}
.blog_box p {
	color: #666;
}
.btn_purpul {
	background-color: #2e3f84;
	margin-top: 10px;
	font-size: 18px;
	border: 0px;
	height: 40px;
	padding: 2px 20px;
}
/* 1.0 - footer section
---------------------------------------------------------------------- */
footer {
	background-color: #222;
	padding: 50px 0; float:left; width:100%;
}
footer h4 {
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
footer ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
footer ul.footer_links li a {
	color: #e1e1e1;
	padding: 10px 0;
	display: block;
}
footer ul.footer_links li a:hover {
	color: #fff;
}
footer ul.footer_services {
	list-style: none;
	padding: 0px;
}
footer ul.footer_services li {
	padding: 12px 0;
}
footer ul.footer_services li span {
	color: #5a68b0;
}
footer ul.footer_services li p {
	color: #d1d2d2;
}
.footer_form .form-control {
	border-radius: 0px;
	height: 40px;
	background-color: #3d3b46;
	border: 0px;
}
.footer_form textarea {
	height: auto!important;
}
.footer_btn {
	padding: 7px 25px;
	color: #fff;
	font-size: 18px;
	border-color: #a8030d;
	border-radius: 0;
	text-transform: uppercase; background-color: #a8030d;
}
.footer_form {
	margin-top: 15px;
	display: inline-block;
	width: 100%;
}
.footer_btn:hover {
	background-color: #a8030d;
	border-color: #a8030d;
}
/* 1.0 - bottom footer section
---------------------------------------------------------------------- */
.bottom_footer {
	background-color: #a8030d;
	padding: 15px 0; float:left; width:100%;
}
.bottom_footer p {
	color: #fff;
	margin-bottom: 0px;
}
.testimonial {
	padding: 40px 0;
	text-align: center;
}
.testimonial h2 {
	text-transform: uppercase;
	margin-bottom: 20px;
}
.testimonial h5 {
	text-transform: uppercase;
	margin-top: 10px;
}
/* 1.0 - portfolio section
---------------------------------------------------------------------- */
.ccr_portfolio {
	display: inline-block;
	padding: 50px 0;
	width: 100%;
	text-align: center;
	border-top: 1px solid #ddd;
}




.ccr_category{ display:inline-block; float:left; width:100%; padding:30px;}
.ccr_category h4{ margin-bottom:15px;}

.ccr_category img{ margin-bottom:10px;}
.ccr_category a{ color:#a8030d;}
.seo_btn_2{ background-color:#fff; color:#000!important; border-radius:0px; text-transform:uppercase; border-color:#fff;}

.product-listing p{ background-color:#a8030d; padding:40px;  width:95%; display:inline-block; color:#fff; -webkit-border-radius:0 50px 0 50px;
-moz-border-radius: 0 50px 0 50px;
border-radius: 0 50px 0 50px;}
.product-listing img{ width:75px; border-radius:75px;}
.product-listing h5{ margin:15px 0 0;}


@-webkit-keyframes zoom {
 from {
 -webkit-transform: scale(1, 1);
}
to {
	-webkit-transform: scale(1.5, 1.5);
}
}
 @keyframes zoom {
 from {
 transform: scale(1, 1);
}
to {
	transform: scale(1.5, 1.5);
}
}
.carousel-inner .carousel-item > img {
	-webkit-animation: zoom 20s;
	animation: zoom 20s;
}

.client_section{ display:inline-block; width:100%; background-color:#eee; padding:40px 0; background-image:url(../images/counter.jpg); 
background-size:cover; float:left; text-align:center;}

.in_box {    
    width: 30%;
    padding: 20px;
    text-align: center; display:inline-block;
}

.box_bor {
    padding: 20px;
}
.counter-value {
    font-weight: 600;
    font-size: 80px;
    color: #fff; padding-bottom:20px; display:inline-block; line-height:84px;
}


.box_bor h4{ margin-bottom:0; color:#fff; font-size:24px; line-height:30px;}



.ccr_blog{ display:inline-block; float:left; width:100%; padding:40px 0;}
.ccr_blog h3{ margin-bottom:30px;}
.blog_content li{ border-bottom:1px solid #ccc; padding-bottom:15px;}




.ccr_category h1{ font-size:28px;}

.ccr_innerbanner{ position:relative;}
.ccr_innerbanner h1{ color:#fff; position: absolute; bottom:30%; text-transform:uppercase;}


.ccr_inner_page{ float:left; width:100%; padding:50px 0;}

.contact_us i {
    padding-right:8px;
}
.contact_us p{ line-height:26px;}
.ccr_inner_page p{ font-weight:400; text-align:justify;}
.pad_bot {
    padding: 10px;
}
.pad_bot a {  
    padding: 2px;
    display: inline-block;
    width: 100%;
    float: left;
    -webkit-box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.29);
    -moz-box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.29);
    box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.29);
}

.pad_bot a img{ height:250px; width:100%; object-fit:cover;}






.list_item{ display:inline-block; width:100%;}
.list_item ol{ padding:15px 15px;}


.contact_usform{ background-color:#f9f9f9; border:1px solid #ddd; padding:20px;}



.contact_us{background-color:#f9f9f9; border:1px solid #ddd; padding:20px;}

.brand_category{ display:flex; flex-wrap:wrap; margin:0 -5px; padding:0px; list-style:none;}
.brand_category li{ width:20%; padding:10px;}

.brand_category li a{ border:1px solid #ccc; display:inline-block; float:left; width:100%; padding:10px;}



.ccr_clients{ background-color:#f0f0f0; float:left; padding:40px 0; width:100%;}

.clients_logo{ display:inline-block; width:94%; margin:0 auto;}

.title_heading{ text-align:center; font-size:38px; font-weight:700; color:#a8030d; padding:30px 0; display:inline-block; width:100%; font-family:'Michroma', sans-serif; line-height:46px;}

.inner_title h5{ font-size:24px; margin-bottom:20px;}
.inner_title p{ font-size:20px; line-height:36px; text-align:left;}

.inner_service{ text-align:center;}
.inner_service h5{ font-size:24px; margin-bottom:10px;}
.inner_service p{ font-size:20px; line-height:36px; text-align:center;}

.b_box img{
    max-width: 100%;
    height: auto;
    height: 270px;
    width: 100%;
    object-fit: cover;
}

a.btn-danger{ color:#fff;}












@media screen and (max-width:1170px){
	
	.container{ width:100%; max-width:100%; padding:0 15px;}
	
	
}



@media screen and (max-width:1024px){
.navigation_bar{ float:none;}
.banner_text {
    width: 100%;
    text-align: center;
    margin: 5% auto;
    padding: 25px 25px 35px;
    background-color: rgba(0, 0, 0, 0.6);
}
.carousel-caption{ width:100%;}
.carousel-caption h2{ font-size:24px; line-height:30px;}
}


@media screen and (max-width:767px){
.ccr_category img{ padding-top:40px;}
.b_box{ margin:15px 0;}
.services_box{ margin:15px 0;}
.ccr_blog iframe{ margin-bottom:30px;}
#counter{ display:flex; flex-wrap:wrap;}
.in_box{ width:50%;}
.brand_category li {
    width: 25%;
    padding: 10px;
}
.ccr_innerbanner h1{ bottom:0px;}

}


@media screen and (max-width:480px){
.in_box {

    width: 100%;

}
.main_navigation {

    width: 100%;
    padding: 15px 0;
    display: inline-block;
    float: left;
    position: static;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.9);

}

.carousel {

    position: relative;
    float: left;
    width: 100%;

}
.brand_category li {
    width: 50%;
    padding: 10px;
}



}