:root {
  --nordic-navy: #020617;
  --nordic-night: #071426;
  --nordic-ice: #7DD3FC;
  --nordic-mint: #5EEAD4;
  --nordic-violet: #8B5CF6;
  --nordic-snow: #F8FAFC;
  --nordic-slate: #CBD5E1;
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--nordic-navy) !important;
  color: var(--nordic-slate) !important;
}
.page-wrapper {
  background:
    radial-gradient(circle at 12% 5%, rgba(125, 211, 252, .16), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(139, 92, 246, .20), transparent 28%),
    linear-gradient(135deg, #020617 0%, #082f49 44%, #134e4a 72%, #2e1065 100%);
}
p { color: var(--nordic-slate) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--nordic-snow) !important; font-family: inherit !important; letter-spacing: -.02em; }
a { color: var(--nordic-ice); }
a:hover { color: var(--nordic-mint); }

.wpo-site-header .navigation,
.wpo-header-style-2 .navigation {
  background: rgba(2, 6, 23, .86) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(125, 211, 252, .22);
}
.navbar-header .navbar-brand h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--nordic-ice), var(--nordic-mint), var(--nordic-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.navigation-holder ul li a { color: var(--nordic-snow) !important; }
.navigation-holder ul li a:hover { color: var(--nordic-mint) !important; }
.navbar-toggler .icon-bar { background: var(--nordic-ice) !important; }
.menu-close {
  color: var(--nordic-snow) !important;
  background: rgba(125, 211, 252, .12) !important;
  border: 1px solid rgba(125, 211, 252, .25) !important;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
}

.wpo-hero-slider .slide-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 6, 23, .84) 0%, rgba(2, 6, 23, .42) 48%, rgba(91, 33, 182, .28) 100%);
}
.wpo-hero-slider .slide-content { position: relative; z-index: 2; }
.wpo-hero-slider .slide-title h2 {
  text-shadow: 0 18px 50px rgba(2, 6, 23, .75);
  max-width: 950px;
}
.wpo-hero-slider .slide-text p {
  color: #e0f2fe !important;
  max-width: 760px;
  font-weight: 500;
}
.swiper-pagination-bullet { background: rgba(255,255,255,.8) !important; }
.swiper-pagination-bullet-active { background: var(--nordic-mint) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--nordic-ice) !important; }

.section-padding,
.site-about-section,
.site-service-section,
.site-project-section,
.wpo-pricing-section,
.site-testimonial-section,
.wpo-blog-section,
.wpo-contact-pg-section,
.pt-cus {
  background: transparent !important;
}
.wpo-section-title span {
  color: var(--nordic-mint) !important;
  letter-spacing: .16em;
  font-weight: 700 !important;
}
.wpo-section-title h2::after { border-color: rgba(125, 211, 252, .55) !important; }
.about-middle-item img,
.project-item .image img,
.testimonial-left-item .image img,
.blog-item .image img {
  border-radius: 28px;
  border: 1px solid rgba(125, 211, 252, .22);
  box-shadow: 0 24px 70px rgba(2, 6, 23, .45);
}
.service-item,
.wpo-pricing-item,
.blog-item,
.wpo-contact-form-area,
.testimonial-item,
.pt-cus .container {
  background: linear-gradient(145deg, rgba(15, 23, 42, .86), rgba(8, 47, 73, .62)) !important;
  border: 1px solid rgba(125, 211, 252, .18) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 65px rgba(2, 6, 23, .35) !important;
}
.service-item:hover,
.wpo-pricing-item:hover,
.blog-item:hover,
.project-item:hover .image img {
  transform: translateY(-4px);
  transition: .25s ease;
  border-color: rgba(94, 234, 212, .42) !important;
}
.service-item .text h2 a,
.project-item .text h2 a,
.blog-content h2 a { color: var(--nordic-snow) !important; }
.service-item .text h2 a:hover,
.project-item .text h2 a:hover,
.blog-content h2 a:hover { color: var(--nordic-mint) !important; }
.project-item .text {
  background: linear-gradient(90deg, rgba(2, 6, 23, .88), rgba(15, 23, 42, .62)) !important;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 0 0 24px 24px;
}
.wpo-pricing-top .pricing-thumb,
.wpo-pricing-item .pricing-thumb {
  background: linear-gradient(135deg, var(--nordic-ice), var(--nordic-mint), var(--nordic-violet)) !important;
  color: var(--nordic-navy) !important;
  border-radius: 999px !important;
}
.wpo-pricing-top .pricing-thumb span { color: var(--nordic-navy) !important; font-weight: 800; }
.wpo-pricing-bottom-text ul li { color: var(--nordic-slate) !important; border-color: rgba(125,211,252,.14) !important; }

