/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(231,210,21,.12), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(1,68,37,.25), transparent 55%),
    #0b0f0d;
  line-height:1.6;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  background:linear-gradient(180deg, rgba(19, 94, 56, 0.9), rgba(32, 76, 54, 0.65));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(231,210,21,.15);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(231,210,21,.25))}
.brand-text{
  display:none; /* shown if logo missing */
  font-weight:800; letter-spacing:.6px;
  background:linear-gradient(90deg, var(--gold), #fffbd1, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(231,210,21,.25);
}
.site-nav{display:flex; gap:14px}
.site-nav a{
  color:var(--text); text-decoration:none; padding:10px 14px; border-radius:999px;
  transition:.25s transform,.25s background,.25s color; font-weight:600;
}
.site-nav a:hover{background:rgba(231,210,21,.1); transform:translateY(-1px)}
.site-nav a.active{background:linear-gradient(90deg, rgba(231,210,21,.18), rgba(1,68,37,.5)); border:1px solid rgba(231,210,21,.35)}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:3px; background:var(--gold); margin:5px 0; border-radius:2px}

/* Containers */
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:60px 0}
.section.alt-bg{background:linear-gradient(180deg, rgba(1,68,37,.15), rgba(231,210,21,.08))}
.section-head{max-width:900px; margin:0 auto 28px; text-align:center}
.section-head h2{margin:0 0 8px; font-size:2rem}

/* Hero slider */
.hero{position:relative}
.slider{position:relative; overflow:hidden; border-radius:var(--radius); margin:16px; box-shadow:var(--shadow)}
.slides{display:flex; transition:transform .7s cubic-bezier(.22,.61,.36,1); will-change:transform}
.slide{position:relative; min-width:100%; height:64vh; background:#000}
.slide img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.02)}
.caption{
  position:absolute; inset:auto 0 0 0; padding:28px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 70%);
}
.caption h1{margin:.2em 0; font-size:2rem; text-shadow:0 8px 30px rgba(0,0,0,.6)}
.control{
  position:absolute; top:50%; transform:translateY(-50%); border:0; width:44px; height:44px; border-radius:50%;
  background:rgba(231,210,21,.2); color:#0b0f0d; backdrop-filter: blur(6px); cursor:pointer;
  display:grid; place-items:center; transition:.25s; box-shadow:0 8px 20px rgba(0,0,0,.35)
}
.control:hover{background:var(--gold); transform:translateY(-50%) scale(1.05)}
.prev{left:14px} .next{right:14px}
.dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:5}
.dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.65); background:transparent; cursor:pointer; padding:0;
}
.dots button.active{background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(231,210,21,.85)}

/* Grids & cards */
.grid{display:grid; gap:24px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.five{grid-template-columns:repeat(5,1fr)}
.cards .card{height:100%}
.card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(231,210,21,.18);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.card.media{padding:0; overflow:hidden}
.card.media img{display:block; width:100%; height:100%; object-fit:cover}
.stat{background:linear-gradient(180deg, rgba(231,210,21,.1), rgba(1,68,37,.2)); border:1px solid rgba(231,210,21,.25); border-radius:14px; padding:18px; text-align:center}
.stat-number{font-size:1.6rem; font-weight:800; color:var(--gold)}
.stat-label{color:var(--muted)}

/* Lists */
.list-check{list-style:none; padding:0; margin:0}
.list-check li{margin:10px 0; padding-left:28px; position:relative}
.list-check li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700}

.list-dot{list-style:none; padding:0; margin:0}
.list-dot li{margin:10px 0; padding-left:18px; position:relative}
.list-dot li::before{content:"•"; position:absolute; left:0; top:0; color:var(--gold); font-weight:900}

.tools{color:var(--muted)}

/* Pills */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.pill{
  padding:8px 14px; border-radius:999px; border:1px solid rgba(231,210,21,.35);
  background:linear-gradient(180deg, rgba(231,210,21,.15), rgba(1,68,37,.25));
  color:var(--text); font-weight:600
}

