/* ===== UNAJ Solar — Unified page theme ===== */
:root {
  --unaj-navy: #0b1f33;
  --unaj-navy-deep: #061525;
  --unaj-ink: #132a40;
  --unaj-solar: #2db84b;
  --unaj-solar-dark: #1f9a3a;
  --unaj-solar-soft: #7be08f;
  --unaj-amber: #f0a202;
  --unaj-mist: rgba(255, 255, 255, 0.72);
  --unaj-line: rgba(255, 255, 255, 0.12);
  --unaj-muted: rgba(255, 255, 255, 0.62);
  --unaj-text: #e8eef4;
  --unaj-surface: #f3f7f4;
  --unaj-surface-2: #e8f0eb;
  --unaj-body: #5a6d7c;
  --unaj-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.unaj-modern {
  background: var(--unaj-surface);
  color: var(--unaj-ink);
}

/* ---- Legacy utility colors → brand ---- */
body.unaj-modern .color-1 { color: var(--unaj-ink) !important; }
body.unaj-modern .color-2 { color: var(--unaj-solar-dark) !important; }
body.unaj-modern .color-4 { color: var(--unaj-amber) !important; }
body.unaj-modern .color { color: #fff !important; }

body.unaj-modern .after-before::after {
  background: linear-gradient(90deg, var(--unaj-solar), var(--unaj-amber)) !important;
}

/* ---- Shared CTAs (replace yellow) ---- */
body.unaj-modern .welget-btn {
  background: rgba(45, 184, 75, 0.18) !important;
  border-radius: 999px;
  overflow: hidden;
}

body.unaj-modern .welget-btn a,
body.unaj-modern .welget-btn .welcome-get {
  background: linear-gradient(135deg, var(--unaj-solar) 0%, var(--unaj-solar-dark) 100%) !important;
  color: #fff !important;
  border-radius: 999px;
}

body.unaj-modern .welget-btn span.long-arrow {
  color: var(--unaj-solar-dark) !important;
}

body.unaj-modern .welget-btn:hover {
  background: rgba(45, 184, 75, 0.28) !important;
}

body.unaj-modern .welget-btn:hover a {
  background: linear-gradient(135deg, var(--unaj-solar-dark) 0%, #167a2e 100%) !important;
  color: #fff !important;
}

body.unaj-modern .blus-btn a,
body.unaj-modern .blus-btn .welcome-get {
  background: linear-gradient(135deg, var(--unaj-navy) 0%, #0a2a1c 100%) !important;
  color: #fff !important;
}

body.unaj-modern .blus-btn {
  background: rgba(11, 31, 51, 0.12) !important;
}

body.unaj-modern .blus-btn:hover a {
  background: linear-gradient(135deg, var(--unaj-solar) 0%, var(--unaj-solar-dark) 100%) !important;
}

body.unaj-modern .about-btn:hover a {
  background: linear-gradient(135deg, var(--unaj-navy) 0%, var(--unaj-solar-dark) 100%) !important;
  color: #fff !important;
}

/* ---- Progress ---- */
body.unaj-modern .progress-wrap {
  box-shadow: inset 0 0 0 2px rgba(45, 184, 75, 0.25);
}

body.unaj-modern .progress-wrap svg.progress-circle path {
  stroke: var(--unaj-solar) !important;
}

body.unaj-modern .progress-wrap::after {
  color: var(--unaj-solar) !important;
}

/* ========== HERO ========== */
body.unaj-modern .welcome-section-area {
  background-image:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(45, 184, 75, 0.28), transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(240, 162, 2, 0.14), transparent 50%),
    linear-gradient(145deg, rgba(6, 21, 37, 0.92) 0%, rgba(11, 31, 51, 0.88) 45%, rgba(10, 42, 28, 0.9) 100%),
    url(../img/bg/bg-header.png) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body.unaj-modern .welcome-heading-text > span {
  color: var(--unaj-solar-soft) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem !important;
}

body.unaj-modern .welcome-heading-text h1 {
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

body.unaj-modern .homo {
  background: linear-gradient(135deg, var(--unaj-solar), var(--unaj-amber)) !important;
}

body.unaj-modern .out-text {
  border: 1px solid rgba(45, 184, 75, 0.2);
  box-shadow: 0 18px 40px rgba(6, 21, 37, 0.2);
}

body.unaj-modern .out-text p {
  color: var(--unaj-ink) !important;
}

/* ========== ABOUT ========== */
body.unaj-modern .about-section-area {
  background:
    radial-gradient(ellipse 45% 50% at 0% 50%, rgba(45, 184, 75, 0.08), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--unaj-surface) 100%);
  position: relative;
}

body.unaj-modern .about-others-text > span.about,
body.unaj-modern .about-others-text > span.color-2 {
  color: var(--unaj-solar-dark) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem !important;
}

body.unaj-modern .about-others-text h2 {
  color: var(--unaj-navy) !important;
}

body.unaj-modern .about-others-text h2 b {
  color: var(--unaj-solar-dark);
}

body.unaj-modern .about-others-text p {
  color: var(--unaj-body) !important;
  line-height: 1.7;
}

body.unaj-modern .about-img-area {
  min-height: 280px;
}

body.unaj-modern .about-img-area img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 24px 50px rgba(11, 31, 51, 0.12);
  object-fit: cover;
}

/* ========== SERVICES ========== */
body.unaj-modern .service-section-area {
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(45, 184, 75, 0.18), transparent 55%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(240, 162, 2, 0.1), transparent 50%),
    linear-gradient(160deg, var(--unaj-navy-deep) 0%, var(--unaj-navy) 50%, #0a2a1c 100%) !important;
}

body.unaj-modern .service-section-area h2 {
  color: #fff !important;
  font-family: "Lexend Deca", "Rubik", sans-serif;
  letter-spacing: -0.02em;
}

body.unaj-modern .service-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.15rem !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;
  height: 100%;
  transition: transform 0.4s var(--unaj-ease), box-shadow 0.4s var(--unaj-ease), border-color 0.35s ease !important;
}

body.unaj-modern .service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.28) !important;
  border-color: rgba(45, 184, 75, 0.45);
}

