/* ══════════════════════════════════════════════
   UniOS Theme — Dark / Pink-to-Black gradient
   Overrides templatemo defaults entirely
   ══════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --pink:       #c87cb8;
  --pink-light: #d99ecf;
  --pink-dark:  #a05590;
  --black:      #141414;
  --dark:       #1e1e1e;
  --dark-card:  #252525;
  --dark-border:#333;
  --text:       #e8e8e8;
  --text-muted: #999;
  --gradient:   linear-gradient(135deg, #141414 0%, #2a1a2e 50%, #c87cb8 100%);
}

/* ── Base ── */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  background-color: var(--black);
  color: var(--text);
}

html {
  background-color: var(--black) !important;
}

/* ── Preloader ── */
.js-preloader {
  background-color: var(--black);
}
.preloader-inner .dot,
.preloader-inner .dots span {
  background: var(--pink);
}

/* ── Header / Navbar ── */
.header-area {
  background-color: rgba(20, 20, 20, 0.95) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  backdrop-filter: blur(10px);
}

.background-header {
  background-color: rgba(20, 20, 20, 0.98) !important;
  box-shadow: 0 2px 20px rgba(200, 124, 184, 0.15) !important;
}

.header-area .main-nav .nav li a {
  color: var(--text) !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active,
.background-header .main-nav .nav li a.active {
  color: var(--pink) !important;
}

/* ── Hero Banner ── */
.main-banner {
  background-image: url(../images/hero-bg.png) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  position: relative;
}

.main-banner::after,
.main-banner::before {
  display: none !important;
}

.main-banner .left-content h2 {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.main-banner .left-content p,
.main-banner .left-content p.text-dark {
  color: rgba(255,255,255,0.8) !important;
}

/* ── Buttons ── */
.white-button a {
  background-color: transparent !important;
  color: var(--pink) !important;
  border: 1.5px solid var(--pink) !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
}

.white-button a:hover {
  background-color: var(--pink) !important;
  color: #fff !important;
}

/* ── Section headings ── */
.section-heading h2 {
  color: #fff !important;
}

.section-heading h2 em {
  color: var(--pink) !important;
}

.section-heading p {
  color: var(--text-muted) !important;
}

.section-heading h4 {
  color: #fff !important;
}

/* ── Services section ── */
.services.section {
  background-image: none !important;
  background-color: var(--dark) !important;
}

.services:after,
.services:before {
  display: none !important;
}

.service-item {
  background-color: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.service-item:hover {
  border-color: var(--pink) !important;
  box-shadow: 0 8px 30px rgba(200,124,184,0.2) !important;
  transform: translateY(-6px) !important;
}

.service-item svg {
  color: var(--pink) !important;
}

.service-item h4 {
  color: #fff !important;
}

.service-item p {
  color: var(--text-muted) !important;
}

.first-service  { border-top: 3px solid var(--pink) !important; }
.second-service { border-top: 3px solid var(--pink-light) !important; }
.third-service  { border-top: 3px solid var(--pink-dark) !important; }
.fourth-service { border-top: 3px solid #e8a0d0 !important; }

/* ── About / Team section ── */
#about.services.section {
  background-color: var(--black) !important;
}

.member h5 {
  color: #fff !important;
}

.member p {
  color: var(--text-muted) !important;
}

.social-links a {
  color: var(--pink) !important;
}

.social-links a:hover {
  color: #fff !important;
}

/* ── FAQ section ── */
.pricing-tables {
  background-color: var(--dark) !important;
}

.faq {
  background-color: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.faq:hover {
  border-color: var(--pink) !important;
}

.faq-title {
  color: #fff !important;
}

.faq-text {
  color: var(--text-muted) !important;
}

.faq-toggle {
  color: var(--pink) !important;
}

/* ── Contact section ── */
#contact {
  background: var(--black) !important;
  overflow: hidden !important;
}

.formbold-form-label {
  color: var(--text) !important;
}

.formbold-form-input {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text) !important;
}

.formbold-form-input:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(200,124,184,0.15) !important;
}

.formbold-form-input::placeholder {
  color: #666 !important;
}

.formbold-btn {
  background-color: var(--pink) !important;
  color: #fff !important;
  border-radius: 30px !important;
  transition: all 0.3s !important;
}

.formbold-btn:hover {
  background-color: var(--pink-dark) !important;
  box-shadow: 0 4px 20px rgba(200,124,184,0.4) !important;
}

/* ── Footer ── */
footer {
  margin-top: 0 !important;
  background-image: url(../images/footer-bg.png) !important;
  background-color: var(--black) !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  padding-top: 320px !important;
  padding-bottom: 0 !important;
}

.footer-widget h4 {
  color: var(--pink-light) !important;
}

.footer-widget p a {
  color: rgba(255,255,255,0.7) !important;
}

.footer-widget p a:hover {
  color: var(--pink) !important;
}

.social a {
  margin-bottom: 0 !important;
  border-color: rgba(200,124,184,0.4) !important;
  transition: all 0.3s !important;
}

.social a:hover {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  transform: scale(1.1) !important;
}

footer .copyright-text p {
  color: rgba(255,255,255,0.4) !important;
  margin-top: 30px !important;
  padding-bottom: 30px !important;
}

/* ── Heading line decoration — pink tint ── */
.section-heading img[src*="heading-line-dec"] {
  filter: hue-rotate(200deg) saturate(1.5) brightness(1.2);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--pink-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* ── Selection ── */
::selection { background: var(--pink); color: #fff !important; }

/* ══════════════════════════════════════
   UniOS Theme — Issue fixes
   ══════════════════════════════════════ */

/* ── FIX 1: Navbar logo — remove black rounded bg, show transparently ── */
.header-area .main-nav .logo img,
.background-header .main-nav .logo img {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(200,124,184,0.4));
  background: transparent !important;
  border-radius: 0 !important;
  mix-blend-mode: screen;
}

/* ── FIX 2: Contact form — hide the formbold labels (placeholders serve as labels) ── */
.formbold-form-label {
  display: none !important;
}

.formbold-mb-5 {
  margin-bottom: 16px !important;
}

.formbold-form-input {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  width: 100% !important;
}

/* ── FIX 3: Service cards — kill the blue gradient on first card ── */
.service-item.first-service,
.service-item.second-service,
.service-item.third-service,
.service-item.fourth-service {
  background-color: var(--dark-card) !important;
  background-image: none !important;
}

/* Kill any inherited background from the original template */
.first-service  { background: var(--dark-card) !important; }
.second-service { background: var(--dark-card) !important; }
.third-service  { background: var(--dark-card) !important; }
.fourth-service { background: var(--dark-card) !important; }

/* ── FIX 4: Team section — member cards dark, social links pink ── */
.member {
  background-color: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
}

.member:hover {
  border-color: var(--pink) !important;
}

/* Kill any white background on member cards from original template */
.team-members .member,
#about .member {
  background-color: var(--dark-card) !important;
  color: var(--text) !important;
}

/* Social link buttons — pink instead of blue ── */
.social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--pink) !important;
  color: #fff !important;
  font-size: 14px !important;
  transition: all 0.3s !important;
}

