/* ===== HOSPITAL WEBSITE - MAIN STYLES ===== */



/* ===== FONTS IMPORT ===== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");



/* ===== CSS VARIABLES ===== */

:root {

  /* Primary Colors */

  --primary-blue: #00b2ff;

  --primary-blue-dark: #008cff;

  --primary-cyan: #1bd5e3;

  --primary-green: #b6f858;



  /* Secondary Colors */

  --secondary-purple: #3500c6;

  --secondary-navy: #084170;

  --secondary-violet: #7b2cbf;

  --secondary-gray: #d1dde6;



  /* Additional Colors */

  --white: #ffffff;

  --black: #000000;

  --gray-light: #f8f9fa;

  --gray-medium: #6c757d;

  --gray-dark: #343a40;



  /* Typography */

  --font-title: "Plus Jakarta Sans", sans-serif;

  --font-subtitle: "Montserrat", sans-serif;

  --font-body: "Montserrat", sans-serif;

  --font-signage: "Arial Rounded MT Bold", Arial, sans-serif;



  /* Spacing */

  --spacing-xs: 0.5rem;

  --spacing-sm: 1rem;

  --spacing-md: 1.5rem;

  --spacing-lg: 2rem;

  --spacing-xl: 3rem;

  --spacing-xxl: 4rem;



  /* Border Radius */

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 24px;



  /* Shadows */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);

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

  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);



  /* Transitions */

  --transition-fast: 0.2s ease;

  --transition-normal: 0.3s ease;

  --transition-slow: 0.5s ease;



  /* Semantic Colors (Theme) - LIGHT DEFAULT */

  --bg-page: #ffffff;

  --bg-section: #ffffff;

  --bg-card: #ffffff;

  --bg-header: rgba(255, 255, 255, 0.95);

  --bg-subtle: #f8f9fa;

  --bg-subtle-gradient: linear-gradient(135deg, #f8f9fa, #ffffff);

  --text-main: #1a1d21;

  --text-primary: var(--primary-blue);

  --text-muted: #6c757d;

  --border-color: rgba(0, 0, 0, 0.08);

  --input-bg: #ffffff;

  --shadow-color: rgba(0, 0, 0, 0.1);



  --gray-dark: #343a40;

  --gray-medium: #6c757d;

  --gray-light: #f8f9fa;

  --white-fixed: #ffffff;

  --black-fixed: #000000;

}



/* Dark Mode Overrides */

html.dark {

  --bg-page: #0d1117;

  --bg-section: #0d1117;

  --bg-card: #161b22;

  --bg-header: rgba(13, 17, 23, 0.9);

  --bg-subtle: #161b22;

  --bg-subtle-gradient: linear-gradient(135deg, #0d1117, #161b22);

  --text-main: #f0f6fc;

  --text-muted: #8b949e;

  --border-color: rgba(255, 255, 255, 0.12);

  --input-bg: #161b22;

  --shadow-color: rgba(0, 0, 0, 0.5);



  --gray-dark: #f0f6fc;

  --gray-medium: #8b949e;

  --gray-light: #161b22;

}



/* ===== RESET & BASE STYLES ===== */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

  background-color: var(--bg-page);

  /* Optimize scrolling performance */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  font-family: var(--font-body);

  font-weight: 400;

  line-height: 1.6;

  color: var(--text-main);

  background-color: var(--bg-page);

  overflow-x: hidden;

  /* Hardware acceleration moved to specific elements if needed to avoid breaking fixed position */

  -webkit-overflow-scrolling: touch;

}



/* ===== TYPOGRAPHY ===== */

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--font-title);

  font-weight: 700;

  line-height: 1.2;

  margin-bottom: var(--spacing-sm);

  color: var(--text-main);

}



h1 {

  font-size: clamp(2rem, 5vw, 3.5rem);

  font-weight: 800;

  color: #ffffff !important;

  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

}



h2 {

  font-size: clamp(1.5rem, 4vw, 2.5rem);

  font-weight: 700;

}



h3 {

  font-size: clamp(1.25rem, 3vw, 2rem);

  font-weight: 600;

  font-family: var(--font-subtitle);

}



