.accordion-content{
    display: none;
}
.accordion-content.open{
    display: block;
}
.testimonials img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: 20px;
}
#banner{
    background-image: url("../img/banner.avif") !important;
    background-size: cover !important;
    position: relative !important;
}
#banner::before{
    content: "";
    position: absolute;
    background: #0000008e;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#banner>div{
    position: relative;
}
section:has(canvas){
    max-width: 500px !important;
    margin: 0 auto;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #111827 !important;
    color: #f3f4f6;
}
.flip-card,table,#faq>div,#signup,#stories>div{
    color: #111827 !important;
}
#pricing>div>div{
    background-color: #ffffff88 !important;
}
.cookie-consent { display: none; position: fixed; bottom: 0; width: 100%; background: #1a202c; color: white; padding: 1rem; z-index: 1000; }
.cookie-consent.show { display: block; }
#banner { height: 100vh; display: flex; align-items: center; justify-content: center; }
.testimonial-card { transition: transform 0.3s; }
.testimonial-card:hover { transform: translateY(-5px); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content.open { max-height: 500px; }
.accordion-toggle svg { transition: transform 0.3s; }
.accordion-toggle.open svg { transform: rotate(180deg); }
.flip-card { perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); }
@media screen and (max-width:1280px) {
    header>div{
        flex-direction: column;
        gap: 20px;
    }
}
@media screen and (max-width:770px) {
    header>div{
        flex-direction: row;
        gap: 20px;
    }
}