body.unaj-modern .service-content {
  text-align: left !important;
}

body.unaj-modern .service-content h3 {
  color: var(--unaj-navy) !important;
  font-family: "Lexend Deca", "Rubik", sans-serif;
  font-size: 1.1rem !important;
}

body.unaj-modern .service_list {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

body.unaj-modern .service_list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.65rem;
  color: var(--unaj-body);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: left;
}

body.unaj-modern .service_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--unaj-solar);
}

body.unaj-modern .service_list li b {
  color: var(--unaj-ink);
}

body.unaj-modern .icon-box {
  color: var(--unaj-solar) !important;
}

/* ========== TESTIMONIALS ========== */
body.unaj-modern .testimonial-section-area {
  background:
    radial-gradient(ellipse 40% 50% at 90% 20%, rgba(45, 184, 75, 0.08), transparent 55%),
    linear-gradient(180deg, var(--unaj-surface) 0%, #fff 55%, var(--unaj-surface-2) 100%);
}

body.unaj-modern .testimonial-text > span {
  color: var(--unaj-solar-dark) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem !important;
}

body.unaj-modern .testimonial-text h2 {
  color: var(--unaj-navy) !important;
}

body.unaj-modern .testimonial-list p {
  color: var(--unaj-body) !important;
}

body.unaj-modern .testimonial-text > p.color-1 {
  color: var(--unaj-ink) !important;
}

body.unaj-modern .testimonial-img img {
  border-radius: 1.25rem;
  box-shadow: 0 24px 50px rgba(11, 31, 51, 0.12);
}

body.unaj-modern .testimonial-text-area .owl-nav button,
body.unaj-modern .owl-carousel .owl-nav button {
  border-color: var(--unaj-solar) !important;
  color: var(--unaj-solar-dark) !important;
}

body.unaj-modern .testimonial-text-area .owl-nav button:hover,
body.unaj-modern .owl-carousel .owl-nav button:hover {
  background: var(--unaj-solar) !important;
  color: #fff !important;
  border-color: var(--unaj-solar) !important;
}

/* ========== POPUP ========== */
body.unaj-modern .popup-content {
  border: 1px solid rgba(45, 184, 75, 0.15);
  border-radius: 1.15rem !important;
}

body.unaj-modern .popup-content h2 {
  color: var(--unaj-navy);
  font-family: "Lexend Deca", "Rubik", sans-serif;
}

body.unaj-modern .popup-content input,
body.unaj-modern .popup-content select {
  border-color: rgba(11, 31, 51, 0.15) !important;
  border-radius: 0.65rem !important;
}

body.unaj-modern .popup-content input:focus,
body.unaj-modern .popup-content select:focus {
  outline: none;
  border-color: var(--unaj-solar) !important;
  box-shadow: 0 0 0 3px rgba(45, 184, 75, 0.15);
}

body.unaj-modern .popup-content button[type="submit"] {
  background: linear-gradient(135deg, var(--unaj-solar) 0%, var(--unaj-solar-dark) 100%) !important;
  border-radius: 999px !important;
  font-weight: 700;
}

body.unaj-modern .popup-content button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--unaj-solar-dark) 0%, #167a2e 100%) !important;
}

body.unaj-modern .close-btn {
  color: var(--unaj-ink) !important;
}

/* ========== FLOATING FABs ========== */
body.unaj-modern .what2 a.unaj-fab-call {
  background: linear-gradient(135deg, var(--unaj-amber) 0%, #d48900 100%) !important;
  box-shadow: 0 10px 24px rgba(240, 162, 2, 0.35) !important;
}

/* Keep call FAB on left; WA chat FAB lives on right via solar-wa-chat.js */
body.unaj-modern .what2 {
  left: 20px;
  right: auto;
  bottom: 24px;
}

/* Disable AOS hide — was leaving images/text invisible */
body.unaj-modern [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

/* Force images visible across sections */
body.unaj-modern img {
  max-width: 100%;
  height: auto;
}

body.unaj-modern .about-img-area img,
body.unaj-modern .service-card img,
body.unaj-modern .testimonial-img img,
body.unaj-modern .why-choose__media-frame img,
body.unaj-modern .solar-hero__media img,
body.unaj-modern .unaj-header__logo img,
body.unaj-modern .unaj-footer__brand img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}