/* =================================================
   NAVODAYAM EDUCARE CONSULTANCY — SHARED STYLESHEET
   Single source of truth for design tokens and every
   reusable component used across the site.
================================================= */

:root{
--primary:#0B2C4D;
--secondary:#0F6E6E;
--accent:#C9A227;
--light:#F4F7FA;
--gradient:linear-gradient(135deg,#0B2C4D,#0F6E6E);
}

/* -------------------------------------------------
   Base / Typography
-------------------------------------------------- */
body{font-family:'Segoe UI',sans-serif;line-height:1.8;font-size:18px;background:#fff;scroll-behavior:smooth;}
p{font-size:1.2rem;}
.section-padding{padding:110px 0;}
.bg-brand-gradient{background:var(--gradient);}
.hero-logo{width:200px;height:200px;object-fit:cover;}
.section-title{font-weight:700;color:var(--primary);margin-bottom:25px;}
.sub-title{color:var(--secondary);font-weight:600;}

/* -------------------------------------------------
   Accessibility: skip link + focus visibility
-------------------------------------------------- */
.skip-link{
position:absolute;
left:-999px;
top:0;
background:var(--primary);
color:#fff;
padding:10px 18px;
border-radius:0 0 8px 0;
z-index:2000;
text-decoration:none;
}

.skip-link:focus{
left:0;
}

a:focus-visible,
button:focus-visible,
.nav-link:focus-visible{
outline:3px solid var(--accent);
outline-offset:2px;
}

/* -------------------------------------------------
   Buttons
-------------------------------------------------- */
.btn-primary-custom{
background:var(--accent);
border:none;
color:#fff;
transition:.3s ease;
}

.btn-primary-custom:hover{
background:var(--secondary);
transform:translateX(6px);
}

.btn-secondary-custom{background:var(--secondary);border:none;color:#fff;}

/* -------------------------------------------------
   Cards
-------------------------------------------------- */
.card-custom{border:none;box-shadow:0 20px 50px rgba(0,0,0,.08);transition:.4s;}
.card-custom:hover{transform:translateY(-10px);}

/* -------------------------------------------------
   Site Header (Announcement Bar + Navbar wrapper)

   Both bars live in normal flow inside this single
   fixed shell, so the navbar always sits directly
   under the announcement bar with no magic-number
   offset. Scroll behavior toggles two classes:
   - .announcement-bar.collapsed  (bar 1 folds away)
   - .site-header.header-hidden   (whole shell slides up)
-------------------------------------------------- */
.site-header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1050;
transition:transform .45s cubic-bezier(.4,0,.2,1);
}

.site-header.header-hidden{
transform:translateY(-100%);
}

/* -------------------------------------------------
   Navbar
-------------------------------------------------- */
.navbar{
position:relative;
transition:padding .3s ease, background .3s ease;
padding:16px 0;
width:100%;
background:var(--primary);
}

.navbar.scrolled{
background:var(--primary);
padding:10px 0;
box-shadow:0 6px 25px rgba(0,0,0,.25);
}
.navbar-brand,.nav-link{color:#fff!important;}
.nav-link:hover{color:var(--accent)!important;}
.nav-link.active,.nav-link[aria-current="page"]{color:var(--accent)!important;font-weight:700;}

/* -------------------------------------------------
   Hero (home) + Hero-Inner (sub-pages)
-------------------------------------------------- */
.hero{
height:90vh;
background:linear-gradient(rgba(11,44,77,.85),rgba(11,44,77,.85)),
url('https://images.unsplash.com/photo-1588072432836-e10032774350') center/cover fixed;
color:#fff;display:flex;align-items:center;text-align:center;
}

.hero-inner{
height:55vh;
min-height:380px;
background:linear-gradient(rgba(11,44,77,.85),rgba(11,44,77,.85)),
url('https://images.unsplash.com/photo-1588072432836-e10032774350') center/cover fixed;
color:#fff;
display:flex;
align-items:center;
text-align:center;
}

.parallax{
background:linear-gradient(rgba(11,44,77,.9),rgba(11,44,77,.9)),
url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1') center/cover fixed;
color:#fff;
}


/* -------------------------------------------------
   Announcement Bar / Ticker / Blink
-------------------------------------------------- */
.announcement-bar{
position:relative;
width:100%;
background:#C9A227;
color:#fff;
font-weight:600;
padding:8px 0;
text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,.2);
overflow:hidden;
max-height:60px;
transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, padding .35s ease, box-shadow .35s ease;
}

.announcement-bar.collapsed{
max-height:0;
opacity:0;
padding-top:0;
padding-bottom:0;
box-shadow:none;
}

.announcement-bar a{
color:#fff;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
cursor:pointer;
}

.announcement-bar .ticker{
width:70%;
overflow:hidden;
white-space:nowrap;
position:relative;
}

.announcement-bar .ticker-text{
display:inline-block;
padding-left:100%;
animation:tickerScroll 16s linear infinite;
}

.announcement-bar a:hover .ticker-text,
.announcement-bar a:focus-visible .ticker-text{
animation-play-state:paused;
}

@keyframes tickerScroll{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}

.blink{
animation:blinkAnim 1s infinite;
font-weight:bold;
}

@keyframes blinkAnim{
0%{opacity:1;}
50%{opacity:.2;}
100%{opacity:1;}
}

/* ==============================
   PREMIUM INTERACTION
================================= */

/* Highlight Heading Border Animation */
.highlight-box{
display:inline-block;
padding:10px 25px;
border-radius:12px;
position:relative;
}

.highlight-box::before{
content:'';
position:absolute;
inset:0;
border-radius:12px;
padding:2px;
background:linear-gradient(
90deg,
#C9A227,
transparent,
#0F6E6E,
transparent,
#C9A227
);
background-size:300% 100%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation:borderMoveHighlight 3s linear infinite;
}

@keyframes borderMoveHighlight{
0%{background-position:0% 0;}
100%{background-position:300% 0;}
}

/* Card Enhancement (Symposium) */
#symposium .card{
border-radius:20px;
background:rgba(255,255,255,0.9);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
box-shadow:0 20px 60px rgba(0,0,0,.1);
}

#symposium .btn{
min-width:220px;
}

