* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    
    scroll-behavior: smooth;

    overflow-x: hidden;

    overscroll-behavior-x: none;
}

#about,
#directory,
#contribute {

    scroll-margin-top: 120px;
}

body {
    font-family: Inter, Arial, sans-serif;

    overflow-x: hidden;

    overscroll-behavior-x: none;
}

p {
    text-align: justify;
    text-justify: inter-word;
}

/* =========================
   NAVBAR
========================= */


.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(20,83,45,.95);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1rem 2rem;

    backdrop-filter: blur(10px);

    box-shadow: 0 2px 10px rgba(0,0,0,.15);

    position: sticky;
}



.navbar-title {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    justify-content: center;

    align-items: center;

    pointer-events: none;
}

.navbar-title img {

    height: 70px;

    width: auto;

    opacity: .95;
}


.menu-toggle {

    display: none;
}

.logo {

    display: flex;

    align-items: center;
}

.logo img {

    height: 70px;

    width: auto;

    display: block;
}

.nav-links {

    display: flex;

    gap: 1.5rem;

    list-style: none;
}

.nav-links a {

    color: white;

    text-decoration: none;

    font-weight: 600;
}

.nav-links a:hover {

    opacity: .85;
}
.nav-links a.active {

    color: #facc15;

}

/* =========================
   HERO
========================= */

.hero {

    position: relative;

    min-height: 78vh;

    height: 78vh;

    overflow: visible;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 100;
}

.hero-slideshow {

    position: absolute;

    inset: 0;

    z-index: 0;
}

.hero-slide {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: opacity 1s ease-in-out;
}

.hero-slide.active {

    opacity: 1;
}

.overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.18);

    z-index: 5;

    display: flex;

    justify-content: center;

    align-items: center;
}
.hero-logo {

    display: block;

    width: 170px;

    max-width: 75%;

    margin: 0 auto 1.5rem;

    transform: translateY(-25px);

    filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
}

.hero-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

    max-width: 900px;

    width: 100%;

    padding: 60px 20px;
}



.hero h1 {

    font-size: 5rem;

    font-weight: 800;

    letter-spacing: 5px;

    margin-bottom: .3rem;
}

.subtitle {

    font-size: 1.4rem;

    margin-bottom: 1rem;
}

.hero-text {

    font-size: 1.25rem;

    max-width: 700px;

    margin: 4rem auto 2.5rem;

    line-height: 1.8;

    text-align: center;

    text-shadow:
    0 2px 8px rgba(0,0,0,.35);
}

/* =========================
   SEARCH
========================= */

.search-wrapper {

    position: relative;

    z-index: 200;

    width: 100%;

    max-width: 820px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;
}



#searchInput {

    width: 100%;

    padding: 24px 32px;

    border: none;

    border-radius: 18px;

    font-size: 1.1rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.2);
}

#searchInput:focus {

    outline: none;
}

.suggestions {

    position: absolute;

    top: calc(100% + 6px);

    left: 0;
    right: 0;

    background: white;

    border-radius: 12px;

    overflow: hidden;

    display: none;

    max-height: 320px;

    overflow-y: auto;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

    z-index: 9999;
}

.suggestion-item {

    padding: 12px 18px;

    cursor: pointer;

    color: #111827;

    background: white;

    font-weight: 500;

    transition: .15s;
}

.suggestion-item:hover {

    background: #dcfce7;

    color: #14532d;
}

.suggestions {

    color: #111827;
}
.suggestion-title{

    font-weight:600;

    color:#111827;

}

.suggestion-assamese{

    margin-top:4px;

    font-size:.88rem;

    color:#166534;

}

.search-highlight{

    color:#d97706;

    font-weight:700;

}

/* =========================
   DIRECTORY SUMMARY
========================= */

.directory-summary {

    position: relative;

    z-index: 1;

    max-width: 1200px;

    margin: 0 auto;

    padding: 3rem 1rem;
}

