/*-----------------------------------------------------------------------------------
Mark-
-----------------------------------------------------------------------------------

	CSS INDEX
    ===================
	
    1. Theme Default CSS (body, link color, section etc)
    2. Header
    3. Home 
	4. about CSS
	5. feature_bottom CSS
	6. featured CSS
	7. reviews CSS
	8. Pricing CSS
	9. Team CSS
	10. Countup CSS
	11. Contact CSS
	12. Footer CSS	
	
-----------------------------------------------------------------------------------*/


/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/

@font-face {
  font-family: 'Octarine-Light';
  src: 	url('./fonts/fonts/Octarine-Light.eot');
  src: 	url('./fonts/fonts/Octarine-Light.eot') format('embedded-opentype'), 
		url('./fonts/fonts/Octarine-Light.woff2') format('woff2'), 
		url('./fonts/fonts/Octarine-Light.woff') format('woff'), 
		url('./fonts/fonts/Octarine-Light.ttf') format('truetype'), 
		url('./fonts/fonts/Octarine-Light.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body{
	overflow-x: hidden;
	padding-top: 75px;
	background: #fff;
	font-family: 'Octarine-Light', sans-serif;
	margin: 0;
	color: #666666;
	background-color: #fff;
}

.center-block{
	float: inherit;
}
html, body {height: 100%;}

img {
	max-width:100%;
	height:auto;
}
h1, h2, h3, h4, h5, h6 {
  color: #ED1C24;
  font-family: 'Octarine-Light', sans-serif;
  font-weight: 400;
  margin: 0 0 20px;
  text-transform: none;
}
a {
	transition: all 0.3s ease 0s;
	text-decoration:none;
	color: #ed1c24ff;
}
a:hover{
	text-decoration:none;
	color: #ED1C24;
}
a:focus {
	outline:0px solid;
	color: #ED1C24;
	text-decoration:none;
}
ul{
	list-style: outside none none;
	margin: 0;
	padding: 0
}
.floatleft {float:left}
.floatright {float:right}
.alignleft {
	float:left;
	margin-right:15px;
	margin-bottom: 15px;
}
.alignright {
	float:right;
	margin-left:15px;
	margin-bottom: 15px;
}
.aligncenter {
	display:block;
	margin:0 auto 15px;
}
.padding_left_less{
	padding-left: 0;
}
.padding_right_less{
	padding-right: 0;
}
.paddingless{
	padding-left: 0;
	padding-right: 0;
}
.section{
	padding-top: 20px;
	padding-bottom: 20px;
}
.fix{
	overflow: hidden;
}
.heading{
	margin-bottom: 60px;
}
.heading h3 {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
}
.btn{
	border-radius: inherit;
	transition: all 0.3s ease 0s;	
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;	
	border: inherit;
	border-bottom: 4px solid rgba(0,0,0,0.2);
}
.btn.orange{
	background: #ed1c24ff;
	color: #fff;
	position: relative;
	z-index: 100;
}
.btn.orange:hover, .btn.orange:focus{
	background: #03a9f4;
}
.btn.blue{
	background: #03a9f4;
	color: #fff;
}
.btn.blue:hover, .btn.blue:focus{
	background: #ed1c24ff;	
}
button.btn.orange{
	border-top: 1px solid #ed1c24ff;
	border-right: 1px solid #ed1c24ff;
	border-bottom: 4px solid rgba(0,0,0,0.2);
}
button.btn.orange:hover, button.btn.orange:focus{
	border-top: 1px solid #03a9f4;
	border-right: 1px solid #03a9f4;
	border-bottom: 4px solid rgba(0,0,0,0.2);
}
button.btn.blue{
	border: 1px solid #03a9f4;
	border-bottom: 4px solid rgba(0,0,0,0.2);
}
button.btn.blue:hover, button.btn.blue:focus{
	border: 1px solid #ed1c24ff;
	border-bottom: 4px solid rgba(0,0,0,0.2);
}
.large{
	padding: 15px 40px;
}
.form-group{
	margin-bottom: 30px;
}
.form-control{
	height: 50px;
	border-radius: inherit;
}
.form-control:focus{
	border-color: #ed1c24ff;
	box-shadow: 0 0 1px #ed1c24ff;
}


/*----------------------------------------*/
/*  2.  Header CSS
/*----------------------------------------*/

.navbar-brand {
  height: 70px;
  line-height: 50px;
}
.navbar-default{
	background: #000000;
}
.navbar-default .navbar-nav > li{
	padding: 0 20px;
	display: block;
}
.navbar-default .navbar-nav > li > a{
	padding: 27px 0;
	font-size: 14px;	
	position: relative;
	color: #D3D3D3;
	text-transform: uppercase;
	font-weight: 600;
}
.navbar-default .navbar-nav > .active > a{
	position: relative;	
}
.navbar-default .navbar-nav > li > a:hover {
    color: #ED1C24; /* Change hover colour to Scope red */
}
.navbar-default .navbar-nav > .active > a:after{
	position:absolute;
	border-bottom: 3px solid #ed1c24ff;
	bottom: 0;
	content: "";
	left: 0;
	width: 100%;	
}
.navbar-default .navbar-nav > li > a:after{
	border-bottom: 3px solid #ed1c24ff;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	width: 0;
	transition: all 0.5s ease 0s;
}
.navbar-default .navbar-nav > li > a:hover:after{
	width: 100%;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #262626;
}
.navbar-default .navbar-toggle{
	border-color: #ed1c24ff;
}
.navbar-toggle {
	margin-top: 18px;
	border-radius: inherit;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ed1c24ff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: #262626;
}

/*----------------------------------------*/
/*  3. Home CSS
/*----------------------------------------*/

#home{
	background-size: cover;
	background: rgba(0,0,0,1);
	color: #fff;
	position: relative;
	padding: 170px 0;
}
.vid-bg{
	display: block;
	top: 0;
	height: auto;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	left: 0;
	width: auto;
}
#home:after{
	position:absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	top: 0;
}
#home .home_text{
	position:relative;
	z-index: 100;
}
#home .home_text h1{
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 30px;
	font-weight: 700;
}
#home .home_text .lead{
	margin-bottom: 60px;
}
#home .home_form{
	background: rgba(0,0,0,0.5);
	padding: 10px;
}
#home .form-control{
	height: 56px;
}