h4 {

  font-size: clamp(1.1rem, 2.5vw, 1.5rem);

  font-weight: 600;

  font-family: var(--font-subtitle);

}



p {

  margin-bottom: var(--spacing-sm);

  font-size: clamp(0.9rem, 2vw, 1.1rem);

}



a {

  text-decoration: none;

  color: inherit;

  transition: var(--transition-fast);

}



/* ===== UTILITY CLASSES ===== */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--spacing-sm);

}



.container-fluid {

  width: 100%;

  padding: 0 var(--spacing-sm);

}



.text-center {

  text-align: center;

}



.text-left {

  text-align: left;

}



.text-right {

  text-align: right;

}



.mb-sm {

  margin-bottom: var(--spacing-sm);

}



.mb-md {

  margin-bottom: var(--spacing-md);

}



.mb-lg {

  margin-bottom: var(--spacing-lg);

}



.mb-xl {

  margin-bottom: var(--spacing-xl);

}



.mt-sm {

  margin-top: var(--spacing-sm);

}



.mt-md {

  margin-top: var(--spacing-md);

}



.mt-lg {

  margin-top: var(--spacing-lg);

}



.mt-xl {

  margin-top: var(--spacing-xl);

}



.py-sm {

  padding: var(--spacing-sm) 0;

}



.py-md {

  padding: var(--spacing-md) 0;

}



.py-lg {

  padding: var(--spacing-lg) 0;

}



.py-xl {

  padding: var(--spacing-xl) 0;

}



.px-sm {

  padding: 0 var(--spacing-sm);

}



.px-md {

  padding: 0 var(--spacing-md);

}



.px-lg {

  padding: 0 var(--spacing-lg);

}



/* ===== BUTTONS ===== */

.btn {

  display: inline-block;

  padding: var(--spacing-sm) var(--spacing-lg);

  border: none;

  border-radius: var(--radius-md);

  font-family: var(--font-subtitle);

  font-weight: 600;

  font-size: 1rem;

  text-align: center;

  cursor: pointer;

  transition: var(--transition-normal);

  text-decoration: none;

  position: relative;

  overflow: hidden;

}



.btn::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transition: var(--transition-normal);

}



.btn:hover::before {

  left: 100%;

}



.btn-primary {

  background: linear-gradient(

    135deg,

    var(--primary-blue),

    var(--primary-blue-dark)

  );

  color: var(--white);

  box-shadow: var(--shadow-md);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-lg);

}



.btn-secondary {

  background: linear-gradient(

    135deg,

    var(--secondary-purple),

    var(--secondary-violet)

  );

  color: var(--white);

  box-shadow: var(--shadow-md);

}



.btn-secondary:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-lg);

}



.btn-outline {

  background: transparent;

  border: 2px solid #ffffff;

  color: v#ffffff;

}



.btn-outline:hover {

  background: var(--primary-blue);

  color: var(--white);

  transform: translateY(-2px);

}



/* ===== HEADER & NAVIGATION ===== */

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background: var(--bg-header);

  backdrop-filter: blur(10px);

  box-shadow: 0 2px 10px var(--shadow-color);

  z-index: 1000;

  transition: var(--transition-normal);

}



.header.scrolled {

  background: var(--bg-header);

  box-shadow: 0 4px 20px var(--shadow-color);

}



.nav {

  display: flex;

  justify-content: center;

  /* center whole nav group (logo + menu) */

  align-items: center;

  padding: var(--spacing-sm) 0;

  gap: 0.6rem;

  /* reduced spacing between logo, menu and toggle */

  position: relative;

  /* keep for absolute positioning of mobile toggle if needed */

}



/* allow the nav row more horizontal space than the default container */

.nav.container {

  max-width: 1700px;

  width: calc(100% - 40px);

}



.logo {

  display: flex;

  align-items: center;

  justify-content: center;

}



.logo img {

  max-height: 48px;

  max-width: 150px;

  /* add missing unit */

  height: auto;

  width: auto;

  display: block;

}



.nav-menu {

  display: flex;

  list-style: none;

  gap: 0.25rem;

  /* extra-tight spacing so all links fit on a single row */

  align-items: center;

  /* vertically center links with logo */

  justify-content: center;

  /* ensure the menu itself is centered */

  flex-wrap: nowrap;

  /* keep all items on one row */

  white-space: nowrap;

  /* prevent text wrapping inside items */

  overflow: visible;

  /* changed from overflow-x: auto to prevent trembling on hover */

}



