/* CSS Variables for Theme Support */


:root {


  /* Light Theme Colors */


  --background: 0 0% 100%;


  --foreground: 240 10% 3.9%;


  --card: 0 0% 100%;


  --card-foreground: 240 10% 3.9%;


  --popover: 0 0% 100%;


  --popover-foreground: 240 10% 3.9%;


  --primary: 217 91% 60%;


  --primary-foreground: 210 40% 98%;


  --secondary: 240 4.8% 95.9%;


  --secondary-foreground: 240 5.9% 10%;


  --muted: 240 4.8% 95.9%;


  --muted-foreground: 240 3.8% 46.1%;


  --accent: 198 93% 60%;


  --accent-foreground: 240 5.9% 10%;


  --destructive: 0 84.2% 60.2%;


  --destructive-foreground: 210 40% 98%;


  --border: 240 5.9% 90%;


  --input: 240 5.9% 90%;


  --ring: 217 91% 60%;


  --radius: 0.8rem;


  --chart-1: 217 91% 60%;


  --chart-2: 198 93% 60%;


  --chart-3: 170 80% 50%;


  --chart-4: 280 80% 65%;


  --chart-5: 340 85% 65%;


  --sidebar-background: 240 4.8% 95.9%;


  --sidebar-foreground: 240 10% 3.9%;


  --sidebar-primary: 217 91% 60%;


  --sidebar-primary-foreground: 210 40% 98%;


  --sidebar-accent: 0 0% 100%;


  --sidebar-accent-foreground: 240 5.9% 10%;


  --sidebar-border: 240 5.9% 90%;


  --sidebar-ring: 217 91% 60%;


}





.dark-theme {


  /* Dark Theme Colors */


  --background: 222 84% 4%;


  --foreground: 210 40% 98%;


  --card: 222 84% 4.9%;


  --card-foreground: 210 40% 98%;


  --popover: 222 84% 4.9%;


  --popover-foreground: 210 40% 98%;


  --primary: 217 91% 60%;


  --primary-foreground: 223 47% 11%;


  --secondary: 217 33% 17%;


  --secondary-foreground: 210 40% 98%;


  --muted: 217 33% 17%;


  --muted-foreground: 215 20% 65%;


  --accent: 198 93% 60%;


  --accent-foreground: 223 47% 11%;


  --destructive: 0 63% 31%;


  --destructive-foreground: 210 40% 98%;


  --border: 217 33% 17%;


  --input: 217 33% 17%;


  --ring: 217 91% 60%;


  --chart-1: 217 91% 60%;


  --chart-2: 198 93% 60%;


  --chart-3: 170 80% 50%;


  --chart-4: 280 80% 65%;


  --chart-5: 340 85% 65%;


  --sidebar-background: 222 84% 4%;


  --sidebar-foreground: 210 40% 98%;


  --sidebar-primary: 217 91% 60%;


  --sidebar-primary-foreground: 223 47% 11%;


  --sidebar-accent: 217 33% 17%;


  --sidebar-accent-foreground: 210 40% 98%;


  --sidebar-border: 217 33% 17%;


  --sidebar-ring: 217 91% 60%;


}





/* Base Styles */


* {


  margin: 0;


  padding: 0;


  box-sizing: border-box;


}





/* Prevent horizontal scroll */


html, body {


  overflow-x: hidden;


  width: 100%;


  max-width: 100vw;


}





body {


  font-family: 'Inter', sans-serif;


  background-color: hsl(var(--background));


  color: hsl(var(--foreground));


  line-height: 1.6;


  transition: background-color 0.3s ease, color 0.3s ease;


  overflow-x: hidden;


  width: 100%;


}





/* Typography */


.font-headline {


  font-family: 'Space Grotesk', sans-serif;


}





/* Container */


.container {


  max-width: 1200px;


  margin: 0 auto;


  padding: 0 1rem;


  overflow-x: hidden;


  width: 100%;


}





@media (min-width: 768px) {


  .container {


    padding: 0 1.5rem;


  }


}





/* Header */


.header {


  position: sticky;


  top: 0;


  z-index: 50;


  width: 100%;


  transition: all 0.3s ease;


  background-color: transparent;


}





.header.scrolled {


  background-color: hsl(var(--background) / 0.8);


  backdrop-filter: blur(16px);


  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);


}





.header-content {


  display: flex;


  align-items: center;


  justify-content: space-between;


  height: 5rem;


}





.logo {


  display: flex;


  align-items: center;


  gap: 0.5rem;


  text-decoration: none;


  color: hsl(var(--primary));


  font-size: 1.5rem;


  font-weight: 700;


  font-family: 'Space Grotesk', sans-serif;


}





.logo i {


  font-size: 2rem;


}





/* Navigation */


.nav-desktop {


  display: none;


  align-items: center;


  gap: 1.5rem;


}





@media (min-width: 768px) {


  .nav-desktop {


    display: flex;


  }


}





.nav-desktop a {


  font-size: 0.875rem;


  font-weight: 500;


  color: hsl(var(--muted-foreground));


  text-decoration: none;


  transition: color 0.3s ease;


}





