/*==================================================
Project Name : TouchTop Media - Dental Practice Growth Agency
Description : High-performance dental clinic marketing, Local SEO, GBP 3-Pack, Google Ads & WhatsApp AI automation stylesheet.
Design & Code: Shakib Hosen Sabbir
Portfolio: https://shakibhosensabbir.netlify.app
GitHub: https://github.com/shakibhosensabbir
Email: shakibhossin1234@gmail.com
Technologies: HTML5, Tailwind CSS, Vanilla JavaScript, PHP, PHPMailer
==================================================*/

/* Google Fonts: Plus Jakarta Sans & Outfit */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Clean custom scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #0185fc;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0185fc;
}

/* Subtle dental grid pattern */
.bg-dental-pattern {
  background-image: radial-gradient(rgba(1, 133, 252, 0.09) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #0185fc 0%, #016fd4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Luminous gradient text for dark hero video background */
.hero-gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 45%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Background hero video styling */
.hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

/* Dedicated Hero Video Overlay (Light & subtle so the video is clearly visible) */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.42) 0%, rgba(15, 23, 42, 0.32) 50%, rgba(2, 6, 23, 0.50) 100%);
  z-index: 10;
  pointer-events: none;
}