.nav-menu li a {

  display: block;

  padding: 0.4rem 0.28rem;

  /* slightly increased vertical padding to prevent trembling while keeping horizontal compact */

  font-size: 0.9rem;

}



.nav-link {

  font-family: var(--font-subtitle);

  font-weight: 500;

  color: var(--text-main);

  transition: color 0.3s ease;

  position: relative;

  display: inline-block;

}



.nav-link::after {

  content: "";

  position: absolute;

  bottom: -5px;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--primary-blue);

  transition: width 0.3s ease;

}



.nav-link:hover {

  color: var(--primary-blue);

}



.nav-link:hover::after {

  width: 100%;

}



.nav-toggle {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 4px;

}



.nav-toggle span {

  width: 25px;

  height: 3px;

  background: var(--gray-dark);

  transition: var(--transition-fast);

}



/* ===== HERO SECTION ===== */

.hero {

  position: relative;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan));

}



.hero-slider {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

}



.hero-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 1s ease-in-out;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



.hero-slide.active {

  opacity: 1;

}



.hero-slide::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 178, 255, 0.3);

  z-index: 1;

}



.hero-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: var(--white);

  max-width: 800px;

  padding: 0 var(--spacing-sm);

}



.hero-title {

  font-size: clamp(2.5rem, 6vw, 4rem);

  font-weight: 800;

  margin-bottom: var(--spacing-md);

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  animation: fadeInUp 1s ease-out;

}



.hero-subtitle {

  font-size: clamp(1.1rem, 3vw, 1.5rem);

  font-weight: 400;

  margin-bottom: var(--spacing-xl);

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

  animation: fadeInUp 1s ease-out 0.3s both;

}



.hero-cta {

  animation: fadeInUp 1s ease-out 0.6s both;

}



/* ===== SEARCH SECTION ===== */

.search-section {

  background: var(--bg-page);

  padding: var(--spacing-xl) 0;

  box-shadow: var(--shadow-sm);

}



.search-container {

  max-width: 600px;

  margin: 0 auto;

  position: relative;

}



.search-box {

  display: flex;

  background: var(--input-bg);

  border-radius: var(--radius-lg);

  box-shadow: 0 4px 20px var(--shadow-color);

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

  overflow: hidden;

  transition: var(--transition-normal);

}



.search-box:focus-within {

  transform: translateY(-2px);

  box-shadow: 0 8px 30px var(--shadow-color);

}



.search-input {

  flex: 1;

  padding: var(--spacing-md) var(--spacing-lg);

  border: none;

  font-size: 1.1rem;

  font-family: var(--font-body);

  outline: none;

  background: transparent;

  color: var(--text-main);

}



.search-input::placeholder {

  color: var(--gray-medium);

}



.search-btn {

  padding: var(--spacing-md) var(--spacing-lg);

  background: linear-gradient(

    135deg,

    var(--primary-blue),

    var(--primary-blue-dark)

  );

  color: var(--white);

  border: none;

  cursor: pointer;

  font-size: 1.1rem;

  transition: var(--transition-fast);

}



.search-btn:hover {

  background: linear-gradient(

    135deg,

    var(--primary-blue-dark),

    var(--secondary-navy)

  );

}



/* ===== CARDS ===== */

.card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  box-shadow: 0 10px 30px var(--shadow-color);

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

  overflow: hidden;

  transition:

    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  /* Hardware acceleration for smooth animations */

  will-change: transform;

  transform: translateZ(0);

  backface-visibility: hidden;

}



.card:hover {

  transform: translate3d(0, -8px, 0); /* Use translate3d for GPU acceleration */

  box-shadow: 0 15px 40px var(--shadow-color);

}



.card-image {

  width: 100%;

  height: 200px;

  object-fit: cover;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Optimize image rendering */

  transform: translateZ(0);

  backface-visibility: hidden;

}



.card:hover .card-image {

  transform: translate3d(0, 0, 0) scale(1.05); /* GPU-accelerated scale */

}