.social-links a:hover {
  background: var(--pink-dark) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
}

/* Section heading decoration line — pink ── */
#about .section-heading img[src*="heading-line-dec"] {
  filter: hue-rotate(200deg) saturate(2) brightness(1.3);
}

/* ── FIX 5: Footer logo — remove the black app icon background ── */
.flexAristomate .logo img {
  mix-blend-mode: screen !important;
  filter: brightness(1.1) !important;
  background: transparent !important;
  width: 100px !important;
  height: auto !important;
}

/* ── Footer background — dark wave replacing the blue original ── */
footer {
  background-image: url(../images/footer-bg.png) !important;
  background-color: #141414 !important;
  background-size: 100% auto !important;
  background-position: top center !important;
}

/* Ensure footer text stays readable on dark bg */
.footer-widget p,
.footer-widget p a {
  color: rgba(255,255,255,0.75) !important;
}

footer .copyright-text p {
  color: rgba(255,255,255,0.35) !important;
}

/* ── Footer — remove image entirely, pure CSS gradient ── */
footer {
  background-image: none !important;
  background: linear-gradient(180deg, #141414 0%, #1a1020 40%, #221428 100%) !important;
  border-top: 1px solid rgba(200, 124, 184, 0.15) !important;
  padding-top: 80px !important;
}

/* ── Logo — background removed from PNG, clean display ── */
.header-area .main-nav .logo img,
.background-header .main-nav .logo img {
  mix-blend-mode: normal !important;
  filter: none !important;
  background: transparent !important;
}

/* ── Form — remove white background from wrapper ── */
.formbold-main-wrapper,
.formbold-form-wrapper,
#contact .formbold-main-wrapper,
#contact .formbold-form-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Navbar — active link always pink ── */
.header-area .main-nav .nav li a.active {
  color: var(--pink) !important;
}

.background-header .main-nav .nav li a.active {
  color: var(--pink) !important;
}

/* Kill the blue underline on active nav item */
.header-area .main-nav .nav li a.active::after,
.background-header .main-nav .nav li a.active::after {
  background-color: var(--pink) !important;
  border-color: var(--pink) !important;
}