:root{
    /* New soft, modern palette */
    --soft-blue: #3B82F6; /* Soft Blue */
    --mint-green: #A7F3D0; /* Mint Green */
    --white: #FFFFFF; /* White */
    --nav-color: #1E3A8A; /* Navy Header */
    --sky-accent: #E0F2FE; /* Sky Accent (background) */

    /* legacy aliases used across the stylesheet */
    --primary: var(--soft-blue);
    --accent: var(--mint-green);
    --muted: #6c757d;
    --bg-color: var(--sky-accent);
    --card: var(--white);
    --nav-height: 72px;
    /* responsive spacing */
    --site-gutter: clamp(12px, 2.2vw, 32px);
    --section-pad: clamp(28px, 4vw, 72px);
}

html,body{
    height:100%;
}

body{
    font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
    margin:0;
    background: var(--bg-color);
    color: #0b2b45;
    -webkit-font-smoothing:antialiased;
}

/* NAV */
#mainNav{
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    transition: all .3s ease;
    border-bottom: 1px solid rgba(30,58,138,0.06);
}

#mainNav.scrolled{
    background: var(--nav-color);
    color: #fff;
}

#mainNav .nav-link{ color: #124d2a; font-weight:600; }
#mainNav.scrolled .nav-link{ color: rgba(255,255,255,0.95); }
#mainNav .brand-title{ font-weight:700; color: var(--nav-color); }
#mainNav.scrolled .brand-title{ color: #fff; }

.logo{ height:36px; width:auto; }

/* HERO */
.hero-section{
    min-height: calc(70vh - var(--nav-height));
    height: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    padding: clamp(28px, 6vw, 72px) 0;
    /* use same background as body for a uniform look */
    background: transparent;
}

.hero-section::after{
    /* removed dark overlay to keep uniform background */
    content:''; position:absolute; inset:0; pointer-events:none; display:none;
}

.hero-content{ position:relative; z-index:2; max-width:920px; }
.hero-content h1{ font-size: clamp(28px,4.2vw,48px); }
.hero-content .lead{ font-size:1.125rem; opacity:0.95 }

.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; height:0; display:none; }

/* subtle hero background panning animation */
@keyframes panBg{ from{ background-position: 10% 50%; } to{ background-position: 90% 50%; } }
.hero-section.panning{ animation: panBg 28s ease-in-out infinite alternate; }
.hero-section{ background-size:cover; background-position:70% 30%; background-repeat:no-repeat; }

/* Sections */
.section{ padding: var(--section-pad) 0; }
.section .section-title{ text-align:center; font-size:26px; font-weight:700; color:var(--primary); margin-bottom:20px; position:relative; }
.section .section-title::after{ content:''; display:block; width:80px; height:4px; background:var(--accent); margin:12px auto 0; border-radius:6px; }

/* new helper classes for consistent coloring */
.section-heading{ color: var(--nav-color); }
.footer-note{ color: var(--nav-color); font-size:1rem; }
.site-nav{ background: var(--nav-color); border-bottom:2px solid rgba(59,130,246,0.08); }


.card{ border:none; border-radius:14px; box-shadow:0 10px 30px rgba(12,60,30,0.06); }
.feature-icon{ color:var(--primary); }

/* Map Bootstrap success utilities to site palette */
.btn-success, .badge-success {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}
.btn-success:hover, .badge-success:hover{ filter:brightness(.96); }
.text-success{ color: var(--primary) !important; }

.map-placeholder{ min-height:150px; display:flex; align-items:center; justify-content:center; }

/* Carousel images */
.carousel-item img{ height:360px; object-fit:cover; border-radius:12px; }

@media(max-width:768px){ .carousel-item img{ height:220px; } }

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(18px); transition: all .7s cubic-bezier(.2,.9,.2,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal.delay-1{ transition-delay:120ms; }
.reveal.delay-2{ transition-delay:240ms; }

/* Float & Assemble: initial float offsets that assemble into place */
.float-reveal{ --tx: 0px; --ty: 18px; --rot: 0deg; --delay: 0s; opacity:0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); transition-property: transform, opacity, filter; transition-duration: 1s; transition-timing-function: cubic-bezier(.16,.84,.24,1); transition-delay: var(--delay); will-change: transform, opacity; }
.float-reveal.visible{ transform: translate(0px,0px) rotate(0deg); opacity:1; }

