/*-- Use For Custom Styling --*/
/* Header base */
.vc-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e2e8f0;
}

/* Brand */
.vc-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: #1e293b;
    text-decoration: none;
}
.vc-brand:hover {
    color: #1e293b;
    text-decoration: none;
}

/* Nav links */
.vc-nav-link {
    color: #475569;
    font-weight: 500;
    transition: color .2s ease;
    text-decoration: none;
    font-size: 1rem;
}

.vc-nav-link:hover {
    color: #1e293b;
    text-decoration: none;
}

/* Primary button */
.btn-primary-custom {
    align-items: center;
    background-color: #0075DA;
    border-color: #fff;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-decoration: none;
    border-radius: 0.5rem;
}

.btn-primary-custom:hover {
    background-color: #0061B4;
    border-color: #0061B4;
    color: #fff;
}

/* Login button */
.btn-slate {
    color: #475569;
    font-weight: 500;
}

.btn-slate:hover {
    color: #0061B4;
    text-decoration: none;
}

/* Mobile menu */
.mobile-nav {
    border-top: 1px solid #e2e8f0;
}

.py-2-3{padding-top: 0.75rem; padding-bottom: 0.75rem;}
.container-7xl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (max-width: 576px) {
    .container-7xl {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 768px) {
    .mobile-nav {
        display: none !important;
    }
}


/* =========================
   VARIABLES (from Tailwind)
========================= */
:root {
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-primary-500: #0075DA;
  --color-white: #ffffff;

  --spacing: 0.25rem;
  --container-7xl: 80rem;
  --radius-lg: 0.5rem;
}

/* =========================
   FOOTER BASE
========================= */
footer {background-color: oklch(20.8% 0.042 265.755);color: #ffffff;}

/* =========================
   LAYOUT
========================= */
.max-w-7xl {
  max-width: var(--container-7xl);
}
footer div.mx-auto {margin-left: auto;margin-right: auto;}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.hidden {
  display: none;
}
.md\:flex {
  @media (min-width: 768px) {
    display: flex;
  }
}
.md\:hidden {
  @media (min-width: 768px) {
    display: none;
  }
}
.max-md\:ml-auto {
  @media (max-width: 767px) {
    margin-left: auto;
  }
}









.grid {display: grid;}
.grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.md\:grid-cols-5 {
  @media (min-width: 768px) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.col-span-2 {grid-column: span 2 / span 2;}
.md\:col-span-1 {
  @media (min-width: 768px) {
    grid-column: span 1 / span 1;
  }
}

.flex-col {flex-direction: column;}
.sm\:flex-row {
  @media (min-width: 640px) {
    flex-direction: row;
  }
}
/* =========================
   SPACING
========================= */
.py-16 {padding-top: calc(var(--spacing) * 16);padding-bottom: calc(var(--spacing) * 16);}
.gap-4 {gap: calc(var(--spacing) * 4);}
.gap-6 {gap: calc(var(--spacing) * 6);}
.gap-8 {gap: calc(var(--spacing) * 8);}