/* Buttons */
.btn{
  --elev:0;
  display:inline-block; text-decoration:none; border:0; cursor:pointer; font-weight:800;
  padding:12px 18px; border-radius:12px; transition:.25s transform,.25s box-shadow,.25s background,.25s color;
  transform:translateY(var(--elev));
}
.btn:hover{transform:translateY(calc(var(--elev) - 2px))}
.btn:active{transform:translateY(calc(var(--elev) + 1px)) scale(.99)}
.btn-primary{
  color:#0b0f0d; background:linear-gradient(90deg, var(--gold), #fffbd1 50%, var(--gold));
  box-shadow:0 10px 24px rgba(231,210,21,.35), inset 0 0 0 1px rgba(11,15,13,.2);
}
.btn-ghost{
  color:var(--text); background:transparent; border:1px solid rgba(231,210,21,.45);
  box-shadow:0 8px 20px rgba(0,0,0,.35)
}
.btn-3d{
  --elev: -3px;
  background:linear-gradient(180deg, #fffbd1, var(--gold));
  box-shadow:
    0 14px 30px rgba(231,210,21,.35),
    0 2px 0 rgba(1,68,37,.8) inset,
    0 -2px 0 rgba(255,255,255,.4) inset;
}
.btn-glow{
  position:relative; box-shadow:0 0 24px rgba(231,210,21,.6), 0 10px 24px rgba(231,210,21,.25)
}
.btn-shine{
  position:relative; overflow:hidden
}
.btn-shine::after{
  content:""; position:absolute; top:-120%; left:-120%; width:240%; height:240%;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.7) 50%, transparent 55%);
  transform:rotate(20deg); animation:shine 3s infinite linear
}
@keyframes shine{0%{transform:translateX(-60%) rotate(20deg)}100%{transform:translateX(60%) rotate(20deg)}}

/* Page hero */
.page-hero{position:relative; border-bottom:1px solid rgba(231,210,21,.15)}
.page-hero.with-image{height:42vh; overflow:hidden}
.page-hero.with-image img{width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(1.1)}
.page-hero .overlay{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:0 12px
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
.form .field{margin-bottom:14px}
.form label{display:block; margin-bottom:6px; color:var(--muted)}
.form input,.form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(231,210,21,.25);
  background:rgba(1,68,37,.15); color:var(--text); outline:none; transition:.2s border,.2s box-shadow
}
.form input:focus,.form textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,210,21,.2)}
.form-note{color:var(--muted); font-size:.9rem}
.map-wrap{border-radius:14px; overflow:hidden; border:1px solid rgba(231,210,21,.25)}

/* Footer */
.site-footer{margin-top:40px; background:linear-gradient(180deg, rgba(1,68,37,.45), rgba(1,68,37,.2)); border-top:1px solid rgba(231,210,21,.25)}
.footer-grid{display:grid; grid-template-columns:2fr 1.5fr 2fr; gap:20px; padding:28px 20px}
.footer-photos{display:flex; gap:8px}
.footer-photos img{width:80px; height:60px; object-fit:cover; border-radius:8px; border:1px solid rgba(231,210,21,.25)}

/* Tilt effect */
.tilt-zone .tilt, .tilt{transform-style:preserve-3d; will-change:transform; transition:transform .2s ease}
.tilt img{transform:translateZ(20px)}
.tilt:hover{transform:perspective(800px) rotateX(4deg) rotateY(-6deg) translateZ(10px)}

/* CTA band */
.cta-wrap{background:linear-gradient(90deg, rgba(231,210,21,.12), rgba(1,68,37,.35)); text-align:center}

/* Responsive */
@media (max-width: 960px){
  .grid.two{grid-template-columns:1fr}
  .grid.four{grid-template-columns:repeat(2,1fr)}
  .grid.five{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .site-nav{display:none; position:absolute; right:12px; top:64px; background:#0b0f0d; padding:10px; border-radius:12px; border:1px solid rgba(231,210,21,.2); flex-direction:column}
  .site-nav a{padding:10px 12px}
  .nav-toggle{display:block}
  .caption h1{font-size:1.6rem}
  .slide{height:55vh}
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .slides{transition:none}
  .btn-shine::after{animation:none; display:none}
  .tilt:hover{transform:none}
}

/* Minor link focus */
a:focus-visible, button:focus-visible{outline:3px solid rgba(231,210,21,.6); outline-offset:2px}
:root {
  /* VKHT Brand Colors */
  --vkht-primary: #014425;
  --vkht-secondary: #e7d215;
  --vkht-secondary1: #535050;;
  --vkht-primary-rgb: 1, 68, 37;
  --vkht-secondary-rgb: 231, 210, 21;

  /* Additional Colors */
  --white: #ffffff;
  --black: #000000;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Spacing */
  --container-max-width: 1200px;
  --section-padding: 80px 0;

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--white);
  overflow-x: hidden;
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Language Toggle */
.language-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.lang-btn {
  background: var(--vkht-primary);
  color: var(--white);
  border: none;
  padding: 10px 15px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-lg);
  /* Added position relative for dropdown */
  position: relative;
}

.lang-btn:hover {
  background: var(--vkht-secondary);
  color: var(--vkht-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Added language dropdown styles */
.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  padding: 8px;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-200);
}

.lang-btn:hover .lang-dropdown,
.lang-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--gray-700);
  font-size: var(--font-size-sm);
}

.lang-option:hover {
  background: var(--gray-100);
  color: var(--vkht-primary);
}

.lang-option.active {
  background: rgba(var(--vkht-primary-rgb), 0.1);
  color: var(--vkht-primary);
  font-weight: 600;
}

.lang-option .flag {
  font-size: 16px;
}

