/**
 * Qdesk AI Company Color Palette
 * 
 * Color Palette:
 * - 001F54: Very dark blue (primary dark background)
 * - 002147: Dark blue (secondary dark background)
 * - 003366: Navy blue (medium dark background)
 * - 004080: Medium blue (primary buttons, links)
 * - 4A90E2: Bright sky blue (accents, hover states)
 * - 7E7F83: Gray (secondary text, borders)
 * - FFFFFF: White (text on dark, light backgrounds)
 */

:root {
  /* Primary Colors */
  --qt-primary-dark: #001F54;
  --qt-primary-dark-2: #002147;
  --qt-primary-navy: #003366;
  --qt-primary-blue: #004080;
  --qt-primary-accent: #4A90E2;
  --qt-gray: #7E7F83;
  --qt-white: #FFFFFF;
  
  /* Gradients */
  --qt-gradient-dark: linear-gradient(135deg, #001F54 0%, #003366 100%);
  --qt-gradient-blue: linear-gradient(135deg, #004080 0%, #4A90E2 100%);
}

/* Professional Company Logo Styling - Global */
.company-name-logo,
.company-name-logo-preloader {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  font-family: 'Arial Black', Arial, sans-serif !important;
  white-space: nowrap !important;
}

/* Fix preloader to show company name instead of logo image */
.overlay .preloader .logo.company-name-logo-preloader,
.company-name-logo-preloader {
  background: none !important;
  background-image: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 20px !important;
  margin: 20px auto !important;
  opacity: 1 !important;
  display: block !important;
  text-align: center !important;
}

/* Home page (body.body) - White color */
body.body .company-name-logo,
body.body .company-name-logo-preloader {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Other pages (body.body2) - White color for preloader visibility */
body.body2 .company-name-logo-preloader,
body:not(.body) .company-name-logo-preloader {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure preloader text is visible on all pages regardless of body class */
.overlay .preloader .company-name-logo-preloader,
.overlay .company-name-logo-preloader,
span.company-name-logo-preloader {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  display: block !important;
  opacity: 1 !important;
  background: none !important;
  text-indent: 0 !important;
}

body.body .company-name-logo:hover {
  transform: translateY(-2px);
  color: #4A90E2 !important;
  text-decoration: none !important;
}

/* Other pages (body.body2) - Navy blue color */
body.body2 .company-name-logo,
body.body2 .company-name-logo-preloader,
body:not(.body) .company-name-logo {
  color: #001F54 !important;
  text-shadow: none !important;
}

body.body2 .company-name-logo:hover,
body:not(.body) .company-name-logo:hover {
  transform: translateY(-2px);
  color: #4A90E2 !important;
  text-decoration: none !important;
}

/* Animated underline effect */
.company-name-logo::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(135deg, #4A90E2, #001F54);
  transition: width 0.3s ease;
}

.company-name-logo:hover::after {
  width: 100%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .company-name-logo,
  .company-name-logo-preloader {
    font-size: 1.5rem !important;
    letter-spacing: 0.5px !important;
  }
}
  --qt-white: #FFFFFF;

  /* Override existing color variables */
  /* Text Colors */
  --qt-text-h-text1: #FFFFFF;              /* White for headings on dark */
  --qt-text-h-text2: #001F54;              /* Dark blue for headings */
  --qt-text-h-text3: #002147;              /* Dark blue variant */
  --qt-text-h-text4: #001F54;              /* Dark blue for headings */
  --qt-text-p-text1: rgba(255, 255, 255, 0.85);  /* White with opacity for paragraphs on dark */
  --qt-text-p-text2: #7E7F83;              /* Gray for secondary text */
  --qt-text-p-text3: #7E7F83;              /* Gray for paragraphs */
  --qt-text-p-text4: #7E7F83;              /* Gray for secondary paragraphs */

  /* Background Colors */
  --qt-bg-bg-w: #FFFFFF;                   /* White background */
  --qt-bg-bg-1: #001F54;                   /* Primary dark background */
  --qt-bg-bg-2: #004080;                   /* Primary blue */
  --qt-bg-bg-3: #002147;                   /* Secondary dark background */
  --qt-bg-bg-4: #003366;                   /* Navy blue background */
  --qt-bg-bg-5: #F5F8FF;                   /* Light blue tint (keep for contrast) */
  --qt-bg-bg-6: #E8F0F8;                   /* Light blue tint variant */
  --qt-bg-bg-7: #004080;                   /* Primary blue (buttons, links) */
  --qt-bg-bg-8: #4A90E2;                   /* Accent blue (hover, highlights) */
  --qt-bg-bg-9: #F9FAFD;                   /* Very light background */
  --qt-bg-bg-10: #003366;                  /* Navy blue */
  --qt-bg-bg-11: #4A90E2;                  /* Accent blue */
  --qt-bg-bg-12: #002147;                  /* Dark blue */
  --qt-bg-bg-13: #F5F8FF;                  /* Light background */
  --qt-bg-bg-14: #E8F0F8;                  /* Light blue tint */
  --qt-bg-bg-15: #004080;                  /* Primary blue */
  --qt-bg-bg-16: #E8F0F8;                  /* Light background */
  --qt-bg-bg-17: #D0E4F5;                  /* Very light blue */

  /* Border Colors */
  --qt-border-border-1: #E8F0F8;           /* Light border */
  --qt-border-border-2: #D0E4F5;           /* Medium border */
  --qt-border-border-3: #003366;           /* Dark border */

  /* Gradient Colors */
  --qt-gradient-primary: linear-gradient(135deg, #004080 0%, #4A90E2 100%);
  --qt-gradient-dark: linear-gradient(135deg, #001F54 0%, #003366 100%);
  --qt-gradient-accent: linear-gradient(135deg, #4A90E2 0%, #004080 100%);
}

/* Override specific color classes and elements */

/* Buttons */
.btn--ripple,
.theme-btn,
.theme-btn2,
.theme-btn4,
.theme-btn5,
.theme-btn6,
.theme-btn7,
.theme-btn8,
.theme-btn9 {
  background: transparent !important;
  color: var(--qt-white) !important;
}

/* theme-btn3 should have white background with blue text by default */
.theme-btn3 {
  background: transparent !important;
  color: var(--qt-primary-blue, #004080) !important;
}

/* Ensure theme-btn2 has blue background via ::after pseudo-element and is visible */
.theme-btn2 {
  color: var(--qt-white) !important;
  background: transparent !important;
}

.theme-btn2::after {
  background-color: var(--qt-bg-bg-7, #004080) !important;
  z-index: -2 !important;
}

.theme-btn2::before {
  background-color: var(--qt-bg-bg-w, #FFFFFF) !important;
  width: 0% !important;
  z-index: -1 !important;
}

.theme-btn2:hover {
  color: var(--qt-bg-bg-7, #004080) !important;
}

.theme-btn2:hover::before {
  width: 100% !important;
}

/* Ensure theme-btn3 has white background via ::after pseudo-element */
.theme-btn3::after {
  background-color: var(--qt-bg-bg-w, #FFFFFF) !important;
  z-index: -2 !important;
}

.theme-btn3::before {
  background-color: var(--qt-bg-bg-7, #004080) !important;
  width: 0% !important;
  z-index: -1 !important;
}

.theme-btn3:hover {
  color: var(--qt-white) !important;
}

.theme-btn3:hover::before {
  width: 100% !important;
}

.btn--ripple:hover,
.theme-btn:hover,
.theme-btn2:hover,
.theme-btn4:hover,
.theme-btn5:hover,
.theme-btn6:hover,
.theme-btn7:hover,
.theme-btn8:hover,
.theme-btn9:hover {
  background: transparent !important;
  color: var(--qt-white) !important;
}

.btn.btn2 {
  background: var(--qt-white) !important;
  color: var(--qt-primary-blue) !important;
  border: 2px solid var(--qt-primary-blue) !important;
}

.btn.btn2:hover {
  background: var(--qt-primary-blue) !important;
  color: var(--qt-white) !important;
}

.btn.btn3 {
  background: var(--qt-primary-dark) !important;
  color: var(--qt-white) !important;
}

.btn.btn3:hover {
  background: var(--qt-primary-blue) !important;
}

.btn.btn4 {
  background: var(--qt-white) !important;
  color: var(--qt-primary-dark) !important;
}

.btn.btn4:hover {
  background: var(--qt-primary-blue) !important;
  color: var(--qt-white) !important;
}

/* Links */
a {
  color: var(--qt-primary-blue);
}

a:hover {
  color: var(--qt-primary-accent);
}

/* Body backgrounds */
body.body1 {
  background-color: var(--qt-bg-bg-1) !important;
}

body.body2 {
  background-color: var(--qt-bg-bg-5) !important;
}

body.body {
  background-color: var(--qt-bg-bg-1) !important;
}

/* Hero Areas */
.hero-area1 {
  background: var(--qt-gradient-dark) !important;
}

.hero-area6 {
  background: var(--qt-gradient-dark) !important;
  background-image: linear-gradient(135deg, #001F54 0%, #003366 50%, #002147 100%) !important;
}

.hero-area6::before {
  background: radial-gradient(circle at 20% 80%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(0, 64, 128, 0.1) 0%, transparent 50%) !important;
}

/* Header Areas */
.header-area6 {
  background: rgba(0, 31, 84, 0.95) !important;
  backdrop-filter: blur(10px);
}

.header-area6.sticky {
  background: rgba(0, 31, 84, 0.98) !important;
}

.header-area6 .main-menu-ex ul li a {
  color: var(--qt-white) !important;
}

.header-area6 .main-menu-ex ul li a:hover {
  color: var(--qt-primary-accent) !important;
}

.header-area6 .theme-btn,
.header-area6 .theme-btn8,
.header-area6 .theme-btn2 {
  color: var(--qt-white) !important;
}

.header-area6 .theme-btn:hover,
.header-area6 .theme-btn8:hover,
.header-area6 .theme-btn2:hover {
  color: var(--qt-white) !important;
}

.header-area6 .theme-btn8 .tb8,
.header-area6 .theme-btn8 span,
.header-area6 .theme-btn8 .arrow,
.header-area6 .theme-btn8 i {
  color: var(--qt-white) !important;
}

/* Sections with dark backgrounds */
.about-boxs,
.about-page-area1,
.services-area,
.features-area,
.technology-showcase-area {
  background-color: var(--qt-bg-bg-1) !important;
}

/* Sections with light backgrounds */
.cta2-area,
.footer2,
.footer6 {
  background: var(--qt-gradient-dark) !important;
}

/* Text colors on dark backgrounds */
.hero-area6 h1,
.hero-area6 h2,
.hero-area6 h3,
.hero-area6 .main-heading h1,
.hero-area6 .main-heading h2 {
  color: var(--qt-white) !important;
}

.hero-area6 p,
.hero-area6 .main-heading p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Cards and boxes */
.single-box,
.blog-box,
.pricing-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Footer */
.footer6 {
  background: var(--qt-gradient-dark) !important;
  background-image: linear-gradient(135deg, #001F54 0%, #003366 100%) !important;
}

.footer6 .single-footer-items h3 {
  color: var(--qt-white) !important;
}

.footer6 .menu-list li a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer6 .menu-list li a:hover {
  color: var(--qt-primary-accent) !important;
}

.footer6 .coppyright {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Technology Showcase */
.technology-showcase-area {
  background: var(--qt-gradient-dark) !important;
}

/* Contact Page */
.contact-page-area {
  background-color: var(--qt-bg-bg-5) !important;
}

/* Blog Page */
.blog-area-all {
  background-color: var(--qt-bg-bg-5) !important;
}

/* Pages Hero */
.pages-hero {
  background: var(--qt-gradient-dark) !important;
}

.pages-hero h1,
.pages-hero h2 {
  color: var(--qt-white) !important;
}

.pages-hero p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Professional Button Styling for About, Blog, and Careers Pages */
body.body2 .theme-btn,
body.body2 .theme-btn2,
body.body2 .theme-btn3,
body.body2 .theme-btn4,
body.body2 .theme-btn5,
body.body2 .theme-btn6,
body.body2 .theme-btn7,
body.body2 .theme-btn8,
body.body2 .theme-btn9,
body.body2 .theme-btn10,
body.body2 .btn,
body.body2 .button,
body.body2 .sidebar1-btn,
body.body2 .theme-button,
body.body2 a[class*="btn"]:not(.btn-outline):not(.custom-project-btn) {
  background: var(--qt-primary-dark) !important;
  background-color: var(--qt-primary-dark) !important;
  color: var(--qt-white) !important;
  border: 2px solid var(--qt-primary-dark) !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  font-size: 1rem !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0, 31, 84, 0.2) !important;
}

body.body2 .theme-btn:hover,
body.body2 .theme-btn2:hover,
body.body2 .theme-btn3:hover,
body.body2 .theme-btn4:hover,
body.body2 .theme-btn5:hover,
body.body2 .theme-btn6:hover,
body.body2 .theme-btn7:hover,
body.body2 .theme-btn8:hover,
body.body2 .theme-btn9:hover,
body.body2 .theme-btn10:hover,
body.body2 .btn:hover,
body.body2 .button:hover,
body.body2 .sidebar1-btn:hover,
body.body2 .theme-button:hover,
body.body2 a[class*="btn"]:not(.btn-outline):not(.custom-project-btn):hover {
  background: var(--qt-white) !important;
  background-color: var(--qt-white) !important;
  color: var(--qt-primary-dark) !important;
  border: 2px solid var(--qt-primary-dark) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0, 31, 84, 0.3) !important;
  text-decoration: none !important;
}

/* Button text and icon styling */
body.body2 .theme-btn span,
body.body2 .theme-btn2 span,
body.body2 .theme-btn3 span,
body.body2 .theme-btn4 span,
body.body2 .theme-btn5 span,
body.body2 .theme-btn6 span,
body.body2 .theme-btn7 span,
body.body2 .theme-btn8 span,
body.body2 .theme-btn9 span,
body.body2 .theme-btn10 span,
body.body2 .sidebar1-btn span {
  color: inherit !important;
}

body.body2 .theme-btn i,
body.body2 .theme-btn2 i,
body.body2 .theme-btn3 i,
body.body2 .theme-btn4 i,
body.body2 .theme-btn5 i,
body.body2 .theme-btn6 i,
body.body2 .theme-btn7 i,
body.body2 .theme-btn8 i,
body.body2 .theme-btn9 i,
body.body2 .theme-btn10 i,
body.body2 .sidebar1-btn i {
  color: inherit !important;
}

/* Special handling for nested elements */
body.body2 .theme-btn *,
body.body2 .theme-btn2 *,
body.body2 .theme-btn3 *,
body.body2 .theme-btn4 *,
body.body2 .theme-btn5 *,
body.body2 .theme-btn6 *,
body.body2 .theme-btn7 *,
body.body2 .theme-btn8 *,
body.body2 .theme-btn9 *,
body.body2 .theme-btn10 *,
body.body2 .sidebar1-btn * {
  color: inherit !important;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
  body.body2 .theme-btn,
  body.body2 .theme-btn2,
  body.body2 .theme-btn3,
  body.body2 .theme-btn4,
  body.body2 .theme-btn5,
  body.body2 .theme-btn6,
  body.body2 .theme-btn7,
  body.body2 .theme-btn8,
  body.body2 .theme-btn9,
  body.body2 .theme-btn10,
  body.body2 .btn,
  body.body2 .button,
  body.body2 .sidebar1-btn,
  body.body2 .theme-button {
    padding: 10px 25px !important;
    font-size: 0.9rem !important;
  }
}

/* Specific targeting for mentioned buttons to ensure styling applies */
/* About page - Talk to Our Team button */
body.body2 a[href="contact.html"].theme-btn3 {
  background: var(--qt-primary-dark) !important;
  background-color: var(--qt-primary-dark) !important;
  color: var(--qt-white) !important;
  border: 2px solid var(--qt-primary-dark) !important;
}

body.body2 a[href="contact.html"].theme-btn3:hover {
  background: var(--qt-white) !important;
  background-color: var(--qt-white) !important;
  color: var(--qt-primary-dark) !important;
  border: 2px solid var(--qt-primary-dark) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0, 31, 84, 0.3) !important;
}

/* Blog page - Contact/Get In Touch buttons */
body.body2 a[href="contact.html"].theme-btn2 {
  background: var(--qt-primary-dark) !important;
  background-color: var(--qt-primary-dark) !important;
  color: var(--qt-white) !important;
  border: 2px solid var(--qt-primary-dark) !important;
}

body.body2 a[href="contact.html"].theme-btn2:hover {
  background: var(--qt-white) !important;
  background-color: var(--qt-white) !important;
  color: var(--qt-primary-dark) !important;
  border: 2px solid var(--qt-primary-dark) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0, 31, 84, 0.3) !important;
}