.nav-desktop a:hover {


  color: hsl(var(--primary));


}





/* Header Actions */


.header-actions {


  display: none;


  align-items: center;


  gap: 1rem;


}





@media (min-width: 768px) {


  .header-actions {


    display: flex;


  }


}





/* Buttons */


.btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 0.5rem;


  border-radius: 9999px;


  font-weight: 600;


  font-size: 0.875rem;


  padding: 0.75rem 1.5rem;


  border: none;


  cursor: pointer;


  text-decoration: none;


  transition: all 0.3s ease;


  font-family: inherit;


}





.btn-primary {


  background-color: hsl(var(--primary));


  color: hsl(var(--primary-foreground));


}





.btn-primary:hover {


  background-color: hsl(var(--primary) / 0.9);


  transform: translateY(-2px);


  box-shadow: 0 10px 25px -5px hsl(var(--primary) / 0.3);


}





.btn-outline {


  background-color: transparent;


  color: hsl(var(--primary));


  border: 2px solid hsl(var(--primary));


}





.btn-outline:hover {


  background-color: hsl(var(--primary));


  color: hsl(var(--primary-foreground));


}


/* Keep white outline style on dark hero background */


.hero .btn-outline {


  color: white;


  border-color: white;


}


.hero .btn-outline:hover {


  background-color: white;


  color: hsl(var(--primary));


}





.btn-large {


  padding: 1rem 2rem;


  font-size: 1.125rem;


}





/* Theme Toggle */


.theme-toggle {


  background: none;


  border: none;


  cursor: pointer;


  padding: 0.5rem;


  border-radius: 0.5rem;


  color: hsl(var(--muted-foreground));


  transition: all 0.3s ease;


}





.theme-toggle:hover {


  background-color: hsl(var(--muted));


  color: hsl(var(--foreground));


}





.theme-toggle .moon-icon {


  display: none;


}





.dark-theme .theme-toggle .sun-icon {


  display: none;


}





.dark-theme .theme-toggle .moon-icon {


  display: block;


}





/* Mobile Menu */


.mobile-menu-toggle {


  display: flex;


  flex-direction: column;


  gap: 4px;


  background: none;


  border: none;


  cursor: pointer;


  padding: 0.5rem;


}





@media (min-width: 768px) {


  .mobile-menu-toggle {


    display: none;


  }


}





.mobile-menu-toggle span {


  width: 24px;


  height: 2px;


  background-color: hsl(var(--foreground));


  transition: all 0.3s ease;


}





.mobile-menu {


  position: fixed;


  top: 0;


  right: -100%;


  width: 300px;


  height: 100vh;


  background-color: hsl(var(--background));


  border-left: 1px solid hsl(var(--border));


  transition: right 0.3s ease;


  z-index: 100;


  display: flex;


  flex-direction: column;


}





@media (min-width: 640px) {


  .mobile-menu {


    width: 400px;


  }


}





.mobile-menu.open {


  right: 0;


}





.mobile-menu-header {


  display: flex;


  justify-content: space-between;


  align-items: center;


  padding: 1.5rem;


  border-bottom: 1px solid hsl(var(--border));


}





.mobile-menu-close {


  background: none;


  border: none;


  font-size: 1.5rem;


  cursor: pointer;


  color: hsl(var(--muted-foreground));


}





.mobile-nav {


  display: flex;


  flex-direction: column;


  gap: 1.5rem;


  padding: 1.5rem;


  font-size: 1.125rem;


  font-weight: 500;


}





.mobile-nav a {


  color: hsl(var(--muted-foreground));


  text-decoration: none;


  transition: color 0.3s ease;


}





.mobile-nav a:hover {


  color: hsl(var(--primary));


}





.mobile-menu-actions {


  margin-top: auto;


  padding: 1.5rem;


}





/* Hero Section */


.hero {


  position: relative;


  width: 100%;


  height: 100vh;


  min-height: 700px;


  display: flex;


  align-items: center;


  justify-content: center;


  text-align: center;


  overflow: hidden;


}





.hero-background {


  position: absolute;


  inset: 0;


  background: linear-gradient(135deg, hsl(222 84% 4%) 0%, hsl(217 91% 60% / 0.2) 50%, hsl(198 93% 60% / 0.2) 100%);


}





.bg-element {


  position: absolute;


  border-radius: 50%;


  filter: blur(96px);


  opacity: 0.2;


  animation: pulse 4s ease-in-out infinite;


}





.bg-cyan {


  top: 5rem;


  left: 5rem;


  width: 18rem;


  height: 18rem;


  background-color: hsl(198 93% 60%);


  animation-delay: 0.5s;


  animation-duration: 4s;


}





.bg-blue {


  bottom: 5rem;


  right: 5rem;


  width: 24rem;


  height: 24rem;


  background-color: hsl(217 91% 60%);


  animation-delay: 1s;


  animation-duration: 5s;


}