.card-content {

  padding: var(--spacing-lg);

  text-align: left;

}



.card-title {

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--text-main);

  margin-bottom: var(--spacing-sm);

}



.card-text {

  color: var(--text-muted);

  margin-bottom: var(--spacing-md);

}



/* ===== GRID SYSTEM ===== */

.grid {

  display: grid;

  gap: var(--spacing-lg);

}



.grid-2 {

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

}



.grid-3 {

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

}



.grid-4 {

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

}



/* ===== LOCATION SLIDER ===== */

.location-slider {

  position: relative;

  background: rgba(255, 255, 255, 0.096);

  padding: var(--spacing-sm);

  border-radius: 10px;

  box-shadow: var(--shadow-lg);

  overflow: hidden;

  min-height: 660px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.location-slide {

  position: absolute;

  top: var(--spacing-sm);

  right: var(--spacing-sm);

  bottom: var(--spacing-sm);

  left: var(--spacing-sm);

  border-radius: var(--radius-lg);

  overflow: hidden;

  opacity: 0;

  transition: opacity 1s ease;

}



.location-slide.active {

  opacity: 1;

}



.location-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.location-caption {

  position: absolute;

  left: 18px;

  bottom: 18px;

  background: rgba(0, 0, 0, 0.55);

  color: var(--white);

  padding: 10px 14px;

  border-radius: var(--radius-md);

  font-size: 0.95rem;

  box-shadow: var(--shadow-md);

}



.location-dots {

  position: absolute;

  display: flex;

  gap: 10px;

  bottom: 16px;

  right: 18px;

  z-index: 2;

}



.location-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: 2px solid var(--white);

  background: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition:

    transform var(--transition-fast),

    background-color var(--transition-fast);

}



.location-dot:hover {

  transform: scale(1.15);

  background: rgba(255, 255, 255, 0.7);

}



.location-dot.active {

  background: var(--primary-blue);

  transform: scale(1.2);

}



#promo.promo-slider {

  position: relative;

  min-height: 610px;

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-md);

}



.promo-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 1s ease;

}



.promo-slide.active {

  opacity: 1;

}



.promo-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.promo-caption {

  position: absolute;

  left: 16px;

  bottom: 16px;

  background: rgba(0, 0, 0, 0.55);

  color: var(--white);

  padding: 10px 14px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  font-size: 0.95rem;

}



.promo-dots {

  position: absolute;

  right: 14px;

  bottom: 14px;

  display: flex;

  gap: 8px;

}



.promo-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: 2px solid var(--white);

  background: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition:

    transform var(--transition-fast),

    background-color var(--transition-fast);

}



.promo-dot.active {

  background: var(--primary-blue);

  transform: scale(1.15);

}



.location-list {

  display: grid;

  gap: var(--spacing-sm);

  margin-bottom: var(--spacing-md);

}



.location-chip {

  display: flex;

  flex-direction: column;

  gap: 4px;

  background: var(--gray-light);

  padding: var(--spacing-sm);

  border-radius: var(--radius-md);

  border: 1px solid #e5ecf2;

}



.location-chip strong {

  color: var(--secondary-navy);

}



.location-chip span {

  color: var(--gray-medium);

  font-size: 0.95rem;

}



.location-meta {

  display: flex;

  flex-wrap: wrap;

  gap: var(--spacing-sm);

  margin-bottom: var(--spacing-md);

}



.location-meta span {

  background: rgba(0, 178, 255, 0.08);

  color: var(--secondary-navy);

  padding: 0.5rem 0.75rem;

  border-radius: var(--radius-md);

  font-size: 0.9rem;

  border: 1px solid rgba(0, 178, 255, 0.2);

}



/* ===== SECTIONS ===== */

.section {

  padding: var(--spacing-xxl) 0;

}



.section-title {

  text-align: center;

  margin-bottom: var(--spacing-xl);

  color: var(--text-main);

}



