/* Base site styles */
.site-width {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Font settings with high specificity */
html body,
html body div,
html body p,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body span,
html body a {
    font-family: 'Poppins', sans-serif !important;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
}

.page-section {
    min-height: 100vh;
    padding-top: 80px;
    scroll-margin-top: 80px;
}

:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --light-bg: #f8f9fa;
    --dark-bg: #343a40;
}
     
.active-page {
    display: block;
}
       
.hero-section {
    position: relative;
    background: url('team.webp') no-repeat center center;
    background-size: cover;
    color: white;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.hero-section::before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    opacity: 0.85; /* 85% opacity = 15% transparency */
}
      
.hero-content {
	position: relative;
    z-index: 10;
    text-align: center;
    max-width: 960px;
    padding: 0 20px;
}
              
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
       
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.footer {
    background-color: var(--secondary-color);
    color: white;
}
		
.narrow-container {
	max-width: 1024px; /* Adjust this value to make it narrower or wider */
	margin-left: auto;
	margin-right: auto;
}	

.footer {
	position: relative;
	color: white;
	overflow: hidden;
}

.bg-secondary-color {
	background-color: var(--secondary-color);
}		
        
/* PDF export optimization */
@media print {
    .page-section {
    display: block !important;
    page-break-after: always;
    min-height: auto;
    padding-top: 20px;
}
            
nav, .footer {
    display: none;
    }
}		

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
    
.logo-marquee {
	animation: marquee 40s linear infinite;
	width: max-content;
}
   
.logo-marquee:hover {
	animation-play-state: paused;
}
		
.testimonial-slide {
	transition: opacity 0.3s ease;
}

.testimonial-slide.active {
	display: block;
}

.testimonial-indicator {
	transition: background-color 0.3s ease;
}

/* Improved vertical alignment for testimonial content */
.testimonial-slide > div {
	display: flex;
	align-items: center;
}

/* Ensure the image is centered vertically */
.testimonial-slide .flex-shrink-0 {
	display: flex;
	align-items: center;
}

/* Responsive adjustments for testimonials */
@media (max-width: 768px) {
	.testimonial-slide > div {
		text-align: center;
	}
}

.blog-card {
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #3B82F6;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.active::after {
    width: 100%;
}

.btn-primary {
    background-color: var(--primary-color);
    transition: all 0.3s ease;
}
        
.btn-primary:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary.bg-white:hover {
    background-color: #2563EB;
}

.whitebackground-btn {
    transition: all 0.3s ease;
}

.whitebackground-btn:hover {
    background-color: #0484D3;
    color: white !important;
    transform: translateY(-1px); /* Add this for a slight upward movement */
}
	
.article-content {
    max-width: 800px;
    margin: 0 auto;
}

/* ====== OPTIMIZED ANIMATION STYLES ====== */

/* Base animation properties - performance optimized */
.slide-in-up, 
.slide-in-left, 
.slide-in-right, 
.fade-zoom, 
.fade-in {
    opacity: 0;
    transition-duration: 0.8s;
    transition-timing-function: ease;
    transition-property: opacity, transform;
    backface-visibility: hidden;
    will-change: opacity, transform;
}

/* Specific transformations */
.slide-in-up { 
    transform: translateY(50px); 
}

.slide-in-left { 
    transform: translateX(-50px); 
}

.slide-in-right { 
    transform: translateX(50px); 
}

.fade-zoom { 
    transform: scale(0.95); 
    transition-duration: 1s;
}

.fade-in { 
    /* Just opacity changes */ 
}

/* Visible state - unified */
.slide-in-up.visible,
.slide-in-left.visible,
.slide-in-right.visible,
.fade-zoom.visible,
.fade-in.visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Animation delays for staggered effects */
.delay-100 { 
    transition-delay: 0.1s; 
}

.delay-200 { 
    transition-delay: 0.2s; 
}

.delay-300 { 
    transition-delay: 0.3s; 
}

.delay-400 { 
    transition-delay: 0.4s; 
}

.delay-500 { 
    transition-delay: 0.5s; 
}

.larger-bullets {
	list-style: none;
}
  
.larger-bullets li {
	position: relative;
	padding-left: 2rem;
}
  
.larger-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 1.5rem; /* Adjust this size as needed */
    color: #000; /* You can change bullet color here */
    line-height: 1.2;
}

.bg-custom-blue {
  background-color: #0094FF;
}

.text-custom-blue {
  color: #0094FF;
}

/* Chat widget sizing + theme */
:root {
  --chat--window--width: 400px;
  --chat--window--height: 640px;
  --chat--toggle--size: 60px;

  /* Core brand colors */
  --chat--color-primary: #2563eb; /* keep the default blue for system accents */
  --chat--header--background: #0094FF; /* header bar color */
  --chat--header--color: #e2e8f0;
  --chat--message--user--background: #0094FF;  /* user's messages (your request) */

  /* Toggle (floating chat bubble) */
  --chat--toggle--background: #0094FF;         /* CLOSED state = green */
  /* Some builds of @n8n/chat read hover/active vars; include them for compatibility */
  --chat--toggle--background--hover: #2563eb;  /* HOVER = blue */
  --chat--toggle--background--active: #2563eb; /* OPEN = blue */

  /* Tighten header spacing and subtitle leading */
  --chat--header--padding: 6px;
  --chat--heading--font-size: 1.25rem;
  --chat--subtitle--font-size: 0.95rem;
  --chat--subtitle--line-height: 1.1;
}

/* Apply Poppins inside the chat */
#n8n-chat * {
  font-family: 'Poppins', sans-serif !important;
}

/* Ensure chat sits on top */
#n8n-chat { position: relative; z-index: 10; }

/* ---------- Robust toggle styling fallbacks ---------- */
/* Hover: force blue even if variables aren’t picked up */
#n8n-chat .chat-toggle:hover,
#n8n-chat button[aria-label="Open chat"]:hover,
#n8n-chat button[aria-label="Close chat"]:hover {
  background-color: #2563eb !important;
}

/* Open state: force blue across common open markers */
#n8n-chat.chat--open .chat-toggle,
#n8n-chat[data-state="open"] .chat-toggle,
#n8n-chat[aria-expanded="true"] .chat-toggle {
  background-color: #2563eb !important;
}

/* If the container exposes open state as attribute/class, switch the variable too */
#n8n-chat.chat--open,
#n8n-chat[data-state="open"],
#n8n-chat[aria-expanded="true"] {
  --chat--toggle--background: #2563eb;
}