.bg-emerald {


  top: 50%;


  left: 50%;


  transform: translate(-50%, -50%);


  width: 20rem;


  height: 20rem;


  background-color: hsl(170 80% 50%);


  animation-delay: 1.5s;


  animation-duration: 6s;


}





.hero-content {


  position: relative;


  z-index: 10;


  max-width: 800px;


  margin: 0 auto;


  padding: 0 1rem;


}





.hero-title {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 3rem;


  font-weight: 800;


  line-height: 1;


  letter-spacing: -0.025em;


  color: white;


  margin-bottom: 1.5rem;


}





@media (min-width: 640px) {


  .hero-title {


    font-size: 4.5rem;


  }


}





@media (min-width: 1280px) {


  .hero-title {


    font-size: 5rem;


  }


}





.hero-description {


  max-width: 700px;


  font-size: 1.125rem;


  color: hsl(0 0% 80%);


  margin-bottom: 2rem;


}





@media (min-width: 768px) {


  .hero-description {


    font-size: 1.25rem;


  }


}





.hero-buttons {


  display: flex;


  flex-direction: column;


  gap: 1rem;


  align-items: center;


}





@media (min-width: 400px) {


  .hero-buttons {


    flex-direction: row;


    justify-content: center;


  }


}





/* Small-screen refinements */


@media (max-width: 640px) {


  .hero {


    height: auto;


    min-height: 60vh;


    padding: 6rem 0 4rem;


  }


  .hero-title {


    font-size: 2.25rem;


  }


  .section-title {


    font-size: 2rem;


  }


  .section-description {


    font-size: 1rem;


  }


}





/* Sections */


section {


  padding: 5rem 0;


}





.section-header {


  text-align: center;


  margin-bottom: 4rem;


}





.section-title {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 2.5rem;


  font-weight: 700;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.section-description {


  font-size: 1.125rem;


  color: hsl(var(--muted-foreground));


  max-width: 600px;


  margin: 0 auto;


}





/* Services Section */


.services {


  background-color: hsl(var(--secondary));


}





.services-grid {


  display: grid;


  grid-template-columns: 1fr;


  gap: 2rem;


}





@media (min-width: 768px) {


  .services-grid {


    grid-template-columns: repeat(2, 1fr);


  }


}





@media (min-width: 1024px) {


  .services-grid {


    grid-template-columns: repeat(3, 1fr);


  }


}





.service-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  transition: all 0.3s ease;


}





.service-card:hover {


  transform: translateY(-8px);


  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);


}





.service-icon {


  width: 4rem;


  height: 4rem;


  margin: 0 auto 1.5rem;


  background-color: hsl(var(--primary) / 0.1);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--primary));


  font-size: 1.5rem;


}





.service-card h3 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 1.25rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.service-card p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





/* Features Section */


.features-grid {


  display: grid;


  grid-template-columns: 1fr;


  gap: 2rem;


}





@media (min-width: 768px) {


  .features-grid {


    grid-template-columns: repeat(2, 1fr);


  }


}





@media (min-width: 1024px) {


  .features-grid {


    grid-template-columns: repeat(3, 1fr);


  }


}





.feature-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  transition: all 0.3s ease;


}





.feature-card:hover {


  transform: translateY(-4px);


  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);


}





.feature-number {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 3rem;


  font-weight: 700;


  color: hsl(var(--primary) / 0.2);


  margin-bottom: 1rem;


}





.feature-card h3 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 1.25rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.feature-card p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





/* Team Section */


.team {


  background-color: hsl(var(--secondary));


}





.team-grid {


  display: grid;


  grid-template-columns: 1fr;


  gap: 2rem;


}





@media (min-width: 768px) {


  .team-grid {


    grid-template-columns: repeat(2, 1fr);


  }


}





@media (min-width: 1024px) {


  .team-grid {


    grid-template-columns: repeat(4, 1fr);


  }


}





.team-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  transition: all 0.3s ease;


}





.team-card:hover {


  transform: translateY(-8px);


  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);


}





.team-avatar {


  width: 6rem;


  height: 6rem;


  margin: 0 auto 1.5rem;


  background-color: hsl(var(--primary) / 0.1);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--primary));


  font-size: 2rem;


}





.team-card h3 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 1.25rem;


  font-weight: 600;


  margin-bottom: 0.5rem;


  color: hsl(var(--foreground));


}





.team-role {


  font-size: 0.875rem;


  font-weight: 500;


  color: hsl(var(--primary));


  margin-bottom: 1rem;


}





.team-description {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


  font-size: 0.875rem;


  margin-bottom: 1.5rem;


}





.team-social {


  display: flex;


  justify-content: center;


  gap: 1rem;


}





.team-social a {


  width: 2.5rem;


  height: 2.5rem;


  background-color: hsl(var(--muted));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--muted-foreground));


  text-decoration: none;


  transition: all 0.3s ease;


}





.team-social a:hover {


  background-color: hsl(var(--primary));


  color: hsl(var(--primary-foreground));


  transform: translateY(-2px);


}





/* Testimonials Section */


.testimonials {


  background-color: hsl(var(--secondary));


}