.summary-card {

    background: white;

    border-radius: 24px;

    border-top: 5px solid #14532d;

    padding: 2.5rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    text-align: center;
}

.summary-card h2 {

    font-size: 4rem;

    color: #14532d;

    line-height: 1;

    margin-bottom: .5rem;
}

.summary-title {

    font-size: 1.2rem;

    font-weight: 700;

    color: #374151;
}

.last-updated {

    color: #6b7280;

    margin-top: .5rem;

    margin-bottom: 1.75rem;
}

/* =========================
   CONSERVATION BAR
========================= */

.status-bar {

    display: flex;

    height: 26px;

    border-radius: 999px;

    overflow: hidden;

    background: #e5e7eb;

    margin-bottom: 1rem;
}

.status-segment {

    transition: .3s ease;
}

.lc { background: #22c55e; }
.nt { background: #eab308; }
.vu { background: #f97316; }
.en { background: #ef4444; }
.cr { background: #7f1d1d; }

.status-legend {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: .8rem;
}

.status-legend span {

    padding: .45rem .85rem;

    border-radius: 999px;

    font-weight: 700;

    color: white;
}

#countLC {
    background: #22c55e;
}

#countNT {
    background: #eab308;
    color: #111827;
}

#countVU {
    background: #f97316;
}

#countEN {
    background: #ef4444;
}

#countCR {
    background: #7f1d1d;
}

/* =========================
   HOMEPAGE PANELS
========================= */

.homepage-panels {

    max-width: 1200px;

    margin: 0 auto;

    padding: 1rem 1rem 4rem;

    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    gap: 2rem;
}

.about-panel,
.bird-of-day-panel {

    background: white;

    border-radius: 24px;

    padding: 2rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.about-panel h2,
.bird-of-day-panel h2 {

    color: #14532d;

    margin-bottom: 1rem;
}

.about-panel p {

    line-height: 1.9;

    margin-bottom: 1rem;

    color: #374151;
}
.about-mini-stats {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-top: 2rem;

    padding-top: 2.5rem;

    border-top: 1px solid #e5e7eb;
}

.about-stat {

    flex: 1;

    text-align: center;
}

.about-stat strong {

    display: block;

    font-size: 1.8rem;

    font-weight: 800;

    color: #14532d;

    line-height: 1.2;
}

.about-stat span {

    font-size: .9rem;

    color: #6b7280;
}

/* =========================
   FEATURED BIRD
========================= */

#birdOfDay {

    display: flex;

    justify-content: center;
}

.featured-bird {

    width: 100%;

    overflow: hidden;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    cursor: pointer;
}

.featured-bird:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.16);
}

.featured-image-wrapper {

    position: relative;
}

.featured-image-wrapper img {

    width: 100%;

    height: 340px;

    object-fit: cover;

    display: block;
}

.featured-tag {

    position: absolute;

    top: 14px;

    left: 14px;

    background:
        rgba(20,83,45,.92);

    color: white;

    padding: .45rem .9rem;

    border-radius: 999px;

    font-size: .8rem;

    font-weight: 700;
}

.featured-description {

    margin-top: 1rem;

    color: #4b5563;

    line-height: 1.7;

    font-size: .95rem;
}

.featured-btn {

    margin-top: 1rem;

    border: none;

    border-radius: 12px;

    padding: .8rem 1.2rem;

    background: #14532d;

    color: white;

    font-weight: 700;

    cursor: pointer;
}

.featured-btn:hover {

    opacity: .9;
}

/* =========================
   DIRECTORY
========================= */

.directory {

    max-width: 1200px;

    margin: auto;

    padding: 4rem 1rem;
}

.directory h2 {

    color: #14532d;

    font-size: 2.8rem;

    text-align: center;

    margin-bottom: 2.8rem;
}

.directory h2::after {

    content: "";

    display: block;

    width: 80px;

    height: 4px;

    background: #14532d;

    border-radius: 999px;

    margin: 14px auto 0;
}
.directory-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

    max-width: 1000px;

    margin: 0 auto .6rem;
}

