/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

:root {
  --ws-bg-dark: #0b1117;
  --ws-panel: #101820;
  --ws-panel-soft: #15212a;
  --ws-primary: #19e6a7;
  --ws-primary-dark: #00b875;
  --ws-surface: #eef4f6;
  --ws-light: #f6f8fa;
  --ws-muted: #9aa7b2;
  --ws-ink: #0b1117;
}

::selection {
  background: var(--ws-primary);
  color: var(--ws-ink);
}

body {
  background-color: var(--ws-bg-dark);
}

body[data-background="dark"] .box-container,
body[data-background="dark"] .box-container .bg-colorstyle {
  background-color: var(--ws-bg-dark) !important;
}

.bg-seccolorstyle,
.menu-wrap,
.sec-bg3.infonews,
.footer,
body[data-background="dark"] .box-container .bg-seccolorstyle,
body[data-background="dark"] .box-container .menu-wrap,
body[data-background="dark"] .box-container .sec-bg3.infonews,
body[data-background="dark"] .box-container .footer,
body[data-background="dark"] .popover,
body[data-background="dark"] .popover .popover-body {
  background-color: var(--ws-panel) !important;
}

.menu-wrap.fixed,
body[data-background="dark"] .box-container .menu-wrap.fixed {
  background: var(--ws-panel) !important;
  border-bottom: 1px solid rgba(25, 230, 167, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

body[data-background="dark"] .box-container .sec-bg4 {
  background-color: var(--ws-surface) !important;
  background-image: none !important;
}

body[data-background="dark"] .box-container .division-ontop {
  background-color: var(--ws-bg-dark) !important;
}

body[data-background="dark"] .box-container .division-ontop path {
  fill: var(--ws-surface) !important;
}

.services.maping.sec-normal.sec-grad-grey-to-grey,
body[data-background="dark"] .box-container .services.maping.sec-normal.sec-grad-grey-to-grey,
body[data-background="dark"] .box-container .sec-grad-yellow-to-black-right,
.total-grad,
.total-grad-inverse,
.total-grad-pink-blue-intense,
.sec-bg6 {
  background: linear-gradient(135deg, var(--ws-bg-dark) 0%, var(--ws-panel) 68%, #12352b 100%) !important;
}

.bg-yellow,
.bg-pink,
.bg-purple,
.badge.bg-yellow,
.badge.bg-pink,
.badge.bg-purple,
.pricing .list-info,
body[data-color] .bg-pink,
body[data-color] .bg-purple,
body[data-color] .pricing .list-info,
body[data-color] .tabs-header .btn-secondary:not(:disabled):not(.disabled).active,
body[data-color] .wpc-cloud-range .noUi-connect,
body[data-color] .wpc-cloud-range .noUi-tooltip,
body[data-color] .wpc-cloud-range .noUi-horizontal .noUi-handle,
body[data-color] .countdown .wrapper .clock div:first-child,
body[data-color] .maping .datacenters,
body[data-color] .page-item.active .page-link,
body[data-color] .cd-filter-block input[type="radio"]:checked + label::before,
body[data-color] .cd-filter-block input[type="checkbox"]:checked + label::before {
  background-color: var(--ws-primary-dark) !important;
  border-color: var(--ws-primary-dark) !important;
  color: var(--ws-light) !important;
}

body[data-color] .wpc-cloud-range .noUi-tooltip:before {
  border-color: var(--ws-primary-dark) transparent transparent transparent !important;
}

.bg-grey {
  background-color: var(--ws-panel-soft) !important;
  color: var(--ws-light) !important;
}

.pricing.special .list-info,
body[data-color] .pricing.special .list-info,
.pricing.special .list-info li,
body[data-color] .pricing.special .list-info li,
.pricing.special .list-info i,
body[data-color] .pricing.special .list-info i {
  color: var(--ws-ink) !important;
}

.pricing.special .list-info li span,
body[data-color] .pricing.special .list-info li span {
  color: rgba(11, 17, 23, 0.72) !important;
}

.c-yellow,
.c-yellow-dark,
.c-pink,
.c-purple,
.golink,
.golink-dark,
body[data-color] .c-pink,
body[data-color] .c-purple,
body[data-color] .golink,
body[data-color] .golink-dark,
body[data-color] .pricing .wrapper .title,
body[data-color] .slick #slider .plan-container .title,
body[data-color] .domain-prices li,
body[data-color] .footer .soc-icons i,
body[data-color] .included i,
body[data-color] .knowledge a,
body[data-color] .godown span {
  color: var(--ws-primary) !important;
}

body[data-color] svg:not(.custom-element-right) #svg-ico {
  fill: var(--ws-primary) !important;
}

body[data-color] svg:not(.custom-element-right) #svg-concept {
  stroke: var(--ws-primary) !important;
}

body[data-color] svg.custom-element-right .ds3d2,
body[data-color] svg.custom-element-right .cloud3d2,
body[data-color] svg.custom-element-right .cloud3d3 {
  fill: none !important;
  stroke: var(--ws-primary) !important;
}

body[data-color] svg.custom-element-right .ds3d8,
body[data-color] svg.custom-element-right .ds3d38,
body[data-color] svg.custom-element-right .cloud3d15,
body[data-color] svg.custom-element-right .cloud3d19,
body[data-color] svg.custom-element-right .cloud3d21 {
  fill: var(--ws-primary) !important;
  stroke: none !important;
}

.bb-pink,
body[data-color] .bb-pink,
body[data-color] .accordion.faq .panel-title.active,
body[data-color] .blog .sidebar .posts .tabs-header li.active,
body[data-color] .fill-input:focus,
body[data-color] .cd-filter-block input:focus,
body[data-color] .cd-filter-block select:focus {
  border-color: var(--ws-primary) !important;
}

#drop-lng .btn-secondary:not(:disabled):not(.disabled).active,
.btn-lang-footer .btn-secondary:not(:disabled):not(.disabled).active {
  background-color: var(--ws-primary) !important;
  border-color: var(--ws-primary) !important;
  color: var(--ws-ink) !important;
}

.btn-default-yellow-fill,
.btn-default-pink-fill,
.btn-default-purple-fill,
body[data-color] .btn-default-pink-fill,
body[data-color] .btn-default-purple-fill {
  background-color: var(--ws-primary) !important;
  border-color: var(--ws-primary) !important;
  color: var(--ws-ink) !important;
}

.btn-default-yellow-fill:hover,
.btn-default-pink-fill:hover,
.btn-default-purple-fill:hover,
body[data-color] .btn-default-pink-fill:hover,
body[data-color] .btn-default-purple-fill:hover {
  background-color: var(--ws-primary-dark) !important;
  border-color: var(--ws-primary-dark) !important;
  color: var(--ws-light) !important;
}

.btn-default-pink,
.btn-default-purple,
body[data-color] .btn-default-pink,
body[data-color] .btn-default-purple {
  border-color: var(--ws-primary) !important;
  color: var(--ws-primary) !important;
}

.btn-default-pink:hover,
.btn-default-purple:hover,
body[data-color] .btn-default-pink:hover,
body[data-color] .btn-default-purple:hover,
.btn-default-grad-purple-fill,
.btn-default-grad-purple-fill:hover,
body[data-color] .btn-default-grad-purple-fill,
body[data-color] .btn-default-grad-purple-fill:hover {
  background-image: none !important;
  background-color: var(--ws-panel-soft) !important;
  border-color: var(--ws-panel-soft) !important;
  color: var(--ws-light) !important;
}

.nav-menu .main-menu > .menu-item > a:hover,
.nav-menu .main-menu > .menu-item.active > a,
.nav-menu .main-menu > .menu-item > .sub-menu > .menu-item a:hover,
.nav-menu .main-menu .menu-item .menu-large .service-list .service .media-body a:hover,
.megamenu .service-list .service .media-body a:hover,
.megamenu-list .service-list .service .media-body a:hover,
body[data-color] .nav-menu .main-menu > .menu-item > .sub-menu > .menu-item a:hover,
body[data-color] .nav-menu .main-menu .menu-item .menu-large .service-list .service .media-body a:hover,
body[data-color] .megamenu .service-list .service .media-body a:hover,
body[data-color] .megamenu-list .service-list .service .media-body a:hover {
  color: var(--ws-primary) !important;
}

.nav-menu .main-menu > .menu-item:hover,
body[data-background="dark"] .box-container .nav-menu .main-menu > .menu-item:hover {
  background-color: rgba(25, 230, 167, 0.08) !important;
}

body[data-color] .bigline,
body[data-color] .smallline {
  border-color: var(--ws-primary) !important;
}

.menu-wrap .main-menu .sub-menu,
.sub-menu.menu-large,
.sub-menu.megamenu,
.sub-menu.megamenu-list .service-list {
  border: 1px solid rgba(25, 230, 167, 0.12);
}

.megamenu .start-offer .inner,
body[data-color] .megamenu .start-offer .inner,
.megamenu-list .start-offer .inner,
body[data-color] .megamenu-list .start-offer .inner {
  background: linear-gradient(135deg, var(--ws-panel-soft), #0f2f27) !important;
  background-color: var(--ws-panel-soft) !important;
  border: 1px solid rgba(25, 230, 167, 0.16) !important;
}

.megamenu .start-offer .inner .title,
.megamenu-list .start-offer .inner .title {
  color: var(--ws-light) !important;
}

.megamenu .start-offer .inner .inner-content,
.megamenu-list .start-offer .inner .inner-content,
.megamenu .start-offer .inner span,
.megamenu-list .start-offer .inner span {
  color: var(--ws-muted) !important;
}

.megamenu .start-offer .inner .c-pink,
.megamenu-list .start-offer .inner .c-pink {
  color: var(--ws-primary) !important;
}

.pricing .wrapper,
.service-section,
.top-content,
.tabs.offers-tabs,
.blog .sidebar,
.blog .wrap-blog,
.accordion.faq .panel-title,
.cd-filter-block,
.modal-content {
  border-color: rgba(25, 230, 167, 0.12) !important;
}

body[data-color] .wpc-vps-info .title .info {
  color: var(--ws-primary) !important;
}

body[data-color] .run-switch .switch {
  background-color: var(--ws-primary) !important;
}

.cd-top {
  background: var(--ws-primary) !important;
  box-shadow: 0 8px 20px rgba(0, 184, 117, 0.22) !important;
}

.cd-top i {
  color: var(--ws-ink) !important;
}

.cd-top.cd-fade-out {
  opacity: 0.85 !important;
}

.no-touch .cd-top:hover {
  background-color: var(--ws-primary-dark) !important;
  opacity: 1 !important;
}

.no-touch .cd-top:hover i {
  color: var(--ws-light) !important;
}

.section-heading,
[data-background="light"] .box-container .mergecolor {
  color: var(--ws-ink);
}

body[data-background="dark"] .box-container .section-subheading,
body[data-background="dark"] .box-container .text-muted {
  color: var(--ws-muted) !important;
}

body[data-background="dark"] .box-container .sec-bg4 .section-heading,
body[data-background="dark"] .box-container .sec-bg4 .section-subheading,
body[data-background="dark"] .box-container .sec-bg4 .mergecolor,
body[data-background="dark"] .box-container .sec-bg4 .seccolor {
  color: var(--ws-ink) !important;
}

body[data-background="dark"] .box-container .sec-bg4 .service-section.bg-colorstyle .title.mergecolor {
  color: var(--ws-light) !important;
}

body[data-background="dark"] .box-container .sec-bg4 .service-section.bg-colorstyle .subtitle.seccolor {
  color: var(--ws-muted) !important;
}

.services.help.sec-bg4 .help-container.bg-colorstyle {
  background: var(--ws-panel) !important;
  border: 1px solid rgba(25, 230, 167, 0.14);
}

.services.help.sec-bg4 .help-container .title.mergecolor {
  color: var(--ws-light) !important;
}

.services.help.sec-bg4 .help-container .description.seccolor {
  color: var(--ws-muted) !important;
}

.services.help.sec-bg4 .help-container .help-item:hover .title.mergecolor {
  color: var(--ws-primary) !important;
}

.footer .logo-bg {
  opacity: 0.06;
  filter: none;
}

.footer .footer-menu .menu-item a:hover,
.footer .payment-list li i:hover,
.footer .payment-list li .payment-badge:hover,
.footer .soc-icons a:hover i {
  color: var(--ws-primary) !important;
}

.footer .payment-list li .payment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid rgba(25, 230, 167, 0.35);
  border-radius: 6px;
  color: var(--ws-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.fill-input:focus {
  border-color: var(--ws-primary) !important;
  box-shadow: 0 0 0 3px rgba(25, 230, 167, 0.14);
}

.spinner .double-bounce1,
.spinner .double-bounce2 {
  background-color: var(--ws-primary) !important;
}

body.maintenance-page #header .logo-menu {
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}

body.maintenance-page #header .menu-wrap {
  background: rgba(11, 17, 23, 0.92);
  backdrop-filter: blur(10px);
}

body.maintenance-page .notfound svg #svg-ico {
  fill: var(--ws-primary) !important;
}