.testimonials-grid {


  display: grid;


  grid-template-columns: 1fr;


  gap: 2rem;


}





@media (min-width: 768px) {


  .testimonials-grid {


    grid-template-columns: repeat(2, 1fr);


  }


}





@media (min-width: 1024px) {


  .testimonials-grid {


    grid-template-columns: repeat(3, 1fr);


  }


}





.testimonial-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  transition: all 0.3s ease;


  position: relative;


}





.testimonial-card:hover {


  transform: translateY(-4px);


  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);


}





.testimonial-content {


  margin-bottom: 1.5rem;


  position: relative;


}





.quote-icon {


  position: absolute;


  top: -0.5rem;


  left: -0.5rem;


  font-size: 2rem;


  color: hsl(var(--primary) / 0.3);


}





.testimonial-content p {


  font-style: italic;


  color: hsl(var(--foreground));


  line-height: 1.6;


  padding-left: 1rem;


}





.testimonial-author {


  display: flex;


  align-items: center;


  gap: 1rem;


}





.author-avatar {


  width: 3rem;


  height: 3rem;


  background-color: hsl(var(--muted));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--muted-foreground));


  font-size: 1.25rem;


}





.author-info h4 {


  font-weight: 600;


  color: hsl(var(--foreground));


  margin-bottom: 0.25rem;


}





.author-info p {


  font-size: 0.875rem;


  color: hsl(var(--muted-foreground));


}





/* Location Section */


.location {


  background-color: hsl(var(--background));


}





.location-content {


  display: grid;


  grid-template-columns: 1fr;


  gap: 3rem;


  align-items: center;


  max-width: 100%;


  overflow-x: hidden;


}





@media (min-width: 768px) {


  .location-content {


    grid-template-columns: 1fr 1fr;


  }


}





.location-info {


  display: flex;


  flex-direction: column;


  gap: 2rem;


}





.location-item {


  display: flex;


  align-items: flex-start;


  gap: 1rem;


}





.location-icon {


  width: 3rem;


  height: 3rem;


  background-color: hsl(var(--primary) / 0.1);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--primary));


  font-size: 1.25rem;


  flex-shrink: 0;


}





.location-item h3 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 1.25rem;


  font-weight: 600;


  margin-bottom: 0.5rem;


  color: hsl(var(--foreground));


}





.location-item p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





.location-map {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  overflow: hidden;


  min-height: 400px;


}





#map {


  width: 100%;


  height: 400px;


  border-radius: var(--radius);


}





/* Contact Section */


.contact {


  background-color: hsl(var(--secondary));


}





.contact-content {


  display: grid;


  grid-template-columns: 1fr;


  gap: 3rem;


}





@media (min-width: 768px) {


  .contact-content {


    grid-template-columns: 1fr 1fr;


  }


}





.contact-info {


  display: flex;


  flex-direction: column;


  gap: 2rem;


}





.contact-item {


  display: flex;


  align-items: flex-start;


  gap: 1rem;


}





.contact-icon {


  width: 3rem;


  height: 3rem;


  background-color: hsl(var(--primary) / 0.1);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--primary));


  flex-shrink: 0;


  font-size: 1.25rem;


}





.contact-item h3 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 1.125rem;


  font-weight: 600;


  margin-bottom: 0.5rem;


  color: hsl(var(--foreground));


}





.contact-item p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





.social-links {


  display: flex;


  gap: 1rem;


  margin-top: 0.5rem;


}





.social-links a {


  width: 2.5rem;


  height: 2.5rem;


  background-color: hsl(var(--muted));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--muted-foreground));


  text-decoration: none;


  transition: all 0.3s ease;


}





.social-links a:hover {


  background-color: hsl(var(--primary));


  color: hsl(var(--primary-foreground));


  transform: translateY(-2px);


}





/* Contact Form */


.contact-form {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


}





.form-group {


  margin-bottom: 1.5rem;


}





.form-group label {


  display: flex;


  align-items: center;


  gap: 0.5rem;


  font-size: 0.875rem;


  font-weight: 500;


  margin-bottom: 0.5rem;


  color: hsl(var(--foreground));


}





.form-group label i {


  color: hsl(var(--primary));


}





.form-group input,


.form-group select,


.form-group textarea {


  width: 100%;


  padding: 0.75rem;


  border: 1px solid hsl(var(--border));


  border-radius: 0.5rem;


  background-color: hsl(var(--background));


  color: hsl(var(--foreground));


  font-family: inherit;


  font-size: 0.875rem;


  transition: border-color 0.3s ease;


}





.form-group input:focus,


.form-group select:focus,


.form-group textarea:focus {


  outline: none;


  border-color: hsl(var(--ring));


  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);


}





.form-group input.error,


.form-group select.error,


.form-group textarea.error {


  border-color: hsl(var(--destructive));


}





/* CTA Section */


.cta {


  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);


  color: white;


  text-align: center;


}





.cta-content h2 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 2.5rem;


  font-weight: 700;


  margin-bottom: 1rem;


}





.cta-content p {


  font-size: 1.125rem;


  margin-bottom: 2rem;


  opacity: 0.9;


}