/* =========================
   DIRECTORY SEARCH
========================= */

.directory-search {

    flex: 1;

    max-width: none;

    margin: 0;
}

#directorySearchInput {

    width: 100%;

    height: 52px;

    padding: 0 20px;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    font-size: 1rem;

    background: white;

    box-shadow: 0 2px 8px rgba(0,0,0,.05);

    transition: .2s;
}

#directorySearchInput:focus {

    outline: none;

    border-color: #14532d;

    box-shadow:
        0 0 0 3px rgba(20,83,45,.15);
}

#statusFilter {

    width: 190px;

    height: 52px;

    margin: 0;

    padding: 0 16px;

    border-radius: 12px;

    border: 1px solid #d1d5db;

    background: white;

    font-size: 1rem;
}

.reset-search-btn {

    height: 52px;

    padding: 0 24px;

    border: none;

    border-radius: 12px;

    background: #14532d;

    color: white;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    transition: .2s;
}

.reset-search-btn:hover {

    opacity: .9;
}
#resultCount {

    text-align: center;

    color: #6b7280;

    font-size: 1rem;

    font-weight: 500;

    margin-top: .4rem;

    margin-bottom: 2rem;
}

#birdGrid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 1.75rem;
}
@media (max-width:768px){

    .directory-controls{

        flex-direction:column;

        align-items:stretch;
    }

    #statusFilter{

        width:100%;
    }
}

/* =========================
   BIRD CARDS
========================= */

.bird-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    height: 100%;

    box-shadow:
        0 8px 24px rgba(0,0,0,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
    
    scroll-margin-top: 90px;
}

.bird-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 16px 36px rgba(0,0,0,.14);
}

.bird-image {

    width: 100%;

    height: 300px;

    overflow: hidden;

    background: #f5f5f5;
}

.bird-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.bird-info {

    padding: 1.2rem;
}

.bird-info h3 {

    margin-bottom: .5rem;

    color: #111827;
}

.assamese-name {

    color: #166534;

    font-weight: 600;

    margin-bottom: .75rem;
}

.status-badge {

    display: inline-block;

    padding: .35rem .8rem;

    border-radius: 999px;

    font-size: .85rem;

    font-weight: 700;
}

.status-lc {
    background: #22c55e;
    color: white;
}

.status-nt {
    background: #eab308;
    color: #111827;
}

.status-vu {
    background: #f97316;
    color: white;
}

.status-en {
    background: #ef4444;
    color: white;
}

.status-cr {
    background: #7f1d1d;
    color: white;
}

/* =========================
   MODAL
========================= */

.modal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.75);

    justify-content: center;

    align-items: center;

    padding: 2rem;

    z-index: 9999;
}

.modal-content {

    background: white;

    width: min(1200px, 95vw);

    max-height: 90vh;

    overflow: hidden;

    border-radius: 24px;

    position: relative;

    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

.modal-layout {

    display: flex;

    min-height: 650px;
}

.modal-image {

    flex: 0 0 60%;

    position: relative;

    overflow: hidden;

    background: #111;
}

/* Blurred background */

.modal-image-blur {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: blur(28px) brightness(0.75);

    transform: scale(1.15);

    z-index: 1;
}

/* Main image */

.modal-image-main {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}

.modal-details {

    flex: 0 0 42%;

    padding: 2.5rem;

    overflow-y: auto;
}

#modalName {

    color: #14532d;

    font-size: 2rem;

    margin-bottom: .4rem;

    padding: 0;
}

#modalAssamese {

    color: #166534;

    font-size: 1.15rem;

    font-weight: 600;

    margin-bottom: 1rem;

    padding: 0;
}

#modalStatus {

    display: inline-block;

    padding: .6rem 1.2rem;

    border-radius: 999px;

    font-weight: 700;

    margin-bottom: 1.5rem;
}
.modal-details hr {

    border: none;

    border-top: 1px solid #e5e7eb;

    margin: 1.5rem 0;
}