/* Added language transition effects */
.lang-transition {
  transition: all var(--transition-normal);
}

.lang-transition.fade-out {
  opacity: 0;
  transform: translateY(-5px);
}

.lang-transition.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Added Tamil font support */
[lang="ta"] {
  font-family: "Noto Sans Tamil", "Tamil Sangam MN", "Latha", "Vijaya", var(--font-family);
}

/* Added language-specific text alignment */
.text-tamil {
  text-align: left;
  direction: ltr;
}

/* Added language indicator */
.lang-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(var(--vkht-primary-rgb), 0.9);
  color: var(--white);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-normal);
}

.lang-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

/* Added language-specific button styles */
.btn-tamil {
  font-family: "Noto Sans Tamil", var(--font-family);
  letter-spacing: 0.5px;
}

/* Enhanced responsive language toggle */
@media (max-width: 768px) {
  .language-toggle {
    top: 15px;
    right: 15px;
  }

  .lang-btn {
    padding: 8px 12px;
    font-size: var(--font-size-xs);
  }

  .lang-dropdown {
    min-width: 120px;
    right: -10px;
  }
}

@media (max-width: 480px) {
  .language-toggle {
    top: 10px;
    right: 10px;
  }

  .lang-btn {
    padding: 6px 10px;
  }

  .lang-dropdown {
    min-width: 100px;
    right: -20px;
  }
}

/* Header Styles */
.header {
  background: var(--white);
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 0;
  z-index: 999;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--vkht-primary) 0%, var(--vkht-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.logo-text h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--vkht-primary) 0%, var(--vkht-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.logo-text p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 0;
}

.nav-desktop {
  display: flex;
  gap: 32px;
}

.nav-desktop a {
  text-decoration: none;
  color: var(--gray-700);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all var(--transition-normal);
  position: relative;
}

.nav-desktop a:hover {
  color: var(--vkht-primary);
  background: rgba(var(--vkht-primary-rgb), 0.1);
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--vkht-secondary);
  transition: all var(--transition-normal);
  transform: translateX(-50%);
}

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

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--gray-700);
  cursor: pointer;
  padding: 8px;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  background: var(--gray-50);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.nav-mobile a {
  text-decoration: none;
  color: var(--gray-700);
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all var(--transition-normal);
}

.nav-mobile a:hover {
  color: var(--vkht-primary);
  background: var(--white);
}

/* Button Styles */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  /* Added 3D transform properties for depth effects */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Added button size variations */
.btn-sm {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--font-size-lg);
}

.btn-xl {
  padding: 20px 40px;
  font-size: var(--font-size-xl);
}

.btn-primary {
  background: linear-gradient(135deg, var(--vkht-primary) 0%, var(--vkht-secondary) 100%);
  color: var(--white);
  /* Added animated gradient background */
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

.btn-secondary {
  background: var(--vkht-secondary);
  color: var(--vkht-primary);
}

.btn-outline {
  background: transparent;
  color: var(--vkht-primary);
  border-color: var(--vkht-primary);
}

.btn-outline-white {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--white);
  backdrop-filter: blur(10px);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.btn-outline:hover {
  background: var(--vkht-primary);
  color: var(--white);
}

.btn-outline-white:hover {
  background: var(--white);
  color: var(--vkht-primary);
}

/* Enhanced Advanced Button Effects with 3D transformations and new animations */

/* Enhanced Glow Effect with Color Variations */
.glow-effect {
  box-shadow: 0 0 20px rgba(var(--vkht-secondary-rgb), 0.5);
  transition: all var(--transition-normal);
}

.glow-effect:hover {
  box-shadow: 0 0 30px rgba(var(--vkht-secondary-rgb), 0.8), 0 0 60px rgba(var(--vkht-secondary-rgb), 0.4), 0 0 100px
    rgba(var(--vkht-secondary-rgb), 0.2);
  transform: translateY(-4px) scale(1.02);
}

.glow-effect.glow-primary:hover {
  box-shadow: 0 0 30px rgba(var(--vkht-primary-rgb), 0.8), 0 0 60px rgba(var(--vkht-primary-rgb), 0.4);
}

/* 3D Button Effect */
.btn-3d {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: all var(--transition-normal);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn-3d:hover {
  transform: perspective(1000px) rotateX(-5deg) rotateY(5deg) translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.btn-3d:active {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Morphing Button Effect */
.btn-morph {
  border-radius: 8px;
  transition: all var(--transition-slow);
}

.btn-morph:hover {
  border-radius: 25px;
  transform: scale(1.05);
}

/* Magnetic Button Effect */
.btn-magnetic {
  transition: all var(--transition-fast);
}

.btn-magnetic:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.1);
}

/* Loading Button State */
.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

/* Particle Effect Button */
.btn-particles {
  position: relative;
  overflow: visible;
}

.btn-particles::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--vkht-secondary) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all var(--transition-slow);
  z-index: -1;
}

