/* Base Layout */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #1a1a1a;
  line-height: 1.6;
  transition: background-color 0.4s ease, color 0.4s ease; /* Smoother transitions */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem; /* Slightly reduced padding */
}

/* Animations & Transitions */
.cta-button,
.partner-login,
.theme-toggle,
.service-item,
.contact-card,
button[type="submit"],
.dropdown-options div,
.nav-links a, /* Added for desktop links */
.mobile-nav-content a, /* Added for mobile links */
.mobile-nav-content button /* Added for mobile buttons */ {
  transition: all 0.3s ease-in-out; /* Unified smoother transitions */
}

/* Navigation Styles */
.glass-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.8); /* Slightly more opaque */
  backdrop-filter: blur(15px); /* Stronger blur */
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* More prominent shadow */
  padding: 1rem 2rem;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex-wrap: nowrap; No need to explicitly prevent wrap here, media queries handle it */
}

.logo {
  font-size: 1.8rem;
  font-weight: 800; /* Bolder logo */
  color: #1a1a1a; /* Ensure color in light mode */
  flex-shrink: 0; /* Prevent logo from shrinking */
}

.logo span:first-child {
  font-weight: 800;
}

/* --- Desktop Navigation Links & Buttons --- */
.nav-links { /* This is the main navigation visible on desktop */
  display: flex;
  align-items: center;
  gap: 2rem; /* Increased gap */
  font-weight: 600; /* Bolder links */
  flex-grow: 1; /* Allow nav links to take available space */
  justify-content: center; /* Center links on desktop */
}

.nav-links a {
  text-decoration: none;
  color: #475569; /* Softer link color */
  position: relative; /* For underline effect */
  padding-bottom: 0.25rem; /* Space for underline */
  white-space: nowrap; /* Prevent links from wrapping */
}

.nav-links a:hover {
  color: #2563eb;
}

/* Underline effect on hover */
.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #2563eb;
  transition: width 0.3s ease-in-out;
}

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

/* Desktop-only buttons container */
.nav-buttons-desktop {
  display: flex; /* Show by default on desktop */
  gap: 0.75rem;
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

/* Theme toggle and partner login general styles */
.theme-toggle,
.partner-login {
  background-color: #2563eb;
  color: white;
  padding: 0.6rem 1.2rem; /* Slightly larger buttons */
  border: none;
  border-radius: 8px; /* Softer corners */
  font-size: 15px; /* Slightly larger font */
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.theme-toggle:hover,
.partner-login:hover {
  background-color: #1e40af;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
  transform: translateY(-2px); /* Slight lift on hover */
}


/* --- Mobile Navigation Setup --- */

/* Hide desktop nav elements on mobile */
.mobile-menu-container {
  display: none; /* Hidden by default, shown via media query */
}

.hamburger {
  display: none; /* Hidden by default, shown via media query */
  font-size: 2rem;
  background: none;
  border: none;
  color: #1e293b;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001; /* Ensure hamburger is above other content */
}

.mobile-nav-content {
  position: absolute;
  top: 100%; /* Position right below the navbar */
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98); /* Near opaque background */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Prominent shadow */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  padding: 0; /* No initial padding */
  max-height: 0; /* Hidden by default */
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth slide transition */
  z-index: 999; /* Below hamburger, above other content */
}

.mobile-nav-content.active {
  max-height: 500px; /* Adjust as needed to fit all content */
  padding: 1.5rem 2rem 2rem; /* Add padding when active */
}

.mobile-nav-content a,
.mobile-nav-content button {
  display: block; /* Make links/buttons take full width */
  width: calc(100% - 2rem); /* Account for padding */
  text-align: center;
  padding: 0.8rem 1rem;
  margin-bottom: 0.5rem; /* Space between items */
  border-radius: 8px; /* Consistent rounded corners */
}

.mobile-nav-content a {
  text-decoration: none;
  color: #1e293b;
  font-weight: 600;
}

.mobile-nav-content a:hover {
  background-color: #e0e7ff;
  color: #2563eb;
}

/* Specific styling for the theme toggle and partner login inside mobile menu */
.mobile-nav-content .theme-toggle,
.mobile-nav-content .partner-login {
  margin-top: 1rem; /* More space above buttons */
  background-color: #2563eb;
  color: white;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-nav-content .theme-toggle:hover,
.mobile-nav-content .partner-login:hover {
  background-color: #1e40af;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Add a subtle line between links and buttons in mobile menu */
.mobile-nav-content .theme-toggle:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}


/* --- Media Queries for Responsive Behavior --- */
@media (max-width: 900px) { /* Adjusted breakpoint for narrower desktop screens */
  /* Hide desktop nav links and buttons */
  .nav-links,
  .nav-buttons-desktop {
    display: none;
  }

  /* Show mobile menu container and hamburger */
  .mobile-menu-container {
    display: block; /* Show the container for mobile menu */
  }

  .hamburger {
    display: block; /* Show hamburger button */
  }
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensure video doesn't overflow */
  color: white; /* Default text color for hero */
  text-align: center;
}

.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -1; /* Send video to background */
  object-fit: cover; /* Ensure video covers the area */
  filter: brightness(0.6) grayscale(0.2); /* Slightly darken and desaturate video for better text readability */
}

.hero-content-overlay {
  position: relative;
  z-index: 1; /* Bring content to front */
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background for text readability */
  border-radius: 12px; /* Rounded corners for overlay */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth */
  max-width: 800px;
  margin: 0 auto;
}

.hero h2 {
  font-size: 4rem; /* Larger heading */
  margin-bottom: 1rem;
  line-height: 1.1;
  font-weight: 800; /* Extra bold */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); /* Text shadow for pop */
}