#modalDescription {

    padding: 0;

    line-height: 1.9;

    color: #374151;

    font-size: 1.05rem;
}

#closeModal {

    position: absolute;

    top: 18px;

    right: 24px;

    font-size: 2rem;

    color: #14532d;

    cursor: pointer;

    z-index: 100;
}

#closeModal:hover {

    transform: scale(1.1);
}

/* Mobile */

@media (max-width: 900px) {

    .modal-content {

        width: 95vw;

        max-height: 90vh;

        overflow-y: auto;
    }

    .modal-layout {

        flex-direction: column;
    }

.modal-image {

    flex: none;

    background: #f5f5f5;
}

/* Disable blur on phones */

.modal-image-blur {

    display: none;
}

.modal-image-main {

    position: static;

    width: 100%;

    height: auto;

    max-height: 60vh;

    object-fit: contain;
}

    .modal-details {

        padding: 1.5rem;
    }

    #modalName {

        font-size: 1.6rem;
    }
}

/* =========================
   CONTRIBUTION FORM
========================= */

.contribute-section {

    max-width: 1200px;

    margin: 4rem auto;

    padding: 0 1rem;
}

.contribute-card {

    background: white;

    border-radius: 24px;

    padding: 3rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.contribute-card h2 {

    text-align: center;

    color: #14532d;

    margin-bottom: 1rem;
}

.contribute-intro {

    text-align: center;

    color: #6b7280;

    max-width: 700px;

    margin: 0 auto 2.75rem;
}

.form-group {

    margin-bottom: 1.5rem;
}

.form-group label {

    display: block;

    margin-bottom: .5rem;

    font-weight: 600;

    color: #374151;
}

.required {

    color: #dc2626;

    font-weight: 700;
}



.form-group input,
.form-group textarea {

    width: 100%;

    padding: 14px;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    font-size: 1rem;
}


.form-group textarea {

    resize: vertical;
}

.contribution-note {

    margin: 2rem 0 1.75rem;

    padding: 16px 18px;

    background: #f0fdf4;

    border-left: 3px solid #14532d;
    border-right: 3px solid #14532d;

    border-radius: 12px;

    color: #374151;

    font-size: 0.95rem;

    line-height: 1.7;

    text-align: center;
}
.contribution-note strong {

    color: #14532d;
}

.contribute-btn {

    width: 100%;

    border: none;

    border-radius: 12px;

    padding: 16px;

    background: #14532d;

    color: white;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

.contribute-btn:hover {

    opacity: .9;
}

#formMessage {

    margin-top: 1rem;

    text-align: center;

    font-weight: 600;
}

/* =========================
   FOOTER
========================= */

.footer {

    margin-top: 5rem;

    background: #14532d;

    color: white;
}

.footer-content{

    max-width:1200px;

    margin:0 auto;

    padding:3rem 1rem;

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:3rem;
}

.footer-brand img {

    height: 140px;

    width: auto;

    margin-bottom: 1rem;
}

.footer-brand p {

    color: rgba(255,255,255,.85);

    max-width: 400px;

    line-height: 1.8;
}

.footer-links h4,
.footer-contact h4 {

    margin-bottom: 1rem;

    font-size: 1.1rem;
}

.footer-links {

    display: flex;

    flex-direction: column;

    gap: .75rem;
}

.footer-links a {

    color: rgba(255,255,255,.85);

    text-decoration: none;

    transition: .2s;
}

.footer-links a:hover {

    color: white;
}

.footer-contact p {

    color: rgba(255,255,255,.85);

    margin-bottom: .75rem;
}

/* =========================
   FOOTER PARTNERS
========================= */

.footer-partners h4 {

    margin-bottom: 1rem;

    font-size: 1rem;

    font-weight: 600;

    opacity: .9;
}
.footer-partners {

    text-align: center;
}
.partner-logos {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    flex-wrap: wrap;
}

.partner-logos img {

    width: auto;

    object-fit: contain;

    transition: .2s ease;

    filter:
        drop-shadow(
            0 2px 4px rgba(0,0,0,.15)
        );
}

/* Assam Bird Monitoring Network */
.partner-logos img:first-child {

    max-height: 110px;

    max-width: 260px;
}

/* Wild Heart Foundation */
.partner-logos img:last-child {

    max-height: 90px;

    max-width: 240px;
}

.partner-logos img:hover {

    transform: translateY(-3px);
}

.footer-bottom {

    border-top:
        1px solid rgba(255,255,255,.15);

    text-align: center;

    padding: 1.25rem;

    color: rgba(255,255,255,.75);

    font-size: .95rem;
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 992px) {

    .homepage-panels {

        grid-template-columns: 1fr;
    }

    .featured-image-wrapper img {

        height: 300px;
    }
    .footer-content {

    grid-template-columns: 1fr;

    gap: 2rem;

    text-align: center;
}

.footer-brand p {

    margin: 0 auto;
}
    .partner-logos {

    justify-content: center;
}
    .partner-logos {

    justify-content: center;
}
}

@media (max-width: 768px) {

.logo img {

    height: 54px;

    width: auto;
}

    
.navbar {

    padding: 1rem 1rem;

    display: grid;

    grid-template-columns: 60px 1fr 60px;

    align-items: center;

    column-gap: 12px;
}
    
.navbar-title {

    position: static;

    transform: none;

    display: flex;

    justify-content: center;

    align-items: center;

    pointer-events: auto;
}

.navbar-title img {

    height: 42px;

    width: auto;
}

.nav-links {

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 0;

    right: 0;

    width: 280px;

    height: 100vh;

    background: #14532d;

    padding-top: 90px;

    gap: 0;

    transform: translateX(100%);

    transition: transform .35s ease;

    z-index: 999;
}

.nav-links.active {

    transform: translateX(0);

}

.nav-links li {

    width: 100%;
}

.nav-links li a {

    display: block;

    width: 100%;

    padding: 18px 28px;

    font-size: 1.05rem;

    border-bottom: 1px solid rgba(255,255,255,.08);
}
    .menu-toggle {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    width: 42px;

    height: 42px;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 1001;

    justify-self: end;

    transform: translateX(-15px);
}

.menu-toggle span {

    width: 26px;

    height: 3px;

    border-radius: 99px;

    background: white;

    transition: .3s;
}
.menu-toggle.active span:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}

.menu-toggle.active span:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

}
    .nav-links a {

    font-size: 0.95rem;
}

    .hero {

        height: 70vh;
    }
    .hero-content {

    padding-top: 110px;

    padding-bottom: 40px;
}

    .hero h1 {

        font-size: 3rem;
    }

    .subtitle {

        font-size: 1.1rem;
    }