/*----------------------------------------*/
/*  4. about CSS
/*----------------------------------------*/

#about{	
}
.feature-image .mobile_frame{
	max-width: 280px;
	position: relative;
}
#about .left, #about .right{
	margin-top: 80px;
}
.single_feature{
	margin-bottom: 30px;
}
.single_feature .icon-container{	
	width: 57px;
	height: 57px;
	line-height: 57px;
	border-radius: 100%;
	border: 1px solid #ed1c24ff;
	margin: 0 auto;
	font-size: 30px;
	position: relative;
	color: #ed1c24ff;
	transition: all 0.5s ease 0s;
	z-index: 100;
}
.icon-container:after{
	background: #ed1c24ff;
	transition: all 0.5s ease 0s;	
	position:absolute;
	content: "";
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 50%;
	color: #fff;
	z-index: -11;
}
.icon-container:hover:after{
	width: 100%;
}
.single_feature .icon-container:hover{
	color: #fff;
}
.feature-image .mobile_image{
	position: absolute;
	text-align: center;
	top: 101px;
	left: 79px;
}

/*----------------------------------------*/
/*  5. feature_bottom CSS
/*----------------------------------------*/

.feature_bottom{
	background: #f5f5f5;
}
.feature_bottom h3{
	margin-top: 70px;
	padding-left: 20px;
}
.feature_bottom ul{
	margin-top: 25px;
}
.feature_bottom ul li{
	margin-bottom: 30px;
}
.feature_bottom ul li h4{
	margin-bottom: 10px;
}
.feature_bottom ul li i{
	color: #ed1c24ff;
	padding-right: 8px;
}
.feature_bottom .f_b_img img{
	max-width: none;
	min-height: 100%;
	min-width: 100%;
}
.feature_bottom .f_b_img {
	overflow: hidden;
}

