* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', sans-serif;
      background: #eef2f7;
      color: #333;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header.custom-header, footer.site-footer {
      background: #f2d397; color: #485565;
      padding: 2rem 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
    }

    .logo-title-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .logo-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

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

    .title-group h1 { font-size: 2rem; font-weight: 700; }
    .title-group p { font-size: 1rem; color: #6b7280; }

    .dev-section {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 3rem 1rem;
    }

    .dev-box {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      padding: 2rem 2.5rem;
      max-width: 500px;
      animation: fadeIn 1.5s ease-in;
    }

    .dev-box i {
      font-size: 3.5rem;
      color: #f59e0b;
      margin-bottom: 1rem;
      animation: bounce 1.5s infinite ease-in-out;
      display: inline-block;
    }

    .dev-box h2 {
      font-size: 1.6rem;
      margin-bottom: 0.5rem;
      color: #374151;
      animation: slideIn 1s ease-in;
    }

    .dev-box p {
      color: #6b7280;
      font-size: 1rem;
      animation: slideIn 1.2s ease-in;
    }

    footer.site-footer .footer-content {
      max-width: 1300px;
      margin: 0 auto;
    }

    .footer-links a {
      margin: 0 0.75rem;
      color: #485565;
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-links a:hover { color: #3b82f6; }
    .footer-copy { margin-top: 0.5rem; font-size: 0.85rem; color: #6b7280; }

    /* 🔥 Animations */
    @keyframes fadeIn {
      0% { opacity: 0; transform: scale(0.95); }
      100% { opacity: 1; transform: scale(1); }
    }

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

    @keyframes slideIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }



    /* Navbar ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.prodev-navbar {
background: #2c3e50;
padding: 1rem 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 99;
width: 100%;
}
.prodev-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* ✅ Hide logo by default (desktop) */
.prodev-logo {
display: none;
}
/* ✅ Show logo only on mobile */
@media (max-width: 768px) {
.prodev-logo {
display: block;
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #f2d397;
font-size: 1.5rem;
font-weight: bold;
}
}
.prodev-hamburger {
position: absolute;
right: 1rem;
font-size: 1.5rem;
color: #f2d397;
cursor: pointer;
display: none;
}
.prodev-nav-links {
list-style: none;
display: flex;
justify-content: center;
gap: 1.5rem;
transition: all 0.3s ease-in-out;
}
.prodev-nav-links li a {
text-decoration: none;
color: #f2d397;
font-weight: 600;
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: all 0.3s ease;
white-space: nowrap;
}
.prodev-nav-links li a:hover {
background-color: #f2d397;
color: #111;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Mobile styles */
@media (max-width: 768px) {
.prodev-hamburger {
display: block;
}
.prodev-nav-links {
display: none;
flex-direction: column;
align-items: center;
background-color: #2c3e50;
width: 100%;
padding: 1rem 0;
}
.prodev-nav-links.show {
display: flex;
}
}

.prodev-visitor-strip {
background: #616978;
padding: 0.75rem 1rem;
text-align: center;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}
.visitor-ticker {
color: #f2d397;
font-weight: 600;
font-size: 1.1rem;
display: inline-block;
}
/* visitor bottombar */
.prodev-visitor-strip {
background: #2c3e50;
padding: 0.75rem 1rem;
text-align: center;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}
.visitor-ticker {
font-weight: 600;
font-size: 1.1rem;
color: #f8f8f8;
}
.visitor-icon {
color: #ffffff;
font-size: 1.3rem;
margin-right: 8px;
}
.animated-icon {
animation: pulse-glow 1.8s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
text-shadow: 0 0 5px #00d9ff, 0 0 10px #00d9ff, 0 0 15px #00d9ff;
transform: scale(1);
}
50% {
text-shadow: 0 0 15px #00d9ff, 0 0 30px #00d9ff, 0 0 45px #00d9ff;
transform: scale(1.2);
}
}