.hero-logo {

    display: block;

    width: 130px;

    max-width: 45%;

    margin: 0 auto 1.2rem;

    transform: translateY(-150px);

    filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
}

.hero-text {

    font-size: 1rem;

    font-weight: 500;

    margin-bottom: 30px;
}

.search-wrapper {

    margin-top: 20px;
}

    .summary-card {

        padding: 2rem 1.25rem;
    }

    .summary-card h2 {

        font-size: 3rem;
    }

    .status-legend {

        gap: .5rem;
    }

    .status-legend span {

        font-size: .8rem;
    }

    .featured-image-wrapper img {

        height: 260px;
    }

    #birdGrid {

        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .hero h1 {

        font-size: 2.5rem;
    }

    #searchInput {

        padding: 16px;
    }

    .summary-card h2 {

        font-size: 2.5rem;
    }

    .featured-image-wrapper img {

        height: 220px;
    }


}
#speciesProgress {

    text-align: center;

    margin-top: 1.5rem;

    margin-bottom: 1rem;

    color: #6b7280;

    font-size: .9rem;

    letter-spacing: .3px;

    text-transform: uppercase;
}
.load-more-container {

    text-align: center;

    margin-top: 2rem;
}

#loadMoreBtn {

    padding: 12px 24px;

    border: none;

    border-radius: 12px;

    background: #14532d;

    color: white;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

