@font-face {
  font-family: 'Navbar';
  src: url('navbar.woff2') format('woff2'),
       url('navbar.woff') format('woff'),
       url(navbar.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply K24 for all text by default */
body {
  background: #8142f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px 0;
  margin: 0;
}

/* Apply Navbar font for all English text elements */
h1,
.check,
.link-card span,
.link-card .dot,
.bottom-icons span {
  font-family: 'Navbar', 'Poppins', Arial, sans-serif;
  letter-spacing: 0.01em;
  font-size: 0.75em; /* Much smaller English text */
}

/* Make English text stay small on hover too */
.link-card:hover span,
.icon-label:hover span {
  font-size: 0.85em; /* Slightly larger on hover, but still small */
  font-weight: 700;
  color: #333;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {

  position: relative;
  width: 95%;
  max-width: 380px;
  padding: 25px;
  background: #ffffff;
  border-radius: 25px;
  text-align: center;
  margin-bottom: 30px;
  /* Add a white glow shadow */
  box-shadow: 0 8px 20px rgba(0,0,0,0.1), 0 0 32px 4px rgba(255,255,255,0.7);
}

.logo {
  width: 90px;
  margin: 0 auto 10px;
  filter: 
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 40px rgba(129, 66, 245, 0.8))
    drop-shadow(0 0 70px rgba(129, 66, 245, 0.6))
    drop-shadow(0 0 80px rgba(129, 66, 245, 0.4));
  animation: floatUpDown 3s ease-in-out infinite;
}

h1 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #000000;
  position: relative;
  overflow: visible;
  white-space: nowrap;
}

.glitch-letter {
  display: inline-block;
  opacity: 0;
  animation: glitchD7 4s infinite;
  position: relative;
}

.desc {
  font-size: 13px;
  color: #000000;
  margin-bottom: 12px;
  line-height: 1.5;
}

.check {
  background: #ddffe2;
  color: #2e7d32;
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 12px;
  display: inline-block;
  margin-bottom: 20px;
}

.link-card {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff; /* Match the box background */
  border: 2.5px solid #8142f5;
  padding: 12px 15px;
  border-radius: 5px;
  margin: 10px 0;
  cursor: pointer;
  transition: 
    background 0.3s,
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
  animation: subtleFloat 3s ease-in-out infinite;
}

.link-card:nth-child(1) {
  animation-delay: 0s;
}

.link-card:nth-child(2) {
  animation-delay: 0.5s;
}

.link-card:nth-child(3) {
  animation-delay: 1s;
}

.link-card:nth-child(4) {
  animation-delay: 1.5s;
}

.link-card:hover {
  background: #f0e7e2;
  transform: scale(1.08);
  box-shadow: 0 0 16px 4px #8142f5, 0 4px 24px rgba(129,66,245,0.10);
  border-color: #8142f5;
}

.link-card img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}

.link-card span {
  font-family: Navbar;
  flex: 1;
  text-align: left;
  font-weight: 500;
  color: #444;
  transition: font-weight 0.2s, font-size 0.2s;
  font-size: 16px;
  text-align: center;
}

.link-card:hover span {
  font-weight: 700;
  font-size: 1.13em;
}

.link-card .dot {
  font-size: 20px;
  color: #aaa;
}

.bottom-icons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.icon-label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-icons img {
  width: 24px;
  filter: brightness(0.5);
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: 
    transform 0.2s,
    filter 0.2s,
    box-shadow 0.2s;
}

