<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<header class="header-area header-style-two header--transparent color-black header--sticky">
<div class="header-wrapper">
<div class="header-left d-flex align-items-center">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo-symbol-dark.png" alt="Creative Agency">
</a>
</div>
<nav class="mainmenunav d-lg-block ml--50">
<div class="navbar-example2">
<!-- Start Mainmanu Nav -->
<ul class="mainmenu nav nav-pills">
<li class="nav-item">
<a class="nav-link smoth-animation active" href="#home">Home</a>
</li>
<li>
<a class="nav-link smoth-animation" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link smoth-animation" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link smoth-animation" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link smoth-animation" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link smoth-animation" href="#contact">Contact</a>
</li>
</ul>
<!-- End Mainmanu Nav -->
</div>
</nav>
</div>
<div class="header-right">
<div class="social-share-inner">
<ul class="social-share social-style--2 color-black d-flex justify-content-start liststyle">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
<div class="header-btn ml_md--20 ml_sm--0"><a class="rn-btn" href="#"><span>buy now</span></a>
</div>
<!-- Start Humberger Menu -->
<div class="humberger-menu d-block d-lg-none pl--20 pl_sm--10">
<span class="menutrigger text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</span>
</div>
<!-- End Humberger Menu -->
<!-- Start Close Menu -->
<div class="close-menu d-block d-lg-none">
<span class="closeTrigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</span>
</div>
<!-- End Close Menu -->
</div>
</div>
</header>
/**************************************
Header Styles
***************************************/
/*=====================
Header Area
=======================*/
.header-area {
padding-left: 50px;
padding-right: 50px;
z-index: 999;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-area {
padding-left: 30px;
padding-right: 30px;
}
}
@media only screen and (max-width: 767px) {
.header-area {
padding-left: 30px;
padding-right: 30px;
}
}
@media only screen and (max-width: 575px) {
.header-area {
padding-left: 20px;
padding-right: 20px;
}
}
.header-area .header-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 20px 0;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper {
padding: 15px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper {
padding: 30px 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-area .header-wrapper {
padding: 30px 0;
}
}
.header-area .header-wrapper .header-hamberger {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.header-area .header-wrapper .header-hamberger .hamberger {
margin-right: 27px;
}
.header-area .header-wrapper a.rn-btn {
padding: 0 25px;
height: 46px;
display: inline-block;
line-height: 42px;
border: 2px solid #b1b4c1;
border-radius: 6px;
color: #c6c9d8;
font-size: 14px;
position: relative;
z-index: 2;
}
.header-area .header-wrapper a.rn-btn.theme-color {
border-color: #f9004d;
color: #f9004d;
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper a.rn-btn {
padding: 0 11px;
height: 39px;
line-height: 33px;
font-size: 12px;
}
}
@media only screen and (max-width: 575px) {
.header-area .header-wrapper a.rn-btn {
height: 34px;
line-height: 29px;
}
}
.header-area .header-wrapper a.rn-btn::before {
display: none;
}
.header-area .header-wrapper a.rn-btn:hover {
border-color: transparent;
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
color: #ffffff;
border: 2px solid #f9004d;
background: #f9004d;
border-radius: 6px;
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper a.rn-btn {
display: none;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .logo a img {
width: auto;
}
}
@media only screen and (max-width: 575px) {
.header-area .header-wrapper .logo a img {
width: 120px;
}
}
.header-area.header--transparent {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
}
.header-area.header--transparent .header-wrapper {
padding: 50px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area.header--transparent .header-wrapper {
padding: 30px 0;
}
}
@media only screen and (max-width: 767px) {
.header-area.header--transparent .header-wrapper {
padding: 15px 0;
}
}
.header-area.color-white a.rn-btn {
border: 2px solid #ffffff;
color: #ffffff;
}
.header-area.color-black a.rn-btn {
border: 2px solid rgba(29, 29, 36, 0.5);
color: #1d1d24;
}
.header-area .header-right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.header-area .header-right .header-btn {
margin-left: 50px;
}
@media only screen and (max-width: 575px) {
.header-area .header-right .header-btn {
margin-left: 0;
}
}
.header-area.header--sticky {
position: fixed;
top: 0;
z-index: 999;
padding-left: 50px;
padding-right: 50px;
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-area.header--sticky {
padding-left: 30px;
padding-right: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area.header--sticky {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
}
@media only screen and (max-width: 767px) {
.header-area.header--sticky {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
}
.header-area.header--sticky .header-wrapper {
padding: 20px 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.header-area.header--sticky .header-wrapper .logo a img {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.header-area.header--sticky .header-wrapper .logo a img.logo-1 {
display: block;
}
.header-area.header--sticky .header-wrapper .logo a img.logo-2 {
display: none;
}
.header-area.header--sticky .header-wrapper .mainmenunav ul.mainmenu > li > a {
position: relative;
}
.header-area.header--sticky .header-wrapper .mainmenunav ul.mainmenu > li > a::after {
position: absolute;
content: "";
left: 0;
width: 0;
height: 3px;
background: #f9004d;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
bottom: 0;
}
.header-area.header--sticky.default-color.sticky .mainmenunav ul.mainmenu > li > a {
color: #1f1f25;
}
.header-area.header--sticky.default-color.sticky .mainmenunav ul.mainmenu > li.is-current a {
color: #f9004d;
}
.header-area.header--sticky.default-color.sticky .mainmenunav ul.mainmenu > li.is-current a::after {
width: 100%;
}
.header-area.header--sticky .mainmenunav ul.mainmenu > li > a {
position: relative;
}
.header-area.header--sticky .mainmenunav ul.mainmenu > li > a::after {
position: absolute;
content: "";
left: 0;
width: 0;
height: 3px;
background: #f9004d;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
bottom: 0;
}
.header-area.header--sticky .mainmenunav ul.mainmenu > li > a.active, .header-area.header--sticky .mainmenunav ul.mainmenu > li > a:hover {
background: transparent;
color: #f9004d;
}
.header-area.header--sticky .mainmenunav ul.mainmenu > li > a.active::after, .header-area.header--sticky .mainmenunav ul.mainmenu > li > a:hover::after {
width: 100%;
}
.header-area.header--sticky.sticky {
background: #ffffff;
-webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
-webkit-animation: headerSlideDown .95s ease forwards;
animation: headerSlideDown .95s ease forwards;
}
.header-area.header--sticky.sticky .header-wrapper {
padding: 0px;
}
.header-area.header--sticky.sticky .header-wrapper a.rn-btn {
color: #1f1f25;
border-color: #1f1f25;
}
.header-area.header--sticky.sticky .header-wrapper a.rn-btn:hover {
background: #f9004d;
border-color: #f9004d;
color: #ffffff;
}
.header-area.header--sticky.sticky .header-wrapper .mainmenunav ul.mainmenu > li > a {
padding: 22px 0;
color: #1f1f25;
}
.header-area.header--sticky.sticky .header-wrapper .mainmenunav ul.mainmenu > li > a.active, .header-area.header--sticky.sticky .header-wrapper .mainmenunav ul.mainmenu > li > a:hover {
color: #f9004d;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area.header--sticky.sticky .header-wrapper .mainmenunav ul.mainmenu > li > a {
padding: 0px 0;
}
}
@media only screen and (max-width: 767px) {
.header-area.header--sticky.sticky .header-wrapper .mainmenunav ul.mainmenu > li > a {
padding: 0px 0;
}
}
.header-area.header--sticky.sticky .logo a img {
height: 50px;
}
@media only screen and (max-width: 767px) {
.header-area.header--sticky.sticky .logo a img {
height: auto;
}
}
.header-area.header--sticky.sticky .logo a img.logo-1 {
display: none;
}
.header-area.header--sticky.sticky .logo a img.logo-2 {
display: block;
}
.header-area.header--sticky.sticky .humberger-menu span.text-white {
color: #1f1f25 !important;
}
/*----------------------------
Mobile Menu Style Css
------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav {
position: absolute;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav {
position: absolute;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu {
width: 60vw;
height: 100vh;
position: fixed;
top: 0;
right: -61vw;
z-index: 99;
padding: 55px;
background: #ffffff;
-webkit-transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
-o-transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
display: block;
overflow-y: auto;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu {
width: 60vw;
height: 100vh;
position: fixed;
top: 0;
right: -61vw;
z-index: 99;
padding: 55px;
background: #ffffff;
-webkit-transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
-o-transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
display: block;
overflow-y: auto;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li {
margin: 0;
padding: 10px 0;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li {
margin: 0;
padding: 10px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown {
position: relative;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown {
position: relative;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a {
position: relative;
}
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a::after {
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7px 0 7px;
border-color: #1f1f25 transparent transparent transparent;
position: absolute;
content: "";
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a.open {
color: #f9004d;
}
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a.open::after {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7px 7px 7px;
border-color: transparent transparent #f9004d transparent;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a {
position: relative;
}
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a::after {
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7px 0 7px;
border-color: #1f1f25 transparent transparent transparent;
position: absolute;
content: "";
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a.open {
color: #f9004d;
}
.header-area .header-wrapper .mainmenunav ul.mainmenu li.has-droupdown > a.open::after {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7px 7px 7px;
border-color: transparent transparent #f9004d transparent;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li a {
padding: 0;
display: block;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li a {
padding: 0;
display: block;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu {
position: relative;
height: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
padding: 0;
opacity: 0;
visibility: hidden;
background: transparent;
-webkit-box-shadow: inherit;
box-shadow: inherit;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu {
position: relative;
height: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
padding: 0;
opacity: 0;
visibility: hidden;
background: transparent;
-webkit-box-shadow: inherit;
box-shadow: inherit;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu li {
padding: 3px 0;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu li {
padding: 3px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu li a {
padding: 2px 10px;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu li a {
padding: 2px 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu.active {
height: 100%;
padding: 12px 0;
opacity: 1;
visibility: visible;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li ul.submenu.active {
height: 100%;
padding: 12px 0;
opacity: 1;
visibility: visible;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li a {
color: #1f1f25;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper .mainmenunav ul.mainmenu li a {
color: #1f1f25;
}
}
.header-area .header-wrapper .close-menu {
position: fixed;
top: 12px;
opacity: 0;
visibility: hidden;
right: 29px;
z-index: -10;
}
.header-area .header-wrapper.menu-open .close-menu {
opacity: 1;
visibility: visible;
z-index: 9999;
}
.header-area .header-wrapper.menu-open .close-menu span {
color: #000000;
font-size: 30px;
cursor: pointer;
}
.header-area .header-wrapper.menu-open .close-menu span svg {
width: 30px;
height: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area .header-wrapper.menu-open .mainmenunav ul.mainmenu {
right: 0;
}
}
@media only screen and (max-width: 767px) {
.header-area .header-wrapper.menu-open .mainmenunav ul.mainmenu {
right: 0;
}
}
@media only screen and (max-width: 575px) {
.header-area .header-wrapper.menu-open .mainmenunav ul.mainmenu {
width: 86vw;
padding: 54px 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area.header-style-two .header-wrapper {
padding: 30px 0;
}
}
@media only screen and (max-width: 767px) {
.header-area.header-style-two .header-wrapper {
padding: 15px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-area.header-style-two .header-wrapper .logo a img {
width: auto;
}
}
@media only screen and (max-width: 767px) {
.header-area.header-style-two .header-wrapper .logo a img {
width: auto;
}
}
@media only screen and (max-width: 767px) {
.header-area.header-style-two .header-wrapper ul.social-share li {
margin: 0;
}
}
.humberger-menu span {
cursor: pointer;
}
.humberger-menu span svg {
width: 30px;
height: 30px;
}
@media only screen and (max-width: 767px) {
.humberger-menu span {
font-size: 28px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.humberger-menu span {
font-size: 28px;
}
}
.header-wrapper.menu-open .humberger-menu span {
opacity: 0;
}
.header-area.small-logo .header-wrapper .logo a img {
width: auto !important;
}
.header-not-transparent .humberger-menu span.text-white {
color: #000000 !important;
}
.color-black .humberger-menu span.text-white {
color: #000000 !important;
}
/*====================
Mainmenu Area
=====================*/
.mainmenunav ul.mainmenu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mainmenunav ul.mainmenu > li {
margin: 0 15px;
position: relative;
}
.mainmenunav ul.mainmenu > li > a {
color: #c6c9d8;
font-size: 16px;
font-weight: 500;
padding: 20px 0;
display: inline-block;
}
.mainmenunav ul.mainmenu > li > ul.submenu {
min-width: 247px;
height: auto;
position: absolute;
top: 100%;
left: 0;
z-index: 90;
opacity: 0;
visibility: hidden;
background-color: #fff;
-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
text-align: left;
padding: 12px 0;
border-radius: 4px;
}
.mainmenunav ul.mainmenu > li > ul.submenu li a {
font-size: 16px;
font-weight: 500;
padding: 5px 20px;
font-size: 14px;
display: block;
color: #1f1f25;
margin: 0 10px;
border-radius: 3px;
}
.mainmenunav ul.mainmenu > li > ul.submenu li:hover a {
color: #f9004d;
background: rgba(249, 0, 77, 0.07);
}
.mainmenunav ul.mainmenu > li:hover > ul.submenu {
opacity: 1;
visibility: visible;
}
.mainmenunav ul.mainmenu > li:hover > a {
color: #f9004d;
}
.mainmenunav ul.mainmenu > li:first-child {
margin-left: 0;
}
.mainmenunav ul.mainmenu > li:last-child {
margin-right: 0;
}
.humberger-menu span.text-white {
color: #c6c9d8 !important;
}
.color-white .mainmenunav ul.mainmenu > li > a {
color: #ffffff;
}
.color-white .mainmenunav ul.mainmenu > li:hover > a {
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.color-white .mainmenunav ul.mainmenu > li:hover > a {
color: #f9004d;
}
}
@media only screen and (max-width: 767px) {
.color-white .mainmenunav ul.mainmenu > li:hover > a {
color: #f9004d;
}
}
.color-black .mainmenunav ul.mainmenu > li > a {
color: #1d1d24;
}
.color-black .mainmenunav ul.mainmenu > li:hover > a {
color: #f9004d;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-style-two .humberger-menu span.text-white {
color: #1d1d24 !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-style-two .humberger-menu span.text-white {
color: #1d1d24 !important;
}
}
@media only screen and (max-width: 767px) {
.header-style-two .humberger-menu span.text-white {
color: #1d1d24 !important;
}
}
/* Social icon Styles */
ul.social-share {
padding: 0;
margin: 0;
margin: -6px;
}
ul.social-share li {
margin: 6px;
}
ul.social-share li a {
width: 40px;
display: inline-block;
height: 40px;
border: 2px solid rgba(198, 201, 216, 0.75);
line-height: 35px;
color: rgba(198, 201, 216, 0.75);
border-radius: 100%;
text-align: center;
font-size: 14px;
}
ul.social-share li:hover a {
background: #f9004d;
border-color: #f9004d;
color: #ffffff;
-webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
}
ul.social-share.color-theme li a {
border-color: #f9004d;
color: #f9004d;
}
ul.social-share.color-theme li a:hover {
background: #f9004d;
border-color: #f9004d;
color: #ffffff;
}
ul.social-share.rn-lg-size {
margin-top: 0 !important;
}
ul.social-share.rn-lg-size li a {
width: 50px;
height: 50px;
line-height: 47px;
font-size: 16px;
}
ul.social-share.social-style--2 li a {
border: 0 none;
width: 30px;
height: auto;
text-align: left;
line-height: inherit;
font-size: 16px;
}
ul.social-share.social-style--2 li:hover a {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
ul.social-share.social-style--2.color-theme li a {
color: #f9004d;
}
ul.social-share.social-style--2.color-theme li a:hover {
color: currentColor;
}
ul.social-share.social-style--2.color-black li a {
color: #1d1d24;
opacity: 0.8;
}
ul.social-share.social-style--2.color-black li a:hover {
color: #f9004d;
opacity: 1;
}
ul.liststyle.bullet li {
font-size: 18px;
line-height: 30px;
color: rgba(29, 29, 36, 0.75);
position: relative;
padding-left: 30px;
}
@media only screen and (max-width: 767px) {
ul.liststyle.bullet li {
padding-left: 19px;
}
}
ul.liststyle.bullet li::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
border-radius: 100%;
background: rgba(29, 29, 36, 0.75);
left: 0;
top: 10px;
}
ul.liststyle.bullet li + li {
margin-top: 8px;
}
