.navigation-wrapper .navbar-area .main-navbar .main-menu {
display: flex;
align-items: center;
justify-content: center;
padding-left: 0;
list-style: none;
gap: 15px;
margin-bottom: 0;
}
.navigation-wrapper .navbar-area .main-menu-right .menu-right-list {
display: flex;
align-items: center;
justify-content: start;
padding-left: 0;
margin-bottom: 0;
list-style: none;
gap: 10px;
}
.navigation-wrapper .navbar-area {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 30px;
} .navigation-wrapper {
line-height: 100px;
background: var(--dark-2);
}
.main-navigation a img {
max-width: 200px;
width: 100%;
height: auto;
}
.is-sticky-menu {
position: fixed;
top: -1px;
left: 0;
right: 0;
width: 100%;
background: var(--dark-2);
z-index: 999;
-webkit-box-shadow: rgb(100 95 95 / 12%) 0px 7px 29px 0px;
-ms-box-shadow: rgb(100 95 95 / 12%) 0px 7px 29px 0px;
-o-box-shadow: rgb(100 95 95 / 12%) 0px 7px 29px 0px;
box-shadow: rgb(100 95 95 / 12%) 0px 7px 29px 0px;
-webkit-animation: 1s linear 0s normal none 1 running flipInX;
animation: 1s linear 0s normal none 1 running flipInX;
}
.main-mobile-nav .is-sticky-menu {
animation: none;
position: fixed;
top: 0;
width: 100%;
}
.navigation-wrapper .logo a {
margin-bottom: 0;
text-decoration: none;
color: var(--secondary-color);
}
.navigation-wrapper .logo a>h2 {
margin-bottom: 0;
font-size: 35px;
}
.header-three .main-menu-right .menu-right-list li .header-search-toggle {
color: var(--light);
}
.main-menu-right .menu-right-list li .header-search-toggle {
border: none;
background: var(--dark-2);
height: 40px;
display: inline-block;
line-height: 40px;
width: 40px;
border-radius: 50%;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border: 1px solid rgba(255, 255, 255, 0.5);
transition: 1s;
}
.main-menu-right .menu-right-list li .header-search-toggle:hover,
.main-menu-right .menu-right-list li .header-search-toggle:focus-within {
background: var(--primary-color);
color: var(--text-white);
}
.header-search-active .header-search-popup {
display: block;
visibility: visible;
opacity: 1;
}
.header-search-flex {
width: 100%;
margin: auto;
position: relative;
top: 50%;
transform: translate(0px, -50%);
}
.header-search-popup .search-form {
display: flex;
align-items: center;
width: 450px;
margin: 0 auto;
}
.header-search-popup .search-form .search-submit {
height: 50px;
border: none;
width: 20%;
background: var(--primary-color);
color: var(--light);
border-radius: 0 0 20px 0;
}
.close-style.header-search-close {
position: absolute;
width: 40px;
height: 40px;
border: none;
background: var(--light);
color: var(--primary-color);
top: -140px;
right: 7%;
}
.main-menu>li>a,
.dropdown-menu li a {
position: relative;
display: block;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.3px;
text-align: inherit;
text-decoration: none;
z-index: 0;
}
.main-menu .dropdown .nav-link::after {
content: '\f107';
font-family: 'Font Awesome 5 Free';
font-weight: 600;
margin-left: 8px;
}
.header-2 .main-menu>.menu-item a {
color: var(--text-white);
transition: 1s;
}
.main-menu li .nav-link {
transition: 0.5s;
color: var(--secondary-color)
}
.main-menu .dropdown .dropdown-menu .menu-item a {
position: relative;
color: var(--secondary-color);
}
.main-menu li .nav-link::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: var(--secondary-color);
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
.main-menu li .nav-link:hover::before {
transform-origin: left;
transform: scaleX(1);
}
.main-header .widget_nav_menu .sub-menu,
.main-navbar .dropdown-menu {
position: absolute;
z-index: 99;
width: 220px;
background: var(--dark-2);
margin: 0;
border-radius: 0;
-moz-box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.075);
box-shadow: 0 -8px 16px rgb(0 0 0 / 8%);
padding: 0;
font-size: 1rem;
text-align: left;
display: block;
opacity: 0;
visibility: hidden;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 0;
transform-origin: center;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.main-navbar .main-menu .menu-item:hover>.dropdown-menu,
.main-navbar .main-menu .menu-item:focus-within>.dropdown-menu {
opacity: 1;
visibility: visible;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.main-footer .main-menu .main-navbar .dropdown-menu>li,
.main-footer .widget_nav_menu .sub-menu>li,
.main-header .widget_nav_menu .sub-menu>li,
.main-navbar .dropdown-menu>li {
padding: 0;
position: relative;
height: auto;
}
.main-navbar .dropdown-menu>li:not(:last-child) {
border-bottom: 1px solid rgb(122 122 122 / 22%);
}
.main-footer .main-menu .dropdown-menu li a,
.main-footer .widget_nav_menu .sub-menu li a,
.main-header .widget_nav_menu .sub-menu li a,
.main-navbar .dropdown-menu li a {
color: var(--secondary-color);
font-weight: 600;
line-height: 24px;
padding: 10px;
text-transform: none;
white-space: normal;
}
.main-menu>li>a,
.dropdown-menu li a {
position: relative;
display: block;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.3px;
text-align: inherit;
text-decoration: none;
z-index: 0;
}
.main-mobile-build-right ul,
.main-menu-right>ul {
margin: 0;
padding: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
height: 100%;
}
.menu-right-list .button-area a {
text-decoration: none;
padding: 0px 15px;
display: inline-block;
height: 50px;
background: var(--primary-color);
line-height: 50px;
border-radius: 0 0 15px 0;
font-weight: 600;
color: var(--light);
margin-left: 15px;
} .main-mobile-nav {
width: 100%;
display: none;
border-bottom: 1px solid rgb(108 117 125 / 0.6);
}
.main-mobile-menu {
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px !important;
min-height: 80px !important;
}
.menu-collapse-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
flex: 1 auto;
}
.hamburger-menu {
width: 40px;
height: 40px;
vertical-align: middle;
border-radius: 0;
overflow: hidden;
} .menu-right-list li.cart-wrapper,
.menu-right-list li.search-button {
position: relative;
}
.menu-right-list .cart-wrapper .header-cart {
border: none;
background: none;
height: 40px;
transition: 1s;
line-height: 40px;
width: 40px;
text-align: center;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
color: var(--secondary-color);
position: relative;
font-size: 18px;
}
.menu-right-list .cart-wrapper .header-cart:hover,
.menu-right-list .cart-wrapper .header-cart:focus-within {
background: var(--primary-color);
color: var(--text-white);
}
.menu-right-list .cart-wrapper .header-cart span {
position: absolute;
top: -7px;
right: -7px;
width: 22px;
height: 22px;
border-radius: 20px;
line-height: 22px;
display: inline-block;
background: var(--primary-color);
color: var(--text-white);
font-size: 12px;
font-weight: 600;
}
.menu-right-list li.cart-wrapper:hover .shopping-cart,
.menu-right-list li.cart-wrapper:focus-within .shopping-cart {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.shopping-cart {
text-align: left;
}
.shopping-cart {
position: absolute;
top: 100%;
right: 0px;
z-index: 9999999;
width: 280px;
background: var(--dark-bg-2);
border-radius: 0;
padding: 20px;
transform: scale(1, 0);
-webkit-transform: scale(1, 0);
-webkit-transform-origin: top;
transform-origin: top;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-box-shadow: 0px 3px 15px 0px rgb(0 0 0 / 10%);
box-shadow: 0px 3px 15px 0px rgb(0 0 0 / 10%);
}
.shopping-cart .shopping-cart-header {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 15px;
}
.shopping-cart .badge {
border-radius: 20px;
background-color: var(--primary-color);
color: var(--light);
font-weight: 400;
margin-left: -6px;
vertical-align: super;
border: 2px solid var(--bs-white);
}
.badge {
position: relative;
}
.badge {
display: inline-block;
padding: 0.25em 0.5em;
font-size: .75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.shopping-cart .shopping-cart-header .shopping-cart-total {
float: right;
font-size: 1.125rem;
font-weight: 600;
}
.shopping-cart .shopping-cart-items {
padding: 0;
padding-top: 15px;
list-style: none;
}
.shopping-cart .shopping-cart-items li {
margin-bottom: 10px;
margin-top: 0;
padding: 0;
width: 100%;
}
.shopping-cart .shopping-cart-items .item-img {
float: left;
margin-right: 12px;
width: 50px;
height: 50px;
border-radius: var(--bs-theme-radius);
text-align: center;
border: 1px solid var(--bs-gray-light);
box-shadow: 0 0 12px -3px rgb(0 0 0 / 25%);
}
.shopping-cart .shopping-cart-items .item-name {
display: block;
font-weight: 600;
font-size: 1rem;
}
.shopping-cart .shopping-cart-items .item-price {
margin-right: 0;
color: var(--bs-secondary-dark);
}
.shopping-cart .shopping-cart-items .item-quantity {
color: var(--bs-red);
}
.shopping-cart .shopping-cart-items .item-img img {
vertical-align: baseline;
border-radius: var(--bs-theme-radius);
}
.btn-like-icon {
display: block;
padding: 10px 20px;
text-align: center;
background: var(--dark);
color: var(--light);
font-weight: 600;
border-radius: 0 0 15px 0;
border: none;
} .menu-collapsed {
width: inherit;
height: inherit;
display: block;
padding: 0.55em 0.47em 0.7em;
position: relative;
z-index: 1;
border: 2px solid var(--primary-color);
transition: .5s;
background-color: var(--primary-color);
}
.menu-collapsed:hover,
.menu-collapsed:focus-within {
background: var(--primary-color) !important;
color: var(--white) !important;
}
.hamburger-menu div {
height: 3px;
width: 100%;
margin: 0 0 5px;
background: var(--bs-white);
}
.hamburger-menu div:first-child {
margin-top: 0px;
}
.hamburger-menu div:last-child {
margin-bottom: 0;
}
.main-mobile-build {
position: absolute;
top: -200%;
left: 0;
right: 0;
z-index: 0;
width: 100%;
height: 100%;
padding: 60px 0 0;
margin: auto;
text-align: left;
background: var(--dark-bg-2);
-webkit-transition: top 600ms cubic-bezier(.6, .1, .68, .53) 0ms;
-o-transition: top 600ms cubic-bezier(.6, .1, .68, .53) 0ms;
transition: top 600ms cubic-bezier(.6, .1, .68, .53) 0ms;
}
.main-mobile-menu ul.main-menu>li {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.main-mobile-menu ul.main-menu>li .dropdown-menu li.menu-item {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.main-mobile-menu ul.main-menu>li a {
flex: 1;
}
.main-mobile-menu ul.main-menu .menu-item a {
display: inline-block;
}
.mobile-collapsed>button {
cursor: pointer;
flex-basis: 10%;
font-size: 18px;
text-align: center;
line-height: 46px;
padding: 0 1.17em;
color: var(--bs-secondary);
background-color: var(--bs-primary-light);
border: 0;
border-radius: 0;
border-left: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.main-mobile-menu ul.main-menu .menu-item a {
display: inline-block;
color: var(--secondary-color);
}
.main-mobile-menu ul.main-menu .menu-item-has-children>a {
flex: 1;
}
.main-mobile-menu ul.main-menu li>a {
text-transform: none;
font-weight: 600;
letter-spacing: 0.5px;
}
.main-mobile-menu ul.main-menu>li a {
width: 100%;
padding: 0;
color: var(--bs-secondary);
padding-left: 15px;
}
.main-mobile-menu ul.main-menu .menu-item a {
position: relative;
}
.main-mobile-menu ul.main-menu .menu-item a::before {
content: '';
font-family: 'Font Awesome 5 Free';
}
.main-mobile-menu .main-menu>li>a,
.main-mobile-menu .dropdown-menu li a {
font-size: 18px;
}
.main-mobile-menu .main-menu>li>a,
.main-mobile-menu .dropdown-menu li a {
line-height: 2.8125rem;
}
.main-mobile-menu ul.main-menu .dropdown-menu {
display: none;
}
.main-mobile-menu ul.main-menu .dropdown-menu {
margin: 0;
float: none;
clear: both;
background: none;
border-top: 1px solid #e0e0e0;
width: 100%;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.main-mobile-menu ul.main-menu li.menu-item-has-children ul.dropdown-menu li>a {
padding-left: 25px;
width: 100%;
}
.main-mobile-menu .main-menu .dropdown.current span.mobile-collapsed button {
transform: rotate(00deg);
}
.main-mobile-build .main-menu li.current>span>button:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.main-mobile-build .main-menu li>span>button:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
display: block;
transition: 0.65s;
}
.header-close-menu.close-style {
position: absolute;
top: 5px;
right: 10px;
margin: 0 auto;
display: block;
width: 45px;
height: 44px;
border-radius: 0;
border-color: var(--primary-color);
border-style: solid;
background: var(--white);
z-index: 9;
}
.close-style:before,
.close-style:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 25px;
height: 4px;
background: var(--bs-secondary);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.close-style:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.close-style:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.main-mobile-menu ul.main-menu {
height: 100%;
overflow-x: hidden;
overflow-y: overlay;
-ms-touch-action: overlay;
-webkit-overflow-scrolling: touch;
touch-action: auto;
}
.main-mobile-menu ul,
.main-mobile-menu ul li {
padding: 0;
list-style: none;
position: relative;
border: 0;
}
.main-mobile-menu ul.main-menu li.menu-item-has-children {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.main-mobile-menu ul.main-menu>li:first-child {
border-top: 1px solid #e0e0e0;
}
.main-mobile-menu ul.main-menu>li {
border-bottom: 1px solid #e0e0e0;
}
.main-mobile-menu ul li {
margin: 0;
}
.main-menu .dropdown .dropdown-menu .menu-item a:hover,
.main-menu .dropdown .dropdown-menu .menu-item a:focus {
background-color: transparent;
}
.main-menu .dropdown .dropdown-menu .menu-item a {
position: relative;
}
.main-menu .dropdown .dropdown-menu .menu-item a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 0;
background: var(--primary-color);
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
z-index: -1;
}
.main-menu .dropdown .dropdown-menu .menu-item a:hover::after,
.main-menu .dropdown .dropdown-menu .menu-item a:focus-within::after {
transform-origin: left;
transform: scaleX(1);
}
.main-menu .dropdown .dropdown-menu .menu-item a {
transition: 0.5s;
}
.main-menu .dropdown .dropdown-menu .menu-item a:hover,
.main-menu .dropdown .dropdown-menu .menu-item a:focus-within {
color: var(--text-white);
} .main-navigation ul li ul ul {
left: 223px;
top: -1px;
padding: 0 !important;
}
.main-navigation ul li ul ul ul {
top: 45px;
left: 0;
}
.main-navigation ul li ul ul ul ul {
top: -1px;
left: -223px;
}
.main-navigation ul li ul ul ul ul ul {
top: -1px;
left: -223px;
}
.main-navigation ul li ul ul ul ul ul ul {
top: -1px;
left: -223px;
}
.main-navigation ul li ul ul ul ul ul ul ul {
top: 45px;
left: 0;
}
.main-navigation ul li ul ul ul ul ul ul ul ul {
top: -1px;
left: 220px;
}
.main-navigation ul li ul ul ul ul ul ul ul ul ul {
top: -1px;
left: 218px;
}
.main-navigation ul li ul ul ul ul ul ul ul ul ul ul {
left: 223px;
top: 0px;
}
.main-navigation ul li ul ul ul ul ul ul ul ul ul ul ul {
top: 45px;
left: 0;
}  .header-search-popup {
background-color: rgb(0, 0, 0, 1);
position: fixed;
left: 0;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: 1s;
clip-path: circle(0%);
}
.header-search-active .header-search-popup {
visibility: visible;
opacity: 1;
clip-path: circle(100%);
}
.header-search-active .header-search-popup form {
max-width: 600px;
height: 60px;
opacity: 1;
width: 100%;
transform: scaleX(1);
}
.header-search-popup form {
width: 100%;
max-width: 100px;
margin: auto;
position: relative;
top: 50%;
-moz-transform: translate(0px, -50%);
-moz-transform: translate(0px, -50%);
-o-transform: translate(0px, -50%);
-webkit-transform: translate(0px, -50%);
opacity: 0;
transform: scaleX(0);
transition: .6s;
transition-delay: .8s;
transform-origin: center;
}
.header-search-popup form .search-form-control {
height: 60px;
padding-right: 60px;
padding-left: 60px;
font-size: 35px;
border-radius: 0;
box-shadow: 0 0px 10px rgba(23, 16, 17, 0.15);
border: 1px solid var(--white);
background: transparent;
color: var(--primary-color);
}
.header-search-popup .search-form-control:focus {
outline: 0;
box-shadow: none;
}
.header-search-popup form .search-form-control {
width: -webkit-fill-available;
}
.header-search-popup .header-search-close {
width: 60px;
margin: auto 0;
bottom: 0;
}
.header-search-popup .search-form i {
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto 0;
font-size: 30px;
text-align: center;
max-width: 60px;
width: 100%;
height: 100%;
line-height: 60px;
color: var(--primary-color);
}
.header-search-popup .header-search-close {
width: 60px;
margin: auto 0;
top: 0;
bottom: 0;
right: 0;
height: 60px;
border-left: 1px solid var(--white);
}
.close-style {
position: absolute;
display: block;
top: 1.75%;
width: 46px;
right: 0;
z-index: 9;
border-left: 1px solid var(--white);
}
.close-style:before,
.close-style:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 30px;
height: 3px;
background: var(--primary-color);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: 0.5s;
}
.close-style:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.close-style:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-style:hover:before,
.close-style:hover:after,
.close-style:focus:before,
.close-style:focus:after {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.header .header-search-toggle,
.cart-icon-wrap {
font-size: 18px;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
line-height: 30px;
color: var(--secondary-color);
}  .author-popup {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 9999999;
overflow: hidden;
opacity: 0;
visibility: hidden;
background-color: rgb(0 0 0 / 0.5);
-webkit-transition: all .4s ease-in .8s;
transition: all .4s ease-in .8s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.author-popup-active .author-popup {
opacity: 1;
visibility: visible;
-webkit-transition: all .8s ease-in .0s;
transition: all .8s ease-in .0s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.author-overlay-layer {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
backface-visibility: hidden;
background: #282828;
opacity: 0.8;
-webkit-transition: all .4s ease-in .8s;
transition: all .4s ease-in .8s;
}
.author-popup-active .author-overlay-layer {
left: 0%;
opacity: 0.8;
visibility: visible;
-webkit-transition: all .8s ease-out 0s;
transition: all .8s ease-out 0s;
}
.author-popup .author-div {
max-width: 420px;
height: 100%;
margin-left: auto;
position: relative;
padding-top: 45px;
background-color: var(--dark-2);
-webkit-transform: translate3d(520px, 0, 0);
transform: translate3d(520px, 0, 0);
-webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
z-index: 1;
}
.author-popup-active .author-div {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}
.author-content {
width: 100%;
height: 100%;
padding: 25px 35px;
overflow-x: hidden;
overflow-y: auto;
backface-visibility: hidden;
}
.author-anim {
width: 100%;
height: 100%;
position: relative;
top: 150px;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-in .3s;
-o-transition: all .3s ease-in .3s;
transition: all .3s ease-in .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: left;
}
.author-popup-active .author-anim {
top: 0;
opacity: 1;
visibility: visible;
-webkit-transition: all 1s ease-out 1.2s;
transition: all 1s ease-out 1.2s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.author-content .widget:not(:last-child) {
margin-bottom: 25px;
line-height: 0;
}
.author-content .widget:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.author-anim .heading-title {
margin-bottom: 30px;
}
.author-content .widget-title {
display: inline-block;
font-size: 22px;
font-weight: 600 !important;
letter-spacing: 0.5px;
margin-bottom: 20px;
padding-left: 13px;
position: relative;
z-index: 0;
}
.toggle-button a.toggle-icon {
font-size: 30px;
margin-left: 10px;
color: var(--secondary-color);
display: block;
transition: 1s;
}
.toggle-button a.toggle-icon:hover,
.toggle-button a.toggle-icon:focus-within {
color: var(--primary-color);
}
.author-anim .heading-title h6 {
color: var(--secondary-color);
font-size: 22px;
font-weight: 600;
}
.author-anim .author-content p {
font-size: 16px;
line-height: 1.5;
color: var(--secondary-color);
margin: 0;
}
.author-anim .widget_media_gallery .widget-title {
font-size: 26px;
color: var(--secondary-color);
padding: 0;
}
.author-anim img.attachment-thumbnail.size-thumbnail {
display: inline-block;
max-width: 80px;
height: 80px;
border-radius: 50%;
width: 100%;
}
.author-anim figure.gallery-item {
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
position: relative;
overflow: hidden;
}
.author-anim figure.gallery-item::after {
content: '';
background: var(--primary-color);
position: absolute;
inset: 0;
clip-path: circle(0%);
opacity: 0.6;
width: 100%;
border-radius: 50%;
transition: 1s;
}
.author-anim figure.gallery-item:hover::after,
.author-anim figure.gallery-item:focus-within:after {
clip-path: circle(100%);
}
.author-anim .overlay.overlay-top {
border-radius: 5px;
display: none;
}
.header .author-anim .contact-area {
display: flex;
justify-content: start;
margin-bottom: 25px;
align-items: center;
}
.header .author-anim .contact-area .contact-icon {
color: var(--primary-color);
line-height: 0;
}
.header .author-anim .contact-area .contact-info {
line-height: 0;
margin-left: 10px;
}
.header .author-anim .contact-area .contact-info a {
color: var(--secondary-color);
font-size: 16px;
text-decoration: none;
display: inline-block;
transition: 1s;
}
.header .author-anim .contact-area .contact-info a:hover,
.header .author-anim .contact-area .contact-info a:focus-within {
color: var(--primary-color);
text-decoration: dotted underline;
}
.author-anim .widget-social-widget {
margin-bottom: 30px;
}
.author-anim .widget-social-widget ul {
display: flex;
align-items: center;
justify-content: start;
padding-left: 0;
list-style: none;
margin: 0;
}
.author-anim .widget-social-widget ul li a {
color: var(--highlight-color);
font-size: 18px;
margin-right: 10px;
width: 40px;
display: inline-block;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 50%;
transition: .6s;
line-height: 40px;
position: relative;
border: 1px solid var(--highlight-color);
}
.author-anim .widget-social-widget ul li a:hover:after,
.author-anim .widget-social-widget ul li a:focus-within:after {
animation: wave6 1s infinite;
content: "";
position: absolute;
inset: 0;
transition: .6s;
border-radius: 100px;
}
.author-anim .widget-social-widget ul li a:hover:before,
.author-anim .widget-social-widget ul li a:focus-within:before {
content: "";
position: absolute;
inset: 0;
border-radius: 100px;
transition: .6s;
animation: wave5 1s infinite;
}
.author-anim .widget-social-widget ul li a:hover,
.author-anim .widget-social-widget ul li a:focus-within {
color: var(--primary-color);
background-color: var(--dark-bg-2);
border-color: var(--primary-color);
}
.author-anim .widget-social-widget ul li a:hover i,
.author-anim .widget-social-widget ul li a:focus-within i {
animation: rotateIn .6s linear;
}
.author-anim button.author-close.close-style {
outline: none;
border: none;
background: none;
position: absolute;
right: 4%;
}
.header .author-anim .widget .widget-title {
display: inline-block;
font-size: 22px;
font-weight: 600 !important;
letter-spacing: 0.5px;
margin-bottom: 20px;
padding-left: 13px;
padding-left: 0;
color: var(--secondary-color) !important;
position: relative;
z-index: 0;
}
.header .author-anim .widget_media_gallery .gallery {
justify-content: unset;
}  .shopping-cart {
position: absolute;
top: 100%;
right: 0;
z-index: 2;
width: 320px;
line-height: 50px;
padding: 20px;
color: var(--primary-color);
background: var(--dark-2);
border-radius: 0 3px 3px;
border: 0;
border-top: 3px solid var(--primary-color);
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
.shopping-cart .cart-header>i {
font-size: 16px;
}
.shopping-cart .cart-header {
display: flex;
border-bottom: 1px solid #E8E8E8;
padding-bottom: 15px;
color: var(--secondary-color);
line-height: 1;
justify-content: space-between;
}
.shopping-cart .main-button {
text-decoration: none;
border: none;
color: var(--text-white);
font-weight: 500;
display: block;
font-size: 18px;
background: var(--dark-3);
border: 1px solid rgba(255 255 255 / 20%);
padding: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.shopping-cart .cart-header .cart-total {
color: var(--secondary-color);
font-size: 16px;
}
.shopping-cart .cart-header .cart-total .woocommerce-Price-amount {
color: var(--secondary-color);
}
div.shopping-cart ul.cart-items {
padding: 0;
margin: 0;
padding-top: 20px;
list-style: none;
max-height: 188px;
overflow-x: hidden;
overflow-y: auto;
}
div.shopping-cart ul.cart-items li {
display: inline-block;
width: 100%;
margin: 0 10px 10px 0;
padding: 0;
font-size: 15px;
position: relative;
}
div.shopping-cart ul.cart-items li a {
text-decoration: none;
font-size: 16px;
font-weight: 500;
color: var(--secondary-color);
transition: 1s;
display: block;
}
div.shopping-cart ul.cart-items li a:hover,
div.shopping-cart ul.cart-items li a:focus-within {
color: var(--primary-color);
text-decoration: dotted underline;
}
div.shopping-cart ul a.remove {
float: right;
margin-top: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 100%;
color: var(--sp-white) !important;
background-color: var(--dark-bg-2);
box-shadow: 0 0 10px rgb(0 0 0 / 15%);
border: 1px solid rgba(255 255 255 / 20%);
text-decoration: none;
}
.shopping-cart .cart-items .item-img {
float: left;
margin-right: 12px;
width: 70px;
height: 70px;
border-radius: 50%;
text-align: center;
line-height: 4.1;
border-width: 1px;
border-style: solid;
border-color: var(--primary-color);
}
.shopping-cart .cart-items .item-img img {
width: 90%;
border-radius: 50%;
display: inline-block;
float: none;
height: auto;
margin: auto;
}
.shopping-cart .cart-items .item-name {
font-size: 14px;
font-weight: 600;
display: block;
padding-top: 15px;
line-height: 1;
text-align: left;
color: var(--secondary-color);
}
.shopping-cart .cart-items .item-name:hover,
.shopping-cart .cart-items .item-name:focus-within {
color: var(--primary-color);
}
.shopping-cart .cart-badge {
color: var(--text-white);
font-size: 10px;
margin: 0;
width: 16px;
height: 16px;
line-height: 1.6;
text-align: center;
vertical-align: super;
border-radius: 100px;
display: inline-block;
background-color: var(--primary-color);
margin-left: -10px;
}
.shopping-cart .cart-items .quantity {
font-size: 12px;
font-weight: 400;
color: var(--highlight-color);
line-height: 3;
float: left;
}
.shopping-cart .cart-items .quantity span bdi {
color: var(--secondary-color);
font-weight: 400;
}
.shopping-cart .cart-items .amount {
font-size: 12px;
font-weight: 600;
margin-right: 0;
color: #222;
}
.menu-right>ul>ul>li,
.menu-right>ul>li {
display: inline-block;
position: relative;
color: #737373;
list-style: none;
}
.menu-right .header-cart:hover .shopping-cart,
.menu-right .header-cart:focus-within .shopping-cart {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 2px, 0);
transform: translate3d(0, 2px, 0);
}
.menu-right.menu-right-3 .cart-icon-wrap {
color: var(--text-white);
}
.menu-right.menu-right-3 .header-cart:hover .cart-icon-wrap,
.menu-right.menu-right-3 .header-cart:focus-within .cart-icon-wrap {
color: var(--primary-color);
}
.header .author-anim .contact-area .contact-info a {
color: var(--secondary-color);
font-size: 16px;
}
.header .author-anim .contact-area {
display: flex;
justify-content: start;
gap: 5px;
margin-bottom: 25px;
}
.header .author-anim .contact-area:hover .contact-icon,
.header .author-anim .contact-area:focus-within .contact-icon {
animation: rubberBand 1s linear infinite;
}  .main-mobile-nav {
width: 100%;
background: var(--white);
border-bottom: 1px solid rgb(108 117 125 / 0.6);
}
.mobile-logo a img {
width: 160px;
height: auto;
}
.main-mobile-menu {
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.219em 0px;
min-height: 97px;
}
.menu-collapse-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.hamburger-menu {
width: 40px;
height: 40px;
vertical-align: middle;
border-radius: 0;
overflow: hidden;
}
.hamburger-menu span:last-child {
margin: 0;
}
.hamburger-menu span {
height: 3px;
width: 100%;
margin: 0 0 5px;
background: var(--text-white);
display: block;
}
.main-mobile-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 8;
visibility: hidden;
opacity: 0;
background: var(--dark-bg-2);
-webkit-transition: all 600ms cubic-bezier(.6, .1, .68, .53) 400ms;
-o-transition: all 600ms cubic-bezier(.6, .1, .68, .53) 400ms;
transition: all 600ms cubic-bezier(.6, .1, .68, .53) 400ms;
transform: translateY(100%);
transform-origin: top;
}
.close-style {
position: absolute;
top: 2.2%;
right: 1%;
margin: 0 auto;
display: block;
width: 45px;
height: 44px;
border-radius: 0;
border-color: transparent;
border-style: solid;
background: var(--primary-color);
z-index: 9;
}
.close-style:before,
.close-style:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 25px;
height: 4px;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.close-style:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.close-style:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.main-mobile-menu ul.main-menu {
height: 100%;
overflow-x: hidden;
overflow-y: overlay;
-ms-touch-action: overlay;
-webkit-overflow-scrolling: touch;
touch-action: auto;
}
.main-mobile-menu ul.main-menu .menu-item a {
display: inline-block;
}
.main-mobile-menu ul.main-menu li>a {
text-transform: none;
font-weight: 600;
letter-spacing: 0.5px;
}
.main-mobile-menu ul.main-menu>li a {
width: 100%;
padding: 0;
color: var(--secondary-color);
padding-left: 15px;
text-decoration: none;
}
.menu-collapsed {
width: inherit;
height: inherit;
display: block;
padding: 0.5em 0.5em;
position: relative;
z-index: 1;
border: none;
background-color: var(--bg-1);
border: 1px solid var(--text-white);
}
.header-menu-active .main-mobile-wrapper {
-webkit-transition: all 600ms cubic-bezier(.22, .61, .24, 1) 0ms;
-o-transition: all 600ms cubic-bezier(.22, .61, .24, 1) 0ms;
transition: all 600ms cubic-bezier(.22, .61, .24, 1) 0ms;
}
.header-menu-active .main-mobile-build {
top: 0%;
}
.header-menu-active .main-mobile-wrapper {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transform-origin: bottom;
}
.main-mobile-build .main-menu {
padding: 0;
list-style: none;
position: relative;
border: 0;
margin: 0;
}
.main-mobile-menu .main-menu>li>a,
.main-mobile-menu .dropdown-menu li a {
line-height: 2.8125rem;
}
.main-mobile-menu ul.main-menu>li:first-child {
border-top: 1px solid #E0E0E0;
}
.main-mobile-menu ul.main-menu>li {
border-bottom: 1px solid #E0E0E0;
}
.main-mobile-menu ul li {
margin: 0;
}
.main-mobile-menu ul.main-menu .menu-item-has-children>a {
flex: 1;
}
.main-mobile-menu ul.main-menu li.menu-item-has-children,
.main-mobile-menu .dropdown-menu li.menu-item {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.main-mobile-menu .dropdown-menu li.menu-item a {
flex: 1;
}
span.mobile-collapsed {
max-width: 60px;
}
.mobile-collapsed>button {
cursor: pointer;
flex-basis: 10%;
font-size: 18px;
text-align: center;
line-height: 46px;
padding: 0 1.17em;
color: var(--text-white);
background-color: var(--bg-1);
border: 0;
border-radius: 0;
border-left: 1px solid #E0E0E0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
transition: 1s;
} .main-mobile-menu ul.main-menu .dropdown-menu {
margin: 0;
float: none;
clear: both;
border: none;
background: none;
border-top: 1px solid #E0E0E0;
width: 100%;
padding: 0;
border-radius: 0;
box-shadow: none;
position: relative;
}
.main-mobile-menu ul.main-menu .dropdown-menu li:not(:last-child) {
border-bottom: 1px solid #E0E0E0;
}
.main-mobile-menu ul.main-menu li.menu-item-has-children ul.dropdown-menu li>a {
padding-left: 25px;
width: 100%;
}
.mobile-collapsed>button:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
display: block;
}
.main-mobile-menu .main-menu .menu-item.current .mobile-collapsed>button {
background: var(--primary-color);
}
.main-mobile-menu ul.main-menu .menu-item-has-children.current>.mobile-collapsed>button:before,
.main-mobile-menu ul.dropdown-menu .menu-item.current>.mobile-collapsed>button:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.main-mobile-nav .header-above-btn .header-above-collapse {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--text-white);
border: 0;
background: var(--bg-1);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
margin-left: 5px;
transition: .5s;
border: 1px solid var(--text-white);
}
.main-mobile-nav .header-above-btn .header-above-collapse:hover,
.main-mobile-nav .header-above-btn .header-above-collapse:focus-within {
background: var(--primary-color);
color: var(--white) !important;
}
.main-mobile-nav .header-above-btn .header-above-collapse i {
transition: .5s;
}
.main-mobile-nav .header-above-btn .header-above-collapse:hover i,
.main-mobile-nav .header-above-btn .header-above-collapse:focus-within i {
transform: rotate(180deg);
color: var(--text-white);
}  header.header-2 {
position: absolute;
top: 0;
z-index: 2;
width: 100%;
}
.header.header-2 .shape-main {
position: relative;
}
.header.header-2 .shape-main .menu-bg-elements .element1 {
position: absolute;
left: -400px;
max-width: 400px;
width: 100%;
top: 10px;
}
.header.header-2 .shape-main .menu-bg-elements .element2 {
position: absolute;
right: -400px;
max-width: 400px;
width: 100%;
top: 10px;
}
.header.header-2 .shape-main::before {
content: '';
position: absolute;
background: rgba(0 0 0 / 30%);
left: -250px;
z-index: -1;
width: 250px;
height: 100%;
}
.header.header-2 .shape-main::after {
content: '';
position: absolute;
background: rgba(0 0 0 / 30%);
right: -250px;
z-index: -1;
width: 250px;
top: 0;
height: 100%;
}
.header.header-2 .navigation-wrapper {
background: transparent;
position: relative;
z-index: 1;
}
.header.header-2 .top-above-header {
background: transparent;
border-bottom: unset;
margin-bottom: 20px;
}
.header-2 .row.bg-element::after {
content: '';
width: 0;
height: 0;
position: absolute;
top: -14px;
border-top: 14px solid rgba(0 0 0 / 50%);
border-left: 15px solid transparent;
transform: rotate(90deg);
left: -13px;
}
.header-2 span.bg-2 {
position: relative;
}
.header-2 span.bg-2::after {
width: 0;
height: 0;
border-top: 14px solid rgba(0 0 0 / 50%);
border-left: 0 solid transparent;
position: absolute;
right: 207px;
top: -3px;
bottom: 0;
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: rgba(0 0 0 / 50%) transparent transparent transparent;
bottom: 8px;
right: -13px;
border-width: 14px 0 0 14px;
transform: rotate(180deg) translateY(10px);
}
.header-2 span.bg-2::before {
width: 0;
height: 0;
border-top: 14px solid rgba(0 0 0 / 50%);
border-left: 0 solid transparent;
position: absolute;
right: 207px;
bottom: 0;
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: rgba(0 0 0 / 50%) transparent transparent transparent;
bottom: -113px;
right: -13px;
border-width: 14px 0 0 14px;
transform: rotate(270deg) translateY(0px);
}
.header-2 span.bg-3::after {
width: 0;
height: 0;
border-top: 14px solid rgba(0 0 0 / 50%);
border-left: 0 solid transparent;
position: absolute;
left: -13px;
bottom: 0;
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: rgba(0 0 0 / 50%) transparent transparent transparent;
bottom: -13px;
right: -13px;
border-width: 14px 0 0 14px;
transform: rotate(0deg);
}
.main-slider-2 .item .cover .slider-content h2 {
font-size: 50px !important;
}
.main-slider-2 .item .cover .slider-content>p {
margin-bottom: 25px !important;
}
.header-2 .navigation-wrapper .navbar-area {
justify-content: center;
}
.header-2 .row.bg-element::before {
position: absolute;
content: '';
background: rgba(0 0 0 / 50%);
inset: 0;
z-index: -1;
opacity: 0.8;
width: 100%;
box-shadow: 0 0px 0px 0px rgba( 0 0 0 / 50%);
top: -13px;
bottom: -13px;
}
.header-2 .main-menu>.menu-item a:hover,
.header-2 .main-menu>.menu-item a:focus-within {
color: var(--highlight-color);
}
.header-2 .is-sticky-menu {
background: rgba(0 0 0 / 50%);
}
.header-2 .is-sticky-menu span.bg-3::after {
display: none;
}
.header-2 .is-sticky-menu span.bg-2::before {
display: none;
}
.header-2 .main-menu li .nav-link::before {
content: '';
display: none;
}
.header-2 .is-sticky-menu .shape-main .menu-bg-elements .element1,
.header-2 .is-sticky-menu .shape-main .menu-bg-elements .element2 {
display: none;
}
.header-2 .main-mobile-nav {
background: var(--dark-3);
}
.header-2 .main-menu li a.active {
color: var(--highlight-color) !important;
}
.header-2 .row.bg-element::before {
position: absolute;
content: '';
background: rgba(0 0 0 / 50%);
inset: 0;
z-index: -1;
opacity: 0.8;
width: 100%;
box-shadow: 0 0px 0px 0px rgba( 0 0 0 / 50%);
top: -13px;
bottom: -13px;
}
.header-2 .is-sticky-menu span.bg-3::after {
display: none;
}
.header-2 .is-sticky-menu span.bg-2::before {
display: none;
}
.header-2 .is-sticky-menu .shape-main .menu-bg-elements .element1,
.header-2 .is-sticky-menu .shape-main .menu-bg-elements .element2 {
display: none;
}
.header-2 .is-sticky-menu {
background: rgba(0 0 0 / 50%);
}
.header-2 .is-sticky-menu .bg-element::before {
display: none;
}
.header.header-2 .is-sticky-menu .shape-main::before {
display: none;
}
.header.header-2 .is-sticky-menu .shape-main::after {
display: none;
}  .header-3 .navigation-wrapper .navbar-area {
justify-content: flex-end;
}
.header-3 .navigation-wrapper {
z-index: 1;
}
.header-3 .navigation-wrapper::before {
content: '';
background: var(--dark-3);
position: absolute;
inset: 0;
z-index: -1;
}
.header-3 .logo::before {
content: '';
position: absolute;
background: var(--dark-1);
inset: -10px 0 -10px 0;
z-index: -1;
border: 1px solid rgba(180 180 180 / 20%);
}
.header-3 .logo {
position: relative;
z-index: 1;
text-align: center;
}
.header-3 .logo::before {
content: '';
position: absolute;
background: var(--dark-1);
inset: -10px 0 -10px 0;
z-index: -1;
border: 1px solid rgba(180 180 180 / 20%);
}
.header-3 .logo-element-1 {
position: relative;
}
.header-3 .logo-element-1::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid rgba(180 180 180 / 100%);
top: -10px;
left: 3px;
border-left: 10px solid transparent;
transform: rotate(90deg);
}
.header-3 .logo-element-1::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid rgba(180 180 180 / 100%);
top: -10px;
right: 3px;
border-left: 10px solid transparent;
transform: rotate(180deg);
}
.header-3 .logo-element-2::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid rgba(180 180 180 / 100%);
bottom: -10px;
left: 3px;
border-left: 10px solid transparent;
transform: rotate(0deg);
}
.header-3 .logo-element-2::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid rgba(180 180 180 / 100%);
bottom: -10px;
right: 3px;
border-left: 10px solid transparent;
transform: rotate(270deg);
}
.header-3 .main-mobile-nav {
background: var(--dark-2);
}
.header-3 .is-sticky-menu {
background: var(--dark-3);
border-bottom: 1px solid rgba(180 180 180 / 10%);
}
.header-3 .is-sticky-menu {
background: var(--dark-3);
border-bottom: 1px solid rgba(180 180 180 / 10%);
}
.header-3 .main-mobile-nav {
background: var(--dark-2);
}