body.maintenance-page .notfound svg #svg-concept {
  stroke: var(--ws-primary) !important;
}

body.maintenance-page .notfound svg .maintenance0,
body.maintenance-page .notfound svg .maintenance4,
body.maintenance-page .notfound svg .maintenance10 {
  stroke: #dce4ea !important;
}

body.maintenance-page .notfound svg .maintenance1,
body.maintenance-page .notfound svg .maintenance7,
body.maintenance-page .notfound svg .maintenance9 {
  stroke: #a9b7c2 !important;
}

body.maintenance-page .notfound svg .maintenance3 {
  fill: #a9b7c2 !important;
}

body.maintenance-page .notfound svg .maintenance8 {
  fill: var(--ws-light) !important;
  stroke: var(--ws-primary) !important;
}

.brand-logo,
.logo-menu,
.logo-footer {
  display: block;
  height: auto;
  max-width: 220px;
  overflow: visible;
}

#header .menu-wrap a[title="Webspecs Cloud"] {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  overflow: visible;
}

#header .menu-wrap .logo-menu {
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  overflow: visible !important;
}

@media (min-width: 992px) {
  #header .menu-wrap:not(.mobile) .row.align-items-center > .col-2 {
    flex: 0 0 24%;
    max-width: 24%;
  }

  #header .menu-wrap:not(.mobile) .row.align-items-center > nav#menu {
    flex: 0 0 76%;
    max-width: 76%;
  }

  #header .menu-wrap:not(.mobile) .logo-menu {
    width: 210px !important;
    max-width: 210px;
  }
}

@media (max-width: 991px) {
  #header .logo-menu {
    width: 180px !important;
    max-width: 180px;
  }
}