/* Footer */


.footer {


  background-color: hsl(var(--card));


  border-top: 1px solid hsl(var(--border));


  padding: 3rem 0 1rem;


}





.footer-content {


  display: grid;


  grid-template-columns: 1fr;


  gap: 2rem;


  margin-bottom: 2rem;


}





@media (min-width: 768px) {


  .footer-content {


    grid-template-columns: repeat(4, 1fr);


  }


}





.footer-logo {


  display: flex;


  align-items: center;


  gap: 0.5rem;


  font-size: 1.25rem;


  font-weight: 700;


  font-family: 'Space Grotesk', sans-serif;


  color: hsl(var(--primary));


  margin-bottom: 1rem;


}





.footer-logo i {


  font-size: 1.5rem;


}





.footer-section p {


  color: hsl(var(--muted-foreground));


  margin-bottom: 1rem;


}





.footer-social {


  display: flex;


  gap: 1rem;


}





.footer-social a {


  width: 2.5rem;


  height: 2.5rem;


  background-color: hsl(var(--muted));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: hsl(var(--muted-foreground));


  text-decoration: none;


  transition: all 0.3s ease;


}





.footer-social a:hover {


  background-color: hsl(var(--primary));


  color: hsl(var(--primary-foreground));


  transform: translateY(-2px);


}





.footer-section h3 {


  font-family: 'Space Grotesk', sans-serif;


  font-size: 1.125rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.footer-section ul {


  list-style: none;


}





.footer-section ul li {


  margin-bottom: 0.5rem;


  display: flex;


  align-items: center;


  gap: 0.5rem;


}





.footer-section ul li a {


  color: hsl(var(--muted-foreground));


  text-decoration: none;


  transition: color 0.3s ease;


  display: flex;


  align-items: center;


  gap: 0.5rem;


}





.footer-section ul li a:hover {


  color: hsl(var(--primary));


}





.footer-section ul li i {


  color: hsl(var(--primary));


  width: 1rem;


}





.footer-bottom {


  text-align: center;


  padding-top: 2rem;


  border-top: 1px solid hsl(var(--border));


  color: hsl(var(--muted-foreground));


}





/* Animations */


@keyframes pulse {


  0%, 100% {


    opacity: 0.2;


    transform: scale(1);


  }


  50% {


    opacity: 0.3;


    transform: scale(1.05);


  }


}





@keyframes fadeInUp {


  0% {


    opacity: 0;


    transform: translateY(30px) scale(0.95);


  }


  100% {


    opacity: 1;


    transform: translateY(0) scale(1);


  }


}





.fade-in-up {


  animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;


}





/* Smooth Scrolling */


html {


  scroll-behavior: smooth;


  overflow-x: hidden;


  width: 100%;


}





/* Focus Styles */


button:focus,


a:focus {


  outline: 2px solid hsl(var(--ring));


  outline-offset: 2px;


}





/* Responsive Images */


img {


  max-width: 100%;


  height: auto;


}





/* Loading Animation */


body.loaded {


  opacity: 1;


}





body {


  opacity: 0;


  transition: opacity 0.3s ease;


}





/* Notification Styles */


.notification {


  position: fixed;


  top: 20px;


  right: 20px;


  padding: 1rem 1.5rem;


  border-radius: 0.5rem;


  color: white;


  font-weight: 500;


  z-index: 1000;


  transform: translateX(100%);


  transition: transform 0.3s ease;


}





.notification-success {


  background-color: #10b981;


}





.notification-error {


  background-color: #ef4444;


}





.notification-info {


  background-color: #3b82f6;


}





/* Leaflet Map Customization */


.leaflet-container {


  font-family: 'Inter', sans-serif;


}





.leaflet-popup-content-wrapper {


  border-radius: var(--radius);


  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);


}





.leaflet-popup-content {


  margin: 1rem;


  font-size: 0.875rem;


}





.leaflet-popup-tip {


  background-color: hsl(var(--card));


}





/* Dark theme map adjustments */


.dark-theme .leaflet-container {


  background-color: hsl(var(--background));


}





.dark-theme .leaflet-popup-content-wrapper {


  background-color: hsl(var(--card));


  color: hsl(var(--foreground));


}





.dark-theme .leaflet-popup-tip {


  background-color: hsl(var(--card));


}





/* ===== ESTILOS PARA PÁGINAS ESPECÍFICAS ===== */





/* === PÁGINA DE SERVICIOS === */





/* Services Overview Section */


.services-overview {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.services-categories {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


  gap: 2rem;


  margin-top: 3rem;


}





.category-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  transition: all 0.3s ease;


  position: relative;


  overflow: hidden;


}





.category-card::before {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  right: 0;


  height: 4px;


  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));


  transform: scaleX(0);


  transition: transform 0.3s ease;


}





.category-card:hover::before {


  transform: scaleX(1);


}





.category-card:hover {


  transform: translateY(-5px);


  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.1);


}





.category-icon {


  width: 80px;


  height: 80px;


  margin: 0 auto 1.5rem;


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 2rem;


  color: white;


}





