/* Muhammad Talha Premium Theme Custom CSS Styles */

:root {
  --portfolio-bg: #F6F1E7;
  --portfolio-surface-light: #F2EADB;
  --portfolio-border: #E3D7C5;
  --portfolio-text-primary: #1F1B16;
  --portfolio-text-muted: #6E655A;
  --portfolio-accent-brass: #8B6A3D;
  --portfolio-badge-bg: rgba(139,106,61,0.12);
  --portfolio-dark-panel: #22312B;
  --portfolio-dark-text: #F7F1E7;
}

/* Page Noise Layer */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  z-index: 9999;
}

/* Glass Card */
.glass-card {
  background: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(227, 215, 197, 0.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 24px !important;
  box-shadow: 0 28px 70px rgba(31, 27, 22, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Glass Chip */
.glass-chip {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(227, 215, 197, 0.95) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--portfolio-accent-brass) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Premium Hover Lift */
.hover-lift {
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.hover-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 34px 90px rgba(31, 27, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* Buttons styling */
.btn-primary a {
  background-color: var(--portfolio-accent-brass) !important;
  color: var(--portfolio-bg) !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px rgba(139, 106, 61, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn-primary a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(139, 106, 61, 0.3) !important;
}

.btn-secondary a {
  background-color: transparent !important;
  color: var(--portfolio-text-primary) !important;
  border: 1px solid var(--portfolio-text-primary) !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.btn-secondary a:hover {
  background-color: var(--portfolio-text-primary) !important;
  color: var(--portfolio-bg) !important;
}

/* Forest Green Panels */
.dark-panel {
  background: var(--portfolio-dark-panel) !important;
  color: var(--portfolio-dark-text) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Serif italic emphasis */
.serif-emphasis {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
  font-style: italic !important;
  color: var(--portfolio-accent-brass) !important;
}