/* ==============================
   ABOUT SECTION PREMIUM CARDS
================================= */

.about-feature-card{
position:relative;
background:rgba(255,255,255,0.85);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-radius:14px;
border:1px solid rgba(0,0,0,.05);
box-shadow:
0 8px 20px rgba(0,0,0,.05),
0 15px 40px rgba(0,0,0,.04);
transition:all .4s cubic-bezier(.25,.8,.25,1);
overflow:hidden;
}

.about-feature-card:hover{
transform:translateY(-10px);
background:rgba(255,255,255,0.95);
box-shadow:
0 20px 50px rgba(0,0,0,.12),
0 30px 70px rgba(0,0,0,.15);
}

.about-feature-card i{
width:32px;
height:32px;
transition:all .4s ease;
}

.about-feature-card:hover i{
transform:scale(1.15) rotate(5deg);
color:var(--accent);
}

.about-feature-card::before{
content:'';
position:absolute;
inset:0;
border-radius:14px;
padding:1.5px;
background:linear-gradient(
45deg,
rgba(201,162,39,.7),
rgba(15,110,110,.7),
rgba(11,44,77,.7)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:0;
transition:.4s;
}

.about-feature-card:hover::before{
opacity:1;
animation:borderMove 3s linear infinite;
}

@keyframes borderMove{
0%{background-position:0% 50%;}
100%{background-position:100% 50%;}
}

.about-feature-card::after{
content:'';
position:absolute;
left:var(--mouse-x);
top:var(--mouse-y);
width:180px;
height:180px;
background:radial-gradient(circle, rgba(201,162,39,.25), transparent 60%);
border-radius:50%;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%);
transition:opacity .3s;
}

.about-feature-card:hover::after{
opacity:1;
}

/* ==============================
   CORE VALUES PREMIUM CARDS
================================= */

.core-card{
position:relative;
background:rgba(255,255,255,0.85);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-radius:16px;
border:1px solid rgba(255,255,255,0.5);
overflow:hidden;
box-shadow:
0 8px 20px rgba(0,0,0,.06),
0 15px 40px rgba(0,0,0,.05);
transition:all .45s cubic-bezier(.25,.8,.25,1);
}