.hero p {
  font-size: 1.5rem; /* Larger paragraph */
  margin-bottom: 2.5rem;
  font-weight: 400;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.cta-button {
  background-color: white;
  color: #2563eb;
  padding: 1rem 2.2rem; /* Larger padding */
  border-radius: 8px; /* More rounded */
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem; /* Larger font */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Shadow for button */
}

.cta-button:hover {
  background-color: #e0e7ff; /* Lighter blue on hover */
  transform: translateY(-3px); /* More pronounced lift */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Services Section */
.services {
  background-color: #f8fafc; /* Lighter background for subtle contrast */
  padding: 5rem 2rem; /* More vertical padding */
}

.services h2 {
  text-align: center;
  font-size: 2.8rem; /* Larger heading */
  margin-bottom: 3rem; /* More space below heading */
  font-weight: 700;
  color: #1a1a1a;
}

.service-grid {
  display: grid; /* Use grid for better control */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
  gap: 2rem;
  justify-content: center;
}

.service-item {
  background-color: white;
  border-radius: 12px; /* More rounded corners */
  padding: 2.5rem; /* More padding */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* More prominent shadow */
  text-align: center;
  border: 1px solid #e2e8f0; /* Subtle border */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.service-item:hover {
  transform: translateY(-5px); /* Lift on hover */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); /* Stronger shadow on hover */
}

.service-item h3 {
  font-size: 1.8rem; /* Larger service title */
  margin-bottom: 1rem;
  color: #2563eb;
  font-weight: 700;
}

.service-item p {
  font-size: 1.05rem; /* Slightly larger text */
  color: #475569;
}

/* Contact Section */
.contact {
  padding: 5rem 2rem; /* More vertical padding */
  background-color: #ffffff;
}

.section-heading {
  text-align: center;
  font-size: 2.8rem; /* Consistent heading size */
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}

.subtext {
  text-align: center;
  font-size: 1.1rem; /* Slightly larger subtext */
  color: #64748b;
  max-width: 700px;
  margin: 0 auto 3rem auto; /* Center and add more bottom margin */
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem; /* Increased gap */
  justify-content: center; /* Center align items */
  align-items: flex-start;
  margin-top: 2rem;
}

.contact-cards {
  flex: 1 1 45%; /* Adjusted flex basis */
  max-width: 500px; /* Limit max width */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted minmax */
  gap: 1.5rem;
}

.contact-card {
  background-color: #f1f5f9;
  border-radius: 12px; /* More rounded */
  padding: 2rem; /* More padding */
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* More prominent shadow */
  border: 1px solid #e2e8f0; /* Subtle border */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
}

.contact-card:hover {
  transform: translateY(-3px); /* Lift on hover */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Stronger shadow on hover */
}

.contact-card h4 {
  margin-bottom: 0.75rem; /* More space */
  font-size: 1.25rem; /* Larger heading */
  font-weight: 700; /* Bolder */
  color: #2563eb;
}

.contact-card p {
  margin: 0;
  font-size: 1rem; /* Slightly larger text */
  color: #475569;
}

/* Quote Form Column */
.contact-form {
  flex: 1 1 45%; /* Adjusted flex basis */
  max-width: 500px; /* Limit max width */
  background-color: #f9fafb;
  padding: 2.5rem; /* More padding */
  border-radius: 12px; /* More rounded */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* More prominent shadow */
  border: 1px solid #e2e8f0; /* Subtle border */
}

.contact-form h3 {
  margin-bottom: 0.75rem;
  font-size: 1.8rem; /* Larger heading */
  font-weight: 700;
  color: #1a1a1a;
}

.contact-form p {
  font-size: 1rem; /* Slightly larger text */
  margin-bottom: 2rem; /* More space */
  color: #4b5563;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Increased gap between elements */
}

input,
textarea {
  padding: 1rem; /* More padding */
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px; /* More rounded */
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Inner shadow */
}

input:focus,
textarea:focus,
.custom-dropdown.open .dropdown-selected { /* Added dropdown open state */
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); /* Focus ring */
}

