/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "tailwind/application";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap");

/* Glass Theme Variables and Global Styles */
:root {
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;

  --c-content: #222244;
  --c-action: #0052f5;

  --c-bg: #ffffff;

  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;

  --saturation: 150%;

  font-size: 20px;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  background: var(--c-bg);
  color: var(--c-content);

  transition: background 400ms cubic-bezier(1, 0, 0.4, 1),
    color 400ms cubic-bezier(1, 0, 0.4, 1);
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Navbar Glass Styles */
.navbar-container {
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 16px;
  margin: 16px auto 8px auto;
  max-width: 1440px;
  width: 100%;
  overflow: visible;
  transition: all 0.3s ease;
}

/* Scrolled navbar state - glass morphism effect */
.navbar-scrolled .navbar-container {
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(4px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(4px) saturate(var(--saturation));
  border-radius: 16px;
  padding: 0 16px;
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 1px 5px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 6px 16px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
}


/* Medium screen navbar margins */
@media (min-width: 601px) and (max-width: 766px) {
  .navbar-container {
    margin: 18px 16px 8px 16px;
  }
}

@media (min-width: 1440px) {
  .navbar-container {
    margin: 28px auto 8px auto;
    max-width: 1400px;
  }
}

/* Logo sizing and transitions */
.navbar-logo {
  height: 100px;
  width: auto;
  transition: all 0.3s ease;
}

.navbar-scrolled .navbar-logo {
  height: 70px;
}

/* Navbar Glass Button */
.navbar-button {
  padding: 6px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 99em;
  cursor: pointer;
  color: #1f2937 !important;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 1px 5px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 6px 16px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    transform 300ms cubic-bezier(1, 0, 0.4, 1);
}

.navbar-button:hover {
  background-color: color-mix(in srgb, var(--c-glass) 20%, transparent);
  transform: scale(1.02);
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 15%),
        transparent
      ),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 2px 8px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 15%),
        transparent
      ),
    0px 8px 20px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      );
}

/* Special depth effect for Contact Us button when navbar is scrolled */
.navbar-scrolled .navbar-button {
  background-color: color-mix(in srgb, var(--c-glass) 28%, transparent);
  transform: translateY(1px);
  transition: background-color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 8%),
        transparent
      ),
    inset 1.5px 0.5px 0px -0.5px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 85%), transparent),
    inset -1px -0.5px 0px -0.5px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 75%), transparent),
    inset -1.5px -4px 0.5px -3px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 55%), transparent),
    inset -0.5px 1.5px 2px -0.5px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 18%),
        transparent
      ),
    inset 0px -3px 0.5px -1.5px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      ),
    0px 2px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 6%),
        transparent
      ),
    0px 1px 2px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 4%),
        transparent
      );
}

/* Schedule a Demo Button */
.schedule-demo-button {
  padding: 12px 24px;
  border: none;
  border-radius: 99em;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme-aware text color for navbar links */
.text-content {
  color: var(--c-content);
}

/* Glass Effect Base Class */
.glass-effect {
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(4px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(4px) saturate(var(--saturation));
  border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent);
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 1px 5px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 6px 16px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    transform 300ms cubic-bezier(1, 0, 0.4, 1);
}

.glass-effect:hover {
  background-color: color-mix(in srgb, var(--c-glass) 20%, transparent);
  transform: scale(1.02);
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 15%),
        transparent
      ),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 2px 8px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 15%),
        transparent
      ),
    0px 8px 20px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      );
}

/* Service Cards with Glass Effect */
.service-card {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  background-color: color-mix(in srgb, var(--c-glass) 25%, transparent);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 15%),
        transparent
      ),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 4px 12px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 15%),
        transparent
      ),
    0px 8px 24px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      );
}

/* Achievement Cards with Glass Effect */
.achievement-card {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-card:hover {
  background-color: color-mix(in srgb, var(--c-glass) 20%, transparent);
  transform: translateY(-1px);
}

/* Scroll Arrow Button with Glass Effect */
.scroll-arrow-button {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-arrow-button:hover {
  background-color: color-mix(in srgb, var(--c-glass) 25%, transparent);
  transform: translateY(-2px);
}

/* Strong Button Style for Primary CTA */
.schedule-demo-button-strong {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: white !important;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.schedule-demo-button-strong:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

/* Yellow Button Style for Primary CTA */
.schedule-demo-button-yellow {
  background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%);
  color: #000000 !important;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(253, 224, 71, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.schedule-demo-button-yellow:hover {
  background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(253, 224, 71, 0.6);
}

/* Subtle Left/Right Shadows for Wide Screens */
@media (min-width: 1441px) {
  .max-w-\[1440px\] {
    box-shadow: 
      -20px 0 40px rgba(0, 0, 0, 0.08),
      20px 0 40px rgba(0, 0, 0, 0.08);
  }
}

/* Embla Carousel Styles */
.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
}

.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
}

/* Hero Content Width - Remove full width for tablet, 55% for desktop */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero-content-width {
    width: auto !important;
  }
}

@media (min-width: 1280px) {
  .hero-content-width {
    width: 55% !important;
  }
}

.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) and (max-width: 1279px) {
  .cta-section {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .cta-section {
    width: 60%;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .contact-section {
    padding-top: 50px;
  }
}

@media (min-width: 1280px) {
  .contact-section {
    padding-top: 150px;
  }
}