.core-card:hover{
transform:translateY(-12px);
background:rgba(255,255,255,0.95);
box-shadow:
0 25px 60px rgba(0,0,0,.18),
0 35px 90px rgba(0,0,0,.22);
}

.core-card i{
width:34px;
height:34px;
color:var(--primary);
transition:all .4s ease;
}

.core-card:hover i{
transform:scale(1.2) rotate(6deg);
color:var(--accent);
}

.core-card::before{
content:'';
position:absolute;
inset:0;
border-radius:16px;
padding:1.5px;
background:linear-gradient(
45deg,
rgba(201,162,39,.7),
rgba(15,110,110,.7),
rgba(11,44,77,.7)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:0;
transition:.4s;
}

.core-card:hover::before{
opacity:1;
animation:borderShift 3s linear infinite;
}

@keyframes borderShift{
0%{background-position:0% 50%;}
100%{background-position:100% 50%;}
}

.core-card::after{
content:'';
position:absolute;
left:var(--mouse-x);
top:var(--mouse-y);
width:200px;
height:200px;
background:radial-gradient(circle, rgba(201,162,39,.25), transparent 60%);
border-radius:50%;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%);
transition:opacity .3s;
}

.core-card:hover::after{
opacity:1;
}

/* ==============================
   GOAL SECTION PREMIUM CARDS
================================= */

.goal-card{
position:relative;
background:rgba(255,255,255,0.85);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
border-radius:16px;
border:1px solid rgba(255,255,255,0.4);
overflow:hidden;
color:#0B2C4D;
box-shadow:
0 10px 25px rgba(0,0,0,.08),
0 20px 50px rgba(0,0,0,.06);
transition:all .45s cubic-bezier(.25,.8,.25,1);
}

.goal-card:hover{
transform:translateY(-12px);
background:rgba(255,255,255,0.95);
box-shadow:
0 25px 60px rgba(0,0,0,.18),
0 40px 100px rgba(0,0,0,.25);
}

.goal-card i{
width:34px;
height:34px;
color:var(--primary);
transition:all .4s ease;
}

.goal-card:hover i{
transform:scale(1.2) rotate(6deg);
color:var(--accent);
}

.goal-card::before{
content:'';
position:absolute;
inset:0;
border-radius:16px;
padding:1.5px;
background:linear-gradient(
45deg,
rgba(201,162,39,.7),
rgba(15,110,110,.7),
rgba(11,44,77,.7)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:0;
transition:.4s;
}

.goal-card:hover::before{
opacity:1;
animation:borderMove 3s linear infinite;
}

.goal-card::after{
content:'';
position:absolute;
left:var(--mouse-x);
top:var(--mouse-y);
width:200px;
height:200px;
background:radial-gradient(circle, rgba(201,162,39,.25), transparent 60%);
border-radius:50%;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%);
transition:opacity .3s;
}

.goal-card:hover::after{
opacity:1;
}

/* =================================================
   MENTOR / TEAM CARDS
================================================= */

.mentor-card{
position:relative;
background:rgba(255,255,255,0.85);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border-radius:18px;
border:1px solid rgba(255,255,255,0.5);
overflow:hidden;
transition:all .45s cubic-bezier(.25,.8,.25,1);
box-shadow:
0 10px 30px rgba(0,0,0,.08),
0 20px 60px rgba(0,0,0,.05);
}

.mentor-card:hover{
transform:translateY(-14px);
background:rgba(255,255,255,0.95);
box-shadow:
0 25px 70px rgba(0,0,0,.18),
0 40px 100px rgba(0,0,0,.22);
}

.mentor-card::before{
content:'';
position:absolute;
inset:0;
border-radius:18px;
padding:2px;
background:linear-gradient(
45deg,
rgba(201,162,39,.8),
rgba(15,110,110,.8),
rgba(11,44,77,.8)
);
background-size:300% 300%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:0;
transition:.4s ease;
pointer-events:none;
}

.mentor-card:hover::before{
opacity:1;
animation:borderGlow 3s linear infinite;
}