#loadMoreBtn:hover {

    opacity: .9;

    transform:
        translateY(-2px);
}


    
/* ==========================================
   ANATOMY GUIDE
========================================== */

.anatomy-page {

    max-width: 1600px;

    margin: 0 auto;

    padding: 0.9rem 2rem 3rem;
}

.anatomy-header {

    text-align: center;

    margin-bottom: 2rem;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;
}

.anatomy-header h1 {

    color: #145c2e;

    font-size: 2.45rem;

    font-weight: 800;

    letter-spacing: -0.5px;

    line-height: 1.15;

    margin-bottom: .75rem;
}

.anatomy-header h1::after {

    content: "";

    display: block;

    width: 80px;

    height: 4px;

    background: #145c2e;

    border-radius: 999px;

    margin: 14px auto 0;
}

.anatomy-header p {

    max-width: 900px;

    margin: 0 auto;

    font-size: 1.15rem;

    line-height: 1.8;

    color: #4b5563;

    text-align: center;
}

.guide-divider{

    border:none;

    height:1px;

    background:#e5e7eb;

    margin:24px 0;
}
.anatomy-container {
    overflow-x: auto;
}

.anatomy-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.anatomy-label {
    position: absolute;
    transform: translate(-50%, -50%);
    transform-origin: center;

    padding: 8px 16px;
    border: 2px solid #215E37;
    border-radius: 12px;

    background: #fff;
    color: #215E37;

    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    white-space: nowrap;

    transition: all 0.2s ease;
}

.anatomy-label:hover {

    background: #215E37;
    color: white;
}

.anatomy-label.active {

    background: #215E37;
    color: white;

    box-shadow:
        0 0 0 4px rgba(33,94,55,.15);
}

.anatomy-example{

    margin:20px 0;
}

.anatomy-example img {

    width:100%;

    border-radius:12px;

    border:1px solid #d6e4d8;

    display:block;

    margin:20px auto;
}

.example-caption{

    margin-top:10px;

    text-align:center;

    color:#6b7280;

    font-size:.9rem;

    font-style:italic;
}

.hotspot{
    position:absolute;
    cursor:pointer;
    background:transparent;
    border:none;
    z-index:20;
}

.hotspot:hover{
    background: rgba(20,92,46,.15);
    border: 1px dashed rgba(20,92,46,.4);
    border-radius: 10px;
}

.hotspot.active{
    background: rgba(20,92,46,.22);
    border-radius: 10px;

    box-shadow:
        0 0 0 2px rgba(20,92,46,.35);
}






/* ---------- Bird Area ---------- */

.bird-panel {

    flex: 0 1 760px;

    min-width: 660px;

    max-width: 760px;
}

.image-container {

    position: relative;

    width: 100%;

    max-width: 760px;

    border-left: 6px solid rgba(33, 94, 55, 0.35);
    border-right: 6px solid rgba(33, 94, 55, 0.35);

    border-radius: 24px;
}


.image-container img {

    width:100%;
    display:block;
}


/* ---------- Information Panel ---------- */

.info-panel {

    flex:none;

    width:100%;

    min-width: 470px;

    max-width: 620px;

    position: sticky;

    top: 0;

    background: white;

    border-radius: 24px;

    padding: 30px;

    box-shadow: 0 8px 24px rgba(0,0,0,.08);

    font-size: 1.08rem;
}

.info-panel h2{

    color:#145c2e;

    font-size:2rem;

    margin-bottom:18px;
}

.info-panel ul {

    margin-top: 1rem;

    padding-left: 1.2rem;
}

