@import url("reset.css");
@import url("fonts/caviar-dreams/stylesheet.css");
@import url("fonts/cotext/stylesheet.css");

a{ text-decoration: none; outline: none;}
a:hover{ text-decoration: underline;}
body{
	color: #828282;
	font-family: 'co_textlight';
	font-size: 16px;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'caviar_dreamsbold';
	font-weight:normal;
	text-transform: uppercase;
}
ul, li{ list-style: none; padding: 0; margin:0;}

.container{
	max-width: 1200px;
	margin:0 auto;
	width: 90%;
	position: relative;	
}	
.btn{
	background: #3ebcec;
	display: inline-block;
	min-width: 280px;
	color: #fff;
	text-transform: uppercase;
	padding: 18px 0;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;	
}
.btn:hover{ background: #fff; color: #3ebcec; text-decoration: none;}

header{
	background: #1e1e1e url('../img/img-header.jpg') no-repeat right center;
	background-size:70%;
	max-height: 850px;
}


header h1 a{
	display: inline-block;
	width: 228px; height: 62px; text-indent: -9999px;
	background: url(../img/logo-text.png) no-repeat;
	margin-bottom: 90px;
	opacity: 0;
}
header h2{
	font-size: 33px;
	color: #fff;
	line-height: 38px;
	margin-bottom: 25px;
}
header h2 span{ color: #3ebcec; display: block;}
header p{
	font-size: 14px;
	text-align: justify;
	line-height: 18px;
	margin-bottom:60px;
}

.header-box{
	width: 320px;
	background: #1e1e1e;
	padding: 20px;
	padding: 6% 4% 10% 0;
	position: relative;
}


.header-hidden{ 	
	position: fixed; width: 100%; left: 0; right: 0; top: 0; 
	background: #1e1e1e;
	background: rgba(30,30,30, 0.9);
	z-index: 999;
	padding: 14px 0;
	/*display: none;*/
}
/*.header-hidden.sticky{ display: block;}*/
.header-hidden img{ float: left; /*width: 180px;*/}


.header-hidden ul{
	float: right;  font-size: 14px; margin-top: 6px;
	
}
.header-hidden ul li{ display: inline-block; padding: 0 0 0 20px;}
.header-hidden li a{ color: #fff; text-transform: uppercase;}
.header-hidden li a:hover,
.header-hidden li a.active{ color: #3ebcec;}
.header-hidden li a.btn{  min-width: 180px; }

.share{
	position: absolute; bottom: 20px; left: 0; width: 100%;
	display: none;
}
.share img{ margin-right: 5px;}




.section-title{
	font-size:66px;
	font-family: 'caviar_dreamsbold';
	text-transform: uppercase;
	margin-bottom: 30px;
}
.intro-section, #about-us
{
	background: url("../img/about-us.jpg") no-repeat center top;
	background-size: cover;
	padding: 15% 0;
	text-align: center;
	font-size: 20px;
}
#about-us{ padding: 20% 0;}
.intro-section .section-title, #about-us .section-title{
	background: url(../img/logo.png) no-repeat center top;
	color: #3ebcec;
    padding-top: 120px;
}
.intro-section p, #about-us p{ line-height: 28px; }


#our-approach{
	background: url(../img/our-approach.jpg) no-repeat center top;
	background-size: cover;
	color: #fff;
	padding: 60px 0 0 0;
}

#our-approach .section-title{ font-size: 40px; margin-bottom: 70px;}
#our-approach ul{
	width: 380px;
	overflow: hidden;
}
#our-approach ul li{
	float:left; 
	width: 49%; 
	margin-right: 1%; 
	padding-left: 60px;
	padding-top: 15px;
	position: relative;
	height:95px;

}
#our-approach ul li.p2{ padding-top: 6px;}
#our-approach ul li img{ 
	position: absolute; left: 0; top: 0;
}

#testimonials{
	padding:120px 0;
	text-align: center;
	overflow: hidden;
}
#testimonials .section-title{ color: #000; margin-bottom: 100px;}

#testimonials .row{   
	display: -webkit-flex;
  	display: flex;
	overflow: hidden;
}
#testimonials .col{
	width: 50%;
	float: left;
	padding: 20px 0;

}
#testimonials .col.first-col{ border-right: 1px solid #ddd;}

#testimonials .col img{
	border: 3px solid #dfdfdf;
	border-radius: 50%;
}
blockquote {
    border: none;
    line-height: 1.5em;
    margin: 25px auto;
    position: relative;
    max-width: 80%;
    
}
blockquote::before {
    content: '“';
    color: #3ebcec;
    font-size: 66px;
    position: relative;
    left: -15px;
    top: 15px;
    vertical-align: middle;
}
blockquote::after {
    content: "”";
    color: #3ebcec;
    font-size: 66px;
    position: relative;
    left: 0;
    top: 20px;
    vertical-align: middle;
}
cite{
	font-size: 14px; text-transform: uppercase;
	font-style: normal;
}
cite span{
	font-size: 20px; text-transform: capitalize;
	 color: #3ebcec;
	 display: block;
}

