/* 07/17/chatgpt - custom main menu bg color */
.blue_menu {
  background-color: #a4a422;
  color: #fff;
}

.blue_menu a {
  color: #fff;
}

.blue_menu a:hover {
  color: #ddd;
}

/* ================================================
   BLUESTAR LANDING PAGE STYLES
   Migrated from sites/blue/files/assets/css/blue.css
   12/28/2025
   ================================================ */

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

.vtop {
  display: inline-block;
  vertical-align: top;
  float: none;
}

.jumbotron2 {
  background: linear-gradient(135deg, #075AA3 0%, #020b33 50%, #667eea 100%);
}

/* Hero Section */
.hero-section {
  padding: 80px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #075AA3 0%, #020b33 50%, #667eea 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hero-text h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Hero2 Section (alternate) */
.hero2-section {
  padding: 50px 0;
  min-height: 10vh;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #FFFFFF 0%, #1783BA 50%, #073B79 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Image column: position absolutely so left column determines row height */
.hero2-section .row {
  position: relative;
}

/* Right column (col-3 with image) - position absolute so it doesn't affect row height */
.hero2-section .gsc-column.col-lg-3 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}

.hero2-section .gsc-column.col-lg-3 .column-inner,
.hero2-section .gsc-column.col-lg-3 .column-content-inner,
.hero2-section .gsc-column.col-lg-3 .column-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero2-section .gsc-column.col-lg-3 img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.hero2-text h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #063874;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 20px rgba(200,200,200,0.3);
}

.hero2-subtitle {
  font-size: calc(1em + 4pt);
  color: #063874;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero2-subtitle2 {
  font-size: calc(1em + 4pt);
  color: white;
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Stat Cards */
.stat-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.stat-number {
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  display: block;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.0rem;
  margin-top: 0.5rem;
}

/* CTA Buttons */
.cta-button {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 18px 40px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
  color: white;
}

/* Services Showcase */
.services-showcase {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 2rem;
}

/* Company Overview */
.company-overview {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  color: white;
}

.overview-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.overview-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* Value Items */
.value-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1rem;
}

.value-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #10f3a5;
}

.value-title {
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.value-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Why Choose Us */
.why-choose-us {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 20px;
  padding: 2rem;
}

.why-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.why-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  margin-bottom: 1rem;
}

.why-icon {
  font-size: 1.5rem;
  color: #667eea;
}

.why-point {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.why-detail {
  font-size: 0.9rem;
  color: #64748b;
}

/* Services Section */
.services-section {
  background: white;
  padding: 80px 0;
}

.section-title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 3rem;
}

/* Service Cards */
.service-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  height: 100%;
  margin-bottom: 2rem;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #667eea;
}

.service-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.service-description {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-benefits {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1.5rem;
}

.benefit-item {
  text-align: center;
}

.benefit-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #10b981;
}

.benefit-label {
  font-size: 0.8rem;
  color: #64748b;
}

.service-cta {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.service-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  color: white;
  text-decoration: none;
}

/* Slider Section */
.slider-container {
  background: #1e293b;
  padding: 60px 0;
  color: white;
}

.slider-content {
  text-align: center;
}

.slider-title {
  font-size: clamp(1.8rem, 3.5vw, 2.2rem);
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}

.slide {
  display: none;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  text-align: center;
}

.slide.active {
  display: block;
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.slide-content p {
  font-size: 1.1rem;
  line-height: 1.8;
}

.slider-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-dot.active {
  background: white;
  transform: scale(1.3);
}

/* Contact Section */
.contact-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 2rem;
  text-align: center;
  color: white;
}

.contact-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.contact-subtitle {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.contact-cta {
  background: white;
  color: #667eea;
  padding: 15px 40px;
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
}

/* Landing Page Mobile Responsive */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 0;
  }

  .services-showcase {
    padding: 1.5rem;
  }

  .company-overview,
  .why-choose-us {
    padding: 1.5rem;
  }

  .service-card {
    padding: 1.5rem;
  }
}

/* Note: Dropdown menu fix and Bootstrap button fixes are in update.css */

/* ================================================
   REGION BACKGROUNDS - Change dark to silver
   02/25/2026 - Match SaaS service cards look
   For safepass/xpresstm site
   ================================================ */

/* Slider container - was #1e293b (dark), now silver */
.slider-container {
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%) !important;
  color: #1e293b !important;
}

.slider-container .slider-title,
.slider-container .slide-content h3,
.slider-container .slide-content p {
  color: #1e293b !important;
}

.slider-container .slide {
  background: rgba(255, 255, 255, 0.8) !important;
}

.slider-container .nav-dot {
  background: rgba(30, 41, 59, 0.3) !important;
}

.slider-container .nav-dot.active {
  background: #1e293b !important;
}

/* Company overview - was dark gradient, now silver */
.company-overview {
  background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%) !important;
  color: #1e293b !important;
}

.company-overview .overview-title,
.company-overview .value-title {
  color: #1e293b !important;
}

.company-overview .overview-subtitle,
.company-overview .value-description {
  color: #4a5568 !important;
}

.company-overview .value-item {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.company-overview .value-icon {
  color: #667eea !important;
}

/* Footer - change dark brown to light silver
   Updated 2026-02-28 - Applies to ALL sites (bluestarc, safepass, xpresstm) */
#footer.footer,
.footer,
footer.footer,
footer#footer {
  background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%) !important;
  background-image: none !important;
  color: #1e293b !important;
}

.footer a,
footer a {
  color: #4a5568 !important;
}

.footer a:hover,
footer a:hover {
  color: #667eea !important;
}

/* Footer center - remove dark bg-footer.jpg image */
.footer .footer-center,
footer .footer-center,
#footer .footer-center,
.footer-center {
  background: linear-gradient(135deg, #f0f0f0 0%, #e5e5e5 100%) !important;
  background-image: none !important;
  color: #1e293b !important;
}

.footer .footer-center .block .block-title span,
.footer .block .block-title span,
footer .block .block-title span {
  color: #1e293b !important;
}

.footer .footer-top,
footer .footer-top {
  background: #f8f8f8 !important;
}

.footer .footer-bottom,
footer .footer-bottom {
  background: linear-gradient(135deg, #e8e8e8 0%, #dedede 100%) !important;
  color: #1e293b !important;
}

.footer .footer-bottom a,
footer .footer-bottom a {
  color: #4a5568 !important;
}

/* Copyright region - change dark to white/light */
.copyright,
#copyright,
footer .copyright {
  background: #fafafa !important;
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
}

.copyright a,
#copyright a {
  color: #4a5568 !important;
}

.copyright a:hover,
#copyright a:hover {
  color: #667eea !important;
}

.copyright .copyright-inner,
#copyright .copyright-inner {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}