.section-subtitle {

  text-align: center;

  color: var(--text-muted);

  margin-bottom: var(--spacing-xl);

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



/* ===== FOOTER ===== */

.footer {

  background: #008cff;

  color: var(--white);

  padding: var(--spacing-xxl) 0 var(--spacing-lg);

}



.footer-content {

  display: grid;

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

  gap: var(--spacing-xl);

  margin-bottom: var(--spacing-xl);

}



.footer-section h3 {

  color: var(--primary-cyan);

  margin-bottom: var(--spacing-md);

}



.footer-section p,

.footer-section a {

  color: var(--secondary-gray);

  transition: var(--transition-fast);

}



.footer-section a:hover {

  color: var(--white);

}



.footer-bottom {

  text-align: center;

  padding-top: var(--spacing-lg);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--secondary-gray);

}



/* ===== ANIMATIONS - Optimized with GPU acceleration ===== */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translate3d(0, 30px, 0); /* GPU-accelerated */

  }



  to {

    opacity: 1;

    transform: translate3d(0, 0, 0);

  }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    transform: translate3d(-30px, 0, 0); /* GPU-accelerated */

  }



  to {

    opacity: 1;

    transform: translate3d(0, 0, 0);

  }

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    transform: translate3d(30px, 0, 0); /* GPU-accelerated */

  }



  to {

    opacity: 1;

    transform: translate3d(0, 0, 0);

  }

}



@keyframes pulse {

  0%,

  100% {

    transform: scale3d(1, 1, 1); /* GPU-accelerated */

  }



  50% {

    transform: scale3d(1.05, 1.05, 1);

  }

}



.animate-fadeInUp {

  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

  will-change: transform, opacity;

}



.animate-fadeInLeft {

  animation: fadeInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

  will-change: transform, opacity;

}



.animate-fadeInRight {

  animation: fadeInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

  will-change: transform, opacity;

}



.animate-pulse {

  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



/* ===== CONTACT FORM STYLES ===== */

.contact-info-pills {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-md);

  margin-top: var(--spacing-lg);

}



.pill {

  display: flex;

  align-items: center;

  gap: var(--spacing-md);

  padding: var(--spacing-md);

  background: var(--bg-card);

  border-radius: var(--radius-md);

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

  transition: var(--transition-normal);

}



.pill:hover {

  transform: translateX(10px);

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

}



.pill-icon {

  width: 45px;

  height: 45px;

  background: var(--bg-subtle-gradient);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  box-shadow: var(--shadow-sm);

}



.pill-text {

  display: flex;

  flex-direction: column;

}



.pill-text strong {

  color: var(--primary-blue);

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.pill-text span {

  color: var(--text-main);

  font-weight: 500;

}



.custom-form .form-grid {

  display: grid;

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

  gap: var(--spacing-md);

}



.custom-form .form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.custom-form .form-group.full-width {

  grid-column: span 2;

}



.custom-form label {

  font-weight: 600;

  color: var(--text-main);

  font-size: 0.95rem;

}



.custom-form input,

.custom-form select,

.custom-form textarea {

  padding: 12px 16px;

  border-radius: var(--radius-md);

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

  background: var(--input-bg);

  color: var(--text-main);

  font-size: 1rem;

  font-family: var(--font-body);

  transition: all 0.3s ease;

}



.custom-form input:focus,

.custom-form select:focus,

.custom-form textarea:focus {

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

  box-shadow: 0 0 0 4px rgba(27, 213, 227, 0.1);

  outline: none;

}



html.dark .contact-form-card {

  background: rgba(22, 27, 34, 0.4);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.05);

}



@media (max-width: 768px) {

  .custom-form .form-grid {

    grid-template-columns: 1fr;

  }

  .custom-form .form-group.full-width {

    grid-column: auto;

  }

}

@media (max-width: 768px) {

  .nav-menu {

    position: fixed;

    top: 70px;

    left: -100%;

    width: 100%;

    height: calc(100vh - 70px);

    background: var(--bg-page);

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    padding-top: var(--spacing-xl);

    transition: var(--transition-normal);

    box-shadow: var(--shadow-lg);

  }



  .nav-menu.active {

    left: 0;

  }



  .nav-toggle {

    display: flex;

  }



  .nav-toggle.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

  }



  .nav-toggle.active span:nth-child(2) {

    opacity: 0;

  }



  .nav-toggle.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -6px);

  }



  .hero-content {

    padding: 0 var(--spacing-md);

  }



  .search-box {

    flex-direction: column;

  }



  .search-btn {

    border-radius: 0;

  }



  .grid-2,

  .grid-3,

  .grid-4 {

    grid-template-columns: 1fr;

  }



  .footer-content {

    grid-template-columns: 1fr;

    text-align: center;

  }

}



