/* ================================
   VASU KAUSHAL FOUNDATION - FINAL CSS
================================ */

/* ===== BASIC RESET ===== */
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f4f6f9;
  color: #222;
}

/* ================================
   HEADER
================================ */
header {
  background: linear-gradient(to right, #6a0000, #a00000);
  color: white;
  padding: 25px 15px;
  text-align: center;
}

/* ✅ Logo Perfect Size */
header .logo {
  width: 80px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
  background: white;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}

/* Title */
header h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 1px;
}

/* ✅ Subtitle Fix (Center Always) */
header p {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

/* ================================
   NAVIGATION
================================ */
nav {
  margin-top: 18px;
}

/* Nav Links */
nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  margin: 6px 10px;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: 0.3s;
}

/* Hover Effect */
nav a:hover {
  background: white;
  color: #6a0000;
  transform: scale(1.05);
}

/* ================================
   MOBILE MENU BUTTON
================================ */
.menu-toggle {
  display: none;
  background: white;
  color: #6a0000;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 15px;
  transition: 0.3s;
}

.menu-toggle:hover {
  background: #f2f2f2;
}

/* ================================
   MAIN CARD
================================ */
.card {
  background: white;
  width: 88%;
  max-width: 950px;
  margin: 30px auto;
  padding: 30px;
  border-radius: 22px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  text-align: center;
}

/* Banner */
.card img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 18px;
}

/* Heading */
h2 {
  font-size: 26px;
  margin: 18px 0;
  color: #6a0000;
}

/* ✅ Paragraph Fix (Only Card Content Justify) */
.card p {
  font-size: 17px;
  line-height: 1.9;
  text-align: justify;
  margin: 15px 0;
}

/* Note Optional */
.note {
  text-align: center;
  font-size: 15px;
  color: gray;
}

/* ================================
   VIDEO SECTION
================================ */
video {
  width: 100%;
  border-radius: 18px;
  margin-top: 18px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
  transition: 0.3s;
}

/* Hover Effect */
video:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* ================================
   FOOTER
================================ */
footer {
  background: #6a0000;
  color: white;
  text-align: center;
  padding: 14px;
  margin-top: 40px;
  font-size: 15px;
}

/* ================================
   MOBILE RESPONSIVE
================================ */
@media (max-width: 768px) {

  header h1 {
    font-size: 26px;
  }

  /* Show Menu Button */
  .menu-toggle {
    display: inline-block;
  }

  /* Hide Nav Initially */
  nav {
    display: none;
    flex-direction: column;
    margin-top: 15px;
  }

  /* Mobile Links */
  nav a {
    display: block;
    background: rgba(255, 255, 255, 0.15);
    margin: 8px auto;
    width: 85%;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
  }

  nav a:hover {
    background: white;
    color: #6a0000;
  }

  /* Show Menu */
  nav.show {
    display: flex;
  }

  /* Card */
  .card {
    width: 92%;
    padding: 20px;
  }

  /* Paragraph Size */
  .card p {
    font-size: 16px;
  }
}

/* Sparkling Download Button */
.sparkle-btn {
  position: relative;
  display: inline-block;
  background: #6a0000;
  color: white;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  transition: 0.3s;
}

.sparkle-btn:hover {
  transform: scale(1.05);
}

/* Sparkle Effect */
.sparkle-btn .sparkle {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transform: skewX(-20deg);
}

/* Sparkle Animation on Hover */
.sparkle-btn:hover .sparkle {
  animation: sparkleMove 0.8s linear;
}

@keyframes sparkleMove {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}


/* Announcement Wrapper */
.announcement-wrap {
  width: 100%;
  overflow: hidden;
  background: #fff8e1;
  border: 1px solid #f1c27d;
  padding: 10px 0;
  margin: 15px 0;
}

/* Moving Text */
.announcement-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: #3e2723;
  padding-left: 100%;
  animation: scrollText 18s linear infinite;
}

/* Link Styling */
.announcement-text a {
  color: #b71c1c;
  text-decoration: none;
  margin-left: 6px;
  animation: softBlink 1.5s infinite;
}