/* Make sure float reveal elements also respect the reveal delays */
.float-reveal.delay-1{ transition-delay: calc(var(--delay,0s) + 0.12s); }
.float-reveal.delay-2{ transition-delay: calc(var(--delay,0s) + 0.24s); }

/* Header drop (initially above viewport, then drops in smoothly) */
#mainNav.header-float{ transform: translateY(-120px); transition: transform .95s cubic-bezier(.16,.84,.24,1), background .3s ease; }
#mainNav.header-float.visible{ transform: translateY(0); }

/* small helpers */
.btn-primary{ background:var(--primary); border:none; }
.btn-outline-light{ border:1px solid rgba(255,255,255,0.55); }

/* Footer */
.footer{ border-top:1px solid rgba(15,122,74,0.06); }

/* Accessible focus */
a:focus{ outline:3px solid rgba(15,122,74,0.15); outline-offset:2px; }

/* Responsive tweaks */
@media(max-width:576px){
    #mainNav{ padding:.5rem 1rem; }
    .hero-content .lead{ font-size:1rem; }
}

/* Restored footer style similar to previous design */
.site-footer{
    background: var(--bg-color); /* keep footer same as page background */
    padding:40px 0;
    border-top:1px solid rgba(15,122,74,0.06);
    color: #083a16;
}
.site-footer a{ color: #083a16; }
.site-footer ul{ padding-left:0; }
.site-footer hr{ border-color: rgba(12,60,30,0.06); }

/* Photo gallery: 2-column x 3-row per viewport, horizontal scroll, hover pop */
.photo-gallery{ max-width:1100px; margin:0 auto; }
.photo-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* three photos per row on desktop */
    gap: 18px;
    align-items: stretch;
}

.photo{ position:relative; overflow:hidden; border-radius:10px; cursor:pointer; aspect-ratio: 3 / 2; }
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, filter .36s; }

/* New behavior: when one photo is active, it enlarges and becomes clear; others shrink */
/* Default: all photos neutral */
.photo-grid .photo img{ transform: scale(1); filter: saturate(1) contrast(1); opacity:1; }

/* When any photo is active, non-active photos shrink and desaturate slightly */
.photo-grid .photo:not(.active) img{ transform: scale(0.86); filter: saturate(.92) brightness(.96) contrast(.96); opacity:.95; transition: transform .36s ease, filter .36s ease, opacity .36s ease; }

/* Active (hovered/focused) photo becomes larger and clear */
.photo-grid .photo.active img{ transform: scale(1.16); box-shadow: 0 28px 60px rgba(4,27,73,0.18); filter: saturate(1.05) contrast(1.02); z-index:2; }

/* If nothing active (no hover), keep images slightly scaled neutral on grid hover fallback */
.photo-grid:hover .photo:not(.active) img{ transform: scale(0.94); }

/* Slight blur during scroll (if used) */
.photo-grid.scrolling .photo img{ filter: blur(3px) saturate(.95) contrast(.98); transform: scale(0.98); }

@media(max-width:480px){ .photo{ aspect-ratio: 3/2; } }

/* Responsive gallery: 3 cols desktop, 2 cols tablet, 1 col mobile */
@media (max-width: 900px){
    .photo-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
    .photo-grid{ grid-template-columns: repeat(1, 1fr); }
    .photo{ /* smaller vertical ratio on very small screens */ aspect-ratio: 4 / 3; }
}

/* Additional responsive tweaks */
@media (max-width: 1200px){
    :root{ --nav-height: 68px; }
    .hero-section{ min-height: calc(64vh - var(--nav-height)); }
}
@media (max-width: 900px){
    :root{ --nav-height: 64px; }
    .hero-section{ min-height: calc(60vh - var(--nav-height)); padding: 24px 0; }
    .section .section-title{ font-size:22px; }
}
@media (max-width: 600px){
    :root{ --nav-height: 56px; }
    #mainNav .nav-link{ padding:.45rem .5rem; font-size:.95rem; }
    .hero-content h1{ font-size: clamp(20px,6vw,36px); }
    .section{ padding: clamp(18px, 6vw, 36px) 0; }
    .photo-grid{ gap: 12px; }
}
@media (max-width: 420px){
    .hero-section{ min-height: calc(48vh - var(--nav-height)); padding: 18px 0; }
    .brand-title{ font-size: .95rem; }
}