/*----------------------------------------*/
/*  6. featured CSS
/*----------------------------------------*/

#featured{
	padding-bottom: 0;
}
#featured img{	
	width: 75%;
	display:block;	
	opacity: 0.9;
	transition: all 0.5s ease 0s;	
}
.featured-menu{
	margin-bottom: 40px;
}
.featured-menu ul li{
	border: 2px solid #666;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	margin-left: 10px;
	padding: 10px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.single-project{
	position: relative;
	overflow: hidden;
	text-align: center;
	color: #fff;
}
.featured-content .mix{
	display: none;
}	
.single-project .single_p_text{
	position:absolute;
	top: 0;
	background: rgba(0,0,0,0.5);
	width: 100%;	
	height: 100%;	
	opacity: 0;
	transition: all 0.5s ease 0s;	
	padding: 17% 5%;	
	transform: scale(0.5);
}
.single-project .single_p_text h3{
	color: #fff;		
	font-weight: 600;
	text-transform: uppercase;
}
.single-project .single_p_text a{
	color: #fff;
	font-size: 16px;
	margin-right: 20px;
}
.single-project .single_p_text p{
	opacity: 0;
	transition: all 0.5s ease 0s;
	transform: scale(0.5);
}
.single-project .single_p_text a:last-child{
	margin-right: 0;
}
.single-project:hover .single_p_text{
	opacity: 1;
	transform: scale(1);
}
.single-project:hover img{	
	opacity: 0.7;
	transform: scale3d(1.05,1.05,1);
}
.single-project:hover .single_p_text p{
	opacity: 1;
    transform: scale(1);
}

/*----------------------------------------*/
/*  7. Reviews CSS
/*----------------------------------------*/

#reviews{
	background: #f5f5f5;
	background-image: url("img/reviewbg.png"); /* Replace with your image path */
	background-size: cover; /* Ensures the image covers the entire area */
	background-repeat: no-repeat;
	background-position: center; /* Optional: Centers the image horizontally */
	min-height: 300px; /* Set the minimum height of the section */
}
.single-review{}
.single-review .footer{
	margin-top: 40px;
}
.single-review .s_text{
	font-size: 16px;
	color:    white;
}
.single-review .footer .s_image{
	width: 110px;
	height: 110px;	
	margin: 0 auto;
}
.single-review .footer .s_image img{
	border-radius: 50%;
	box-shadow: 0 0 3px #ccc;
}
.single-review .footer h4{
	margin-bottom: 8px;
	margin-top: 25px;
	font-weight: bold;
}
.single-review .footer p{
	font-size: 12px;
}
.owl-pagination {
  margin-top: 30px;
}
#reviews .owl-buttons{
	position:absolute;
	top: 30%;
	width: 100%;
}
#reviews .owl-buttons .owl-prev{
	position:absolute;
	left: 0;	
}
#reviews .owl-buttons .owl-prev:before{
	content: "\e934";
	font-family: 'icomoon';
}
#reviews .owl-buttons .owl-next{
	position:absolute;
	right: 0
}
#reviews .owl-buttons .owl-next:before{
	content: "\e930";
	font-family: 'icomoon';
}
.owl-theme .owl-controls .owl-buttons div {
  background: transparent;
  color: #ed1c24ff;
  display: inline-block;
  font-size: 20px;
  margin: 5px;
  opacity: 1;
  padding: 3px 10px;
  border-radius: 0;
}

/*----------------------------------------*/
/*  8. Pricing CSS
/*----------------------------------------*/