.btn-particles:hover::before {
  width: 200px;
  height: 200px;
  opacity: 0.3;
}

/* Neon Button Effect */
.btn-neon {
  border: 2px solid var(--vkht-secondary);
  background: transparent;
  color: var(--vkht-secondary);
  text-shadow: 0 0 10px var(--vkht-secondary);
  box-shadow: 0 0 20px rgba(var(--vkht-secondary-rgb), 0.5), inset 0 0 20px rgba(var(--vkht-secondary-rgb), 0.1);
  transition: all var(--transition-normal);
}

.btn-neon:hover {
  background: var(--vkht-secondary);
  color: var(--vkht-primary);
  text-shadow: none;
  box-shadow: 0 0 30px rgba(var(--vkht-secondary-rgb), 0.8), 0 0 60px rgba(var(--vkht-secondary-rgb), 0.6), inset 0 0
    30px rgba(var(--vkht-secondary-rgb), 0.2);
  transform: scale(1.05);
}

/* Liquid Button Effect */
.btn-liquid {
  position: relative;
  overflow: hidden;
  background: var(--vkht-primary);
  color: var(--white);
}

.btn-liquid::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--vkht-secondary);
  transition: all var(--transition-slow);
  z-index: -1;
}

.btn-liquid:hover::before {
  left: 0;
}

.btn-liquid:hover {
  color: var(--vkht-primary);
}

/* Gradient Animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Enhanced Shine Effect */
.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left var(--transition-slow);
  z-index: 1;
}

.shine-effect:hover::before {
  left: 100%;
}

/* Added multiple shine variants */
.shine-effect.shine-diagonal::before {
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
}

.shine-effect.shine-rainbow::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 150, 0.3),
    rgba(0, 255, 255, 0.3),
    rgba(255, 255, 0, 0.3),
    transparent
  );
}

/* Pulse Effect Variations */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(var(--vkht-secondary-rgb), 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(var(--vkht-secondary-rgb), 0.8), 0 0 80px rgba(var(--vkht-secondary-rgb), 0.3);
  }
}

@keyframes pulse-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes pulse-border {
  0%,
  100% {
    border-width: 2px;
  }
  50% {
    border-width: 4px;
  }
}

.pulse-effect {
  animation: pulse-glow 2s infinite;
}

.pulse-scale {
  animation: pulse-scale 2s infinite;
}

.pulse-border {
  animation: pulse-border 2s infinite;
}

/* Floating Button Effect */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.btn-float {
  animation: float 3s ease-in-out infinite;
}

/* Wobble Effect */
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25px) rotate(-5deg);
  }
  30% {
    transform: translateX(20px) rotate(3deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3deg);
  }
  60% {
    transform: translateX(10px) rotate(2deg);
  }
  75% {
    transform: translateX(-5px) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

.btn-wobble:hover {
  animation: wobble 0.8s ease-in-out;
}

/* Bounce Effect */
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.btn-bounce:hover {
  animation: bounce 1s ease;
}

/* Spin Effect */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn-spin:hover {
  animation: spin 0.5s linear;
}

/* Flip Effect */
@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
  }
  100% {
    transform: perspective(400px) scale(1);
  }
}

.btn-flip:hover {
  animation: flip 0.6s ease-in-out;
}

/* Icon Animation within Buttons */
.btn-icon-slide i {
  transition: transform var(--transition-normal);
}

.btn-icon-slide:hover i {
  transform: translateX(5px);
}

.btn-icon-rotate i {
  transition: transform var(--transition-normal);
}

.btn-icon-rotate:hover i {
  transform: rotate(360deg);
}

.btn-icon-bounce i {
  transition: transform var(--transition-normal);
}

.btn-icon-bounce:hover i {
  animation: bounce 0.6s ease;
}

/* Gradient Border Animation */
@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-gradient-border {
  background: linear-gradient(45deg, var(--vkht-primary), var(--vkht-secondary), var(--vkht-primary));
  background-size: 300% 300%;
  animation: gradient-border 3s ease infinite;
  padding: 2px;
  border-radius: 10px;
}

.btn-gradient-border .btn-content {
  background: var(--white);
  color: var(--vkht-primary);
  padding: 10px 22px;
  border-radius: 8px;
  display: block;
  transition: all var(--transition-normal);
}

.btn-gradient-border:hover .btn-content {
  background: transparent;
  color: var(--white);
}

/* Shadow Animation */
@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--vkht-secondary-rgb), 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(var(--vkht-secondary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--vkht-secondary-rgb), 0);
  }
}

.btn-shadow-pulse {
  animation: shadow-pulse 2s infinite;
}

/* Glitch Effect */
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

.btn-glitch:hover {
  animation: glitch 0.3s ease-in-out;
}

