/* ==========================================================================
   STUTTGART SERVICE - BLACK-BLUE LUXURY THEME & ANIMATION SUITE
   High-performance automotive aesthetic with electric cyan & sapphire accents
   ========================================================================== */

:root {
  --bg-deep-black: #030712;
  --bg-obsidian-blue: #050b1a;
  --bg-card-glass: rgba(7, 14, 34, 0.85);
  --bg-card-hover: rgba(10, 22, 52, 0.95);
  --border-subtle-blue: rgba(59, 130, 246, 0.22);
  --border-glow-blue: rgba(0, 210, 255, 0.75);
  --blue-primary: #0066ff;
  --blue-electric: #00d2ff;
  --blue-cyan: #38bdf8;
  --blue-sapphire: #0052d4;
  --text-pure-white: #ffffff;
  --text-silver: #e2e8f0;
  --text-muted-blue: #94a3b8;
  --shadow-blue-glow: 0 0 25px rgba(0, 210, 255, 0.45);
  --shadow-card-hover: 0 20px 45px rgba(0, 85, 255, 0.35), 0 0 25px rgba(0, 210, 255, 0.22);
}

/* --------------------------------------------------------------------------
   1. GLOBAL BLACK-BLUE THEME STYLES
   -------------------------------------------------------------------------- */
html,
body,
.t-body,
.t-records,
#allrecords,
.t396__artboard,
.t396__carrier {
  background-color: var(--bg-deep-black) !important;
  color: var(--text-silver) !important;
}

/* Ambient royal blue glow across top sections */
body {
  background: 
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(14, 55, 145, 0.28) 0%, rgba(3, 7, 18, 0) 70%),
    radial-gradient(ellipse 80% 40% at 50% 40%, rgba(10, 40, 110, 0.2) 0%, rgba(3, 7, 18, 0) 70%),
    radial-gradient(ellipse 80% 50% at 50% 85%, rgba(12, 45, 125, 0.25) 0%, rgba(3, 7, 18, 0) 70%),
    var(--bg-deep-black) !important;
  background-attachment: fixed !important;
}

::selection {
  background: var(--blue-primary) !important;
  color: #ffffff !important;
}

/* Custom modern scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #030712;
}
::-webkit-scrollbar-thumb {
  background: #0f275a;
  border-radius: 5px;
  border: 2px solid #030712;
}
::-webkit-scrollbar-thumb:hover {
  background: #0066ff;
}

/* --------------------------------------------------------------------------
   2. HEADER & NAVIGATION (Glassmorphism Black-Blue)
   -------------------------------------------------------------------------- */
#rec2545644101 .menu-bg,
.t396__group.menu-bg {
  background-color: rgba(6, 12, 28, 0.85) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 102, 255, 0.15) !important;
  border-radius: 14px !important;
}

/* Header nav links */
.nlm009fixmenu a.tn-atom,
.t3112 a {
  color: #e2e8f0 !important;
  transition: all 0.3s ease !important;
}
.nlm009fixmenu a.tn-atom:hover,
.t3112 a:hover {
  color: var(--blue-electric) !important;
  text-shadow: 0 0 12px rgba(0, 210, 255, 0.6) !important;
}

/* Header Book Now Button */
#rec2545644101 .tn-elem[data-elem-id="1785256736110000001"] .tn-atom,
#rec2551564801 .t-btn {
  background: linear-gradient(135deg, #0052d4, #0088ff, #00d2ff) !important;
  background-size: 200% auto !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 18px rgba(0, 102, 255, 0.45) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#rec2545644101 .tn-elem[data-elem-id="1785256736110000001"] .tn-atom:hover,
#rec2551564801 .t-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(0, 210, 255, 0.65) !important;
  background-position: right center !important;
}

/* Mobile Slide-Out Menu */
.t3112,
.t3112__panel {
  background-color: #040817 !important;
  border-left: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: -15px 0 40px rgba(0, 0, 0, 0.8) !important;
}
.t3112__burger_bg {
  background-color: rgba(6, 12, 28, 0.9) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* --------------------------------------------------------------------------
   3. HERO SECTION DYNAMIC TEXT ANIMATION & STYLES
   -------------------------------------------------------------------------- */
#rec2492769301 .t396__carrier {
  background: radial-gradient(ellipse 90% 60% at 50% 20%, rgba(14, 55, 145, 0.38) 0%, rgba(3, 7, 18, 0.95) 75%) !important;
}

