/* Body and background */
body{font-family:"Comic Sans MS",monospace;position:relative;margin:0;padding:0;z-index:0;cursor:default;background:transparent}
body::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('/prarambh-images/67.webp') no-repeat center/cover fixed;opacity:.85;z-index:-1;will-change:opacity;filter:blur(4px)}

/* Header and Brand */
header{background:transparent;box-shadow:0 2px 6px rgba(0,0,0,.05);position:sticky;top:0;z-index:10}
.brand{position:fixed;top:0;left:0;padding:0;width:150px;height:50px;background:rgba(255,255,255,0.3);backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);z-index:999;border-radius:0 0 12px 12px;border:1px solid rgba(255,255,255,0.4);box-shadow:0 6px 12px rgba(0,0,0,0.15),0 0 14px rgba(255,255,255,0.2);object-fit:cover;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.logo:hover{transform:scale(1.05);box-shadow:0 8px 16px rgba(0,0,0,0.2),0 0 20px rgba(255,255,255,0.3)}
.brand img{width:100%;height:100%;transition:opacity .3s ease}
.brand:hover img{opacity:.95}

/* Navigation */
.nav-wrapper{display:flex;justify-content:flex-end;align-items:center;gap:1rem;max-width:1140px;margin:auto;padding:1rem}
.nav-item a{color:#1e293b;text-decoration:none;font-weight:500}
.nav-item a:hover{color:#0077b6;text-decoration:underline}
.menu-toggle{display:none;font-size:1.8rem;background:none;border:none;color:#1e293b;position:absolute;top:1rem;right:1rem;z-index:11;cursor:pointer}
@media(max-width:768px){.nav-wrapper{display:none;flex-direction:column;background:#fff;padding:1rem;box-shadow:0 4px 10px rgba(0,0,0,.1);position:absolute;top:60px;right:0;width:100%;z-index:10}.nav-wrapper.show{display:flex}.menu-toggle{display:block}.brand{position:relative;z-index:12}}

/* Hero section */
.hero{position:relative;height:85vh;color:#fff;overflow:hidden}
.hero video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#009684;z-index:1}
.hero .hero-content{position:relative;z-index:2;top:50%;transform:translateY(-50%);text-align:center;padding:2rem}
.hero h1{font-size:24px;font-weight:normal;margin:0}
.hero p{font-size:18px;font-weight:normal;margin:.75rem 0}

/* Glassmorphic buttons */
.hero .start-button,
.button,
.side-button{padding:.75rem 1.5rem;border-radius:12px;border:none;cursor:pointer;text-decoration:none;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(12px) saturate(200%);-webkit-backdrop-filter:blur(12px) saturate(200%);border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 16px rgba(31,38,135,.37),inset 0 0 12px rgba(255,255,255,.2);transition:transform .3s ease,background .3s ease,box-shadow .3s ease;font-size:1.15rem}
.hero .start-button:hover,
.button:hover,
.side-button:hover{transform:scale(1.05);background:rgba(255,255,255,.22);box-shadow:0 6px 20px rgba(31,38,135,.45),inset 0 0 14px rgba(255,255,255,.25)}

/* Section and content blocks */
.section{max-width:1000px;margin:3rem auto;padding:0 1rem}
.section-heading{text-align:center;font-size:2rem;font-weight:600;background:linear-gradient(90deg,#00b4d8,#0077b6);-webkit-background-clip:text;color:transparent;margin:4rem 0 2rem}
.feature-block{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;margin-bottom:4rem;padding:1.5rem;border-radius:20px;background:rgba(255,255,255,.15);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 20px rgba(31,38,135,.25);transition:transform .3s ease,box-shadow .3s ease}
.feature-block:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(31,38,135,.35)}
.feature-img{flex:1 1 50%;display:flex;justify-content:center}
.feature-img img{width:300px;height:auto;object-fit:contain;border-radius:16px;border:1px solid rgba(255,255,255,.25);background-color:rgba(255,255,255,.05)}
.feature-text{flex:1 1 45%}
.feature-text h4{font-size:1.4rem;color:#009688;font-weight:600;margin-bottom:.75rem}
.feature-text p{color:#000;line-height:1.6;font-size:1rem}
.button{display:inline-block;padding:.6rem 1.2rem;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);backdrop-filter:blur(12px) saturate(200%);-webkit-backdrop-filter:blur(12px) saturate(200%);box-shadow:0 4px 16px rgba(31,38,135,.37),inset 0 0 12px rgba(255,255,255,.2);color:blue;text-decoration:none;transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(31,38,135,.4)}
.secondary{background:rgba(224,224,224,.25)}
.success{background:rgba(209,231,221,.25)}
.info{background:rgba(207,244,252,.25)}
.warning{background:rgba(255,206,115,.25)}
.primary{background:rgba(115,173,255,.25)}

.footer{background:rgba(255,255,255,.15);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);padding:3rem 1rem;color:#000}
.footer-container{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;max-width:1200px;margin:auto}
.footer-column{flex:1 1 220px}
.footer-column h5{font-size:1.1rem;margin-bottom:1rem;background:linear-gradient(90deg,#00b4d8,#0077b6);-webkit-background-clip:text;color:transparent}
.footer-column ul{list-style:none;padding:0}
.footer-column ul li{margin-bottom:.5rem}
.footer-column ul li a{color:#000;text-decoration:none;transition:color .3s ease}
.footer-column ul li a:hover{color:#90e0ef}
.footer-column p{line-height:1.6;font-size:.95rem}
.footer-bottom{text-align:center;margin-top:2rem;font-size:.9rem;color:#000}
@media(max-width:768px){.feature-block{flex-direction:column!important;text-align:center}.feature-img img{width:100%;height:auto}.footer-container{flex-direction:column}}

/* Side buttons */
.side-buttons{position:fixed;right:-10px;top:30%;transform:translateY(-50%);display:flex;flex-direction:column;gap:15px;transition:opacity .3s ease,visibility .3s ease;opacity:1;visibility:visible;z-index:1000}
.side-buttons.hidden{opacity:0;visibility:hidden}
.side-button{padding:15px 20px;text-align:left;border-radius:5px 0 0 5px;font-size:16px;text-decoration:none;display:flex;align-items:center;gap:8px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}

/* Side button glass tints */
.blue{background:rgba(42,123,160,.4)}.blue .dot{background-color:rgba(209,245,245,.6)}
.green{background:rgba(59,139,59,.4)}.green .dot{background-color:rgba(255,224,235,.6)}
.pink{background:rgba(204,31,92,.4)}.pink .dot{background-color:rgba(212,249,212,.6)}
.teal{background:rgba(29,127,127,.4)}.teal .dot{background-color:rgba(208,240,255,.6)}