/* Typewriter Effect for Button Text */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.btn-typewriter {
  overflow: hidden;
  white-space: nowrap;
}

.btn-typewriter:hover {
  animation: typewriter 1s steps(20, end);
}

/* Hero Slider */
.hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* Added support for fullscreen mode */
  transition: all var(--transition-normal);
}

.hero-slider.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--black);
}

/* Added top controls for fullscreen and transition modes */
.slider-controls-top {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 30;
  display: flex;
  gap: 16px;
  align-items: center;
}

.fullscreen-toggle {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.transition-selector {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 4px;
}

.transition-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

.transition-btn:hover,
.transition-btn.active {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  transform: scale(1.1);
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  /* Added touch support */
  touch-action: pan-y;
  user-select: none;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Enhanced transition support for multiple effects */
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(100%);
}

.slide.active {
  opacity: 1;
  transform: translateX(0);
}

/* Added different transition modes */
.slider-container.fade-mode .slide {
  transform: translateX(0);
  transition: opacity 1s ease-in-out;
}

.slider-container.slide-mode .slide {
  opacity: 1;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-container.slide-mode .slide:not(.active) {
  transform: translateX(100%);
}

.slider-container.slide-mode .slide.prev {
  transform: translateX(-100%);
}

.slider-container.zoom-mode .slide {
  opacity: 1;
  transform: scale(0.8);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-container.zoom-mode .slide.active {
  transform: scale(1);
}

.slider-container.flip-mode .slide {
  opacity: 1;
  transform: perspective(1000px) rotateY(-90deg);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-container.flip-mode .slide.active {
  transform: perspective(1000px) rotateY(0deg);
}

.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* Enhanced overlay with gradient options */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 2;
}

.slide-bg img,
.slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Added parallax effect */
  transform: scale(1.1);
  transition: transform 20s ease-out;
}

.slide.active .slide-bg img,
.slide.active .slide-video {
  transform: scale(1);
}

/* Added video-specific styles */
.slide-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.1);
}

.slide.active .slide-video {
  transform: translate(-50%, -50%) scale(1);
}

.slide-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
}

.slide-text {
  max-width: 700px;
  /* Added animation delays for staggered entrance */
  animation-delay: 0.3s;
}

/* Added slide badge styling */
.slide-badge {
  display: inline-block;
  background: rgba(var(--vkht-secondary-rgb), 0.9);
  color: var(--vkht-primary);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: slideInUp 0.8s ease-out 0.5s both;
}

.slide-title {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.2;
  animation: slideInUp 0.8s ease-out 0.7s both;
}

.slide-subtitle {
  font-size: var(--font-size-2xl);
  color: var(--vkht-secondary);
  margin-bottom: 24px;
  font-weight: 600;
  animation: slideInUp 0.8s ease-out 0.9s both;
}

.slide-description {
  font-size: var(--font-size-xl);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  line-height: 1.6;
  animation: slideInUp 0.8s ease-out 1.1s both;
}

/* Added slide stats styling */
.slide-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  animation: slideInUp 0.8s ease-out 1.3s both;
}

.slide-stats .stat-item {
  text-align: center;
}

.slide-stats .stat-number {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--vkht-secondary);
  line-height: 1;
}

.slide-stats .stat-label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Added slide features styling */
.slide-features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  animation: slideInUp 0.8s ease-out 1.3s both;
}

.slide-features .feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 20px;
  color: var(--white);
  font-size: var(--font-size-sm);
}

.slide-features .feature-item i {
  color: var(--vkht-secondary);
}

/* Added slide technologies styling */
.slide-technologies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  animation: slideInUp 0.8s ease-out 1.3s both;
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 16px;
  border-radius: 12px;
  color: var(--white);
  text-align: center;
  transition: all var(--transition-normal);
}

.tech-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
}

.tech-item i {
  font-size: var(--font-size-xl);
  color: var(--vkht-secondary);
}

.tech-item span {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.slide-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: slideInUp 0.8s ease-out 1.5s both;
}

