/* 
  Khabach Medical Homepage Styles 
  Note: Tailwind classes are handled by the CDN. 
  This file is for custom overrides and effects.
*/

/* FORCE Smooth Scroll */
html,
body {
    scroll-behavior: smooth !important;
}

/* Starry Background */
.starry-bg {
    background: radial-gradient(circle at center, #1a2332 0%, #0B1120 100%);
    position: relative;
    overflow: hidden;
}

.starry-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 80px 120px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 110px 10px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 150px 50px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 190px 90px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 210px 150px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 240px 30px, #ffffff, rgba(0, 0, 0, 0));
    background-size: 300px 300px;
    opacity: 0.4;
}

/* Glassmorphism Effect */
.glass-node {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

/* Lightbox Custom Scrollbar */
.lightbox-scroll::-webkit-scrollbar {
    width: 8px;
}

.lightbox-scroll::-webkit-scrollbar-track {
    background: #0B1120;
}

.lightbox-scroll::-webkit-scrollbar-thumb {
    background: #FF7A45;
    border-radius: 4px;
}