/*INNER PAGES*/
.content-text{ overflow: hidden; display: -webkit-flex; display: flex;}
.col-image{
	float: left;width:30%;	
	background-size: cover !important;
}
#the-company .col-image{background: url(../img/the-company.jpg) no-repeat; }
#brands .col-image{background: url(../img/brands.jpg) no-repeat;}
#management .col-image{background: url(../img/management.jpg) no-repeat;}

.col-image img{ display: block; width: 100%;}
.col-content{
	float:left;
	width: 70%;
	padding:7% 10% 10% 5%;
	font-size: 18px;
	line-height: 24px;
	
}
.col-content h3{
	color: #3ebcec;
	font-size: 24px;
	text-transform: uppercase;
}
.col-content h4{font-family: 'co_textregular'; font-size: 20px; font-weight: bold; text-transform: capitalize;}
.col-content p{ margin: 20px 0 0 0; text-align: justify;}

.col-content .brands-list li{
	position: relative;
	padding-left: 200px;
	margin-top: 60px;
}
.col-content .brands-list li p{ margin: 0;}
.col-content .brands-list li img{ width: 180px; position: absolute; left: 0; top: 10px;}

.col-content .item-list{ margin: 20px 0 0 20px}
.col-content .item-list li{ list-style: disc; color: #3ebcec}


.form-wrap{
	width: 50%;
	margin: 40px auto;
}
.form-wrap input, .form-wrap textarea{
	background-color: #fff !important;
	background-size: 25px 24px !important;
	border:0;
	font-family: Arial;
	font-size: 16px;
	color: #999;
	-webkit-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;	
	width: 100%;
	display: block;
	padding: 20px 10px; padding-left: 60px;
	margin: 15px 0 0 0;
}
.form-wrap input.input-name{background: url(../img/icon-name.png) no-repeat 20px center;}
.form-wrap input.input-email{background: url(../img/icon-email.png) no-repeat 20px center;}
.form-wrap input.input-phone{background: url(../img/icon-phone.png) no-repeat 20px center;}
.form-wrap textarea.input-msg{background: url(../img/icon-msg.png) no-repeat 20px 18px; height: 200px}

.form-wrap input.btn{ 
	text-align: center; color: #fff; font-family: 'co_textregular'; background: #3ebcec !important;
	cursor: pointer; font-size:20px; min-width: 0; padding-left: 20px;
	-webkit-box-shadow:none;
	box-shadow:none;	

}
.form-wrap input.btn:hover{ background-color: #fff !important; color: #3ebcec;}


footer{
	background-image: linear-gradient(to left, #3ebcec, #3ebcec 70%, #1e1e1e 25%);
	padding: 20px 0;
}

footer p{ position: absolute; right: 0; top: 30px; color: #fff;}
footer p a{ color: #000;}


@media (max-width: 1024px) {
	header{
		background-size:80%;
	}
	#our-approach{ background-position: center left;}
	.header-box{width: 50%; padding: 4% 4% 10% 0;}
	.col-image{ width: 35%;}
	.col-content{ width: 65%; padding: 7% 5%; 	font-size: 16px; ine-height: 18px;}
	.form-wrap{ width: 70%;}
	footer{background-image: linear-gradient(to left, #3ebcec, #3ebcec 65%, #1e1e1e 25%);}	
}
@media (max-width: 768px) {
	header h1 a{ display: none;}
	.header-hidden{ 
		text-align: center; padding: 20px;
		position: relative; opacity: 1;
	}
	.header-hidden img, .header-hidden ul{ float:none}
	.header-hidden ul{ margin-top: 20px;}
	.header-hidden a.btn{ display: block; margin-top:20px; }
	.content-text{ overflow: hidden; display:block;}
	.col-image{ width: 100%;}
	.col-content{ width: 100%; padding: 10% 5%;}
	.form-wrap{ width: 90%;}
	footer{background-image: linear-gradient(to left, #1e1e1e, #1e1e1e 100%, #1e1e1e 25%); text-align: center;}	
	footer p{ position: relative; display: block; top: 0; right: 0; margin-top: 20px; line-height: 26px;}
	footer p a{ color: #fff;}
}
@media (max-width: 480px) {
	.header-hidden.sticky{ display: none;}
	/*	
	.header-hidden img{ float: none}
	.header-hidden a.btn{ float: none; margin-top: 15px; }	
	*/
 	.container{ width:90%;}
	header{background: #1e1e1e;	}
	.header-hidden ul li{ display: block; width: 100%; padding: 10px 0;}
	.header-box{width: 100%; padding:30px 0 80px 0; text-align: center;}	
	.section-title{ font-size: 40px; text-align: center;}


	#our-approach ul{ width: 100%;}
	#our-approach ul li{ font-size: 14px;}

	#testimonials .col{
		width: 100%;
		float: none;
		padding: 20px 0;
	}
	#testimonials .col.first-col{ border-right:0; border-bottom: 1px solid #ddd; margin-bottom: 20px;}	

}