.form-control,
.wpo-contact-form-area input,
.wpo-contact-form-area textarea {
  background: rgba(2, 6, 23, .66) !important;
  border: 1px solid rgba(125, 211, 252, .28) !important;
  color: var(--nordic-snow) !important;
  border-radius: 16px !important;
}
.form-control::placeholder { color: #94A3B8 !important; }
.theme-btn, .view-cart-btn {
  background: linear-gradient(90deg, var(--nordic-ice), var(--nordic-mint), var(--nordic-violet)) !important;
  color: var(--nordic-navy) !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 40px rgba(94, 234, 212, .22);
}
.theme-btn:hover, .view-cart-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }

.wpo-site-footer {
  background: rgba(2, 6, 23, .96) !important;
  border-top: 1px solid rgba(125, 211, 252, .18);
}
.wpo-site-footer li, .wpo-site-footer p, .wpo-site-footer a { color: var(--nordic-slate) !important; }
.wpo-site-footer a:hover { color: var(--nordic-mint) !important; }
.wpo-lower-footer { background: rgba(2, 6, 23, 1) !important; }
.contact-ft .contact-symbol { display: inline-block; width: 28px; color: var(--nordic-mint); }
.back-to-top { background: linear-gradient(135deg, var(--nordic-ice), var(--nordic-violet)) !important; border-color: rgba(255,255,255,.25) !important; }

@media (max-width: 991px) {
  .navigation-holder { background: #020617 !important; }
  .navbar-header .navbar-brand h3 { font-size: 20px; }
}

/* Arrow fallback: no icon-font dependency */
.wpo-hero-slider .swiper-button-prev::after,
.wpo-hero-slider .swiper-button-next::after,
.static-hero .swiper-button-prev::after,
.static-hero .swiper-button-next::after,
.wpo-hero-slider-s2 .swiper-button-prev::after,
.wpo-hero-slider-s2 .swiper-button-next::after {
  display: none !important;
}

.wpo-hero-slider .swiper-button-prev::before,
.static-hero .swiper-button-prev::before,
.wpo-hero-slider-s2 .swiper-button-prev::before,
.slick-prev::before,
.owl-nav .owl-prev .fi::before,
.ti-arrow-left::before,
.ti-angle-left::before,
.wpo-blog-single-section .more-posts .previous-post .post-control-link::before {
  content: "‹" !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit;
}

.wpo-hero-slider .swiper-button-next::before,
.static-hero .swiper-button-next::before,
.wpo-hero-slider-s2 .swiper-button-next::before,
.slick-next::before,
.owl-nav .owl-next .fi::before,
.ti-arrow-right::before,
.ti-angle-right::before,
.blog-sidebar .wpo-contact-widget a::before,
.service-sidebar .wpo-contact-widget a::before,
.wpo-blog-single-section .more-posts .next-post .post-control-link::before {
  content: "›" !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit;
}

.wpo-hero-slider .swiper-button-prev::before,
.wpo-hero-slider .swiper-button-next::before,
.static-hero .swiper-button-prev::before,
.static-hero .swiper-button-next::before,
.wpo-hero-slider-s2 .swiper-button-prev::before,
.wpo-hero-slider-s2 .swiper-button-next::before,
.slick-prev::before,
.slick-next::before {
  color: #fff !important;
  font-size: 34px !important;
}

.owl-nav .owl-prev span,
.owl-nav .owl-next span {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.ti-arrow-up::before,
.ti-angle-up::before { content: "⌃" !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; }
.ti-arrow-down::before,
.ti-angle-down::before { content: "⌄" !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; }