/* Enhanced slider controls with progress bar and thumbnails */
.slider-controls {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.slider-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--vkht-secondary);
  width: 0%;
  transition: width var(--transition-normal);
  border-radius: 2px;
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.dot.active {
  background: var(--vkht-secondary);
  transform: scale(1.25);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* Added thumbnail navigation */
.slider-thumbnails {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.thumbnail {
  width: 80px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.thumbnail.active {
  border-color: var(--vkht-secondary);
  transform: scale(1.1);
}

.thumbnail:hover {
  transform: scale(1.05);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: var(--white);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  text-align: center;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--white);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.slider-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.slider-arrow.prev {
  left: 20px;
}

.slider-arrow.next {
  right: 20px;
}

.autoplay-toggle {
  position: absolute;
  top: 20px;
  right: 80px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.autoplay-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

.autoplay-toggle.paused {
  opacity: 0.5;
}

/* Added slide info with counter and timer */
.slide-info {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 12px 16px;
  border-radius: 20px;
  color: var(--white);
}

.slide-counter {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.slide-timer {
  width: 32px;
  height: 32px;
}

.timer-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-svg {
  width: 100%;
  height: 100%;
}

.timer-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

.timer-progress {
  fill: none;
  stroke: var(--vkht-secondary);
  stroke-width: 2;
  stroke-dasharray: 100, 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--transition-normal);
}

/* Added slide entrance animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Added touch/swipe indicators */
.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  background: rgba(var(--vkht-secondary-rgb), 0.8);
  color: var(--vkht-primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  opacity: 0;
  transition: all var(--transition-normal);
  pointer-events: none;
}

.swipe-indicator.left {
  left: 20px;
}

.swipe-indicator.right {
  right: 20px;
}

.swipe-indicator.show {
  opacity: 1;
}

/* Enhanced responsive design for slider */
@media (max-width: 1024px) {
  .slide-title {
    font-size: var(--font-size-4xl);
  }

  .slide-stats {
    gap: 24px;
  }

  .slide-technologies {
    grid-template-columns: repeat(2, 1fr);
  }

  .slider-thumbnails {
    display: none;
  }
}

@media (max-width: 768px) {
  .slider-controls-top {
    top: 15px;
    left: 15px;
    gap: 12px;
  }

  .transition-selector {
    display: none;
  }

  .slide-title {
    font-size: var(--font-size-3xl);
  }

  .slide-subtitle {
    font-size: var(--font-size-xl);
  }

  .slide-description {
    font-size: var(--font-size-base);
  }

  .slide-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .slide-stats {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .slide-stats .stat-item {
    text-align: left;
  }

  .slide-features {
    flex-direction: column;
    align-items: flex-start;
  }

  .slide-technologies {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tech-item {
    padding: 12px;
  }

  .slider-controls {
    bottom: 20px;
  }

  .slider-progress {
    width: 150px;
  }

  .slide-info {
    bottom: 15px;
    right: 15px;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .slide-title {
    font-size: var(--font-size-2xl);
  }

  .slide-technologies {
    grid-template-columns: 1fr;
  }

  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
  }

  .slider-arrow.prev {
    left: 10px;
  }

  .slider-arrow.next {
    right: 10px;
  }

  .slide-info {
    display: none;
  }
}

/* Stats Section */
.stats-section {
  padding: var(--section-padding);
  background: linear-gradient(135deg, var(--vkht-primary) 0%, var(--vkht-secondary) 100%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat-item {
  text-align: center;
  color: var(--white);
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: var(--font-size-2xl);
  transition: all var(--transition-normal);
}

.stat-icon:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}

.stat-value {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: var(--font-size-base);
  opacity: 0.9;
}

/* About Section */
.about-section {
  padding: var(--section-padding);
  background: var(--gray-50);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.2;
}

.about-text {
  font-size: var(--font-size-lg);
  color: var(--gray-700);
  margin-bottom: 24px;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-700);
}

.feature-item i {
  color: var(--vkht-primary);
  font-size: var(--font-size-lg);
}

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-2xl);
}

.experience-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 128px;
  height: 128px;
  background: linear-gradient(135deg, var(--vkht-primary) 0%, var(--vkht-secondary) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
}

.badge-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.badge-text {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

/* Services Preview */
.services-preview {
  padding: var(--section-padding);
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-subtitle {
  font-size: var(--font-size-xl);
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
}

.service-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
}

.service-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.service-card:hover .service-image img {
  transform: scale(1.1);
}

.service-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.service-content {
  padding: 24px;
}

.service-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--vkht-primary);
  margin-bottom: 12px;
}

.service-description {
  color: var(--gray-600);
  margin-bottom: 16px;
  line-height: 1.6;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.feature-tag {
  background: rgba(var(--vkht-secondary-rgb), 0.1);
  color: var(--vkht-primary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* CTA Section */
.cta-section {
  padding: var(--section-padding);
  background: linear-gradient(135deg, var(--vkht-primary) 0%, var(--vkht-secondary) 100%);
  text-align: center;
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.cta-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
}

.cta-description {
  font-size: var(--font-size-xl);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer */
.footer {
  background: var(--vkht-secondary1);
  color: var(--white);
  padding: 48px 0 24px;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.company-info {
  max-width: 400px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-logo .logo-icon {
  background: var(--vkht-secondary);
  color: var(--vkht-primary);
}

.footer-logo h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0;
}

.footer-logo p {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.company-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 32px;
  height: 32px;
  background: var(--vkht-secondary);
  color: var(--vkht-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  transition: all var(--transition-normal);
}

.social-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.footer-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.footer-links a:hover {
  color: var(--vkht-secondary);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
}

.contact-item i {
  color: var(--vkht-secondary);
  width: 16px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-normal);
}

.footer-bottom-links a:hover {
  color: var(--vkht-secondary);
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .slide-title {
    font-size: var(--font-size-4xl);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .company-info {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .nav-desktop,
  .cta-button {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .nav-mobile.active {
    display: flex;
  }

  .slide-title {
    font-size: var(--font-size-3xl);
  }

  .slide-subtitle {
    font-size: var(--font-size-xl);
  }

  .slide-description {
    font-size: var(--font-size-base);
  }

  .slide-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .experience-badge {
    position: static;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .slide-title {
    font-size: var(--font-size-2xl);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
  }

  .slider-arrow.prev {
    left: 10px;
  }

  .slider-arrow.next {
    right: 10px;
  }
}

/* Print Styles */
@media print {
  .header,
  .footer,
  .language-toggle,
  .slider-controls,
  .slider-arrow,
  .autoplay-toggle {
    display: none;
  }

  .hero-slider {
    height: auto;
  }

  .slide {
    position: static;
    opacity: 1;
    page-break-inside: avoid;
  }
}
:root{
  --green:#014425;
  --gold:#E7D215;
  --bg:#0b0f0d;
  --text:#e7f1ea;
  --muted:#b7c8bd;
  --card:#122018;
  --card-2:#0f1a14;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(231,210,21,.12), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(1,68,37,.25), transparent 55%),
    #0b0f0d;
  line-height:1.6;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  background:linear-gradient(180deg, rgba(19, 94, 56, 0.9), rgba(32, 76, 54, 0.65));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(231,210,21,.15);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(231,210,21,.25))}
.brand-text{
  display:none; /* shown if logo missing */
  font-weight:800; letter-spacing:.6px;
  background:linear-gradient(90deg, var(--gold), #fffbd1, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(231,210,21,.25);
}
.site-nav{display:flex; gap:14px}
.site-nav a{
  color:var(--text); text-decoration:none; padding:10px 14px; border-radius:999px;
  transition:.25s transform,.25s background,.25s color; font-weight:600;
}
.site-nav a:hover{background:rgba(231,210,21,.1); transform:translateY(-1px)}
.site-nav a.active{background:linear-gradient(90deg, rgba(231,210,21,.18), rgba(1,68,37,.5)); border:1px solid rgba(231,210,21,.35)}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:3px; background:var(--gold); margin:5px 0; border-radius:2px}

/* Containers */
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:60px 0}
.section.alt-bg{background:linear-gradient(180deg, rgba(1,68,37,.15), rgba(231,210,21,.08))}
.section-head{max-width:900px; margin:0 auto 28px; text-align:center}
.section-head h2{margin:0 0 8px; font-size:2rem}

/* Hero slider */
.hero{position:relative}
.slider{position:relative; overflow:hidden; border-radius:var(--radius); margin:16px; box-shadow:var(--shadow)}
.slides{display:flex; transition:transform .7s cubic-bezier(.22,.61,.36,1); will-change:transform}
.slide{position:relative; min-width:100%; height:64vh; background:#000}
.slide img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.02)}
.caption{
  position:absolute; inset:auto 0 0 0; padding:28px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 70%);
}
.caption h1{margin:.2em 0; font-size:2rem; text-shadow:0 8px 30px rgba(0,0,0,.6)}
.control{
  position:absolute; top:50%; transform:translateY(-50%); border:0; width:44px; height:44px; border-radius:50%;
  background:rgba(231,210,21,.2); color:#0b0f0d; backdrop-filter: blur(6px); cursor:pointer;
  display:grid; place-items:center; transition:.25s; box-shadow:0 8px 20px rgba(0,0,0,.35)
}
.control:hover{background:var(--gold); transform:translateY(-50%) scale(1.05)}
.prev{left:14px} .next{right:14px}
.dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:5}
.dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.65); background:transparent; cursor:pointer; padding:0;
}
.dots button.active{background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(231,210,21,.85)}

/* Grids & cards */
.grid{display:grid; gap:24px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.five{grid-template-columns:repeat(5,1fr)}
.cards .card{height:100%}
.card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(231,210,21,.18);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.card.media{padding:0; overflow:hidden}
.card.media img{display:block; width:100%; height:100%; object-fit:cover}
.stat{background:linear-gradient(180deg, rgba(231,210,21,.1), rgba(1,68,37,.2)); border:1px solid rgba(231,210,21,.25); border-radius:14px; padding:18px; text-align:center}
.stat-number{font-size:1.6rem; font-weight:800; color:var(--gold)}
.stat-label{color:var(--muted)}

/* Lists */
.list-check{list-style:none; padding:0; margin:0}
.list-check li{margin:10px 0; padding-left:28px; position:relative}
.list-check li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700}

.list-dot{list-style:none; padding:0; margin:0}
.list-dot li{margin:10px 0; padding-left:18px; position:relative}
.list-dot li::before{content:"•"; position:absolute; left:0; top:0; color:var(--gold); font-weight:900}

.tools{color:var(--muted)}

/* Pills */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.pill{
  padding:8px 14px; border-radius:999px; border:1px solid rgba(231,210,21,.35);
  background:linear-gradient(180deg, rgba(231,210,21,.15), rgba(1,68,37,.25));
  color:var(--text); font-weight:600
}

/* Buttons */
.btn{
  --elev:0;
  display:inline-block; text-decoration:none; border:0; cursor:pointer; font-weight:800;
  padding:12px 18px; border-radius:12px; transition:.25s transform,.25s box-shadow,.25s background,.25s color;
  transform:translateY(var(--elev));
}
.btn:hover{transform:translateY(calc(var(--elev) - 2px))}
.btn:active{transform:translateY(calc(var(--elev) + 1px)) scale(.99)}
.btn-primary{
  color:#0b0f0d; background:linear-gradient(90deg, var(--gold), #fffbd1 50%, var(--gold));
  box-shadow:0 10px 24px rgba(231,210,21,.35), inset 0 0 0 1px rgba(11,15,13,.2);
}
.btn-ghost{
  color:var(--text); background:transparent; border:1px solid rgba(231,210,21,.45);
  box-shadow:0 8px 20px rgba(0,0,0,.35)
}
.btn-3d{
  --elev: -3px;
  background:linear-gradient(180deg, #fffbd1, var(--gold));
  box-shadow:
    0 14px 30px rgba(231,210,21,.35),
    0 2px 0 rgba(1,68,37,.8) inset,
    0 -2px 0 rgba(255,255,255,.4) inset;
}
.btn-glow{
  position:relative; box-shadow:0 0 24px rgba(231,210,21,.6), 0 10px 24px rgba(231,210,21,.25)
}
.btn-shine{
  position:relative; overflow:hidden
}
.btn-shine::after{
  content:""; position:absolute; top:-120%; left:-120%; width:240%; height:240%;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.7) 50%, transparent 55%);
  transform:rotate(20deg); animation:shine 3s infinite linear
}
@keyframes shine{0%{transform:translateX(-60%) rotate(20deg)}100%{transform:translateX(60%) rotate(20deg)}}

/* Page hero */
.page-hero{position:relative; border-bottom:1px solid rgba(231,210,21,.15)}
.page-hero.with-image{height:42vh; overflow:hidden}
.page-hero.with-image img{width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(1.1)}
.page-hero .overlay{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:0 12px
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
.form .field{margin-bottom:14px}
.form label{display:block; margin-bottom:6px; color:var(--muted)}
.form input,.form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(231,210,21,.25);
  background:rgba(1,68,37,.15); color:var(--text); outline:none; transition:.2s border,.2s box-shadow
}
.form input:focus,.form textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,210,21,.2)}
.form-note{color:var(--muted); font-size:.9rem}
.map-wrap{border-radius:14px; overflow:hidden; border:1px solid rgba(231,210,21,.25)}

/* Footer */
.site-footer{margin-top:40px; background:linear-gradient(180deg, rgba(1,68,37,.45), rgba(1,68,37,.2)); border-top:1px solid rgba(231,210,21,.25)}
.footer-grid{display:grid; grid-template-columns:2fr 1.5fr 2fr; gap:20px; padding:28px 20px}
.footer-photos{display:flex; gap:8px}
.footer-photos img{width:80px; height:60px; object-fit:cover; border-radius:8px; border:1px solid rgba(231,210,21,.25)}

/* Tilt effect */
.tilt-zone .tilt, .tilt{transform-style:preserve-3d; will-change:transform; transition:transform .2s ease}
.tilt img{transform:translateZ(20px)}
.tilt:hover{transform:perspective(800px) rotateX(4deg) rotateY(-6deg) translateZ(10px)}

/* CTA band */
.cta-wrap{background:linear-gradient(90deg, rgba(231,210,21,.12), rgba(1,68,37,.35)); text-align:center}

/* Responsive */
@media (max-width: 960px){
  .grid.two{grid-template-columns:1fr}
  .grid.four{grid-template-columns:repeat(2,1fr)}
  .grid.five{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .site-nav{display:none; position:absolute; right:12px; top:64px; background:#0b0f0d; padding:10px; border-radius:12px; border:1px solid rgba(231,210,21,.2); flex-direction:column}
  .site-nav a{padding:10px 12px}
  .nav-toggle{display:block}
  .caption h1{font-size:1.6rem}
  .slide{height:55vh}
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .slides{transition:none}
  .btn-shine::after{animation:none; display:none}
  .tilt:hover{transform:none}
}

/* Minor link focus */
a:focus-visible, button:focus-visible{outline:3px solid rgba(231,210,21,.6); outline-offset:2px}