.category-card h3 {


  font-size: 1.5rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.category-card p {


  color: hsl(var(--muted-foreground));


  margin-bottom: 1.5rem;


  line-height: 1.6;


}





/* Detailed Services Section */


.detailed-services {


  padding: 5rem 0;


  background-color: hsl(var(--muted));


}





.detailed-services:nth-child(even) {


  background-color: hsl(var(--background));


}





.service-detail {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 4rem;


  align-items: center;


}





.service-detail.reverse {


  direction: rtl;


}





.service-detail.reverse .service-detail-content {


  direction: ltr;


}





.service-detail-header {


  display: flex;


  align-items: center;


  gap: 1.5rem;


  margin-bottom: 2rem;


}





.service-detail-icon {


  width: 80px;


  height: 80px;


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 2rem;


  color: white;


  flex-shrink: 0;


}





.service-detail-header h2 {


  font-size: 2.5rem;


  font-weight: 700;


  margin-bottom: 0.5rem;


  color: hsl(var(--foreground));


}





.service-detail-header p {


  color: hsl(var(--muted-foreground));


  font-size: 1.1rem;


}





.service-detail-description {


  margin-bottom: 2rem;


}





.service-detail-description p {


  color: hsl(var(--muted-foreground));


  line-height: 1.8;


  font-size: 1.1rem;


  margin-bottom: 1rem;


}





.service-features {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


  gap: 1rem;


  margin-bottom: 2rem;


}





.feature-item {


  display: flex;


  align-items: center;


  gap: 0.75rem;


  padding: 0.75rem;


  background-color: hsl(var(--card));


  border-radius: 0.5rem;


  border: 1px solid hsl(var(--border));


}





.feature-item i {


  color: hsl(var(--primary));


  font-size: 1.1rem;


}





.feature-item span {


  color: hsl(var(--foreground));


  font-weight: 500;


}





.service-cta {


  display: flex;


  gap: 1rem;


  flex-wrap: wrap;


}





.service-detail-image {


  display: flex;


  align-items: center;


  justify-content: center;


}





.image-placeholder {


  width: 100%;


  height: 400px;


  background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.1));


  border-radius: var(--radius);


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  border: 2px dashed hsl(var(--border));


}





.image-placeholder i {


  font-size: 4rem;


  color: hsl(var(--primary));


  margin-bottom: 1rem;


}





.image-placeholder p {


  color: hsl(var(--muted-foreground));


  font-size: 1.2rem;


  font-weight: 500;


}





/* Pricing Section */


.pricing {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.pricing-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


  gap: 2rem;


  margin-top: 3rem;


}





.pricing-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  position: relative;


  transition: all 0.3s ease;


}





.pricing-card.featured {


  border-color: hsl(var(--primary));


  transform: scale(1.05);


}





.pricing-badge {


  position: absolute;


  top: -10px;


  left: 50%;


  transform: translateX(-50%);


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  color: white;


  padding: 0.5rem 1rem;


  border-radius: 9999px;


  font-size: 0.875rem;


  font-weight: 600;


}





.pricing-header {


  margin-bottom: 2rem;


}





.pricing-header h3 {


  font-size: 1.5rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.price {


  display: flex;


  align-items: baseline;


  justify-content: center;


  gap: 0.25rem;


}





.currency {


  font-size: 1.5rem;


  font-weight: 600;


  color: hsl(var(--primary));


}





.amount {


  font-size: 3rem;


  font-weight: 700;


  color: hsl(var(--foreground));


}





.period {


  font-size: 1rem;


  color: hsl(var(--muted-foreground));


}





.pricing-features {


  list-style: none;


  margin-bottom: 2rem;


}





.pricing-features li {


  display: flex;


  align-items: center;


  gap: 0.75rem;


  padding: 0.75rem 0;


  color: hsl(var(--foreground));


  border-bottom: 1px solid hsl(var(--border));


}





.pricing-features li:last-child {


  border-bottom: none;


}





.pricing-features i {


  color: hsl(var(--primary));


  font-size: 1rem;


}





/* === PÁGINA NOSOTROS === */





/* About Section */


.about-section {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.about-content {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 4rem;


  align-items: center;


}





.about-description {


  margin-bottom: 2rem;


}





.about-description p {


  color: hsl(var(--muted-foreground));


  line-height: 1.8;


  font-size: 1.1rem;


  margin-bottom: 1.5rem;


}





.about-stats {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: 2rem;


}





.stat-item {


  text-align: center;


  padding: 1.5rem;


  background-color: hsl(var(--card));


  border-radius: var(--radius);


  border: 1px solid hsl(var(--border));


}





.stat-number {


  font-size: 2.5rem;


  font-weight: 700;


  color: hsl(var(--primary));


  margin-bottom: 0.5rem;


}





.stat-label {


  color: hsl(var(--muted-foreground));


  font-weight: 500;


}





/* Values Section */


.values-section {


  padding: 5rem 0;


  background-color: hsl(var(--muted));


}





.values-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


  gap: 2rem;


  margin-top: 3rem;


}





.value-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  transition: all 0.3s ease;


}





