:root {
      --bg:        #0d0d14;
  --bg2:       #13131f;
  --bg3:       #1a1a28;
  --textcolor: #6b7280;
  --heading:   #ffffff;
  --border:    #1e1e2e;
  --card-hover-border: #2a2a40;
  --open-btn-bg:    #1c1c2c;
  --open-btn-border:#2a2a40;
  --open-btn-color: #c9cbdb;
  --open-btn-hover-bg: #25253a;
  --input-bg:  #13131f;
  --input-border: #2a2a40;
  --input-color:  #e2e4ec;

}

.dark {
  
  --bg:        #f0f2f8;
  --bg2:       #ffffff;
  --bg3:       #e8eaf2;
  --textcolor: #6b7280;
  --heading:   #111827;
  --border:    #e2e6f0;
  --card-hover-border: #c7cde0;
  --open-btn-bg:    #f0f2f8;
  --open-btn-border:#d1d5e8;
  --open-btn-color: #374151;
  --open-btn-hover-bg: #e4e7f3;
  --input-bg:  #ffffff;
  --input-border: #d1d5e8;
  --input-color:  #111827;
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes blobFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-30px) scale(1.08); }
  66%     { transform: translate(-25px,20px) scale(0.95); }
}
@keyframes blobFloat2 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-35px,25px) scale(1.06); }
}
@keyframes blobFloat3 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(25px,-20px) scale(1.04); }
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes badgePulse {
  0%,100% {     box-shadow: 0 0 0 0 rgb(0 99 251 / 21%);}
  50%     { box-shadow: 0 0 0 8px rgba(124,95,245,0); }
}
@keyframes tagSlide {
  from { opacity:0; transform: translateY(14px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Scroll reveal */
.anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s cubic-bezier(.22,.68,0,1.2), transform 0.65s cubic-bezier(.22,.68,0,1.2);
}
.anim.visible { opacity: 1; transform: translateY(0); }
.anim.delay-1 { transition-delay: 0.1s; }
.anim.delay-2 { transition-delay: 0.2s; }
.anim.delay-3 { transition-delay: 0.3s; }
.anim.delay-4 { transition-delay: 0.4s; }
.anim.delay-5 { transition-delay: 0.5s; }
  *, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: #e2e4ec; margin: 0; }

    /* Navbar */
 .site-nav {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 0 25px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 300; 
    transition: background 0.2s, border-color 0.2s;

        border-radius: 30px;
}
 .site-nav {
    padding: 14px 20px !important;
}
.header-main {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 1000px;
    margin: auto;
    border-radius: 300px;
    padding: 5px;
    
    top: 25px;
}
    .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
    .nav-logo-icon { width:32px; height:32px; background:linear-gradient(135deg,#7c5ff5,#ec4899); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
    .nav-logo-text { font-size:1rem; font-weight:700; color:var(--heading); letter-spacing:-0.3px; }
    .nav-links { display:flex; align-items:center; gap:6px; }
    .nav-link { font-size:0.85rem; font-weight:500; color:var(--textcolor); text-decoration:none; padding:6px 12px; border-radius:6px; transition:color .14s,background .14s; }
    .nav-link:hover { color:#fff; background:#1c1c2c; }
    .nav-btn { font-size:0.82rem; font-weight:600; color:var(--bg); background: var(--heading); border:none; padding:7px 22px; border-radius:57px; cursor:pointer; text-decoration:none; margin-left:4px; transition:opacity .14s; white-space:nowrap; }
    .nav-btn:hover { opacity:.88; color:#fff; }

    /* Hamburger */
    .hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; width:36px; height:36px; gap:5px; background:none; border:none; cursor:pointer; padding:4px; border-radius:6px; transition:background .14s; }
 
    .hamburger span { display:block; width:20px; height:2px; background:var(--textcolor); border-radius:2px; transition:all .22s ease; transform-origin:center; }
    .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); } 
    .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

    /* Mobile drawer */
   /* Mobile drawer */
.mobile-menu { 
  display: none;
  position: unset;
  flex: 0 0 100%;
  top: 84px;
  left: 0;
  right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
    margin-top: 10px;
    padding-top: 10px;
  z-index: 250;
  flex-direction: column;
  gap: 4px;
  
}

    .mobile-menu.open { display:flex; }
    .mobile-menu .nav-link { font-size:0.95rem; padding:10px 0px; border-radius:8px; color:var(--textcolor); }
    .mobile-menu .nav-link:hover { background:var(--bg2); }
    .mobile-menu .nav-btn { margin:8px 0 0; text-align:center; padding:11px 16px; font-size:0.9rem; border-radius:9px; display:block; }

        /* Footer */
    .site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-main {
  max-width: 1100px; margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:16px;
}
.footer-logo-icon {
  width:34px; height:34px;
  background:linear-gradient(135deg,#00AAFE,#005CFB);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.footer-logo-text { font-size:1rem; font-weight:700; color:var(--heading); }
.footer-brand-desc {
  font-size:.83rem; color:var(--textcolor);
  line-height:1.7; margin:0 0 22px; max-width:240px;
}
.footer-socials { display:flex; gap:8px; }
.footer-social-btn {
  width:34px; height:34px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--textcolor); text-decoration:none;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
  font-size:.85rem;
}
.footer-social-btn:hover {
  background:linear-gradient(135deg,#00AAFE,#005CFB);
  color:#fff; border-color:transparent; transform:translateY(-2px);
}
.footer-social-btn svg { width:15px; height:15px; fill:currentColor; }
.footer-col-title {
  font-size:.75rem; font-weight:700; color:var(--heading);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;
}
.footer-col-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-col-links li a {
  font-size:.83rem; color:var(--textcolor); text-decoration:none;
  transition:color .14s; display:flex; align-items:center; gap:6px;
}
.footer-col-links li a:hover { color:#00AAFE; }
.footer-col-links li a .link-dot {
  width:4px; height:4px; background:var(--border);
  border-radius:50%; transition:background .14s; flex-shrink:0;
}
.footer-col-links li a:hover .link-dot { background:#00AAFE; }
.footer-bottom {
  border-top:1px solid var(--border); padding:18px 24px;
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.footer-copy { font-size:.78rem; color:var(--textcolor); }
.footer-copy a { color:#00AAFE; text-decoration:none; }
.footer-copy a:hover { text-decoration:underline; }
.footer-bottom-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom-links a { font-size:.78rem; color:var(--textcolor); text-decoration:none; transition:color .14s; }
.footer-bottom-links a:hover { color:var(--heading); }
.footer-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:600; color:#00AAFE;
  background:rgba(0,170,254,.08); border:1px solid rgba(0,170,254,.2);
  padding:3px 10px; border-radius:20px;
}
.footer-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:#00AAFE; }

.single-blog {
    margin-top: 50px;
}


.single-blog p, .single-blog a, .single-blog h2, .single-blog h3, .single-blog li{
    color: var(--textcolor);
    font-family: 'Inter', sans-serif; 
}
.single-blog h2 {
    font-size: 1.5rem;
}
.single-blog h3 {
    font-size: 1.5rem;
}
.single-blog a{
    font-weight: 700;
}
/* Theme button */
.theme-btn {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--textcolor);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'Inter', sans-serif;
  margin-left: 8px;
 
}
.theme-btn:hover { color: var(--heading); }
.theme-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dark .sun{
    display: block !Important;
}
.dark .moon{
    display: none !important;
}

.theme-btn {
    position: fixed !important;
    right: 0;
    top: 39px;
    border-radius: 20px !important;
    background: var(--bg2) !important; 
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    padding: 9px 14px !important;
     box-shadow: 0px 0px 20px #00000016;
}
.theme-btn svg {
    width: 20px !important;
    height: 20px !important;
}
.breadcrumb-bar {
    margin-top: 120px;
    background: var(--bg) !important;
    display: none !important;
}
.page-wrap {
    margin-top: 117px !important;
}
.sidebar-card{
       background: var(--bg2) !important;
}
@media (max-width: 1024px) {
  .categories-grid { grid-template-columns: repeat(3,1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
       @media (max-width:700px) {
           .site-nav{
    flex-wrap: wrap;
}
           
             .categories-grid { grid-template-columns: repeat(2,1fr); }
  .theme-btn {
    z-index: 999;
    top: 104px !important;
}
  .footer-main   { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }
  .footer-brand  { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
      .nav-links { display:none; }
      .hamburger { display:flex; } 
      .blog-section-header {
    flex-direction: column;
    align-items: baseline !important;
}
    .blog-grid {
        grid-template-columns: 1fr !important;
    }
        .site-nav {
       
        width: 90%;
        margin: auto;
    }
    
    }
    @media (max-width:380px) {
    
    
    }