/*-- Other CSS --*/
html {
  scroll-behavior: smooth;
}

/*--- Header CSS ---*/
.main_NAV nav {
    border: 1px solid #C7CCD1;
    border-radius: 20px;
}

.kay-logo {
    width: 250px;
}

/*-- Bodyy Area CSS --*/
  .kaynexa-card { width: calc(100% - 0px); }
  @media (min-width: 768px) {
    .kaynexa-card { width: calc((100% - 16px) / 2); }
  }

#kn-tab-track h3, #kn-tab-track p {
    color: #c7ccd1;
}

/* --- Marquee Animations --- */
.kn-track { width: max-content; }
.kn-to-left { animation: knMarqueeLeft 45s linear infinite; }
.kn-to-right { animation: knMarqueeRight 55s linear infinite; }

@keyframes knMarqueeLeft {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@keyframes knMarqueeRight {
  from { transform: translate3d(-50%,0,0); }
  to   { transform: translate3d(0,0,0); }
}

/* Pause on hover */
.kn-marquee:hover .kn-to-left,
.kn-marquee:hover .kn-to-right { animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kn-to-left, .kn-to-right { animation: none !important; }
}

/* Accordion behavior */
.kn-card { transition: flex 450ms ease, transform 450ms ease; }
.kn-acc:hover .kn-card { flex: 0.8; }               /* shrink others */
.kn-acc:hover .kn-card:hover { flex: 2.6; }        /* expand hovered */
.kn-acc:hover .kn-card:hover { transform: translateY(-2px); }

/* Keep the featured (middle) card naturally larger on desktop */
@media (min-width: 1024px){
  .kn-acc { height: 440px; }
}

/* Mobile: disable accordion (stacked horizontal scroll) */
@media (max-width: 768px){
  .kn-acc{ height:auto; overflow-x:auto; padding-bottom:10px; }
  .kn-card{ min-width: 260px; flex: 0 0 260px !important; }
  .kn-acc:hover .kn-card{ flex: 0 0 260px !important; }
}

#products {
    background-image:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
        url(../images/vault-or-crypto.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*--- Footer CSS ---*/
.footer-logo img {
    width: 220px;
}

/*--- Strategies page CSS ---*/
#banner {
    background-image:url(../images/banner-bg-600.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
  
/*---------------------- 
   Responsive Mobile 
----------------------*/
@media (max-width: 767px) {
  .kay-logo {
    width: 150px;
}
.footer-logo img {
    width: 300px;
}
#products {
    background-size: contain;
}
#web_footer .flex.justify-between {
    display: grid;
    gap: 20px;
}
}