/* Custom styles for Logus website - Dark Theme */

/* Dark theme color variables */
:root {
  --dark-bg-primary: #1a1a1a;
  --dark-bg-secondary: #2d2d2d;
  --dark-bg-tertiary: #3a3a3a;
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #d3d3d3;
  --dark-text-muted: #888888;
  --dark-border: #404040;
  --dark-accent: #007bff;
  --dark-accent-hover: #0056b3;
  --dark-shadow: rgba(0, 0, 0, 0.3);
  
  /* Logus Brand Colors - Primary */
  --logus-green: #a0cb34;
  --logus-teal: #23b195;
  --logus-purple: #b9519b;
  
  /* Logus Brand Colors - Secondary */
  --logus-green-dark: #6c9128;
  --logus-teal-dark: #066352;
  --logus-purple-dark: #70225c;
  
  /* Logus Brand Color Variations */
  --logus-green-light: rgba(160, 203, 52, 0.1);
  --logus-teal-light: rgba(35, 177, 149, 0.1);
  --logus-purple-light: rgba(185, 81, 155, 0.1);
}

/* Optional: Add smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 36px; 
}

/* Apply dark theme to body */
body {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  padding-top: 56px;
}

/* Dark theme for headings */
h1 {
  color: var(--dark-text-primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 900 !important;
}

h2, h3, h4, h5, h6 {
  color: var(--dark-text-primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600 !important;
  font-size: 1.7rem;
}

h3, h4, h5, h6 {
  font-size: 1.3rem;
}

/* Dark theme for paragraphs */
p {
  color: var(--dark-text-secondary);
}

/* Dark theme for links */
a {
  color: var(--logus-teal);
}

a:hover {
  color: var(--logus-teal-dark);
}

/* Dark theme for dropdown menus */
.dropdown-menu {
  background-color: var(--dark-bg-tertiary);
  border: 1px solid var(--dark-border);
}

.dropdown-item {
  color: var(--dark-text-primary);
}

.dropdown-item:hover {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* Dark theme for main content sections */
.bg-light {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

.bg-dark {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

.bg-gradient {
  background: linear-gradient(135deg, var(--logus-green) 0%, var(--logus-teal) 50%, var(--logus-purple) 100%) !important;
  color: var(--dark-text-primary) !important;
}

/* Logus Brand Color Utility Classes */
.logus-green { color: var(--logus-green) !important; }
.logus-teal { color: var(--logus-teal) !important; }
.logus-purple { color: var(--logus-purple) !important; }

.bg-logus-green { background-color: var(--logus-green) !important; }
.bg-logus-teal { background-color: var(--logus-teal) !important; }
.bg-logus-purple { background-color: var(--logus-purple) !important; }

.bg-logus-green-dark { background-color: var(--logus-green-dark) !important; }
.bg-logus-teal-dark { background-color: var(--logus-teal-dark) !important; }
.bg-logus-purple-dark { background-color: var(--logus-purple-dark) !important; }

.bg-logus-green-light { background-color: var(--logus-green-light) !important; }
.bg-logus-teal-light { background-color: var(--logus-teal-light) !important; }
.bg-logus-purple-light { background-color: var(--logus-purple-light) !important; }

.border-logus-green { border-color: var(--logus-green) !important; }
.border-logus-teal { border-color: var(--logus-teal) !important; }
.border-logus-purple { border-color: var(--logus-purple) !important; }

.shadow-logus-green { box-shadow: 0 4px 8px var(--logus-green-light) !important; }
.shadow-logus-teal { box-shadow: 0 4px 8px var(--logus-teal-light) !important; }
.shadow-logus-purple { box-shadow: 0 4px 8px var(--logus-purple-light) !important; }

/* Dark theme for cards */
.card {
  background-color: var(--dark-bg-tertiary);
  border: 1px solid var(--dark-border);
  color: var(--dark-text-primary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.card p {
  text-align: left;
}

.card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8), 0 0 0 2px var(--logus-green-dark) !important;
  transform: translateY(-2px) scale(1.01);
  border-color: var(--logus-green) !important;
  background-color: var(--dark-bg-secondary) !important;
}

/* Dark theme for buttons */
.btn-primary {
  background-color: var(--logus-green);
  border-color: var(--logus-green);
  color: white;
}

.btn-primary:hover {
  background-color: var(--logus-green-dark);
  border-color: var(--logus-green-dark);
  color: white;
}

/* Logus Brand Button Variants */
.btn-logus-green {
  background-color: var(--logus-green);
  border-color: var(--logus-green);
  color: white;
}

.btn-logus-green:hover {
  background-color: var(--logus-green-dark);
  border-color: var(--logus-green-dark);
  color: white;
}

.btn-logus-purple {
  background-color: var(--logus-purple);
  border-color: var(--logus-purple);
  color: white;
}

.btn-logus-purple:hover {
  background-color: var(--logus-purple-dark);
  border-color: var(--logus-purple-dark);
  color: white;
}

/* Dark theme for text elements */
.text-muted {
  color: var(--dark-text-muted) !important;
}

/* Ensure navbar stays on top with proper z-index */
.navbar.fixed-top {
  z-index: 1030; /* Bootstrap's default z-index for fixed elements */
  box-shadow: 0 2px 4px var(--dark-shadow);
  transition: all 0.3s ease;
}

/* Navbar scroll state - turns teal with dark text */
.navbar-scrolled {
  background-color: var(--logus-green-dark) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.navbar-scrolled .navbar-brand,
.navbar-scrolled .nav-link,
.navbar-scrolled .dropdown-toggle {
  color: var(--dark-bg-primary) !important;
  /* filter: grayscale(0.8); */
}

.navbar-scrolled .navbar-brand:hover,
.navbar-scrolled .nav-link:hover,
.navbar-scrolled .dropdown-toggle:hover {
  color: var(--dark-text-secondary) !important;
}

.navbar-scrolled .dropdown-menu {
  background-color: var(--dark-bg-tertiary);
  border: 1px solid var(--logus-green-dark);
}

.navbar-scrolled .dropdown-item {
  color: var(--dark-text-primary);
}

.navbar-scrolled .dropdown-item:hover {
  background-color: var(--logus-teal-light);
  color: var(--dark-text-primary);
}

/* Dark theme for form elements */
.form-control {
  background-color: var(--dark-bg-tertiary);
  border: 1px solid var(--dark-border);
  color: var(--dark-text-primary);
}

.form-control:focus {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--logus-teal);
  color: var(--dark-text-primary);
  box-shadow: 0 0 0 0.2rem var(--logus-teal-light);
}

/* Dark theme for containers */
.container {
  background-color: transparent;
}

/* Dark theme for sections */
section {
  background-color: transparent;
}

/* Dark theme for shadows */
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem var(--dark-shadow) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem var(--dark-shadow) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem var(--dark-shadow) !important;
}

.framer-text[data-text-fill] {
  display: inline-block;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.main-cont-title {
  font-size: 3.5rem;
}

.main-cont-img {
  max-height: 420px;
}

@media (min-width: 769px) and (max-width: 992px) {
  .main-cont-title {
    font-size: 2.5rem;
  }
}

/* Mobile card spacing */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1.5rem;
  }
  
  .row .col-md-4:last-child .card {
    margin-bottom: 0;
  }

  .main-cont-img {
    max-height: 340px;
  }

  .ai-transf {
    max-width: 65vw;
    height: auto;
  }
}