/* ChessFlair Brand Theme: Navy Blue (#182048) and White (#FFFFFF) */
:root {
  --color-main: #182048;
  --color-main-dark: #0f1430;
  --color-main-light: #243068;
  --color-accent: #2563EB;
  --color-sky: #60A5FA;
  --color-gold: #F59E0B;
}

/* Base typography */
body, html {
  font-family: 'Poppins', sans-serif !important;
  color: #334155;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  color: #182048;
}

/* Color main text highlights on light backgrounds */
.color-main, 
a.color-main,
.special-heading.color-main {
  color: #182048 !important;
}
.icon-styled.color-main i {
  color: #182048 !important;
}

/* DARK SECTION STYLING (.ds) - High Contrast & Glowing Elements */
.ds, .page_header.ds {
  background-color: #121A3D !important;
}
.ds h1, .ds h2, .ds h3, .ds h4, .ds h5, .ds h6 {
  color: #FFFFFF !important;
}
.ds p {
  color: #CBD5E1 !important;
}
.ds .color-darkgrey {
  color: #94A3B8 !important;
}

/* Ensure Icons & Accents Glow Crisply on Dark Backgrounds */
.ds .icon-styled.color-main i,
.ds .icon-styled i,
.ds .media .icon-styled i,
.ds [class*='ico-'],
.ds .special-heading.color-main,
.ds .color-main {
  color: #60A5FA !important; /* Sky Blue glow */
}

/* Hero Slider Typography & Contrast */
.page_slider h2 {
  color: #FFFFFF !important;
}
.page_slider h2 .color-main,
.page_slider .intro_layer .color-main {
  color: #60A5FA !important;
}
.page_slider p {
  color: #E2E8F0 !important;
  font-size: 18px;
}

/* Header & Navigation Polish */
.page_header {
  background: rgba(18, 26, 61, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.page_header .logo img {
  max-height: 48px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  object-fit: contain;
}
.page_footer .logo img {
  max-height: 46px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  object-fit: contain;
}

/* Nav Menu */
.top-nav ul.nav > li > a {
  color: #FFFFFF !important;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 18px !important;
  transition: all 0.2s ease;
}
.top-nav ul.nav > li.active > a,
.top-nav ul.nav > li > a:hover {
  color: #60A5FA !important;
}

/* Buttons */
.btn-maincolor,
input[type="submit"].btn-maincolor {
  background-color: #182048 !important;
  border-color: #182048 !important;
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(24, 32, 72, 0.25);
  transition: all 0.25s ease;
}

.btn-maincolor:hover,
input[type="submit"].btn-maincolor:hover {
  background-color: #0f1430 !important;
  border-color: #0f1430 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 20, 48, 0.35);
}

.btn-outline-maincolor {
  color: #182048 !important;
  border-color: #182048 !important;
  background-color: transparent !important;
  font-weight: 600;
  border-radius: 6px;
}

.btn-outline-maincolor:hover {
  background-color: #182048 !important;
  color: #FFFFFF !important;
  border-color: #182048 !important;
}

.btn-outline-darkgrey {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background-color: transparent !important;
  border-radius: 6px;
}
.btn-outline-darkgrey:hover {
  background-color: #FFFFFF !important;
  color: #182048 !important;
  border-color: #FFFFFF !important;
}

/* Background utilities */
.bg-maincolor {
  background-color: #182048 !important;
}
.border-maincolor {
  border-color: #182048 !important;
}

/* Pricing Card Typography and Dimensions */
.pricing-plan {
  padding: 50px 30px !important;
  margin-bottom: 30px;
  border-radius: 12px;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease;
}
@media (min-width: 1200px) {
  .pricing-plan {
    padding: 55px 35px !important;
  }
}
.pricing-plan:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(24, 32, 72, 0.12) !important;
}

/* Featured Card (Navy Blue highlight) */
.pricing-plan.plan-featured.cs {
  background-color: #182048 !important;
  border-color: #182048 !important;
  color: #FFFFFF !important;
}
.pricing-plan.plan-featured.cs .plan-name h4,
.pricing-plan.plan-featured.cs .price-wrap,
.pricing-plan.plan-featured.cs .plan-features li {
  color: #FFFFFF !important;
}
.pricing-plan.plan-featured.cs .btn-maincolor {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #182048 !important;
}
.pricing-plan.plan-featured.cs .btn-maincolor:hover {
  background-color: #F1F5F9 !important;
  color: #0f1430 !important;
}

.pricing-plan .plan-name {
  margin-bottom: 25px !important;
}
.pricing-plan .plan-name h4 {
  font-size: 22px !important;
  font-weight: 700;
  white-space: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  color: #182048;
}
.pricing-plan .price-wrap {
  font-size: 42px !important;
  font-weight: 800;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  color: #182048;
}
.pricing-plan .price-wrap .plan-sign {
  font-size: 28px !important;
  top: -4px !important;
  margin-right: 2px;
}
.pricing-plan .price-wrap .plan-decimals {
  font-size: 18px !important;
  font-weight: 500;
  margin-left: 4px;
  color: #64748B;
}
.pricing-plan .plan-features {
  margin: 25px 0 25px !important;
}
.pricing-plan .plan-features li {
  padding: 10px 0 !important;
  font-size: 14px !important;
  color: #475569;
}

/* Testimonial Star Rating */
.star-rating i,
.star-rating .fa-star,
.star-rating .fas {
  color: #F59E0B !important;
}

/* Footer Polish */
.page_footer {
  background-color: #0B1026 !important;
  color: #CBD5E1 !important;
}
.page_footer h4, .page_footer h5, .page_footer h6 {
  color: #FFFFFF !important;
}
.page_footer a {
  color: #CBD5E1 !important;
}
.page_footer a:hover {
  color: #60A5FA !important;
}
.page_footer .color-main,
.page_footer i {
  color: #60A5FA !important;
}
.page_copyright {
  background-color: #060917 !important;
  color: #64748B !important;
}

/* Hide template color switcher gear widget */
#switcher, #switcher-wrapper, .color-switcher, [class*='switcher-'] {
  display: none !important;
}