.guide-features{

    margin:24px 0;

    display:flex;

    flex-direction:column;

    gap:18px;
}

.guide-feature{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:1.05rem;

    line-height:1.5;
}

.guide-icon{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#eef7f0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.1rem;

    flex-shrink:0;
}

.guide-tip{

    margin-top:24px;

    color:#145c2e;

    font-style:italic;

    font-weight:600;

    text-align:center;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

    .anatomy-page{

    padding:1rem;
    }
    
    .anatomy-layout {

    display:flex;

    align-items:flex-start;



    gap:20px;



    flex-direction: column;
    }
    .anatomy-container{

    overflow-x:visible;
    }
    .anatomy-header h1{

    font-size:1.8rem;
    }
    .anatomy-header p{

    font-size:1rem;

    line-height:1.6;
    }
    
    .bird-panel{

    flex:none;

    width:100%;

    min-width:0;

    max-width:none;
    }

    .image-container{

    width:100%;

    max-width:none;
    
    border-left:4px solid rgba(33,94,55,.35);

    border-right:4px solid rgba(33,94,55,.35);

    border-radius:18px;
}
    .anatomy-label{

        font-size:0.78rem;

        padding:5px 10px;

        border-radius:8px;
    }

    .hotspot{

    min-width:36px;

    min-height:36px;
}
    
.info-panel {

    position: relative;

    top: auto;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    margin: 20px 0 0;

    padding: 22px;

    border-radius: 20px;
}
}
@media (max-width: 480px) {

    .anatomy-label{

        font-size:0.65rem;

        padding:4px 8px;

        border-width:1.5px;
    }

}
.search-focus{

    animation: searchPulse 1.5s ease;

}

@keyframes searchPulse{

    0%{

        transform: scale(1);

        box-shadow:
            0 8px 24px rgba(0,0,0,.08);

    }

    35%{

        transform: scale(1.02);

        box-shadow:
            0 0 0 6px rgba(20,83,45,.18),
            0 16px 40px rgba(0,0,0,.16);

    }

    100%{

        transform: scale(1);

        box-shadow:
            0 8px 24px rgba(0,0,0,.08);

    }

}
/*==========================
TEAM
==========================*/

.footer-about-team{

    max-width:900px;

    margin:0 auto;

    padding:2.5rem 1rem;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.15);

}

.team-tagline{

    font-style: italic;

    color: rgba(255,255,255,.95);

    font-size: 1.15rem;

    line-height: 1.8;

    margin: 0 auto 1rem;

    text-align: center;
}
.team-text{

    color: rgba(255,255,255,.85);

    font-size: 1rem;

    line-height: 2;

    text-align: center;

    text-wrap: balance;

    max-width: 850px;

    margin: 0 auto;
}

.team-member{

    font-weight:700;

    color:white;

    cursor:pointer;

    border-bottom:1px dotted rgba(255,255,255,.5);

    transition:.2s;

}

.team-member:hover{

    color:#fde68a;

}
/*==========================
TEAM MODAL
==========================*/

.team-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(5px);

    justify-content:center;

    align-items:center;

    z-index:10000;

}

.team-modal-content{

    width:360px;

    background:white;

    border-radius:22px;

    padding:32px;

    text-align:center;

    position:relative;

    animation:popup .25s ease;

}

.team-modal-content img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

}

.team-modal-content h2{

    color:#14532d;

    margin-bottom:12px;

}

.team-modal-content p{

    color:#555;

    line-height:1.8;

    text-align:center;

}

#closeTeamModal{

    position:absolute;

    right:18px;

    top:12px;

    font-size:30px;

    cursor:pointer;

}

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
/*====================================================
                    POKKHI LOADER
====================================================*/

#loader{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#edf5ef;

    transition:
        opacity .7s ease,
        visibility .7s ease;

}

#loader.loader-hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/*---------------------------------------
BACKGROUND
---------------------------------------*/