@keyframes borderGlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.mentor-card::after{
content:'';
position:absolute;
left:var(--mouse-x);
top:var(--mouse-y);
width:220px;
height:220px;
background:radial-gradient(circle, rgba(201,162,39,.25), transparent 60%);
border-radius:50%;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%);
transition:opacity .3s;
}

.mentor-card:hover::after{
opacity:1;
}

.mentor-img{
position:relative;
overflow:hidden;
}

.mentor-img img{
width:100%;
object-fit:cover;
transition:transform .6s ease;
}

.mentor-card:hover .mentor-img img{
transform:scale(.9);
}

.mentor-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to top, rgba(0,0,0,.5), transparent);
opacity:0;
transition:.5s ease;
pointer-events:none;
}

.mentor-card:hover .mentor-overlay{
opacity:1;
}

.mentor-content{
position:relative;
z-index:2;
}

.mentor-content h3{
font-weight:600;
color:var(--primary);
}

.mentor-content p{
color:#555;
}

@media (max-width:768px){
.mentor-img img{
height:260px;
}
}

/* -------------------------------------------------
   Staggered Reveal Animation
-------------------------------------------------- */
.reveal{
opacity:0;
transform:translateY(40px);
animation:fadeUp 0.8s ease forwards;
}

.delay-1{animation-delay:0.1s;}
.delay-2{animation-delay:0.25s;}
.delay-3{animation-delay:0.4s;}
.delay-4{animation-delay:0.55s;}
.delay-5{animation-delay:0.7s;}
.delay-6{animation-delay:0.85s;}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* -------------------------------------------------
   Footer / Premium Footer / Social / Copyright
-------------------------------------------------- */
.footer{background:var(--primary);color:#fff;padding:70px 0;}

.premium-footer{
position:relative;
background:linear-gradient(135deg,#0B2C4D,#0F6E6E);
padding:80px 0;
color:#fff;
overflow:hidden;
}

.premium-footer::before{
content:'';
position:absolute;
width:400px;
height:400px;
background:radial-gradient(circle, rgba(201,162,39,.15), transparent 60%);
top:-100px;
left:-100px;
animation:floatGlow 8s ease-in-out infinite;
}

@keyframes floatGlow{
0%,100%{transform:translate(0,0);}
50%{transform:translate(40px,40px);}
}

.footer-title{
font-size:22px;
font-weight:700;
letter-spacing:1px;
}

.footer-tagline{
opacity:.85;
margin-top:10px;
font-size:16px;
}

.visitor-counter{
margin-top:20px;
font-size:18px;
font-weight:500;
opacity:0.9;
}

#visitorCount{
color:#C9A227;
font-size:26px;
font-weight:700;
letter-spacing:1px;
}

.footer-divider{
width:60px;
height:3px;
background:var(--accent);
margin:25px auto 0;
border-radius:10px;
}

.social-icons{
display:flex;
justify-content:center;
gap:18px;
margin-top:20px;
}

.social-icon{
position:relative;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,0.08);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
color:#fff;
font-size:20px;
transition:all .35s ease;
overflow:hidden;
}

.social-icon:hover{
transform:translateY(-6px) scale(1.15);
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.social-icon::after{
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background:rgba(255,255,255,.2);
opacity:0;
transform:scale(0);
transition:.4s;
}

.social-icon:hover::after{
opacity:1;
transform:scale(1.4);
}

.social-icon:nth-child(1):hover{background:#1877F2;}
.social-icon:nth-child(2):hover{background:#E4405F;}
.social-icon:nth-child(3):hover{background:#0A66C2;}
.social-icon:nth-child(4):hover{background:#FF0000;}
.social-icon:nth-child(5):hover{background:#25D366;}

.copyright-bar{
background:#222931;
padding:15px 0;
color:#ffffff;
border-top:1px solid rgba(0,0,0,0.05);
}

.copyright-bar p{
font-size:16px;
margin:0;
}

.whatsapp-float{
position:fixed;bottom:25px;right:25px;
background:#25D366;color:#fff;font-size:26px;
padding:15px 18px;border-radius:50%;
box-shadow:0 4px 15px rgba(0,0,0,.3);z-index:999;
}