/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 12 2025 | 17:58:52 */
.glass-grain{
  position: relative;
  padding: 12px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  isolation: isolate;
}

/* --- Grain & light overlay --- */
.glass-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* soft lighting + true random grain texture (SVG noise) */
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.18) 120%),
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZyI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOTUiIG51bU9jdGF2ZXM9IjMiLz48L2ZpbHRlcj48cmVjdCBmaWx0ZXI9InVybCgjZykiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIuMTUiLz48L3N2Zz4=");
  background-size: 100% 100%, 300px 300px;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: overlay;
  opacity: .55;
  filter: contrast(110%) brightness(105%) blur(0.3px);
}

/* Hover micro effect */
.glass-grain:hover::after {
  opacity: .75;
  filter: contrast(120%) brightness(108%) blur(0.2px);
  transition: all .35s ease;
}

/* Responsive */
@media (max-width:768px){
  .glass-grain{
    padding: 10px 14px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .glass-grain{
    background: rgba(25,25,27,0.3);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .glass-grain::after {
    mix-blend-mode: soft-light;
    opacity: .45;
  }
}