#pricing{
	padding-bottom: 90px;
}
.single_pricing{
	background: #fff;
	border: 1px solid #ed1c24ff;
	margin-bottom: 30px;
}
.single_pricing .header{
	padding: 30px 20px;
}
.single_pricing .header h3{
	margin-bottom: 10px;
	text-transform: uppercase;
	font-weight: 700;
}
.plan_cost_wrap{
	width: 120px;
	height: 120px;
	border: 1px solid #ed1c24ff;
	border-radius: 50%;
	margin: 0 auto;	
}
.single_pricing .plan_cost{
	padding: 20px 15px 15px;
	width: 100%;
	line-height: 23px;
	font-size: 28px;
}
.single_pricing .plan_cost .currency{
	display: block;
	padding-bottom: 10px;		
}
.single_pricing .plan_cost .amount{
	
}
.single_pricing .plan_cost .period{
	font-weight: 400;
	font-size: 15px;
}
.single_pricing .details{
	padding-top: 30px;
	padding-bottom: 30px;
}
.single_pricing .details li{
	line-height: 32px;
}
.single_pricing .btn{
	margin-bottom: 30px;
}
.feature.single_pricing{
	border: 1px solid #03a9f4;
}
.feature .plan_cost_wrap{
	border: 1px solid #03a9f4;
}
.feature .btn.orange{
	background: #03a9f4;
}

/*----------------------------------------*/
/*  9. Team CSS
/*----------------------------------------*/

#team{
	background: #f5f5f5;
}
.single_team{
	padding-left: 15px;
	padding-right: 15px;
}
.single_team h4{
	margin: 20px 10px 10px;
	font-weight: 700;
}
.single_team .position{
	margin-bottom: 20px;
	text-transform: uppercase;
}
.single_team  .t_text{
	margin-bottom: 25px;
}
.single_team .t_social li a{
	font-size: 16px;
}

/*----------------------------------------*/
/*  10. countup CSS
/*----------------------------------------*/

#countup{	
	background-size: cover;	
	padding: 150px 0;
	position:relative;
}
#countup:before{
	position:absolute;
	content: '';
	background: rgba(0,0,0,0.5);
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#countup .container{
	position:relative;
	z-index: 100;
}
#countup h3{
	color: #fff;
	font-size: 45px;
	font-weight: 600;
	margin-bottom: 0;
}

/*----------------------------------------*/
/*  11. contact CSS
/*----------------------------------------*/

#contact{
	
}
.contact-info{}
.contact-info i.fa{
	background: #ed1c24ff none repeat scroll 0 0;
	border-radius: 50%;
	color: #fff;
	float: right;
	font-size: 30px;
	height: 50px;
	line-height: 50px;
	margin-right: 20px;
	text-align: center;
	width: 50px;
}
.contact-info h4{
	margin-bottom: 10px;
}
.contact-info .single_c_info{
	margin-bottom: 30px;
}
.thankyou{
	padding-top: 70px;
}
.divider{
	width: 100%;
	height: 1px;
	background: #ed1c24ff;
	position: relative;
}
.divider:before{
	background: #ed1c24ff none repeat scroll 0 0;
	content: "";
	height: 5px;
	position: absolute;
	top: -2px;
	width: 5px;
	left: 0;
}
.divider:after{
	background: #ed1c24ff none repeat scroll 0 0;
	content: "";
	height: 5px;
	position: absolute;
	top: -2px;
	width: 5px;
	right: 0;
}

/*----------------------------------------*/
/*  12. footer CSS
/*----------------------------------------*/

#footer{
	padding: 35px 0;
}
#footer .copyright{
	margin-top: 10px;
	margin-bottom: 0;
	text-transform: uppercase;
	font-weight: 700;
}
#footer .social-icon li a{
	border: 1px solid #ed1c24ff;
	border-radius: 50%;
	color: #666;
	display: inline-block;
	font-size: 18px;
	height: 40px;
	line-height: 40px;
	width: 40px;
}
#footer .footer-nav{
	margin-top: 10px;
}
#footer .footer-nav li a{
	color: #666;
	text-transform: uppercase;
	font-weight: 700;
}
#footer .footer-nav li a:hover{
	color: #ed1c24ff;
}