@media (max-width: 480px) {

  :root {

    --spacing-sm: 0.75rem;

    --spacing-md: 1rem;

    --spacing-lg: 1.5rem;

    --spacing-xl: 2rem;

    --spacing-xxl: 2.5rem;

  }



  .container {

    padding: 0 var(--spacing-sm);

  }



  .card-content {

    padding: var(--spacing-md);

  }

}



/* ===== SMOOTH SCROLLING ENHANCEMENTS ===== */

@media (prefers-reduced-motion: no-preference) {

  html {

    scroll-behavior: smooth;

  }



  * {

    scroll-behavior: smooth;

  }

}



/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}



/* Focus styles for accessibility */

button:focus,

input:focus,

select:focus,

textarea:focus,

a:focus {

  outline: 2px solid var(--primary-blue);

  outline-offset: 2px;

}



/* ===== SEARCH SUGGESTIONS ===== */

.search-suggestions {

  background: var(--white);

  border-radius: 0 0 var(--radius-lg) var(--radius-lg);

  box-shadow: var(--shadow-lg);

  max-height: 220px;

  overflow-y: auto;

  margin-top: 6px;

  z-index: 1200;

}



.search-suggestion-item {

  padding: 12px 16px;

  cursor: pointer;

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

  color: var(--text-main);

}



.search-suggestion-item:hover,

.search-suggestion-item.active {

  background: rgba(0, 178, 255, 0.1);

}



/* ===== LOADING ANIMATIONS ===== */

.loading {

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 3px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  border-top-color: var(--white);

  animation: spin 1s ease-in-out infinite;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



/* ===== CUSTOM SCROLLBAR ===== */

::-webkit-scrollbar {

  width: 8px;

}



::-webkit-scrollbar-track {

  background: var(--gray-light);

}



::-webkit-scrollbar-thumb {

  background: var(--primary-blue);

  border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--primary-blue-dark);

}



/* === Dark mode and toggle (auto-injected) === */

html,

body {

  transition:

    background-color 0.25s ease,

    color 0.25s ease;

}



/* Use classes on <html>: .dark or .light. Defaults to system if none. */

html.dark {

  color-scheme: dark;

}



html.dark body {

  background-color: #0f1216;

  color: #e6e8eb;

}



html.dark a {

  color: #8ab4ff;

}



/* === Dark mode persistence styles === */



/* Prevent transitions on load */

.no-transition * {

  transition: none !important;

}



html,

body {

  transition:

    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),

    color 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Base dark style support */

html.dark {

  color-scheme: dark;

}



/* Handle inline background overrides */

