*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(180deg,#ff9800,#ff5722,#8e244d,#6a1b9a);

overflow-x:hidden;

position:relative;

padding:20px;
opacity:0;
transition:opacity .8s ease;
}

/* Background Circles */

.bg-circle{

position:absolute;

border-radius:50%;

background:rgba(255,255,255,.08);

backdrop-filter:blur(2px);

animation:float 8s ease-in-out infinite;

}

.c1{

width:240px;

height:240px;

top:-60px;

right:-70px;

}

.c2{

width:180px;

height:180px;

left:-70px;

bottom:180px;

animation-delay:2s;

}

.c3{

width:140px;

height:140px;

right:20px;

bottom:120px;

animation-delay:4s;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

}

.container{

width:100%;

max-width:420px;

text-align:center;

position:relative;

z-index:5;

}

/* Logo */

.logo-box{

width:220px;

height:220px;

margin:auto;

background:#000;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 15px 40px rgba(0,0,0,.45);

animation:zoom 2.5s infinite;

overflow:hidden;

}

.logo{

width:82%;

height:82%;

object-fit:contain;

}

@keyframes zoom{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}

/* Heading */

.title{

margin-top:35px;

font-size:40px;

font-weight:800;

color:#fff;

line-height:1.3;

text-shadow:0 4px 10px rgba(0,0,0,.35);

}

.subtitle{

margin-top:12px;

font-size:19px;

color:#ffe082;

font-weight:600;

}

.owner{

margin-top:18px;

color:#fff;

font-size:34px;

font-weight:700;

}
/* Join Button */

.join-btn {
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  
  width: 100%;
  
  max-width: 320px;
  
  margin: 35px auto;
  
  padding: 18px 25px;
  
  border-radius: 60px;
  
  text-decoration: none;
  
  font-size: 22px;
  
  font-weight: 700;
  
  color: #fff;
  
  background: linear-gradient(90deg, #3ea6ff, #0028d7);
  
  box-shadow: 0 10px 25px rgba(0, 0, 0, .30);
  
  transition: .3s;
  
}

.join-btn:hover {
  
  transform: translateY(-4px);
  
  box-shadow: 0 16px 35px rgba(0, 0, 0, .45);
  
}

.join-btn i {
  
  font-size: 28px;
  
}

/* Rating */

.rating {
  
  margin-top: 10px;
  
}

.rating h2 {
  
  font-size: 42px;
  
  font-weight: 800;
  
  color: #ffff00;
  
  margin-bottom: 10px;
  
}

.stars {
  
  font-size: 34px;
  
  font-weight: 700;
  
  color: #fff;
  
}

.stars span {
  
  font-size: 28px;
  
  color: #ffffff;
  
}

/* Card */

.card {
  
  margin-top: 35px;
  
  background: #111;
  
  color: #fff;
  
  padding: 30px;
  
  border-radius: 28px;
  
  box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
  
}

.card h3 {
  
  font-size: 30px;
  
  margin-bottom: 18px;
  
}

.card p {
  
  font-size: 20px;
  
  line-height: 2;
  
  color: #f5f5f5;
  
}

/* Counter */

.counter {
  
  display: flex;
  
  justify-content: space-between;
  
  margin-top: 35px;
  
  gap: 12px;
  
}

.counter div {
  
  flex: 1;
  
  background: rgba(255, 255, 255, .14);
  
  backdrop-filter: blur(10px);
  
  padding: 18px 10px;
  
  border-radius: 18px;
  
}

.counter h2 {
  
  font-size: 30px;
  
  color: #fff;
  
}

.counter span {
  
  font-size: 16px;
  
  color: #fff;
  
}

/* Bottom Button */

.bottom-btn {
  
  display: block;
  
  margin: 35px auto;
  
  width: 100%;
  
  max-width: 320px;
  
  padding: 18px;
  
  text-decoration: none;
  
  border-radius: 60px;
  
  background: #00c853;
  
  color: #fff;
  
  font-size: 24px;
  
  font-weight: 800;
  
  box-shadow: 0 10px 25px rgba(0, 0, 0, .30);
  
  transition: .3s;
  
}

.bottom-btn:hover {
  
  background: #00b248;
  
  transform: scale(1.03);
  
}

/* Footer */

footer {
  
  margin-top: 35px;
  
  padding-bottom: 25px;
  
  font-size: 16px;
  
  color: #ffffff;
  
  opacity: .9;
  
}

/* Mobile */

@media(max-width:480px) {
  
  .logo-box {
    
    width: 180px;
    height: 180px;
    
  }
  
  .title {
    
    font-size: 32px;
    
  }
  
  .owner {
    
    font-size: 28px;
    
  }
  
  .rating h2 {
    
    font-size: 34px;
    
  }
  
  .stars {
    
    font-size: 28px;
    
  }
  
  .card {
    
    padding: 22px;
    
  }
  
  .card h3 {
    
    font-size: 24px;
    
  }
  
  .card p {
    
    font-size: 17px;
    
  }
  
  .join-btn,
  .bottom-btn {
    
    font-size: 20px;
    
    padding: 16px;
    
  }
  
}
/* Telegram Button Popup Animation */

.join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  
  animation: telegramPop 1.5s infinite;
  transform-origin: center;
  
  transition: 0.3s ease;
}


/* Zoom + Bounce Effect */

@keyframes telegramPop {
  
  0% {
    transform: scale(1);
  }
  
  40% {
    transform: scale(1.08);
  }
  
  60% {
    transform: scale(0.98);
  }
  
  100% {
    transform: scale(1);
  }
  
}


/* Hover Effect */

.join-btn:hover {
  
  transform: scale(1.12);
  box-shadow: 0 0 25px rgba(0, 150, 255, 0.8);
  
}


/* Telegram Icon Animation */

.join-btn i {
  
  animation: iconMove 1s infinite;
  
}


@keyframes iconMove {
  
  0% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-4px);
  }
  
  100% {
    transform: translateY(0);
  }
  
}
.join-btn {
  position: relative;
  z-index: 10;
  cursor: pointer;
}
.join-btn {
  position: relative;
  z-index: 9999;
  cursor: pointer;
  pointer-events: auto;
}
/* FIX TELEGRAM BUTTON CLICK */

.bg-circle{
    pointer-events:none;
}

.join-btn{
    position:relative;
    z-index:99999;
    cursor:pointer;
    pointer-events:auto;
}


/* Premium Pop Animation */

.join-btn{
    animation: telegramPop 1.5s infinite;
}


@keyframes telegramPop{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}


/* Telegram Icon */

.join-btn i{
    animation: telegramIcon 1s infinite;
}


@keyframes telegramIcon{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }

}