.value-card:hover {


  transform: translateY(-5px);


  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.1);


}





.value-icon {


  width: 80px;


  height: 80px;


  margin: 0 auto 1.5rem;


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 2rem;


  color: white;


}





.value-card h3 {


  font-size: 1.5rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.value-card p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





/* History Section */


.history-section {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.timeline {


  position: relative;


  margin-top: 3rem;


  padding-left: 2rem;


}





.timeline::before {


  content: '';


  position: absolute;


  left: 0;


  top: 0;


  bottom: 0;


  width: 2px;


  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));


}





.timeline-item {


  position: relative;


  margin-bottom: 3rem;


  padding-left: 3rem;


}





.timeline-marker {


  position: absolute;


  left: -1.5rem;


  top: 0;


  width: 3rem;


  height: 3rem;


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: white;


  font-weight: 700;


  font-size: 1.1rem;


  border: 4px solid hsl(var(--background));


}





.timeline-content {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


}





.timeline-content h3 {


  font-size: 1.5rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.timeline-content p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





/* Culture Section */


.culture-section {


  padding: 5rem 0;


  background-color: hsl(var(--muted));


}





.culture-content {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 4rem;


  align-items: center;


}





.culture-description {


  margin-bottom: 2rem;


}





.culture-description p {


  color: hsl(var(--muted-foreground));


  line-height: 1.8;


  font-size: 1.1rem;


  margin-bottom: 1.5rem;


}





.culture-benefits {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: 1rem;


}





.benefit-item {


  display: flex;


  align-items: center;


  gap: 0.75rem;


  padding: 0.75rem;


  background-color: hsl(var(--card));


  border-radius: 0.5rem;


  border: 1px solid hsl(var(--border));


}





.benefit-item i {


  color: hsl(var(--primary));


  font-size: 1.1rem;


}





.benefit-item span {


  color: hsl(var(--foreground));


  font-weight: 500;


}





/* Certifications Section */


.certifications-section {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.certifications-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


  gap: 2rem;


  margin-top: 3rem;


}





.certification-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  transition: all 0.3s ease;


}





.certification-card:hover {


  transform: translateY(-5px);


  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.1);


}





.certification-icon {


  width: 80px;


  height: 80px;


  margin: 0 auto 1.5rem;


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 2rem;


  color: white;


}





.certification-card h3 {


  font-size: 1.5rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.certification-card p {


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





/* === PÁGINA DE CONTACTO === */





/* Contact Info Section */


.contact-info-section {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.contact-info-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));


  gap: 2rem;


  margin-top: 3rem;


  max-width: 100%;


  overflow-x: hidden;


}





.contact-info-card {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


  text-align: center;


  transition: all 0.3s ease;


}





.contact-info-card:hover {


  transform: translateY(-5px);


  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.1);


}





.contact-info-icon {


  width: 80px;


  height: 80px;


  margin: 0 auto 1.5rem;


  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 2rem;


  color: white;


}





.contact-info-card h3 {


  font-size: 1.5rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.contact-info-main {


  font-size: 1.2rem;


  font-weight: 600;


  color: hsl(var(--primary));


  margin-bottom: 0.5rem;


}





.contact-info-secondary {


  color: hsl(var(--muted-foreground));


  margin-bottom: 0.25rem;


  font-size: 0.9rem;


}





.contact-info-card .btn {


  margin-top: 1.5rem;


}





/* Contact Form Section */


.contact-form-section {


  padding: 5rem 0;


  background-color: hsl(var(--muted));


}





.contact-form-content {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 4rem;


  align-items: start;


  max-width: 100%;


  overflow-x: hidden;


}





.contact-form-benefits {


  margin-bottom: 2rem;


}





.contact-form-benefits .benefit-item {


  margin-bottom: 1rem;


}





.contact-form-social {


  margin-top: 2rem;


}





.contact-form-social h3 {


  font-size: 1.2rem;


  font-weight: 600;


  margin-bottom: 1rem;


  color: hsl(var(--foreground));


}





.social-links {


  display: flex;


  flex-direction: column;


  gap: 0.75rem;


}





.social-link {


  display: flex;


  align-items: center;


  gap: 0.75rem;


  padding: 0.75rem;


  background-color: hsl(var(--card));


  border-radius: 0.5rem;


  border: 1px solid hsl(var(--border));


  text-decoration: none;


  color: hsl(var(--foreground));


  transition: all 0.3s ease;


}





.social-link:hover {


  background-color: hsl(var(--primary));


  color: white;


  transform: translateX(5px);


}





.social-link i {


  font-size: 1.2rem;


  width: 20px;


}





/* Detalles del servicio de la imagen */


.image-placeholder-service {


  display: flex;


  flex-direction: column;   /* imagen arriba, texto abajo */


  align-items: center;


  justify-content: center;


}





.image-placeholder-service img {


  display: block;


  max-width: 100%;   /* no sobrepasa el contenedor */


  height: auto;      /* mantiene proporción */


  border-radius: 0.75rem;


  box-shadow: 0 4px 12px rgba(0,0,0,0.15);


}


 .image-placeholder-service p {


  margin-top: 0.75rem;


  color: hsl(var(--muted-foreground));


 }











/* Enhanced Contact Form */


.contact-form {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 2rem;


}





.form-row {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 1rem;


}





.form-group {


  margin-bottom: 1.5rem;


}





.form-group label {


  display: flex;


  align-items: center;


  gap: 0.5rem;


  margin-bottom: 0.5rem;


  font-weight: 500;


  color: hsl(var(--foreground));


}





.form-group label i {


  color: hsl(var(--primary));


}





.form-group input,


.form-group select,


.form-group textarea {


  width: 100%;


  padding: 0.75rem 1rem;


  border: 1px solid hsl(var(--border));


  border-radius: 0.5rem;


  background-color: hsl(var(--background));


  color: hsl(var(--foreground));


  font-size: 1rem;


  transition: all 0.3s ease;


}





.form-group input:focus,


.form-group select:focus,


.form-group textarea:focus {


  outline: none;


  border-color: hsl(var(--primary));


  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);


}





