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

body {
  padding-top: 68px;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.nav-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #111827;
  font-size: 1.4rem;
  font-weight: 900;
}

.logo-icon {
  font-size: 1.8rem;
}

.logo-text {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-link {
  padding: 10px 16px;
  color: #374151;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  transition: .25s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  background: #eff6ff;
  color: #2563eb;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #2563eb;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: .25s ease;
}

.nav-link:hover::after {
  width: 70%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #111827;
  border-radius: 999px;
  transition: .3s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 900px) {
  .nav-menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .1);
    gap: 0;
    padding: 12px 0;
    transform: translateY(-120%);
    opacity: 0;
    transition: .3s ease;
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
  }

  .nav-link {
    padding: 14px 20px;
    border-radius: 0;
  }

  .nav-link::after {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 10px 12px;
  }

  .nav-brand a {
    gap: 8px;
    font-size: 1.1rem;
  }

  .logo-icon {
    font-size: 1.5rem;
  }

  .logo-text {
    font-size: 1rem;
  }

  .nav-menu {
    top: 60px;
  }

  body {
    padding-top: 60px;
  }
}
    
    
    
    
    
    
    *{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#222;line-height:1.6}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:16px}
.hero{
    background:linear-gradient(135deg,#d32f2f,#0b57d0);
    color:#fff;
    padding:34px 18px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 10px 24px rgba(0,0,0,.08)
}
.hero h1{margin:0 0 10px;font-size:clamp(28px,4vw,42px);line-height:1.2}
.hero p{margin:0 auto;max-width:850px;font-size:16px;line-height:1.8}

.section{margin-top:28px}
.section h2{font-size:clamp(22px,3vw,28px);margin:0 0 14px;color:#d32f2f}
.text-block{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:18px;
    box-shadow:0 4px 14px rgba(0,0,0,.06)
}
.text-block p{margin:0 0 12px}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:18px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    transition:.2s ease
}
.card:hover{transform:translateY(-2px)}
.card h3{margin:0 0 10px;font-size:18px}
.card p{margin:0;color:#555}
.card a{text-decoration:none;color:#0b57d0}
.card a:hover{text-decoration:underline}

.links{
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.links a{
    display:inline-block;
    padding:10px 14px;
    border-radius:8px;
    background:#d32f2f;
    color:#fff;
    text-decoration:none
}
.links a:hover{background:#0b57d0}

.info-list{margin:0;padding-left:18px}
.info-list li{margin:8px 0}

/* WhatsApp section */
.whatsapp-box{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:22px 18px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.live-badge-wrap{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    border:2px solid #111;
    border-radius:999px;
    background:#fff;
    margin-bottom:14px;
    box-shadow:0 3px 10px rgba(0,0,0,.08)
}
.live-dot{
    width:12px;
    height:12px;
    background:#e53935;
    border-radius:50%;
    animation:blink 1s infinite
}
.live-text{
    font-weight:700;
    letter-spacing:1px;
    color:#111;
    font-size:14px
}
@keyframes blink{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.25;transform:scale(1.25)}
}
.whatsapp-btn{
    display:inline-block;
    padding:14px 24px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff !important;
    text-decoration:none;
    font-weight:700;
    border-radius:14px;
    box-shadow:0 10px 20px rgba(37,211,102,.25);
    transition:.25s ease
}
.whatsapp-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 24px rgba(37,211,102,.3)
}
.mini-strip{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px
}
.mini-strip span{
    background:#f4f7ff;
    border:1px solid #d7e3ff;
    color:#0b57d0;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600
}

/* Click More Button */
.click-more-btn{
    display:inline-block;
    margin-top:16px;
    padding:12px 28px;
    background:linear-gradient(135deg,#0b57d0,#d32f2f);
    color:#fff !important;
    text-decoration:none;
    font-weight:700;
    font-size:15px;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(11,87,208,.25);
    transition:.25s ease
}
.click-more-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(11,87,208,.35)
}

@media (max-width: 768px){
  .container{padding:12px}
  .hero{padding:28px 16px;border-radius:14px}
  .hero p{font-size:15px}
  .grid{grid-template-columns:1fr}
  .links{gap:8px}
  .links a{flex:1 1 calc(50% - 8px);text-align:center}
}
@media (max-width: 480px){
  .section{margin-top:22px}
  .card,.text-block,.whatsapp-box{padding:16px}
  .links a{flex:1 1 100%}
  .click-more-btn{width:100%;text-align:center}
}