.loader-gradient{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        #edf6ef 0%,

        #f7f7f0 50%,

        #fffdf8 100%

    );

    animation:

        loaderSunrise 18s ease-in-out infinite alternate;

}

@keyframes loaderSunrise{

    from{

        filter:brightness(1);

    }

    to{

        filter:brightness(1.05);

    }

}

/*---------------------------------------
MIST
---------------------------------------*/

.loader-mist{

    position:absolute;

    inset:-15%;

    opacity:.18;

    background:

        radial-gradient(

            ellipse at 20% 50%,

            rgba(255,255,255,.9),

            transparent 45%

        ),

        radial-gradient(

            ellipse at 75% 35%,

            rgba(255,255,255,.8),

            transparent 40%

        ),

        radial-gradient(

            ellipse at 60% 75%,

            rgba(255,255,255,.8),

            transparent 45%

        );

    animation:

        driftMist 35s linear infinite;

}

@keyframes driftMist{

    from{

        transform:

            translateX(-8%);

    }

    to{

        transform:

            translateX(8%);

    }

}

/*---------------------------------------
CONTENT
---------------------------------------*/

.loader-content{

    position:relative;

    z-index:10;

    text-align:center;

    width:min(90%,500px);

    display:flex;
    flex-direction:column;
    align-items:center;

    height:380px;      /* <-- fixed height instead of min-height */
}

.loader-logo{

    width:200px;

    margin-bottom:45px;

    animation:

        breathe 4s ease-in-out infinite;

}

@keyframes breathe{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

#loaderAction{

    font-size:15px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#7b7b7b;

    margin-bottom:16px;

    transition:.45s;

}

.loader-text-wrapper{

    height:70px;

    width:100%;

    overflow:hidden;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
}

#loaderPlace{

    position:absolute;

    width:100%;

    left:0;

    font-size:30px;

    font-weight:500;

    color:#215e37;

    transition:

        opacity .45s,

        transform .45s;

}

.loader-fade{

    opacity:0;

    transform:

        translateY(-15px);

}

/*---------------------------------------
PROGRESS BAR
---------------------------------------*/

.loader-progress{

    width:240px;

    height:3px;

    background:

        rgba(0,0,0,.08);

    margin:

        45px auto 0;

    border-radius:999px;

    overflow:hidden;

}

#loaderProgress{

    width:0%;

    height:100%;

    background:#215e37;

    transition:

        width .5s ease;

}

/*---------------------------------------
MOBILE
---------------------------------------*/

@media(max-width:768px){

.loader-logo{

    width:150px;

}

#loaderPlace{

    font-size:22px;

}

.loader-progress{

    width:180px;

}

}
/* ==========================================
   LEGAL PAGE
========================================== */

#privacy,
#terms,
#disclaimer,
#contact{

    max-width:900px;

    margin:0 auto;

    padding:2rem 0;

}

#privacy h2,
#terms h2,
#disclaimer h2,
#contact h2{

    color:#14532d;

    margin-bottom:1rem;

}

#privacy p,
#terms p,
#disclaimer p,
#contact p{

    line-height:1.9;

    color:#374151;

}
/* ==========================
   LEGAL PAGE MOBILE FIX
========================== */

@media (max-width: 768px) {

    #privacy,
    #terms,
    #disclaimer,
    #contact {

        padding: 1.5rem 0;

    }

    #privacy h2,
    #terms h2,
    #disclaimer h2,
    #contact h2 {

        font-size: 1.5rem;

    }

    #privacy p,
    #terms p,
    #disclaimer p,
    #contact p {

        font-size: 1rem;

        line-height: 1.8;

    }

}

/* ==========================================
   IMAGE PROTECTION
========================================== */

.hero-logo,
.loader-logo,
.footer-brand img,
.partner-logos img,
.team-modal-content img,
.featured-image-wrapper img,
.bird-image img,
.modal-image-main,
.modal-image-blur{

    -webkit-user-drag: none;

    -webkit-touch-callout: none;

    user-select: none;

}