.icon-label:hover img {
  transform: scale(1.18);
  filter: brightness(1) drop-shadow(0 0 8px #fff);
  box-shadow: 0 4px 24px rgba(129,66,245,0.10);
}

.icon-label span {
  margin-top: 6px;
  font-size: 0.95em;
  color: #888;
  font-weight: 500;
  text-align: center;
  transition: font-weight 0.2s, font-size 0.2s, color 0.2s;
}

.icon-label:hover span {
  font-weight: 700;
  font-size: 1.13em;
  color: #333;
}

.icon-link {
  text-decoration: none;
  color: inherit;
}

.text{
  font-family: Navbar;
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
}
.con2{
  position: relative;
  text-align: center;
  font-family: Navbar;
  font-size: clamp(40px, 8vw, 110px);
  color: #ffffff;
  margin: 40px 0 60px 0;
  line-height: 1.2;
  width: 100%;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(129, 66, 245, 0.8),
    0 0 70px rgba(129, 66, 245, 0.6),
    0 0 80px rgba(129, 66, 245, 0.4);
  animation: floatUpDown 3s ease-in-out infinite;
}
/* Responsive adjustments for different screen sizes */
@media (max-width: 480px) {
  .container {
    width: 98%;
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .con2 {
    margin: 20px 0 40px 0;
  }
}

/* Height-based media queries for better vertical responsiveness */
@media (max-height: 700px) {
  body {
    padding: 10px 0;
  }
  
  .container {
    margin-bottom: 20px;
  }
  
  .con2 {
    margin: 20px 0 30px 0;
    font-size: clamp(30px, 6vw, 80px);
  }
}

@media (max-height: 500px) {
  body {
    padding: 5px 0;
  }
  
  .container {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .con2 {
    margin: 15px 0 20px 0;
    font-size: clamp(25px, 5vw, 60px);
  }
  
  .logo {
    width: 70px;
  }
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes glitchTypewriter {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  2% {
    opacity: 1;
    transform: scaleX(1) skewX(-15deg);
    filter: invert(1) contrast(2);
    text-shadow: 
      8px 0 0 #00ff00,
      -8px 0 0 #ff00ff;
  }
  4% {
    transform: scaleX(1) skewX(10deg);
    filter: invert(0) hue-rotate(180deg);
    text-shadow: 
      -6px 0 0 #ff0000,
      6px 0 0 #00ffff;
  }
  6% {
    transform: scaleX(1) skewX(-5deg);
    filter: brightness(3) saturate(0);
    text-shadow: none;
  }
  8% {
    transform: scaleX(1) skewX(0);
    filter: none;
    text-shadow: none;
  }
  70% {
    opacity: 1;
    transform: scaleX(1) skewX(0);
    filter: none;
    text-shadow: none;
  }
  72% {
    opacity: 1;
    transform: scaleX(1.1) skewX(20deg);
    filter: invert(1) saturate(3);
    text-shadow: 
      10px 0 0 #ff0000,
      -10px 0 0 #00ff00,
      0 5px 0 #0000ff;
  }
  74% {
    transform: scaleX(0.8) skewX(-25deg);
    filter: brightness(0) contrast(5);
    text-shadow: 
      -12px 0 0 #ff00ff,
      12px 0 0 #ffff00;
  }
  76% {
    transform: scaleX(1.2) skewX(15deg);
    filter: invert(1) hue-rotate(90deg);
    text-shadow: 
      5px 0 0 #00ffff,
      -5px 0 0 #ff0000;
  }
  78% {
    opacity: 0;
    transform: scaleX(0.1) skewX(-45deg);
    filter: brightness(5) contrast(0);
    text-shadow: 
      20px 0 0 #ffffff,
      -20px 0 0 #000000;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes glitchD7 {
  /* Initial hidden state */
  0% {
    opacity: 0;
    transform: translateX(-20px) scale(0);
  }
  
  /* Letter appears with glitch effect */
  5% {
    opacity: 1;
    transform: translateX(0) scale(1) skewX(10deg);
    color: #efe1e1;
    text-shadow: 
      2px 0 0 #00ff00,
      -2px 0 0 #0000ff;
    filter: brightness(1.5) contrast(2);
  }
  
  /* Glitch flicker */
  7% {
    opacity: 0.8;
    transform: translateX(2px) scale(1.1) skewX(-5deg);
    color: #00ff00;
    text-shadow: 
      -3px 0 0 #ff00ff,
      3px 0 0 #ffff00;
    filter: invert(1) hue-rotate(90deg);
  }
  
  /* Stabilize */
  10% {
    opacity: 1;
    transform: translateX(0) scale(1) skewX(0);
    color: #000000;
    text-shadow: none;
    filter: none;
  }
  
  /* Stay visible */
  40% {
    opacity: 1;
    transform: translateX(0) scale(1) skewX(0);
    color: #000000;
    text-shadow: none;
    filter: none;
  }
  
  /* Start disappearing with glitch */
  42% {
    opacity: 1;
    transform: translateX(0) scale(1) skewX(-15deg);
    color: #ff00ff;
    text-shadow: 
      4px 0 0 #00ffff,
      -4px 0 0 #ff0000;
    filter: brightness(2) saturate(3);
  }
  
  /* More intense glitch */
  45% {
    opacity: 0.6;
    transform: translateX(-5px) scale(0.8) skewX(20deg);
    color: #ffff00;
    text-shadow: 
      -6px 0 0 #ff0000,
      6px 0 0 #0000ff,
      0 3px 0 #00ff00;
    filter: invert(1) contrast(5);
  }
  
  /* Final glitch before disappearing */
  48% {
    opacity: 0.3;
    transform: translateX(10px) scale(1.3) skewX(-30deg);
    color: #ffffff;
    text-shadow: 
      -8px 0 0 #000000,
      8px 0 0 #ff00ff;
    filter: brightness(5) contrast(0);
  }
  
  /* Disappear */
  50% {
    opacity: 0;
    transform: translateX(20px) scale(0) skewX(45deg);
    color: transparent;
    text-shadow: none;
    filter: none;
  }
  
  /* Stay hidden until cycle repeats */
  100% {
    opacity: 0;
    transform: translateX(-20px) scale(0);
  }
}

@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}
@media (max-height: 627px) {
  .container{

  .container {
    font-size: 0.93em;
    padding: 13px;
    max-width: 340px;
  }
  .logo {
    width: 62px;
  }
  h1 {
    font-size: 17px;
  }
  .link-card {
    font-size: 0.97em;
    padding: 9px 12px;
  }
  .text, .desc {
    font-size: 12px;
  }
  .con2 {
    font-size: clamp(22px, 4vw, 50px);
    margin: 12px 0 18px 0;
  }
  .bottom-icons img {
    width: 19px;
  }
  .icon-label span {
    font-size: 0.91em;
  }






  
  }
}

    
@media (max-height: 574px) {
  .container {
    font-size: 0.89em;
    padding: 10px;
    max-width: 320px;
  }
  .logo {
    width: 56px;
  }
  h1 {
    font-size: 15px;
  }
  .link-card {
    font-size: 0.93em;
    padding: 7px 10px;
  }
  .text, .desc {
    font-size: 11px;
  }
  .con2 {
    font-size: clamp(18px, 3.5vw, 40px);
    margin: 8px 0 14px 0;
  }
  .bottom-icons img {
    width: 16px;
  }
  .icon-label span {
    font-size: 0.87em;
  }
}