/* Ensure background car image doesn't block text pointer events */
#rec2492769301 .tn-elem[data-elem-id="1784726614858000059"] {
  pointer-events: none !important;
}

/* "STUTTGART" Animated Gradient Shimmer */
#rec2492769301 .tn-elem[data-elem-id="1784726614857000045"] .tn-atom {
  background: linear-gradient(
    105deg,
    #ffffff 0%,
    #a5c9ff 20%,
    #ffffff 40%,
    #00d2ff 60%,
    #ffffff 80%,
    #3b82f6 100%
  ) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  animation: heroShimmer 6s linear infinite, heroRevealUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.5)) !important;
  letter-spacing: -1px;
  cursor: default;
  transition: transform 0.4s ease, filter 0.4s ease !important;
  position: relative;
  z-index: 5;
}
#rec2492769301 .tn-elem[data-elem-id="1784726614857000045"] .tn-atom:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 0 35px rgba(0, 210, 255, 0.8)) !important;
}

/* "SERVICE" Glowing Electric Cyan Pulse */
#rec2492769301 .tn-elem[data-elem-id="1784726614857000046"] .tn-atom {
  background: linear-gradient(135deg, #00f0ff 0%, #0088ff 55%, #0051ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  animation: heroPulseGlow 3.5s ease-in-out infinite alternate, heroRevealUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important;
  filter: drop-shadow(0 0 18px rgba(0, 210, 255, 0.75)) drop-shadow(0 0 40px rgba(0, 102, 255, 0.5)) !important;
  cursor: default;
  transition: transform 0.4s ease !important;
  position: relative;
  z-index: 5;
}
#rec2492769301 .tn-elem[data-elem-id="1784726614857000046"] .tn-atom:hover {
  transform: scale(1.03);
}

/* Subtitle "Premium Car Service in Krasnoyarsk" */
#rec2492769301 .tn-elem[data-elem-id="1784726614857000047"] .tn-atom {
  color: #cbd5e1 !important;
  letter-spacing: 0.8px;
  animation: heroSubtitleFade 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 102, 255, 0.3) !important;
}

/* Hero Car Brand Badges (Porsche, Audi, Bentley, Lamborghini, BMW) */
#rec2492769301 .tn-elem[data-elem-id="1784726614858000050"] .tn-atom,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000052"] .tn-atom,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000054"] .tn-atom,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000056"] .tn-atom,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000058"] .tn-atom {
  color: #94a3b8 !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}
#rec2492769301 .tn-elem[data-elem-id="1784726614858000050"] .tn-atom:hover,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000052"] .tn-atom:hover,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000054"] .tn-atom:hover,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000056"] .tn-atom:hover,
#rec2492769301 .tn-elem[data-elem-id="1784726614858000058"] .tn-atom:hover {
  color: var(--blue-electric) !important;
  text-shadow: 0 0 12px rgba(0, 210, 255, 0.8) !important;
  transform: translateY(-2px);
}

/* Hero Main CTA Button */
#rec2492769301 .tn-elem[data-elem-id="1784726614859000066"] .tn-atom {
  background: linear-gradient(135deg, #0052d4 0%, #0088ff 50%, #00d2ff 100%) !important;
  background-size: 200% auto !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  box-shadow: 0 6px 25px rgba(0, 102, 255, 0.5), 0 0 15px rgba(0, 210, 255, 0.35) !important;
  animation: heroBtnPulse 3s ease-in-out infinite !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#rec2492769301 .tn-elem[data-elem-id="1784726614859000066"] .tn-atom:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 10px 35px rgba(0, 210, 255, 0.75), 0 0 25px rgba(0, 102, 255, 0.5) !important;
  background-position: right center !important;
}

/* --------------------------------------------------------------------------
   4. SECTION: SERVICES CARDS ANIMATION & BLACK-BLUE THEME (#rec2493806201)
   -------------------------------------------------------------------------- */
#rec2493806201 .t396__artboard > a.t396__group {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block;
}