.form-group textarea {


  resize: vertical;


  min-height: 120px;


}





.checkbox-group {


  display: flex;


  align-items: flex-start;


  gap: 0.75rem;


}





.checkbox-label {


  display: flex;


  align-items: flex-start;


  gap: 0.75rem;


  cursor: pointer;


  font-size: 0.9rem;


  color: hsl(var(--muted-foreground));


  line-height: 1.5;


}





.checkbox-label input[type="checkbox"] {


  width: auto;


  margin: 0;


}





.privacy-link {


  color: hsl(var(--primary));


  text-decoration: none;


}





.privacy-link:hover {


  text-decoration: underline;


}





/* FAQ Section */


.faq-section {


  padding: 5rem 0;


  background-color: hsl(var(--background));


}





.faq-grid {


  margin-top: 3rem;


}





.faq-item {


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  margin-bottom: 1rem;


  overflow: hidden;


}





.faq-question {


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: 1.5rem;


  cursor: pointer;


  transition: all 0.3s ease;


}





.faq-question:hover {


  background-color: hsl(var(--muted));


}





.faq-question h3 {


  font-size: 1.1rem;


  font-weight: 600;


  color: hsl(var(--foreground));


  margin: 0;


}





.faq-question i {


  color: hsl(var(--primary));


  transition: transform 0.3s ease;


}





.faq-item.active .faq-question i {


  transform: rotate(180deg);


}





.faq-answer {


  padding: 0 1.5rem 1.5rem;


  color: hsl(var(--muted-foreground));


  line-height: 1.6;


}





/* Enhanced Location Section */


.location-details {


  color: hsl(var(--muted-foreground));


  font-size: 0.9rem;


  margin-top: 0.5rem;


}





.map-overlay {


  position: absolute;


  top: 1rem;


  left: 1rem;


  background-color: hsl(var(--card));


  border: 1px solid hsl(var(--border));


  border-radius: var(--radius);


  padding: 1rem;


  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);


}





.map-info h3 {


  font-size: 1.2rem;


  font-weight: 600;


  margin-bottom: 0.5rem;


  color: hsl(var(--foreground));


}





.map-info p {


  color: hsl(var(--muted-foreground));


  margin-bottom: 1rem;


  font-size: 0.9rem;


}





/* Enhanced CTA Section */


.cta-buttons {


  display: flex;


  gap: 1rem;


  justify-content: center;


  flex-wrap: wrap;


  margin-top: 2rem;


}





/* Responsive Design for New Pages */


@media (max-width: 768px) {


  .services-categories,


  .values-grid,


  .certifications-grid,


  .contact-info-grid {


    grid-template-columns: 1fr;


  }


  


  .service-detail,


  .about-content,


  .culture-content,


  .contact-form-content {


    grid-template-columns: 1fr;


    gap: 2rem;


  }


  


  .service-detail.reverse {


    direction: ltr;


  }


  .service-detail-header h2 {


    font-size: 1.75rem;


  }


  .service-detail-image {


    margin-top: 0.5rem;


  }


  


  .about-stats,


  .culture-benefits {


    grid-template-columns: 1fr;


  }


  


  .form-row {


    grid-template-columns: 1fr;


  }


  


  .timeline {


    padding-left: 1rem;


  }


  


  .timeline-item {


    padding-left: 2rem;


  }


  


  .timeline-marker {


    left: -1rem;


    width: 2rem;


    height: 2rem;


    font-size: 0.9rem;


  }


  


  .cta-buttons {


    flex-direction: column;


    align-items: center;


  }


  


  .cta-buttons .btn {


    width: 100%;


    max-width: 300px;


  }


}





@media (max-width: 480px) {


  .pricing-grid {


    grid-template-columns: 1fr;


  }


  


  .pricing-card.featured {


    transform: none;


  }


  


  .service-cta {


    flex-direction: column;


  }


  


  .service-cta .btn {


    width: 100%;


  }


}