label {
  font-size: 0.95rem; /* Slightly smaller label */
  color: #475569;
  margin-bottom: -0.5rem; /* Pull label closer to input */
  font-weight: 600;
}

.form-row {
  display: flex;
  gap: 1.25rem; /* Consistent gap */
}

.form-row input {
  flex: 1;
}

button[type="submit"] {
  background-color: #2563eb;
  color: white;
  font-weight: bold;
  padding: 1rem; /* More padding */
  border: none;
  border-radius: 8px; /* More rounded */
  cursor: pointer;
  font-size: 1.1rem; /* Larger font */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Shadow */
}

button[type="submit"]:hover {
  background-color: #1e40af;
  transform: translateY(-2px); /* Lift on hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-bottom: 1.25rem; /* Consistent gap */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dropdown-selected {
  padding: 1rem; /* More padding */
  border-radius: 8px;
  color: #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-selected::after {
  content: '▼'; /* Custom arrow */
  font-size: 0.7em;
  color: #64748b;
  transition: transform 0.3s ease;
}

.custom-dropdown.open .dropdown-selected::after {
  transform: rotate(180deg); /* Rotate arrow when open */
}

.dropdown-options {
  display: none;
  position: absolute;
  top: calc(100% + 5px); /* Position slightly below */
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Stronger shadow */
  z-index: 10;
  max-height: 250px; /* Slightly taller */
  overflow-y: auto;
}

.dropdown-options div {
  padding: 0.75rem 1rem; /* Adjusted padding */
  color: #0f172a;
}

.dropdown-options div:hover {
  background-color: #e0e7ff; /* Lighter blue on hover */
  color: #2563eb;
}

/* Open state */
.custom-dropdown.open .dropdown-options {
  display: block;
}

/* Footer */
footer {
  background-color: #f1f5f9; /* Consistent light background */
  text-align: center;
  padding: 1.5rem; /* More padding */
  font-size: 0.9rem;
  color: #64748b;
  border-top: 1px solid #e2e8f0; /* Subtle top border */
}

/* Dark Mode Overrides */
.dark-mode {
  background-color: #0f172a;
  color: #f8fafc;
}

.dark-mode .glass-navbar {
  background: rgba(15, 23, 42, 0.75); /* Slightly less transparent */
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

.dark-mode .logo {
  color: #f8fafc;
}

/* Desktop nav links dark mode */
.dark-mode .nav-links a {
  color: #cbd5e1; /* Lighter grey for links */
}

.dark-mode .nav-links a:hover {
  color: #3b82f6;
}

.dark-mode .nav-links a::after {
  background-color: #3b82f6;
}

/* Desktop buttons dark mode */
.dark-mode .nav-buttons-desktop .theme-toggle,
.dark-mode .nav-buttons-desktop .partner-login {
  background-color: #334155; /* Darker blue for buttons */
  color: #f8fafc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .nav-buttons-desktop .theme-toggle:hover,
.dark-mode .nav-buttons-desktop .partner-login:hover {
  background-color: #475569;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .hamburger {
  color: #f8fafc;
}

/* Dark mode for mobile menu content */
.dark-mode .mobile-nav-content {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.05);
}

.dark-mode .mobile-nav-content a {
  color: #f1f5f9;
}

.dark-mode .mobile-nav-content a:hover {
  background-color: #2d3b4f;
  color: #f8fafc;
}

.dark-mode .mobile-nav-content .theme-toggle,
.dark-mode .mobile-nav-content .partner-login {
  background-color: #3b82f6;
  color: white;
}

.dark-mode .mobile-nav-content .theme-toggle:hover,
.dark-mode .mobile-nav-content .partner-login:hover {
  background-color: #2563eb;
}

.dark-mode .mobile-nav-content .theme-toggle:first-of-type {
  border-top-color: rgba(255, 255, 255, 0.2);
}


/* Dark mode hero */
.dark-mode .hero-content-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Slightly darker overlay for consistency */
}

.dark-mode .cta-button {
  background-color: #3b82f6; /* Brighter blue for CTA in dark mode */
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.dark-mode .cta-button:hover {
  background-color: #2563eb;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

/* Dark mode services */
.dark-mode .services {
  background-color: #1e293b;
}

.dark-mode .services h2 {
  color: #f8fafc;
}

.dark-mode .service-item {
  background-color: #2d3b4f; /* Darker background */
  color: #f1f5f9;
  border-color: #3e4f6a;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.dark-mode .service-item:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.dark-mode .service-item h3 {
  color: #60a5fa; /* Lighter blue for titles */
}

.dark-mode .service-item p {
  color: #cbd5e1;
}

/* Dark mode contact */
.dark-mode .contact {
  background-color: #0f172a;
}

.dark-mode .section-heading {
  color: #f8fafc;
}

.dark-mode .subtext {
  color: #cbd5e1;
}

.dark-mode .contact-card {
  background-color: #1e293b;
  color: #f8fafc;
  border-color: #3e4f6a;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dark-mode .contact-card h4 {
  color: #60a5fa;
}

.dark-mode .contact-card p {
  color: #cbd5e1;
}

.dark-mode .contact-form {
  background-color: #1e293b;
  color: #f8fafc;
  border-color: #3e4f6a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dark-mode .contact-form h3 {
  color: #f8fafc;
}

.dark-mode .contact-form p {
  color: #cbd5e1;
}

.dark-mode input,
.dark-mode textarea {
  background-color: #2d3b4f;
  color: #f8fafc;
  border-color: #475569;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode .custom-dropdown.open .dropdown-selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.dark-mode label {
  color: #cbd5e1;
}

.dark-mode button[type="submit"] {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.dark-mode button[type="submit"]:hover {
  background-color: #2563eb;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

.dark-mode .custom-dropdown {
  background-color: #2d3b4f;
  border-color: #475569;
  color: #f8fafc;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .dropdown-selected::after {
  color: #cbd5e1;
}

.dark-mode .dropdown-options {
  background-color: #2d3b4f;
  border-color: #475569;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.dark-mode .dropdown-options div {
  color: #f8fafc;
}

.dark-mode .dropdown-options div:hover {
  background-color: #3e4f6a;
  color: #f8fafc;
}

/* Dark mode footer */
.dark-mode footer {
  background-color: #1e293b;
  color: #cbd5e1;
  border-top-color: #3e4f6a;
}




/* picture for video */


@media (max-width: 768px) {
  .background-video {
    display: none; /* Hide video on small screens */
  }
  .hero {
    background-image: url('assets/loop1.png'); /* Static image fallback */
    background-size: cover;
    background-position: center;
  }
  .hero-content-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Keep overlay for readability */
  }
}



/* General responsive adjustments */
@media (max-width: 992px) {
  .hero h2 {
    font-size: 3rem;
  }
  .hero p {
    font-size: 1.25rem;
  }
  .section-heading {
    font-size: 2.2rem;
  }
  .services h2 {
    font-size: 2.2rem;
  }
  .service-item h3 {
    font-size: 1.5rem;
  }
  .contact-grid {
    flex-direction: column;
    align-items: center;
  }
  .contact-cards,
  .contact-form {
    flex: 1 1 100%;
    max-width: 600px; /* Limit width on smaller screens */
  }
}





@media (max-width: 576px) {
  .container {
    padding: 1.5rem;
  }
  .hero h2 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .cta-button {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
  }
  .section-heading {
    font-size: 1.8rem;
  }
  .subtext {
    font-size: 0.95rem;
  }
  .service-item {
    padding: 2rem;
  }
  .service-item h3 {
    font-size: 1.3rem;
  }
  .contact-form {
    padding: 2rem;
  }
  .contact-form h3 {
    font-size: 1.5rem;
  }
  .form-row {
    flex-direction: column;
    gap: 1rem;
  }
}