.fitss-cards-wrapper{max-width:1100px;margin:30px auto;padding:10px}
.fitss-cards-title{font-weight:700;letter-spacing:1px;margin:10px 0 22px}
.fitss-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:start}
.fitss-card{display:block;border-radius:var(--fitss-radius,18px);overflow:hidden;position:relative;background:#fff}
.fitss-card-inner{position:relative;display:block;overflow:hidden;/* ensure inner area clips images */
  aspect-ratio: 3 / 4; /* enforce same height ratio for all cards (changeable) */
}
.fitss-card-inner-fixed{aspect-ratio: auto; height: var(--fitss-card-height);}
.fitss-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:var(--fitss-image-fit,cover);object-position:center;transition:opacity var(--fitss-duration,400ms) ease,transform var(--fitss-duration,400ms) ease}

/* Support data attribute to switch image-fit when older browsers don't support CSS variables */
.fitss-cards-wrapper[data-image-fit="contain"] .fitss-img{object-fit:contain}
.fitss-cards-wrapper[data-image-fit="cover"] .fitss-img{object-fit:cover}

/* When wrapper has data-card-height, apply fixed height class to inner containers */
.fitss-cards-wrapper[data-card-height] .fitss-card-inner{height:var(--fitss-card-height);aspect-ratio:auto}
.fitss-cards-wrapper[data-card-height] .fitss-card{align-items:stretch}
.fitss-default{opacity:1}
.fitss-hover{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}
.fitss-card:hover .fitss-hover{opacity:1}
.fitss-card:hover .fitss-default{opacity:0}
.fitss-caption{position:absolute;left:14px;bottom:12px;color:#fff;font-size:12px;font-weight:700;padding:6px 10px;background:linear-gradient(90deg,rgba(0,0,0,0.45),rgba(0,0,0,0.25));border-radius:4px}

/* Animations */
.fitss-card-inner[data-anim="slide-left"] .fitss-hover{transform:translateX(-8%)}
.fitss-card-inner[data-anim="slide-right"] .fitss-hover{transform:translateX(8%)}
.fitss-card-inner[data-anim="rotate"] .fitss-hover{transform:rotate(6deg) scale(1.02)}
.fitss-card-inner[data-anim="scale"] .fitss-hover{transform:scale(1.05)}
.fitss-card-inner[data-anim="fade"] .fitss-hover{transform:none}
.fitss-card-inner .fitss-hover{transform:translateY(0)}

/* When hover active, bring hover image to neutral transform while showing */
.fitss-card:hover .fitss-hover{transform:none}

/* Responsive */
@media (max-width:900px){
  .fitss-cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .fitss-cards-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .fitss-cards-wrapper{padding:6px}
}

/* Hero banner styles */
.fitss-hero{position:relative;margin:36px 0;padding:56px;border-radius:24px;overflow:hidden}
.fitss-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:translateY(0);transition:transform 0.2s linear}
.fitss-hero[data-parallax-mode="fixed"] .fitss-hero-bg{background-attachment:fixed}
.fitss-hero-overlay{position:absolute;inset:0}
.fitss-hero-content{position:relative;max-width:520px;padding:24px;color:#fff}
.fitss-hero-content.pos-left{left:6%;text-align:left}
.fitss-hero-content.pos-center{margin:0 auto;text-align:center}
.fitss-hero-title{font-size:48px;letter-spacing:1px;margin:0 0 12px}
.fitss-hero-sub{font-size:15px;opacity:0.95;margin-bottom:18px}
.fitss-hero-btn{display:inline-block;padding:12px 22px;background:#fff;color:#111;border-radius:40px;text-decoration:none;font-weight:700}

@media (max-width:900px){
  .fitss-hero{padding:40px}
  .fitss-hero-title{font-size:36px}
}
@media (max-width:520px){
  .fitss-hero{padding:20px;border-radius:18px}
  .fitss-hero-title{font-size:24px}
  .fitss-hero-content{max-width:100%}
}

/* Feature row */
.fitss-features-row{padding:20px 12px}
.fitss-features-inner{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
.fitss-feature{display:flex;flex-direction:column;align-items:center;max-width:220px;padding:8px}
.fitss-features-inner.space-between{justify-content:space-between}
.fitss-features-inner.space-evenly{justify-content:space-evenly}
.fitss-feature svg{width:36px;height:36px;margin-bottom:10px;color:#333}
.fitss-feature-title{font-weight:700;font-size:13px;color:#222}
.fitss-feature-text{font-size:12px;color:#666}

@media (max-width:700px){
  .fitss-features-inner{gap:16px}
  .fitss-feature{max-width:140px}
}

/* hero full height tweaks */
.fitss-hero{position:relative;margin:36px 0;padding:0;border-radius:24px;overflow:hidden}
.fitss-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:translateY(0);transition:transform 0.2s linear}
.fitss-hero-overlay{position:absolute;inset:0}
.fitss-hero-content{position:relative;max-width:1200px;margin:0 auto;padding:48px;color:#fff;display:flex;align-items:center;height:100%}
.fitss-hero-content.pos-left{justify-content:flex-start}
.fitss-hero-content.pos-center{justify-content:center;text-align:center}
.fitss-hero-title{font-size:48px;letter-spacing:1px;margin:0 0 12px}
.fitss-hero-sub{font-size:15px;opacity:0.95;margin-bottom:18px}
.fitss-hero-btn{display:inline-block;padding:12px 22px;background:#fff;color:#111;border-radius:40px;text-decoration:none;font-weight:700}

@media (max-width:900px){
  .fitss-hero-content{padding:28px}
  .fitss-hero-title{font-size:36px}
}
@media (max-width:520px){
  .fitss-hero-content{padding:20px}
  .fitss-hero-title{font-size:24px}
}