html.dark [style*="background: var(--bg-subtle-gradient)"] {

  background: linear-gradient(135deg, #0d1117, #161b22) !important;

}



html.dark [style*="background: #fff3cd"] {

  background: #2a261a !important;

  border-color: #ffc107 !important;

}



html.dark [style*="color: #856404"] {

  color: #ffe082 !important;

}



/* Ensure vibrant accent sections stay readable */

html.dark .section[style*="background: linear-gradient"] {

  position: relative;

}



/* Image adjustments for dark mode */

html.dark img:not(.logo img):not(.hero-slide) {

  filter: brightness(0.85) contrast(1.1);

}



/* Keep brands consistent */

html.dark .footer {

  background-color: #005bb5; /* Even deeper blue for contrast */

}



/* Glassmorphism for cards in dark mode */

html.dark .card {

  background: rgba(22, 27, 34, 0.7);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}



/* Toggle button styling */

:root {

  --vm-toggle-bg: rgba(255, 255, 255, 0.8);

  --vm-toggle-fg: #111;

  --vm-toggle-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



html.dark .theme-toggle {

  background: rgba(45, 51, 59, 0.8);

  color: #ffca28; /* Golden moon */

  border-color: rgba(255, 255, 255, 0.1);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

}



.theme-toggle {

  position: fixed;

  top: 16px;

  right: 16px;

  z-index: 9999;

  width: 48px;

  height: 48px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  backdrop-filter: saturate(180%) blur(15px);

  -webkit-backdrop-filter: saturate(180%) blur(15px);

  background: var(--vm-toggle-bg);

  color: var(--vm-toggle-fg);

  border: 1px solid rgba(0, 0, 0, 0.05);

  box-shadow: var(--vm-toggle-shadow);

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



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

  display: block;

}



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

  display: none;

}



.theme-toggle .icon-sun {

  display: none;

}



.theme-toggle .icon-moon {

  display: block;

}



@media (max-width: 480px) {

  .theme-toggle {

    top: 12px;

    right: 12px;

    width: 40px;

    height: 40px;

  }



  .theme-toggle svg {

    width: 20px;

    height: 20px;

  }

}



/* Contenedor para botones flotantes - fijo en toda la página */

.floating-buttons-container {

  position: fixed !important;

  bottom: 24px !important;

  right: 24px !important;

  top: auto !important;

  left: auto !important;

  z-index: 10001 !important;

  display: flex !important;

  flex-direction: column;

  gap: 16px;

  pointer-events: none;

}



.floating-buttons-container > * {

  pointer-events: auto;

}



/* ===== CALENDAR FLOATING BUTTON ===== */

.calendar-float {

  position: relative;

  width: 64px;

  height: 64px;

  background: linear-gradient(135deg, #1bd5e3, #00b2ff);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 20px rgba(27, 213, 227, 0.5);

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  text-decoration: none;

}



.calendar-float::before {

  content: "Agendar";

  position: absolute;

  right: calc(100% + 14px);

  top: 50%;

  transform: translateY(-50%);

  background: #ffffff;

  color: var(--primary-blue);

  font-family: var(--font-subtitle);

  font-weight: 700;

  font-size: 0.85rem;

  padding: 8px 16px;

  border-radius: 20px;

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

  white-space: nowrap;

  opacity: 1;

  pointer-events: none;

}



.calendar-float:hover {

  box-shadow: 0 8px 28px rgba(27, 213, 227, 0.6);

}



.calendar-float svg {

  width: 34px;

  height: 34px;

  fill: white;

}



/* ===== WHATSAPP FLOATING BUTTON ===== */

.whatsapp-float {

  position: relative;

  width: 64px;

  height: 64px;

  background: #25d366;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.whatsapp-float::before {

  content: "WhatsApp";

  position: absolute;

  right: calc(100% + 14px);

  top: 50%;

  transform: translateY(-50%);

  background: #ffffff;

  color: #25d366;

  font-family: var(--font-subtitle);

  font-weight: 700;

  font-size: 0.85rem;

  padding: 8px 16px;

  border-radius: 20px;

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

  white-space: nowrap;

  opacity: 1;

  pointer-events: none;

}



.whatsapp-float:hover {

  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);

}



.whatsapp-float svg {

  width: 36px;

  height: 36px;

  fill: white;

}



/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {

  .floating-buttons-container {

    bottom: 20px;

    right: 20px;

    gap: 14px;

  }



  .calendar-float,

  .whatsapp-float {

    width: 56px;

    height: 56px;

  }



  .calendar-float svg {

    width: 28px;

    height: 28px;

  }



  .whatsapp-float svg {

    width: 30px;

    height: 30px;

  }



  .calendar-float::before,

  .whatsapp-float::before {

    font-size: 0.75rem;

    padding: 6px 10px;

  }

}



@media (max-width: 480px) {

  .floating-buttons-container {

    bottom: 16px;

    right: 16px;

    gap: 12px;

  }



  .calendar-float,

  .whatsapp-float {

    width: 52px;

    height: 52px;

  }



  .calendar-float svg {

    width: 26px;

    height: 26px;

  }



  .whatsapp-float svg {

    width: 28px;

    height: 28px;

  }

}



/* ===== CUSTOM LINKS ===== */

.link_S {

  text-decoration: underline;

  color: inherit;

  transition: var(--transition-fast);

}



.link_S:hover {

  color: rgb(9, 185, 32);

}



#h41 {

  color: var(--primary-blue);

  text-align: center;

  border-bottom: 1px solid var(--primary-blue);

  padding-top: 2.5rem;

}