/* Scroll Animation */
@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Soft Blink (Professional) */
@keyframes softBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Mobile Friendly */
@media (max-width: 600px) {
  .announcement-text {
    font-size: 14px;
  }
}

/* ================================
   SERVICE PAGE VIDEO FIX
================================ */

/* Desktop par video size control */
.service-video {
  width: 100%;
  max-width: 680px;   /* 👈 desktop limit */
  height: auto;
  display: block;
  margin: 18px auto;
  border-radius: 18px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}

/* Large screens par aur compact */
@media (min-width: 1200px) {
  .service-video {
    max-width: 600px;
  }
}

/* ================================
   SERVICE PAGE – VIDEO FINAL FIX
================================ */

/* ================================
   SERVICE PAGE – EXTRA COMPACT VIDEO
================================ */

/* ================================
   SERVICE PAGE – FULL VIEW VIDEO FIT
================================ */

.service-video {
  width: auto;
  max-width: 460px;          /* 👈 width control */
  max-height: 70vh;          /* 👈 SCREEN HEIGHT ke andar */
  height: auto;
  display: block;
  margin: 12px auto;
  border-radius: 16px;
  object-fit: contain;       /* 👈 poori video dikhe */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

/* Large desktop */
@media (min-width: 1200px) {
  .service-video {
    max-height: 65vh;
    max-width: 420px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .service-video {
    max-width: 100%;
    max-height: 60vh;
  }
}

/* ================================
   WHATSAPP BUTTON
================================ */
.whatsapp-btn {
  display: inline-block;
  background: #25D366;
  color: white;
  padding: 14px 28px;
  border-radius: 40px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(0,0,0,0.25);
  transition: 0.3s;
}

.whatsapp-btn:hover {
  background: #1ebe5d;
  transform: scale(1.05);
}


.announcement-wrap {
  background: #6a0000;
  overflow: hidden;
  white-space: nowrap;
}

.announcement-text {
  display: inline-block;
  padding: 12px 0;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  animation: marquee 15s linear infinite, blink 1.5s infinite;
}

.announcement-text a {
  color: #ffd700;
  text-decoration: underline;
  font-weight: bold;
}

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes blink {
  50% { opacity: 0.4; }
}

/* ================================
   FULL SCREEN VIRUS LOADER
================================ */

#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #001100, #000000);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  color: #00ff88;
  font-family: monospace;
  transition: opacity 1s ease, visibility 1s ease;
}

#loadingScreen.hide {
  opacity: 0;
  visibility: hidden;
}

.virusLoader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 8px solid #00ff88;
  border-top: 8px solid transparent;
  animation: spin 1s linear infinite, glow 1.5s ease-in-out infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes glow {
  0%,100% { box-shadow: 0 0 15px #00ff88; }
  50% { box-shadow: 0 0 40px #00ff88; }
}

.loading-text {
  font-size: 20px;
  letter-spacing: 2px;
  animation: blink 1.2s infinite;
}

@keyframes blink {
  50% { opacity: 0.5; }


/* ==========================================
   CINEMATIC MATRIX LOADER
========================================== */

#loadingScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  color: #00ff88;
}

#loadingScreen.hide {
  opacity: 0;
  visibility: hidden;
  transition: 1s ease;
}

#matrixCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
}

.loader-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.terminal {
  font-size: 16px;
  margin-bottom: 25px;
  min-height: 60px;
  letter-spacing: 1px;
}

.scan-line {
  width: 300px;
  height: 2px;
  background: #00ff88;
  margin: 10px auto;
  animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
  0% { transform: translateY(-10px); opacity: 0.3; }
  50% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0.3; }
}

.percentage {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 15px;
}
}



/* ===== FULLSCREEN MATRIX LOADER ===== */

#loadingScreen{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:black;
  z-index:999999;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

#loadingScreen.hide{
  opacity:0;
  visibility:hidden;
  transition:1s ease;
}

#matrixCanvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.loader-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#00ff88;
  font-family:monospace;
}

#terminalText{
  font-size:18px;
  margin-bottom:15px;
}

#percent{
  font-size:30px;
  font-weight:bold;
}