/*==============================================
  Emdify — Premium Theme v5
  Light modern theme | Gradient: #f5edf0 → #dcbddf → #9a99e1 → #008bd0
  Elexoft-style animations | Zero red | Crystal clear images
================================================*/

/* ============================================
   1. ROOT COLORS & GRADIENT SYSTEM
============================================ */
:root {
  --c1: #f5edf0;
  --c2: #dcbddf;
  --c3: #9a99e1;
  --c4: #008bd0;
  --grad:       linear-gradient(135deg, #dcbddf 0%, #9a99e1 50%, #008bd0 100%);
  --grad-text:  linear-gradient(90deg, #9a99e1 0%, #008bd0 100%);
  --grad-btn:   linear-gradient(135deg, #9a99e1 0%, #008bd0 100%);
  --grad-light: linear-gradient(135deg, #f5edf0 0%, #dcbddf 50%, #9a99e1 100%);
  --primary-color:   #008bd0 !important;
  --secondary-color: #9a99e1 !important;

  /* Light theme surfaces */
  --bg-page:   #f8f9fc;
  --bg-white:  #ffffff;
  --bg-card:   #ffffff;
  --bg-section-alt: #f0f4ff;
  --dark-nav:  #0d1b2e;
  --text-dark: #1a1f36;
  --text-mid:  #4a5568;
  --text-light:#718096;
  --border:    rgba(154,153,225,0.2);
}

/* ============================================
   2. GLOBAL RESET — KILL ALL RED
============================================ */
:root { --primary-color: #008bd0 !important; --secondary-color: #9a99e1 !important; }

.card.featured::before, .card.featured::after,
.items .item:first-child .card.featured::before,
.items .item:last-child .card.featured::before,
.items .item:first-child .card.featured:hover::before,
.items .item:last-child .card.featured:hover::before,
.card.featured:hover::after {
  display: none !important; content: none !important;
  background: none !important; opacity: 0 !important;
}

h2.featured::before, .featured.customFeatured::before {
  background: var(--grad) !important;
}

[class^="icon-"],[class*=" icon-"],.icon,i.icon,.btn-icon {
  color: #9a99e1 !important;
}

/* Nav dropdown red border fix */
.custom-dropdown-grid {
  border: 1px solid rgba(154,153,225,0.2) !important;
  border-right: 1px solid rgba(154,153,225,0.2) !important;
}
.grid-item a:hover {
  background-color: var(--grad-btn) !important;
  background: var(--grad-btn) !important;
  box-shadow: 0 6px 18px rgba(0,139,208,0.3) !important;
}

/* ============================================
   3. LIGHT PAGE BACKGROUND
============================================ */
body {
  background-color: var(--bg-page) !important;
}

/* Light sections */
section:not(.odd):not(.hero):not(.section-3):not(.section-5):not(.logos):not(.funfacts) {
  background-color: var(--bg-page) !important;
}
section.section-4, section.secondary {
  background-color: var(--bg-section-alt) !important;
}
section.section-6, section.form {
  background-color: var(--bg-white) !important;
}

/* ============================================
   4. PREMIUM TYPOGRAPHY
============================================ */
body, p, li, span, td {
  color: var(--text-mid) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', 'Plus Jakarta Sans', sans-serif !important;
  color: var(--text-dark) !important;
  -webkit-text-fill-color: var(--text-dark) !important;
}

/* Dark sections — bluish white text */
.odd h1,.odd h2,.odd h3,.odd h4,.odd h5,
.hero h1,.hero h2,.hero h3,.hero h4,
section.section-3 h1,section.section-3 h2,section.section-3 h3,section.section-3 h4,
section.section-5 h1,section.section-5 h2,section.section-5 h3,section.section-5 h4 {
  color: #f0f4ff !important;
  -webkit-text-fill-color: #f0f4ff !important;
}
.odd p,.odd li,.odd span:not(.btn *),
section.section-3 p,section.section-5 p {
  color: #c8d8f0 !important;
}

/* Hero gradient text */
.effect-static-text,
h1.effect-static-text,
.slide-content .title.effect-static-text {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 58px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

/* Section heading gradient */
section .intro h2, section h2.featured {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.4rem;
  font-weight: 800;
}

/* ============================================
   5. PREMIUM BUTTONS
============================================ */
.primary-button, .btn.primary-button, a.primary-button {
  background: var(--grad-btn) !important;
  background-image: var(--grad-btn) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.primary-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,139,208,0.35) !important;
}
.primary-button::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: btnShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

.dark-button {
  background: transparent !important;
  border: 1.5px solid var(--c3) !important;
  color: var(--c3) !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}
.dark-button:hover {
  background: var(--grad-btn) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(0,139,208,0.3) !important;
}

/* ============================================
   6. PREMIUM NAVIGATION
============================================ */
header#header { position: sticky; top: 0; z-index: 1000; }
header#header nav.navbar {
  background: rgba(13,27,46,0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(154,153,225,0.15) !important;
  padding: 14px 0 !important;
  transition: all 0.3s ease !important;
}
.navbar-brand {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  letter-spacing: -0.5px !important;
}
.navbar-brand i { color: var(--c4) !important; -webkit-text-fill-color: var(--c4) !important; }
.navbar-nav .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}
.navbar-nav .nav-link:hover { color: var(--c2) !important; }

header .btn.primary-button, nav .primary-button {
  background: var(--grad-btn) !important;
  border: none !important;
  padding: 10px 22px !important;
}

/* ============================================
   7. CRYSTAL CLEAR SERVICE IMAGES — Fix opacity
============================================ */

/* CRITICAL: Remove faded overlay on service detail hero */
.full-image[data-mask],
.full-image[data-mask="70"],
.full-image[data-mask="50"],
.full-image[data-mask="80"] {
  opacity: 1 !important;
  filter: brightness(0.55) !important; /* subtle darkening, not faded */
}

/* Service card images — sharp and clear */
.card img, .item img, section img:not(.navbar-brand img):not(.fit-image) {
  opacity: 1 !important;
  filter: none !important;
}

/* Hero section overlay — subtle, not heavy */
.hero .swiper-slide::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(13,27,46,0.3) 0%, rgba(13,27,46,0.6) 100%);
}
.hero .slide-content { z-index: 2; position: relative; }

/* ============================================
   8. PREMIUM CARDS — Light glassmorphism
============================================ */
.card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(154,153,225,0.15) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,139,208,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  border-color: rgba(0,139,208,0.3) !important;
}

/* Dark section cards */
.odd .card, section.section-3 .card, section.section-5 .card {
  background: linear-gradient(145deg, #141f38 0%, #1c1650 100%) !important;
  border: 1px solid rgba(154,153,225,0.18) !important;
}
.odd .card:hover, section.section-3 .card:hover {
  border-color: rgba(0,139,208,0.5) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 24px rgba(0,139,208,0.12) !important;
}

/* Card text in light sections */
.card h4, .card h3 { color: var(--text-dark) !important; font-weight: 700 !important; }
.card p { color: var(--text-mid) !important; font-size: 14px !important; line-height: 1.7 !important; }

/* Dark card text */
.odd .card h4, .odd .card h3, section.section-3 .card h4 {
  color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important;
}
.odd .card p, section.section-3 .card p { color: #c8d8f0 !important; }

/* Card image area */
.card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.card:hover img { transform: scale(1.04) !important; }

/* Equal height grid */
section .row.items { align-items: stretch !important; }
section .row.items .item {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
}
section .row.items .item .card { flex: 1 !important; height: 100% !important; }

/* ============================================
   9. SERVICE DETAIL PAGE — Premium layout
============================================ */
.single-well {
  padding: 40px !important;
  background: var(--bg-white) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(154,153,225,0.15) !important;
}
.single-well h3.featured {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 20px;
}
.single-well h4 {
  color: var(--text-dark) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}
.single-well p {
  color: var(--text-mid) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}
.single-well ul li {
  color: var(--text-mid) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 8px !important;
}
.single-well strong {
  color: var(--text-dark) !important;
  font-weight: 700 !important;
}

/* ============================================
   10. HERO SECTION — Page banners
============================================ */
.hero.odd { background-color: #0d1b2e !important; }

/* Page hero heights */
.slider-h-75 { height: 65vh !important; min-height: 380px !important; }

/* Hero bg images per page */
.hero-about-bg    { background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1600&q=80') center/cover no-repeat !important; }
.hero-services-bg { background: url('https://images.unsplash.com/photo-1531973576160-7125cd663d86?w=1600&q=80') center/cover no-repeat !important; }
.hero-projects-bg { background: url('https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=1600&q=80') center/cover no-repeat !important; }
.hero-blogs-bg    { background: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1600&q=80') center/cover no-repeat !important; }
.hero-contact-bg  { background: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1600&q=80') center/cover no-repeat !important; }

/* ============================================
   11. FORM — Premium light style
============================================ */
section.form, section.section-6 {
  background: var(--bg-white) !important;
}
section.form h2 {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
section.form p { color: var(--text-mid) !important; }

.form-control {
  background: #ffffff !important;
  border: 1.5px solid rgba(154,153,225,0.4) !important;
  color: #1a1f36 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
  -webkit-text-fill-color: #1a1f36 !important;
}
.form-control:focus {
  border-color: #9a99e1 !important;
  box-shadow: 0 0 0 3px rgba(154,153,225,0.2) !important;
  background: #fff !important;
  outline: none !important;
  color: #1a1f36 !important;
  -webkit-text-fill-color: #1a1f36 !important;
}
/* Placeholder — dark visible text */
.form-control::placeholder         { color: #6b7a99 !important; opacity: 1 !important; }
.form-control::-webkit-input-placeholder { color: #6b7a99 !important; opacity: 1 !important; }
.form-control::-moz-placeholder    { color: #6b7a99 !important; opacity: 1 !important; }
.form-control:-ms-input-placeholder { color: #6b7a99 !important; opacity: 1 !important; }
.form-control:-moz-placeholder      { color: #6b7a99 !important; opacity: 1 !important; }

/* Textarea same style */
textarea.form-control { min-height: 140px !important; resize: vertical !important; }

/* Section 6 / form section light bg */
section.section-6, section.form {
  background: #f8f9fc !important;
}
section.form .form-control,
section.section-6 .form-control {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ============================================
   12. FOOTER — Dark premium
============================================ */
/* ===== FOOTER — ALWAYS DARK ===== */
footer,
footer > *,
footer section,
footer .section,
footer .container,
footer .row,
footer .col,
footer [class*="col-"],
footer .odd,
footer .even {
  background: #0d1b2e !important;
  background-color: #0d1b2e !important;
}
footer {
  border-top: 2px solid rgba(154,153,225,0.2) !important;
  padding-top: 60px !important;
}
footer *:not(.btn):not(.primary-button):not(.dark-button) {
  color: #a8bcd8 !important;
}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6,
footer .brand, footer .navbar-brand,
footer strong {
  color: #f0f4ff !important;
  -webkit-text-fill-color: #f0f4ff !important;
}
footer p, footer li, footer span:not(.btn *) {
  color: #8ba0bc !important;
}
footer a:not(.btn):not(.primary-button) {
  color: #8ba0bc !important;
  transition: color 0.2s ease !important;
}
footer a:not(.btn):not(.primary-button):hover {
  color: #9a99e1 !important;
}
footer i[class^="icon-"], footer i[class*=" icon-"] {
  color: #9a99e1 !important;
}

/* Footer bottom bar */
footer .footer-bottom,
footer .col-12.text-center,
footer .copyright {
  background: #091525 !important;
  border-top: 1px solid rgba(154,153,225,0.1) !important;
  padding: 20px 0 !important;
  margin-top: 40px !important;
}

/* Send a message button */
footer .dark-button, .footer-send-btn {
  background: transparent !important;
  border: 1.5px solid #9a99e1 !important;
  color: #9a99e1 !important;
  border-radius: 8px !important;
}
footer .dark-button:hover {
  background: linear-gradient(135deg, #9a99e1, #008bd0) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ============================================
   13. LOGO & NAV BRAND
============================================ */
.navbar-brand img {
  transition: filter 0.3s ease;
  animation: logoBob 5s ease-in-out infinite;
}
.navbar-brand:hover img {
  filter: drop-shadow(0 0 8px rgba(0,139,208,0.5));
  animation-play-state: paused;
}

/* ============================================
   14. KEYFRAMES
============================================ */
@keyframes btnShimmer {
  0%   { left: -100%; }
  100% { left: 150%; }
}
@keyframes logoBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes particleRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.4; }
  100% { transform: translateY(-90vh) scale(0.2); opacity: 0; }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================
   15. SCROLL REVEAL — Elexoft style
============================================ */
.emd-reveal       { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; }
.emd-reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity 0.65s ease, transform 0.65s ease; }
.emd-reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.65s ease, transform 0.65s ease; }
.emd-reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.6s ease, transform 0.6s ease; }

.emd-reveal.emd-in, .emd-reveal-left.emd-in, .emd-reveal-right.emd-in, .emd-reveal-scale.emd-in {
  opacity: 1 !important; transform: none !important;
}
.emd-d1 { transition-delay: 0.1s !important; }
.emd-d2 { transition-delay: 0.2s !important; }
.emd-d3 { transition-delay: 0.3s !important; }
.emd-d4 { transition-delay: 0.4s !important; }
.emd-d5 { transition-delay: 0.5s !important; }

/* ============================================
   16. GALLERY / PORTFOLIO
============================================ */
.gallery-item, .portfolio-item {
  overflow: hidden; border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.gallery-item:hover, .portfolio-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.15) !important;
}
.gallery-item img,.portfolio-item img,.fit-image {
  transition: transform 0.4s ease !important;
  opacity: 1 !important; filter: none !important;
}
.gallery-item:hover img,.portfolio-item:hover img { transform: scale(1.05) !important; }

/* ============================================
   17. COUNTER & STATS
============================================ */
.counter span, [class*="counter"] span, .timer {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  font-size: 3rem !important;
}

/* ============================================
   18. CURSOR & PARTICLES
============================================ */
#emdify-cursor-dot {
  position: fixed; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c4); pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
}
#emdify-cursor-ring {
  position: fixed; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(0,139,208,0.45); pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%); transition: width 0.2s, height 0.2s;
}
.emdify-particle {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
  animation: particleRise linear infinite;
}

/* ============================================
   19. SCROLLBAR
============================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f0f4ff; }
::-webkit-scrollbar-thumb { background: var(--grad); border-radius: 3px; }
::selection { background: rgba(0,139,208,0.2); color: var(--text-dark); }

/* ============================================
   20. SOCIAL ICONS
============================================ */
.social-icons a,[class*="social"] a {
  display: inline-block !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
.social-icons a:hover,[class*="social"] a:hover {
  transform: translateY(-5px) !important;
  filter: drop-shadow(0 4px 8px rgba(0,139,208,0.4));
}

/* ============================================
   21. SECTION SPACING & LAYOUT
============================================ */
section { position: relative; }
section.form .container, section.form-section .container { max-width: 800px; }

/* ============================================
   22. MOBILE RESPONSIVE
============================================ */
@media (max-width: 768px) {
  .effect-static-text { font-size: 34px !important; }
  section .intro h2, section h2.featured { font-size: 1.8rem !important; }
  .card { border-radius: 12px !important; }
  #emdify-cursor-dot, #emdify-cursor-ring { display: none !important; }
  .slider-h-75 { height: 50vh !important; min-height: 280px !important; }
}
@media (max-width: 480px) {
  .effect-static-text { font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   FINAL OVERRIDE — Footer always dark
============================================ */
footer, footer *, footer section, footer .odd, footer .even,
footer .container, footer .row, footer [class*="col-"],
#footer, #footer *, .footer, .footer * {
  background-color: #0d1b2e !important;
  background: #0d1b2e !important;
}
footer .footer-bottom, #footer .footer-bottom {
  background-color: #091525 !important;
  background: #091525 !important;
}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6 {
  color: #f0f4ff !important;
  -webkit-text-fill-color: #f0f4ff !important;
}
footer p, footer li, footer span:not(.btn *), footer a:not(.btn) {
  color: #8ba0bc !important;
}
footer a:not(.btn):hover { color: #9a99e1 !important; }