/* Service Card Background Shape */
#rec2493806201 .t396__artboard > a.t396__group .t396__elem[data-elem-type="shape"]:first-child .tn-atom {
  background: rgba(7, 14, 34, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Service Card Titles */
#rec2493806201 .t396__elem[data-elem-type="text"] .tn-atom {
  color: #ffffff !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

/* Service Card Images */
#rec2493806201 .t396__elem[data-elem-type="image"] img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
  filter: brightness(0.95) contrast(1.05);
}

/* Service Card Arrow Button Background Shape */
#rec2493806201 .t396__group .t396__elem[data-elem-type="shape"] .tn-atom {
  background: rgba(14, 28, 62, 0.95) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 8px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Service Card Arrow SVG Icon */
#rec2493806201 .t396__group .t396__elem[data-elem-type="vector"] .tn-atom {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: invert(1) brightness(2) drop-shadow(0 0 3px rgba(0, 210, 255, 0.6));
}

/* SERVICE CARD HOVER EFFECT (LIFT, BORDER GLOW, ZOOM, ARROW ROTATE) */
#rec2493806201 .t396__artboard > a.t396__group:hover {
  transform: translateY(-10px) scale(1.025) !important;
  z-index: 10 !important;
}

#rec2493806201 .t396__artboard > a.t396__group:hover .t396__elem[data-elem-type="shape"]:first-child .tn-atom {
  background: rgba(10, 22, 54, 0.96) !important;
  border-color: rgba(0, 210, 255, 0.85) !important;
  box-shadow: 0 25px 50px rgba(0, 85, 255, 0.38), 0 0 30px rgba(0, 210, 255, 0.28) !important;
}

#rec2493806201 .t396__artboard > a.t396__group:hover .t396__elem[data-elem-type="text"] .tn-atom {
  color: var(--blue-electric) !important;
  text-shadow: 0 0 15px rgba(0, 210, 255, 0.5) !important;
}

#rec2493806201 .t396__artboard > a.t396__group:hover .t396__elem[data-elem-type="image"] img {
  transform: scale(1.09) translateY(-3px) !important;
  filter: brightness(1.05) drop-shadow(0 10px 20px rgba(0, 102, 255, 0.35)) !important;
}

#rec2493806201 .t396__artboard > a.t396__group:hover .t396__group .t396__elem[data-elem-type="shape"] .tn-atom {
  background: linear-gradient(135deg, #0052d4, #00d2ff) !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.8) !important;
}

#rec2493806201 .t396__artboard > a.t396__group:hover .t396__group .t396__elem[data-elem-type="vector"] .tn-atom {
  transform: translate(2px, -2px) rotate(45deg) scale(1.15) !important;
}

/* "All Services" Button in Services Section */
#rec2493806201 .tn-elem[data-elem-id="1784754530982000059"] .tn-atom {
  background: linear-gradient(135deg, #0052d4, #0088ff, #00d2ff) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#rec2493806201 .tn-elem[data-elem-id="1784754530982000059"] .tn-atom:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(0, 210, 255, 0.65) !important;
}

/* --------------------------------------------------------------------------
   5. SECTION: SPECIAL OFFERS CARDS ANIMATION (#rec2528485101)
   -------------------------------------------------------------------------- */
#rec2528485101 .t-cms__card {
  background: rgba(7, 14, 34, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease !important;
}

#rec2528485101 .t-cms__card__title {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

#rec2528485101 .t-cms__card__descr {
  color: var(--text-muted-blue) !important;
}

#rec2528485101 .t-cms__card__image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Category Filter Tags */
.t-cms__parts__link {
  background: rgba(12, 25, 55, 0.8) !important;
  color: var(--blue-cyan) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}
.t-cms__parts__link:hover,
.t-cms__parts__link.t-active {
  background: var(--blue-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.5) !important;
  border-color: var(--blue-electric) !important;
}

/* SPECIAL OFFERS CARD HOVER */
#rec2528485101 .t-cms__card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(0, 210, 255, 0.8) !important;
  box-shadow: 0 25px 45px rgba(0, 85, 255, 0.32), 0 0 25px rgba(0, 210, 255, 0.22) !important;
}

#rec2528485101 .t-cms__card:hover .t-cms__card__title {
  color: var(--blue-electric) !important;
  text-shadow: 0 0 12px rgba(0, 210, 255, 0.4) !important;
}

