/* ==========================================================================
   V&S SOLUTION SERVICES LLC - ARCHITECTURAL MIDNIGHT NAVY THEME
   Edición Azul Medianoche Mate Sobrio & Oro Metálico Fino
   (Sin brillos artificiales, sin halos difusos, alta elegancia y nitidez)
   ========================================================================== */

body.theme-blue {
  /* Lienzo Azul Medianoche Mate Sobrio */
  --bg-deep: #080d1a;           /* Azul Medianoche Profundo Puro */
  --bg-canvas: #0a1120;         /* Azul Naval Oscuro Sobrio */
  --bg-surface: #101a2e;        /* Azul Pizarra Arquitectónico */
  --bg-surface-elevated: #14213a;
  --bg-surface-glass: rgba(16, 26, 46, 0.95);

  /* Acentos de Marca (Oro Metálico Clásico) */
  --gold-primary: #d4af37;      /* Oro Noble */
  --gold-glow: #dfba56;
  --gold-light: #f3d78c;
  --blue-royal: #1e3a8a;
  --blue-electric: #3b82f6;
  --blue-glow: transparent;     /* Sin halos artificiales */
  --terracotta: #dc2626;

  /* Tipografía de Máxima Nitidez */
  --text-primary: #ffffff;       /* Blanco 100% nítido */
  --text-secondary: #cbd5e1;     /* Plata suave perfectamente legible */
  --text-muted: #8494a8;         /* Slate sutil y elegante */

  /* Bordes & Sombras Naturales Arquitectónicas */
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-specular: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(212, 175, 55, 0.3);

  --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55);
  --gold-shadow: none;          /* Elimina halos amarillentos */

  background-color: #080d1a;
  color: #ffffff;
}

/* Eliminar completamente brillos o destellos radiales de fondo */
body.theme-blue::before {
  display: none !important;
}

/* ==========================================================================
   1. BARRA SUPERIOR Y HEADER
   ========================================================================== */
