<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- =========== Header section start here =========== -->
<div id="tophead">
<div class="container">
<div id="quick-contact">
<ul>
<li> <i class="fa fa-phone" style="line-height: 24px;"></i> <a href="#" >Phone +040 1234 5678</a> </li>
<li class="quick-email"> <a href="mailto:contact@trovend.com" >contact@yourname.com</a> </li>
<li class="quick-address"> Hyderabad, India. </li>
</ul>
</div>
<div class="quick-link"><a class="btn btn-primary btn-circle ripple-effect" href="contact.html">Get Started</a>
</div>
<div id="header-search">
<a href="#" class="search-icon"><i class="fa fa-search"></i></a>
<div class="search-box-wrap">
<div class="searchform" role="search">
<form method="get" action="http://anilbasnet.com/demo/business-arc/.">
<input type="text" name="s" id="s" placeholder="Search..." value="" class="search-field">
</form>
</div>
</div>
</div>
<div class="header-social-wrapper">
<span class="social-title">Follow Us!</span>
<div class="social-links">
<ul>
<!-- <li><a href="http://skype.com/" target="_blank"></a></li> -->
<li><a href="http://googleplus.com" target="_blank"></a></li>
<li><a href="https://twitter.com" target="_blank"></a></li>
<li><a href="https://www.linkedin.com/company" target="_blank"></a></li>
<li><a href="https://www.facebook.com" target="_blank"></a></li>
</ul>
</div>
</div>
</div>
</div>
<header class="header">
<div class="menu-spacer"></div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-2">
<div class="logo">
<a href="index.html">
<img class="trovend-logo" src="https://ujg1i3ze1133y9zav35eixy117m-wpengine.netdna-ssl.com/wp-content/themes/dt-the7-child/assets/images/global/logo-long-notag.png" alt="">
</a>
</div>
</div>
<div class="col-lg-9 col-sm-10">
<nav class="mainnav" id="main-navigation">
<div class="logoMobile hidden-lg hidden-sm hidden-md">
<a href="index.html">
<img alt="" class="trovend-logo" src="https://ujg1i3ze1133y9zav35eixy117m-wpengine.netdna-ssl.com/wp-content/themes/dt-the7-child/assets/images/global/logo-long-notag.png">
</a>
</div>
<div class="mobileMenu">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li class="has-menu-items active"><a href="#">home</a></li>
<li class="has-menu-items menu-item-has-children">
<a class="drop_menu" href="#">about</a>
<ul class="sub-menu">
<li><a href="#">link-1</a></li>
<li><a href="#">link-2</a></li>
<li><a href="#">link-3</a></li>
</ul>
</li>
<li class="has-menu-items menu-item-has-children">
<a class="drop_menu" href="#">our services</a>
<ul class="sub-menu">
<li><a href="#">link-1</a></li>
<li><a href="#">link-2</a></li>
<li><a href="#">link-3</a></li>
<li><a href="#">link-4</a></li>
<li><a href="#">link-4</a></li>
</ul>
</li>
<li><a href="#">Our News</a></li>
<li><a href="#">Industries</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- ===========Header section end here =========== -->
/*--------------------------------------------------------------
10.1. Top Header
--------------------------------------------------------------*/
.trovend-logo{width:60%;}
.clear-fix{
clear: both;
}
.mar-0{
margin:0px !important;
}
.padd-0{
padding: 0px !important;
}
.col-padd-0{
padding-left:0px;
padding-right:0px;
}
.text-center{
text-align:center;
}
.text-right{
text-align:right;
}
.text-left{
text-align:left;
}
.active-link{
color:#ff6600;
}
.inline{
display:inline;
}
.img-contain {
width: 100%;
height:auto;
/* object-fit: contain; */
}
/* width */
::-webkit-scrollbar {
width:8px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px grey;
background-color: #151515;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #0042ff;
border-radius:60px
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0002f0;
}
#tophead {
background: #151515;
line-height: 24px;
}
#tophead .social-links {
clear: inherit;
float: left;
}
#tophead span.social-title {
float: left;
padding: 9px 20px;
color: #cecece;
}
#quick-contact {
float: left;
margin-top: 0;
}
#quick-contact > ul {
margin: 0;
padding: 0;
}
#quick-contact a {
color: #cecece;
display: inline-block;
}
#quick-contact a:hover {
color: #0042ff;
}
#quick-contact li.quick-email::before {
content: "\f0e0";
}
#quick-contact li.quick-call::before {
content: "\f2a0";
}
#quick-contact li.quick-address::before {
content: "\f0ac";
}
#quick-contact li::before {
color: #cecece;
content: "";
display: inline-block;
font-family: FontAwesome;
font-size: 11px;
margin-right: 5px;
padding: 8px 0;
text-align: center;
}
#quick-contact li {
clear: inherit;
float: left;
font-size: 14px;
line-height: 0.8;
list-style: outside none none;
text-align: left;
font-weight: 400;
border-right:1px solid rgba(255, 255, 255, 0.15);
margin-right: 15px;
padding: 10px 15px 10px 0;
color: #cecece;
}
#tophead .section {
margin:0;
}
.header-social-wrapper {
float: right;
}
#tophead .social-links li {
display: block;
margin-right: 0;
margin-top: 0;
margin-left: 0px;
float: right;
}
#tophead .social-links li a::before {
color: #cecece;
line-height: 2.5;
font-size: 13px;
font-weight: 100;
text-shadow: none;
}
#tophead .social-links li a:hover::before {
color: #fff;
}
#tophead a.search-icon {
float: right;
display: block;
color: #cecece;
padding: 11px 15px;
font-size: 13px;
border-left: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
#header-search {
position: relative;
}
.search-box-wrap {
background: #292929;
display: none;
position: absolute;
right: 0;
top: 45px;
padding: 24px 30px 16px;
z-index: 9991;
}
#tophead .quick-link a.btn, #tophead .quick-link a.btn:hover {
padding: 12px 35px;
font-size: 14px;
margin: 0;
border-radius: 0;
transform: inherit;
}
.quick-link {
float: right;
}
.social-links li a {
border: 2px solid #777;
display: inline-block;
height: 33px;
line-height: 1.7;
margin-right: 0;
padding: 0;
text-align: center;
vertical-align: middle;
width: 33px;
}
#tophead .social-links li a {
border: none;
margin: 0;
width: 45px;
height: 45px;
padding: 6px 0;
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.social-links ul li a::before {
color: #8c8c8c;
content: "\f0c1";
display: block;
font-family: FontAwesome;
font-weight: normal;
line-height: 2;
font-size: 14px;
}
.social-links ul li a[href*="linkedin.com"]:hover {
background-color: #007bb6;
}
.social-links ul li a[href*="linkedin.com"]::before {
content: "\f0e1";
}
.social-links ul li a[href*="twitter.com"]:hover {
background-color: #08a0e9;
}
.social-links ul li a[href*="twitter.com"]::before {
content: "\f099";
}
.social-links ul li a[href*="youtube.com"]:hover {
background-color: #bb0000;
}
.social-links ul li a[href*="youtube.com"]::before {
content: "\f167";
}
.social-links ul li a[href*="facebook.com"]:hover {
background-color: #3b5998;
}
.social-links ul li a[href*="facebook.com"]::before {
content: "\f09a";
}
.social-links ul li a[href*="skype.com"]:hover {
background-color: #00aff0;
}
.social-links ul li a[href*="skype.com"]::before {
content: "\f17e";
}
.social-links ul li a[href*="googleplus.com"]:hover {
background-color: #dc4538;
}
.social-links ul li a[href*="googleplus.com"]::before {
content: "\f0d5";
}
.btn, .btn:visited, button, .button, .btn.btn-primary, .btn.btn-primary:visited {
transition: all 0.3s ease 0s;
background: #0042ff;
color: #fff;
font-size: 16px;
line-height: 1.5;
padding: 9px 26px;
border: none;
height: auto;
width: auto;
cursor: pointer;
display: inline-block;
text-align: center;
margin: 0 10px;
position: relative;
border-radius: 0;
vertical-align: middle;
}
/**==================== Header ======================**/
.headertop {
padding: 28px 0 33px;
}
.logo{
}
.logo a{
display: block;
}
.singMiddInfo{
position: relative;
padding-left: 50px;
float: left;
padding-top: 13px;
margin-left: 32px;
}
.singMiddInfo.phone{
margin-left: 0;
}
.singMiddInfo i{
font-size: 26px;
color: #ff5c00;
line-height: .8;
position: absolute;
left: 0;
top: 5px;
text-align: center;
padding: 13px 10px;
}
.singMiddInfo h4{
color: #2c3e50;
font-size: 14px;
margin-bottom: 7px;
}
.singMiddInfo p, .singMiddInfo a{
color: #ababab;
font-size: 12px;
margin: 0;
line-height: .8;
display: block;
}
.singMiddInfo a:hover{
color: #ff5c00;
}
.headMiddBtn {
margin: -2px 0;
}
.headMiddBtn a {
background: #ff5c00;
color: #fff;
display: inline-block;
font-size: 15px;
font-weight: 700;
height: 51px;
line-height: 0.8;
padding: 18px 21px;
text-align: center;
text-shadow: 1px 0px 1px rgba(0, 0, 0, .30);
}
.headMiddBtn a:hover{
color: #2C3E50;
}
.preloader {
background: #fff none repeat scroll 0 0;
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99999;
}
.header{
position: fixed;
z-index: 5;
width: 100%;
background: #dce8f3;
margin-bottom: 0;
padding-bottom: 0;
}
.header.fixedHeader{
background: #ffffff;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 999;
box-shadow: 0 10px 25px -2px rgba(38, 38, 38, 0.2);
}
.logo {
padding: 20px 0;
}
.mainnav ul{
line-height: .8
}
.mainnav ul li {
display: inline-block;
margin-right: 30px;
margin-top: 31px;
padding-bottom: 26px;
position: relative;
}
.mainnav ul li a {
display: block;
color: #292929;
font-size: 14px;
line-height: .8;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.2px;
}
.mainnav ul li:hover > a, .mainnav ul li.active a{
color: #0042ff;
}
.mainnav ul ul.sub-menu {
background: #222;
left: 100%;
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 240px;
z-index: 1;
margin-left: -100px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
padding-left: 0px;
}
.mainnav ul li:hover ul.sub-menu{
top: 37px;
opacity: 1;
visibility: visible;
z-index:2;
}
.mainnav ul ul.sub-menu li {
border-bottom: 1px solid #333;
display: block;
margin: 20px 20px 0px 20px ;
padding-bottom: 20px;
}
.mainnav ul ul.sub-menu li:last-child{
border-bottom: none;
}
.mainnav ul ul.sub-menu li a{
color: #fff;
font-size: 14px;
text-transform: capitalize;
}
.mainnav ul ul.sub-menu li a:hover{
color: #0042ff;
}
a:hover {text-decoration:none !important;}
ul.sub-menu li {
text-align: left;
}
/*======= media queries in css =======*/
/*////////////// MEDIUM DEVICES LAPTOPS //////////////*/
@media (min-width: 992px) and (max-width: 1199px){
.container-mine {
width: 1000px;
}
#quick-contact li {
clear: inherit;
float: left;
font-size: 12px;
line-height: 0.8;
list-style: outside none none;
text-align: left;
font-weight: 400;
border-right: 1px solid rgba(255, 255, 255, 0.15);
margin-right: 8px;
padding: 10px 8px 10px 0;
color: #cecece;
}
.header-social-wrapper {
float: right;
font-size: 12px;
}
#header-search{display: none;}
.quick-link .btn, .btn:visited, button, .button, .btn.btn-primary, .btn.btn-primary:visited {
transition: all 0.3s ease 0s;
background: #ff6600;
color: #fff;
font-size: 12px !important;
line-height: 1.5;
padding: 13px 20px !important;
border: none;
height: auto;
width: auto;
cursor: pointer;
display: inline-block;
text-align: center;
margin: 0 10px;
position: relative;
border-radius: 0;
vertical-align: middle;
}
.mainnav ul li {
display: inline-block;
margin-right: 20px;
margin-top: 31px;
padding-bottom: 26px;
position: relative;
}
}
/*////////////// TAB OR LARGE MOBILE PHONE //////////////*/
@media (min-width: 768px) and (max-width: 991px){
#quick-contact li {
clear: inherit;
float: left;
font-size: 13px;
line-height: 0.8;
list-style: outside none none;
text-align: left;
font-weight: 400;
border-right: 1px solid rgba(255, 255, 255, 0.15);
margin-right: 15px;
padding: 10px 15px 10px 0;
color: #cecece;
}
#header-search{display: none;}
.header-social-wrapper{display: none;}
.mainnav ul li a {
display: block;
color: #292929;
font-size: 12px;
line-height: .8;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0px;
}
.trovend-logo{width:100%;}
.theme_slider_title {
margin-top:60px;
padding-bottom: 0px !important;
}
}
/*////////////// XTRA SMALL DEVICES( mobile phones ) //////////////*/
@media (min-width: 300px) and (max-width: 479px){
#tophead{
display:none;
}
.mainnav ul li a {
display: block;
font-size: 14px;
line-height: .8;
text-transform: uppercase;
font-weight: 400;
text-align: left;
padding: 18px 12px 18px 20px;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}
.mainnav ul ul.sub-menu li {
display: block;
margin: 0px !important;
padding-bottom: 0px;
}
#main-navigation ul li.menu-item-has-children > a::after, #main-navigation ul li.page-item-has-children > a::after {
margin-right: 15px;
}
.themeHeadding h2 {
font-size: 20px;
}
.testmonial, .index .fillterProject {
padding-top: 60px !important;
}
}