#rec2528485101 .t-cms__card:hover .t-cms__card__image {
  transform: scale(1.08) !important;
}

/* --------------------------------------------------------------------------
   6. SECTION: BRANDS CARDS ANIMATION (#rec2493880291)
   -------------------------------------------------------------------------- */
#rec2493880291 .tn-group__24938802911784760928824000015,
#rec2493880291 .tn-group__24938802911784763555396000036 {
  background: rgba(7, 14, 34, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  padding: 10px;
}

#rec2493880291 .t396__elem[data-elem-type="image"] {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

#rec2493880291 .t396__elem[data-elem-type="image"]:hover {
  transform: translateY(-6px) scale(1.08) !important;
  filter: drop-shadow(0 10px 20px rgba(0, 150, 255, 0.45)) brightness(1.15) !important;
}

/* --------------------------------------------------------------------------
   7. SECTION: WORK EXAMPLES CARDS ANIMATION (#rec2516660101)
   -------------------------------------------------------------------------- */
#rec2516660101 .t-cms__card {
  background: rgba(7, 14, 34, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease !important;
}
#rec2516660101 .t-cms__card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(0, 210, 255, 0.8) !important;
  box-shadow: 0 25px 45px rgba(0, 85, 255, 0.35), 0 0 25px rgba(0, 210, 255, 0.25) !important;
}

/* --------------------------------------------------------------------------
   8. SECTION: ABOUT / STATS & METRIC CARDS (#rec2493923251)
   -------------------------------------------------------------------------- */
/* Metric Stat Cards (15+ years, since 2017, 100% satisfied) */
.tn-group__24939232511784764997282000009,
.tn-group__24939232511784764997283000013,
.tn-group__24939232511784764997283000017 {
  background: rgba(7, 14, 34, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tn-group__24939232511784764997282000009:hover,
.tn-group__24939232511784764997283000013:hover,
.tn-group__24939232511784764997283000017:hover {
  transform: translateY(-7px) scale(1.03) !important;
  border-color: rgba(0, 210, 255, 0.8) !important;
  box-shadow: 0 20px 40px rgba(0, 85, 255, 0.3), 0 0 20px rgba(0, 210, 255, 0.2) !important;
}

/* Stat Card Numbers */
.tn-group__24939232511784764997282000009 .t396__elem:first-child .tn-atom,
.tn-group__24939232511784764997283000013 .t396__elem:first-child .tn-atom,
.tn-group__24939232511784764997283000017 .t396__elem:first-child .tn-atom {
  color: #00d2ff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 20px rgba(0, 210, 255, 0.7) !important;
}
.tn-group__24939232511784764997282000009 .t396__elem:last-child .tn-atom,
.tn-group__24939232511784764997283000013 .t396__elem:last-child .tn-atom,
.tn-group__24939232511784764997283000017 .t396__elem:last-child .tn-atom {
  color: #cbd5e1 !important;
}

/* "About Company" Badge */
#molecule-1784764997284000041,
#rec2493923251 .tn-group[data-group-id="1784764997284000041"] #molecule-1784764997284000041 {
  background-color: rgba(6, 16, 42, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 210, 255, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.35) !important;
}
#molecule-1784764997284000041 .tn-atom,
#rec2493923251 .tn-group[data-group-id="1784764997284000041"] .tn-atom {
  color: #00d2ff !important;
  font-weight: 600 !important;
}

/* Feature Badges in About Section */
.tn-group__24939232511784764997285000051,
.tn-group__24939232511784764997285000054,
.tn-group__24939232511784764997285000057,
.tn-group__24939232511784764997286000060,
.tn-group__24939232511784764997286000063,
.tn-group__24939232511784764997286000066 {
  background: rgba(10, 20, 46, 0.8) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 10px !important;
  transition: all 0.35s ease !important;
}
.tn-group__24939232511784764997285000051:hover,
.tn-group__24939232511784764997285000054:hover,
.tn-group__24939232511784764997285000057:hover,
.tn-group__24939232511784764997286000060:hover,
.tn-group__24939232511784764997286000063:hover,
.tn-group__24939232511784764997286000066:hover {
  border-color: var(--blue-electric) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0, 150, 255, 0.25) !important;
}