body.theme-blue .top-notice-bar {
  background: #060a14;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #8494a8;
  font-weight: 500;
}
body.theme-blue .top-bar-inner a {
  color: #e2e8f0;
  font-weight: 600;
}
body.theme-blue .top-bar-inner a:hover {
  color: #dfba56;
}
body.theme-blue .lang-btn {
  background: rgba(16, 26, 46, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-weight: 600;
}
body.theme-blue .lang-btn.active {
  background: #c49931;
  color: #080d1a;
  border-color: #dfba56;
  font-weight: 750;
}

body.theme-blue .site-header {
  background: rgba(8, 13, 26, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-blue .site-header.scrolled {
  background: #080d1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
body.theme-blue .nav-link {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.92rem;
}
body.theme-blue .nav-link:hover,
body.theme-blue .nav-link.active {
  color: #dfba56;
}
body.theme-blue .nav-link::after {
  background: #d4af37;
  height: 2px;
}
body.theme-blue .btn-call {
  background: rgba(16, 26, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 650;
}
body.theme-blue .btn-call:hover {
  background: #dfba56;
  color: #080d1a;
  border-color: #dfba56;
}

/* ==========================================================================
   2. BOTONES ORO METÁLICO LIMPIO (SIN HALOS NI BRILLOS AMARILLENTOS)
   ========================================================================== */
body.theme-blue .btn-gold {
  background: linear-gradient(180deg, #dfba56 0%, #c49931 100%) !important;
  color: #070c18 !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em;
  border: 1px solid #ecc96e !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; /* Sombra oscura limpia natural */
  text-shadow: none !important;
  transition: all 0.25s ease;
}
body.theme-blue .btn-gold:hover {
  background: linear-gradient(180deg, #e8c668 0%, #ce9f35 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

body.theme-blue .btn-outline,
body.theme-blue .btn-outline-gold {
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  transition: all 0.25s ease;
}
body.theme-blue .btn-outline:hover,
body.theme-blue .btn-outline-gold:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #dfba56 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   3. HERO SECTION (HOME)
   ========================================================================== */
body.theme-blue .hero-section {
  background: #080d1a !important; /* Fondo sobrio y uniforme, sin manchas */
  padding: 6.5rem 0 5.5rem;
}

body.theme-blue .hero-badge {
  background: rgba(16, 26, 46, 0.9) !important;
  border: 1px solid rgba(223, 186, 86, 0.35) !important;
  color: #dfba56 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Título Hero: Blanco puro impecable */
body.theme-blue .hero-title,
body.theme-blue .hero-title *,
body.theme-blue .hero-title span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  text-shadow: none !important;
}

/* Slogan Hero: Oro fino itálico */
body.theme-blue .hero-slogan {
  font-family: var(--font-editorial) !important;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
  font-style: italic !important;
  font-weight: 650 !important;
  color: #dfba56 !important;
  text-shadow: none !important;
  margin-top: -0.2rem;
  margin-bottom: 1.4rem;
}
body.theme-blue .hero-slogan::before {
  background: linear-gradient(90deg, #dfba56, transparent) !important;
  height: 2px !important;
  width: 32px !important;
}

body.theme-blue .hero-description {
  color: #cbd5e1 !important;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem) !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  max-width: 58ch;
}

body.theme-blue .hero-media-card {
  background: #101a2e !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
body.theme-blue .hero-floating-badge {
  background: #080d1a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 3px solid #dfba56 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
body.theme-blue .hero-floating-badge .badge-text-title {
  color: #ffffff !important;
  font-weight: 750 !important;
}
body.theme-blue .hero-floating-badge .badge-text-sub {
  color: #dfba56 !important;
  font-weight: 650 !important;
}

/* ==========================================================================
   4. ESTADÍSTICAS
   ========================================================================== */
body.theme-blue .stats-section {
  background: #060a14 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 3.5rem 0;
}
body.theme-blue .stat-card {
  background: #0d1627 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-top: 3px solid #c49931 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  padding: 2.2rem 1.5rem !important;
}
body.theme-blue .stat-card:hover {
  transform: translateY(-4px) !important;
  border-color: #dfba56 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}
body.theme-blue .stat-number,
body.theme-blue .stat-value {
  color: #ffffff !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
body.theme-blue .stat-char {
  color: #dfba56 !important;
  font-weight: 900 !important;
}
body.theme-blue .stat-label {
  color: #cbd5e1 !important;
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 0.8rem !important;
}
body.theme-blue .stat-word {
  display: inline !important;
}
body.theme-blue .stat-char {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* ==========================================================================
   5. SLIDER ANTES Y DESPUÉS
   ========================================================================== */
body.theme-blue .transformation-section {
  background: #080d1a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 6rem 0;
}
body.theme-blue .before-after-container {
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
body.theme-blue .ba-handle-line {
  background: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}
body.theme-blue .ba-handle-knob {
  background: #080d1a !important;
  border: 2px solid #dfba56 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}
body.theme-blue .ba-caption-box {
  color: #cbd5e1 !important;
  font-family: var(--font-editorial) !important;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: 1.5rem !important;
  text-shadow: none !important;
}

/* ==========================================================================
   6. BENTO GRID (SERVICIOS)
   ========================================================================== */
body.theme-blue .services-section {
  background: #0a1120 !important;
  padding: 6.5rem 0;
}
body.theme-blue .section-tag {
  background: rgba(16, 26, 46, 0.9) !important;
  border: 1px solid rgba(223, 186, 86, 0.35) !important;
  color: #dfba56 !important;
  font-weight: 700 !important;
}
body.theme-blue .section-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
body.theme-blue .section-subtitle,
body.theme-blue .section-desc {
  color: #cbd5e1 !important;
}

body.theme-blue .bento-card {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45) !important;
  padding: 2.2rem 2.2rem !important;
  transition: all 0.3s ease !important;
}
body.theme-blue .bento-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(223, 186, 86, 0.4) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
}
body.theme-blue .service-icon-box {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(223, 186, 86, 0.12) !important;
  border: 1px solid rgba(223, 186, 86, 0.4) !important;
  color: #dfba56 !important;
  box-shadow: none !important;
}
body.theme-blue .service-title {
  color: #ffffff !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
}
body.theme-blue .service-desc {
  color: #cbd5e1 !important;
}
body.theme-blue .service-features li {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}
body.theme-blue .service-features li::before {
  color: #dfba56 !important;
}

/* ==========================================================================
   7. PROYECTOS RECIENTES Y CATÁLOGO EN HOME
   ========================================================================== */
body.theme-blue .portfolio-section,
body.theme-blue .gallery-section {
  background: #080d1a !important;
}
body.theme-blue .project-item {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}
body.theme-blue .project-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(223, 186, 86, 0.45) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
}
body.theme-blue .project-thumbnail {
  background: #0a1120 !important;
}
body.theme-blue .project-zoom-trigger {
  background: rgba(8, 13, 26, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}
body.theme-blue .project-item:hover .project-zoom-trigger {
  background: #dfba56 !important;
  color: #080d1a !important;
  border-color: #dfba56 !important;
}
body.theme-blue .portfolio-jump-btn {
  background: linear-gradient(180deg, #dfba56 0%, #c49931 100%) !important;
  color: #070c18 !important;
  font-weight: 750 !important;
  border: 1px solid #ecc96e !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
body.theme-blue .portfolio-jump-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   8. VIDEO TOURS
   ========================================================================== */
body.theme-blue .video-tour-card,
body.theme-blue .gallery-video-banner {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}
body.theme-blue .video-banner-title {
  color: #ffffff !important;
  font-weight: 850 !important;
}
body.theme-blue .video-banner-desc {
  color: #cbd5e1 !important;
}
body.theme-blue .video-duration-pill {
  background: rgba(8, 13, 26, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}
body.theme-blue .video-feat-item {
  color: #ffffff !important;
}
body.theme-blue .video-feat-item svg {
  color: #dfba56 !important;
}

/* ==========================================================================
   9. ESTIMADOR DE COSTOS
   ========================================================================== */
body.theme-blue .estimator-section {
  background: #0a1120 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-blue .calc-card {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5) !important;
}
body.theme-blue .calc-step-header h4 {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.theme-blue .calc-select,
body.theme-blue .form-input,
body.theme-blue .form-select,
body.theme-blue .form-textarea {
  background: #080d1a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
body.theme-blue .calc-select:focus,
body.theme-blue .form-input:focus,
body.theme-blue .form-select:focus,
body.theme-blue .form-textarea:focus {
  border-color: #dfba56 !important;
  box-shadow: 0 0 0 2px rgba(223, 186, 86, 0.2) !important;
}
body.theme-blue .grade-radio-card {
  background: #080d1a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}
body.theme-blue .grade-radio-card.active {
  border-color: #dfba56 !important;
  background: rgba(223, 186, 86, 0.08) !important;
  color: #ffffff !important;
}
body.theme-blue .calc-result-box {
  background: #060a14 !important;
  border: 1px solid rgba(223, 186, 86, 0.35) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   10. TESTIMONIOS Y FAQ
   ========================================================================== */
body.theme-blue .testimonials-section {
  background: #080d1a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-blue .testimonial-card {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}
body.theme-blue .testimonial-text {
  color: #e2e8f0 !important;
}
body.theme-blue .client-name {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body.theme-blue .faq-section {
  background: #0a1120 !important;
}
body.theme-blue .faq-item {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
body.theme-blue .faq-item:hover {
  border-color: rgba(223, 186, 86, 0.35) !important;
}
body.theme-blue .faq-item.active {
  border-color: #dfba56 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
body.theme-blue .faq-question {
  color: #ffffff !important;
  font-weight: 750 !important;
}
body.theme-blue .faq-answer {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   11. CONTACTO Y FOOTER
   ========================================================================== */
body.theme-blue .contact-section {
  background: #080d1a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-blue .contact-card {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55) !important;
}
body.theme-blue .contact-info-item h4 {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.theme-blue .contact-info-item p {
  color: #cbd5e1 !important;
}
body.theme-blue .form-label {
  color: #ffffff !important;
  font-weight: 700 !important;
}
body.theme-blue .site-footer {
  background: #050810 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #8494a8 !important;
}

/* ==========================================================================
   12. PÁGINA CATÁLOGO DE PROYECTOS (PROYECTOS.HTML) - DISEÑO SOBRIO Y ELEGANTE
   ========================================================================== */
body.theme-blue.page-projects,
body.theme-blue .projects-hero {
  background: #080d1a !important; /* Fondo sobrio y uniforme, sin manchas ni brillos radiales */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 3.5rem 0 2.5rem !important;
}

/* Eliminar el patrón de puntos ruidoso */
body.theme-blue .projects-hero::before {
  display: none !important;
}

body.theme-blue .projects-breadcrumb {
  color: #8494a8 !important;
  font-size: 0.85rem !important;
}
body.theme-blue .projects-breadcrumb a {
  color: #dfba56 !important;
  font-weight: 600 !important;
}
body.theme-blue .projects-breadcrumb a:hover {
  color: #ffffff !important;
}

/* Título de Catálogo: Blanco puro con "Obras y Proyectos" en Oro Sólido Elegante */
body.theme-blue .projects-hero-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}
body.theme-blue .projects-hero-title span {
  color: #dfba56 !important;            /* Oro Noble Sólido (Adiós al degradado sucio) */
  -webkit-text-fill-color: #dfba56 !important;
  background: none !important;
}

body.theme-blue .projects-hero-desc {
  color: #cbd5e1 !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
}

body.theme-blue .projects-catalog-section {
  background: #080d1a !important;
}

/* Filtros de Categorías de Proyectos (Píldoras Limpias Arquitectónicas) */
body.theme-blue .gal-filter-btn {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  padding: 0.5rem 1.15rem !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
body.theme-blue .gal-filter-btn:hover {
  background: #14213a !important;
  border-color: rgba(223, 186, 86, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
body.theme-blue .gal-filter-btn.active {
  background: #c49931 !important;
  color: #070c18 !important;
  font-weight: 750 !important;
  border-color: #dfba56 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Tarjetas de Galería */
body.theme-blue .gallery-card {
  background: #101a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}
body.theme-blue .gallery-card:hover {
  border-color: rgba(223, 186, 86, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   TARJETA FINAL DE CONVERSIÓN (SIN LUZ AZUL EN EL CENTRO NI BORDE AMARILLO GRUESO)
   ========================================================================== */
body.theme-blue .projects-conversion-card {
  background: #101a2e !important; /* Azul pizarra mate sobrio, sin foco radial en medio */
  border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Borde fino sutil arquitectónico */
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5) !important;
  padding: 3rem 2rem !important;
}
body.theme-blue .projects-conversion-title {
  color: #ffffff !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}
body.theme-blue .projects-conversion-desc {
  color: #cbd5e1 !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

/* Botón secundario en la tarjeta de conversión (SMS) */
body.theme-blue .projects-conversion-card .btn-outline,
body.theme-blue .projects-conversion-card .btn-outline-gold {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}
body.theme-blue .projects-conversion-card .btn-outline:hover,
body.theme-blue .projects-conversion-card .btn-outline-gold:hover {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   SMS / Text Message Buttons & Luxury Floating SMS Widget
   ========================================================================== */
.btn-sms,
body.theme-blue .btn-sms {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
  text-decoration: none;
  font-family: var(--font-display);
}

.btn-sms:hover,
body.theme-blue .btn-sms:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6) !important;
  filter: brightness(1.08);
}

.floating-whatsapp.floating-sms,
body.theme-blue .floating-whatsapp.floating-sms {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.floating-whatsapp.floating-sms::before,
body.theme-blue .floating-whatsapp.floating-sms::before {
  background: rgba(37, 99, 235, 0.4) !important;
}

.floating-whatsapp.floating-sms:hover,
body.theme-blue .floating-whatsapp.floating-sms:hover {
  box-shadow: 0 14px 38px rgba(37, 99, 235, 0.7) !important;
}

/* ==========================================================================
   Floating Email Button (Directly Above SMS Floating Button)
   ========================================================================== */
.floating-email,
body.theme-blue .floating-email {
  position: fixed;
  bottom: 104px;
  right: 28px;
  width: 62px;
  height: 62px;
  background: linear-gradient(135deg, #d4af37 0%, #aa771c 100%) !important;
  color: #0b1120 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  z-index: 9999;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.floating-email::before,
body.theme-blue .floating-email::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.45);
  z-index: -1;
  animation: emailPulse 2.4s infinite ease-out;
}

@keyframes emailPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.floating-email:hover,
body.theme-blue .floating-email:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 14px 38px rgba(212, 175, 55, 0.65) !important;
}

.floating-email .email-tooltip {
  position: absolute;
  right: 74px;
  background: rgba(13, 18, 31, 0.95);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.floating-email:hover .email-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .floating-email,
  body.theme-blue .floating-email {
    bottom: 84px;
    right: 20px;
    width: 54px;
    height: 54px;
  }
  .floating-email .email-tooltip {
    display: none;
  }
}