$border-color =  #343434; 
.tt-catepalize {
text-transform: capitalize;
}
.fw-700 {
font-weight: 700;
}
.single-pricing-inner h6 {
padding: 5px 12px 3px;
font-size: 14px;
}
.preloader-inner {
z-index: 999999;
}
.preloader-inner .pl {
display: block;
margin: auto;
width: 16em;
height: auto;
}
.preloader-inner .pl line {
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.preloader-inner .pl__line1,
.preloader-inner .pl__line9 {
animation-name: line1;
}
.preloader-inner .pl__line2,
.preloader-inner .pl__line8 {
animation-name: line2;
}
.preloader-inner .pl__line3,
.preloader-inner .pl__line7 {
animation-name: line3;
}
.preloader-inner .pl__line4,
.preloader-inner .pl__line6 {
animation-name: line4;
}
.preloader-inner .pl__line5 {
animation-name: line5;
} @media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),90%,10%);
--fg: hsl(var(--hue),90%,90%);
}
} @keyframes line1 {
from,
8% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
18% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
28% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
38% {
stroke-dashoffset: 0;
transform: translate(0,0);
}
48% {
opacity: 1;
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
53% {
opacity: 0;
stroke-dashoffset: 31.99;
transform: translate(8px,16px);
}
56% {
animation-timing-function: steps(1,start);
opacity: 0;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
60% {
animation-timing-function: ease-out;
opacity: 1;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
70% {
animation-timing-function: ease-in-out;
stroke-dashoffset: 0;
transform: translate(0,0);
}
80% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
90% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
to {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
}
@keyframes line2 {
from,
6% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
16% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
26% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
36% {
stroke-dashoffset: 0;
transform: translate(0,0);
}
46% {
opacity: 1;
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
51% {
opacity: 0;
stroke-dashoffset: 31.99;
transform: translate(8px,16px);
}
54% {
animation-timing-function: steps(1,start);
opacity: 0;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
58% {
animation-timing-function: ease-out;
opacity: 1;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
68% {
animation-timing-function: ease-in-out;
stroke-dashoffset: 0;
transform: translate(0,0);
}
78% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
88% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
98%,
to {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
}
@keyframes line3 {
from,
4% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
14% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
24% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
34% {
stroke-dashoffset: 0;
transform: translate(0,0);
}
44% {
opacity: 1;
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
49% {
opacity: 0;
stroke-dashoffset: 31.99;
transform: translate(8px,16px);
}
52% {
animation-timing-function: steps(1,start);
opacity: 0;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
56% {
animation-timing-function: ease-out;
opacity: 1;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
66% {
animation-timing-function: ease-in-out;
stroke-dashoffset: 0;
transform: translate(0,0);
}
76% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
86% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
96%,
to {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
}
@keyframes line4 {
from,
2% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
12% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
22% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
32% {
stroke-dashoffset: 0;
transform: translate(0,0);
}
42% {
opacity: 1;
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
47% {
opacity: 0;
stroke-dashoffset: 31.99;
transform: translate(8px,16px);
}
50% {
animation-timing-function: steps(1,start);
opacity: 0;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
54% {
animation-timing-function: ease-out;
opacity: 1;
stroke-dashoffset: 32;
transform: translate(0,16px);
}
64% {
animation-timing-function: ease-in-out;
stroke-dashoffset: 0;
transform: translate(0,0);
}
74% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
84% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
94%,
to {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
}
@keyframes line5 {
from {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
10% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
20% {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
30% {
stroke-dashoffset: 0;
transform: translate(0,0);
}
40% {
stroke-dashoffset: -16;
transform: translate(0,15px);
}
50% {
stroke-dashoffset: -31;
transform: translate(0,-48px);
}
58% {
stroke-dashoffset: -31;
transform: translate(0,8px);
}
65% {
stroke-dashoffset: -31.99;
transform: translate(0,-24px);
}
71.99% {
animation-timing-function: steps(1);
stroke-dashoffset: -31.99;
transform: translate(0,-16px);
}
72% {
animation-timing-function: ease-in-out;
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
82% {
stroke-dashoffset: 16;
transform: translate(0,8px);
}
92%,
to {
stroke-dashoffset: 31.99;
transform: translate(0,16px);
}
}
.search-category select {
background: transparent;
}
.breadcrumb-wrap .breadcrumb-content {
padding: 200px 0 122px 0;
}
.footer-top-social .logo img {
max-width: 150px;
}
.footer-top-social .footer-info p {
text-transform: capitalize;
}
.navbar-area.navigation-style-01 .custom-container .logo-wrapper img {
max-width: 140px;
}
.nav-right-part .right-btn-text {
border: 1px solid #686868;
border-radius: 35px;
padding: 10px 18px;
}
.nav-right-part .right-btn-text:hover {
background: var(--main-color-one);
border: 1px solid var(--main-color-one);
color: #fff;
}
.nav-right-part .right-btn-text:hover svg path {
fill: #fff;
}
.navbar-area-2 .nav-right-part .right-btn-text {
border: 1px solid #fff;
}
.navbar-area-2 .nav-right-part .right-btn-text:hover {
border: 1px solid var(--main-color-one);
}
.audio-list-single-wrap {
padding: 20px 0;
}
.audio-list-single-wrap .media {
position: relative;
z-index: 2;
}
.audio-list-single-wrap .media .media-left {
border-right: 1px solid #bdbdbd99;
padding-right: 40px;
margin-right: 40px;
}
.audio-list-single-wrap .media .media-left img {
height: 55px;
width: 55px;
border-radius: 50%;
}
.audio-list-single-wrap .media .media-body h5 {
margin-bottom: 4px;
color: #fff;
font-size: 18px;
}
.audio-list-single-wrap .media .media-body p {
color: #fff;
}
.audio-list-single-wrap .audio-list-wrap {
padding: 0 0 0 15px;
position: relative;
z-index: 2;
color: #fff;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer {
margin: 0;
padding: 0;
height: auto;
border: 0;
border-radius: 0;
background: transparent;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer:not(.audioplayer-playing) .audioplayer-playpause {
border: 1px solid #D9D9D9;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
border-left: 12px solid #ffffff;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer-time {
color: #ffffff;
}
.audio-list-single-wrap .audio-list-wrap  .audioplayer-bar::before {
background-color: #ffffff40;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer-bar-loaded {
background: #ffffff;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer:not(.audioplayer-playing) .audioplayer-bar-played::after {
display: none;
}
.audio-list-single-wrap .audio-list-wrap .audioplayer-volume-adjust div div {
background-color: #ffffff;
}
.main-search-wrap .search-category form {
display: flex;
}
.main-search-wrap .search-category .text-field {
width: 100%;
margin: 0 70px 0 194px;
height: 100%;
}
.main-search-wrap .search-category select {
position: absolute;
left: 0;
top: 16px;
}
.gana-image-scroll-wrap .demo-spacer .nav-tabs li button i,
.gana-image-scroll-wrap .demo-spacer .nav-tabs li button svg {
margin-left: 5px;
}
.gana-single-product-item .woocommerce-thumbnail-wrap img {
height: auto;
}
.gana-header-cart {
color: #246bfd;
font-size: 18px;
margin-right: 30px;
}
.gana-header-cart .cart-badge {
text-align: center;
}
.navbar-area.navbar-area-2 .custom-container .navbar-collapse .navbar-nav > li + li {
margin-left: 15px;
}
.navbar-area.navbar-area-2 .gana-header-cart {
color: #fff;
}
.navbar-area.navbar-area-2 .gana-header-cart .cart-badge {
background: #fff;
color: #FFFFFF;
}
.main-tab-hide .gana-image-scroll-wrap .demo-spacer.style-2 {
display: none;
}
.video-audio-single .single-video-list-inner {
border-radius: 0;
}
.video-audio-single .audioplayer {
border: 0 !important;
border-radius: 0 !important;
background: #343434 !important;
}
.video-audio-singler .single-video-list-inner .video {
overflow: hidden;
}
.video-audio-single .single-video-list-inner video {
height: 505px;
transform: scale(1.25);
}
.video-audio-single h3.title {
text-transform: capitalize;
}
.video-audio-single .details-page-info-inner ul li {
padding-left: 0;
list-style: none;
}
.video-audio-single .details-page-info-inner ul li:before {
display: none;
}
.video-audio-single .audioplayer {
margin: 0;
}
.single-audio-list-inner .media .media-body h5 a:hover {
color: rgba(255, 255, 255, 0.8);
}
.treanding__themeitem {
position: relative;
margin-bottom: 30px;
}
.treanding__themeitem .dollar {
position: absolute;
top: 20px;
left: 20px;
font-size: 16px;
font-weight: 600;
font-family: "Inter",sans-serif;
color: #fff;
background: var(--main-color-one);
padding: 6px 10px 4px 10px;
display: block;
border-radius: 100px;
}
.treanding__themeitem .tr__starwrap .wordpress {
box-shadow: 0px 4px 44px 0px rgba(69,105,231,.14);
background: #fff;
padding: 5px 10px;
border-radius: 100px;
}
.treanding__themeitem .tr__starwrap .ratting li svg {
color: #ff8000;
}
.treanding__themeitem span {
text-transform: capitalize;
}
.treanding__themeitem span .title {
color: #222e48;
}
.treanding__themeitem span .user {
color: #818181;
}
.treanding_title {
text-transform: capitalize;
}
.single-product-page-content .thumb {
height: 500px;
}
.single-product-page-content .thumb img {
width: 100%;
height: inherit;
}
@media all and (max-width: 1599px) {
.footer-top-social {
margin-left: 80px;
}
.footer-top-social .footer-social li a {
padding: 20px;
}
}
@media all and (max-width: 1400px) {
.footer-top-social {
margin-left: 135px;
}
.footer-top-social .footer-social li a {
padding: 19px 14px;
}
}
@media all and (min-width: 992px) {
}
@media all and (max-width: 575px) {
.elementor-image-box-img-wrap .elementor-image-box-img {
margin-bottom: 20px !important;
}
.banner-cat a {
margin-left: 0;
}
.main-search-wrap .search-category .text-field {
margin: 9px 36px 0 130px;
}
.main-search-wrap .search-category select {
top: 9px;
font-size: 12px;
}
.main-search-wrap .search-category .text-field {
margin: 0 40px 0 128px;
}
}
.single-audio-creator-inner.creator-style-2 .thumb img {
border-radius: 0;
}
.single-audio-creator-inner.creator-style-2 .details {
border-radius: 0 0 20px 20px;
}
.audio-chart-list-area .banner-audio-list li:nth-child(9),
.audio-chart-list-area .banner-audio-list li:nth-child(10) {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.text-t-capetalize {
text-transform: capitalize;
}
.dark-area {
display: inline-block;
}
.dark-area .switch {
position: relative;
display: inline-block;
height: 27px;
width: 48px;
}
.dark-area .switch input {
opacity: 0;
width: 0;
height: 0;
}
.dark-area .switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
-webkit-transition: 0.4s;
transition: 0.4s;
border: 1px solid #878787;
}
.dark-area .switch .slider:before {
position: absolute;
content: "";
height: 17px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: #fff;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.dark-area .switch input:focus + .slider {
box-shadow: 0 0 1px #614BFF;
}
.dark-area .switch input:checked + .slider:before {
transform: translateX(20px);
}
.dark-area .switch .slider.round {
border-radius: 30px;
}
.dark-area .switch .slider.round:before {
border-radius: 50%;
}
.dark-area .switch .slider .fa-moon {
position: absolute;
font-size: 14px;
left: 6px;
top: 6px;
color: #fff !important;
}
.dark-area .switch .slider .fa-sun {
position: absolute;
font-size: 15px;
right: 6px;
top: 6px;
color: #fff !important;
}
.body-light .dark-area .switch .slider:before {
transform: translateX(20px);
}
.logged-in.admin-bar .navbar-3-area,
.logged-in.admin-bar .main-menu-sidebar-wrap {
top: 32px;
}
.navbar-3-area {
padding: 20px 40px 20px 360px;
}
.main-menu-sidebar-wrap {
position: fixed;
left: 0;
top: 0;
border-right: 1px solid #343434;
width: 360px;
z-index: 9999;
padding: 30px 40px 40px;
height: 100%;
}
.main-wrap-page-two {
padding-left: 360px;
padding-top: 100px;
}
.main-wrap-page-two-inner {
padding: 40px;
}
.main-menu-sidebar-nav {
padding-top: 55px;
}
.main-menu-sidebar-nav .navbar-nav {
padding: 0;
}
.footer-style-page-2 {
margin-left: 360px;
}
.navbar-3-area {
position: fixed;
top: 0;
width: 100%;
z-index: 22;
background: #0f0f0f;
border-bottom: 1px solid #343434;
}
.copy-right {
position: absolute;
left: 0;
bottom: 0;
padding: 40px;
}
.copy-right p {
font-size: 14px;
line-height: 1.6;
}
.main-wrap-page-two .testimonial-slider-one-area .theme-section-title .title {
font-size: 24px;
}
.home-4-chart {
border-top: 1px solid #262626;
}
@media all and (max-width: 1599px) {
.navbar-3-area {
padding: 20px 40px 20px 280px;
}
.main-menu-sidebar-wrap {
width: 280px;
}
.main-wrap-page-two {
padding-left: 280px;
}
.footer-style-page-2 {
margin-left: 280px;
}
}
@media all and (max-width: 1199px) {
.main-wrap-page-two {
padding-left: 0;
padding-top: 0;
}
.footer-style-page-2 {
margin-left: 0;
}
}
@media all and (max-width: 576px) {
.main-wrap-page-two-inner {
padding: 10px;
}
.home-4-chart .audio-chart-list-area .banner-audio-list li {
width: 100%;
}
.call-to-action-area-2 {
padding: 20px 10px;
}
.call-to-action-area a img {
width: 100px;
}
.navbar-area.navbar-area-2 .custom-container .navbar-collapse .navbar-nav > li + li {
margin-left: 0;
}
.preloader-inner .pl {
display: block;
margin: auto;
width: 7em;
height: auto;
}
}
.elementor-editor-active .preloader {
display: none;
}
.contact-page-form .single-input-inner.style-border-bottom input {
color: #fff;
}
.body-light .contact-page-form .single-input-inner.style-border-bottom textarea,
.body-light .contact-page-form .single-input-inner.style-border-bottom input {
color: #111;
}
.elementor-widget-google_maps iframe {
height: 500px;
width: 100%;
}