.header-logo{
    width: 250px;
}

@media screen and (max-width: 768px) {
    .header-logo{
        width: 200px;
    }
}

/* IMPORTANT: remove/avoid this if you use jQuery animate */
html { scroll-behavior: auto; }

/* Optional nice scrollbar for a scrollable div */
.smooth-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,135,84,.45) rgba(0,0,0,.06);
}
.smooth-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.smooth-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.05); border-radius: 999px; }
.smooth-scroll::-webkit-scrollbar-thumb {
    background: rgba(25,135,84,.35);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.6);
}
.smooth-scroll::-webkit-scrollbar-thumb:hover { background: rgba(25,135,84,.55); }

/* ---------------------------------------
   Accordion (max-height transition method)
---------------------------------------- */
.faq-panel{
    max-height: 0;           /* collapsed */
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 320ms ease, opacity 220ms ease, transform 220ms ease;
    will-change: max-height;
}

/* When open */
.faq-item.is-open .faq-panel{
    opacity: 1;
    transform: translateY(0);
}

/* Icon rotate */
.faq-icon{
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: background-color 180ms ease, transform 180ms ease;
}


/* Optional: subtle open-state background */
.faq-btn{
    transition: background-color 180ms ease;
}
.faq-item.is-open .faq-btn{
    background: rgba(25,135,84,.06);
}

/* Panel animation */
.faq-panel{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 360ms ease, opacity 220ms ease, transform 220ms ease;
    will-change: max-height;
}

/* Open state */
.faq-item.is-open .faq-panel{
    opacity: 1;
    transform: translateY(0);
}

/* Chevron rotation (this rotates perfectly) */
.faq-chevron{
    display: block;
    transition: transform 250ms ease;
    transform-origin: 50% 50%;
}
.faq-item.is-open .faq-chevron{
    transform: rotate(180deg);
}