/* Feature cards in About Section */
.tn-group__24939232511784764997283000020,
.tn-group__24939232511784764997284000027,
.tn-group__24939232511784764997284000034 {
  background: rgba(7, 14, 34, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tn-group__24939232511784764997283000020:hover,
.tn-group__24939232511784764997284000027:hover,
.tn-group__24939232511784764997284000034:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(0, 210, 255, 0.75) !important;
  box-shadow: 0 20px 45px rgba(0, 85, 255, 0.32), 0 0 25px rgba(0, 210, 255, 0.2) !important;
}

/* --------------------------------------------------------------------------
   9. SECTION: BOOKING FORM CARD & INPUTS (#rec2503371951, #rec2542171501)
   -------------------------------------------------------------------------- */
#rec2503371951 .t396__artboard {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(14, 55, 145, 0.25) 0%, rgba(3, 7, 18, 0.95) 75%) !important;
}

/* Booking Form Inputs */
.t-input,
.t-select {
  background: rgba(5, 10, 25, 0.85) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}
.t-input:focus,
.t-select:focus {
  border-color: var(--blue-electric) !important;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.45) !important;
  outline: none !important;
}

/* Form Submit Buttons */
.t-submit,
#rec2503371951 .tn-elem[data-elem-id="1784766191356000021"] .tn-atom {
  background: linear-gradient(135deg, #0052d4, #0088ff, #00d2ff) !important;
  background-size: 200% auto !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  box-shadow: 0 6px 25px rgba(0, 102, 255, 0.5), 0 0 15px rgba(0, 210, 255, 0.3) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}
.t-submit:hover,
#rec2503371951 .tn-elem[data-elem-id="1784766191356000021"] .tn-atom:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 35px rgba(0, 210, 255, 0.75) !important;
  background-position: right center !important;
}

/* --------------------------------------------------------------------------
   10. FOOTER (#rec2503371961)
   -------------------------------------------------------------------------- */
#rec2503371961,
#rec2503371961 .t396__carrier,
#rec2503371961 .t396__artboard {
  background-color: #02050f !important;
}
#rec2503371961 a.tn-atom {
  color: #94a3b8 !important;
  transition: all 0.3s ease !important;
}
#rec2503371961 a.tn-atom:hover {
  color: #00d2ff !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.5) !important;
}

/* --------------------------------------------------------------------------
   11. COOKIE BANNER & POPUPS (Black-Blue Theme)
   -------------------------------------------------------------------------- */
.t657__wrapper {
  background: rgba(6, 12, 28, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 102, 255, 0.25) !important;
  border-radius: 14px !important;
  color: #e2e8f0 !important;
}
.t657__text,
.t657__text div,
.t657__text p,
.t657__text span {
  color: #cbd5e1 !important;
}
.t657__text a {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}
.t657__btn {
  background: linear-gradient(135deg, #0052d4, #00d2ff) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.5) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}
.t657__btn:hover {
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.8) !important;
  transform: translateY(-2px) scale(1.03) !important;
}
.t657__close-button svg path {
  fill: #94a3b8 !important;
}

.t-popup__container {
  background: #050b1a !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 102, 255, 0.25) !important;
  border-radius: 16px !important;
}

/* --------------------------------------------------------------------------
   12. SCROLL-TRIGGERED ENTRANCE ANIMATIONS FOR ALL CARDS
   -------------------------------------------------------------------------- */
.wb-card-anim {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}

.wb-card-anim.wb-in-view {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* --------------------------------------------------------------------------
   13. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes heroShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 250% 50%;
  }
}

@keyframes heroPulseGlow {
  0% {
    filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.7)) drop-shadow(0 0 35px rgba(0, 102, 255, 0.45));
  }
  100% {
    filter: drop-shadow(0 0 25px rgba(0, 210, 255, 0.95)) drop-shadow(0 0 55px rgba(0, 102, 255, 0.75));
  }
}

@keyframes heroRevealUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSubtitleFade {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBtnPulse {
  0%, 100% {
    box-shadow: 0 6px 25px rgba(0, 102, 255, 0.5), 0 0 15px rgba(0, 210, 255, 0.3);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.7), 0 0 25px rgba(0, 210, 255, 0.55);
  }
}