/* =========================================================
   Kappu Travels – Homepage Banner (Speed Ride-In)
   All classes prefixed "ktb-" so nothing clashes with
   Bootstrap or the theme stylesheet.
   ========================================================= */
.ktb{--ktb-blue:#428bca;--ktb-gold:#FBB03B;--ktb-ink:#100C08;--ktb-text:#787878;
  --ktb-off:100px; /* theme pulls the booking form up by 100px (.home1-banner-bottom) */
  position:relative;height:calc(600px + var(--ktb-off));overflow:hidden;font-family:"Jost",sans-serif;
  background:linear-gradient(180deg,#fff 0%,#f3f8fd 70%);border-radius:10px}
.ktb *{box-sizing:border-box}

/* ---------- text ---------- */
.ktb-copy{position:absolute;left:6%;top:90px;width:46%;z-index:5}
.ktb-tag{font-family:"Satisfy",cursive;font-size:22px;color:var(--ktb-blue);display:inline-flex;align-items:center;gap:10px;line-height:1.3}
.ktb-tag::before{content:"";width:34px;height:2px;background:var(--ktb-gold)}
.ktb-title{font-family:"Rubik",sans-serif;font-size:54px;line-height:1.12;font-weight:700;color:var(--ktb-ink);margin:10px 0 16px}
.ktb-title em{font-style:normal;color:var(--ktb-blue)}
.ktb-lead{font-size:18px;line-height:1.65;color:var(--ktb-text);margin:0 0 26px;max-width:500px}

/* ---------- buttons (theme primary-btn1 style) ---------- */
.ktb-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ktb-btn{position:relative;overflow:hidden;z-index:1;display:inline-flex;align-items:center;gap:10px;border-radius:5px;background:var(--ktb-blue);color:#fff;font-family:"Rubik",sans-serif;font-weight:600;font-size:16px;line-height:1;padding:16px 30px;text-decoration:none;white-space:nowrap;transition:.5s;animation:ktbPulse 2s infinite}
.ktb-btn::after{content:"";position:absolute;left:15%;right:-20%;top:-4%;height:150%;width:150%;background:var(--ktb-gold);transform:skewX(45deg) scale(0,1);z-index:-1;transition:.5s ease-out}
.ktb-btn:hover{color:var(--ktb-ink)}
.ktb-btn:hover::after{transform:skewX(45deg) scale(1,1)}
.ktb-btn svg{width:19px;height:19px;fill:currentColor}
@keyframes ktbPulse{0%{box-shadow:0 0 0 0 rgba(66,139,202,.55)}70%{box-shadow:0 0 0 16px rgba(66,139,202,0)}100%{box-shadow:0 0 0 0 rgba(66,139,202,0)}}
.ktb-obtn{display:inline-flex;padding:4px;border:1px dashed var(--ktb-blue);border-radius:6px;text-decoration:none}
.ktb-obtn span{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ktb-blue);border:1.5px solid var(--ktb-blue);border-radius:5px;font-family:"Rubik",sans-serif;font-weight:600;font-size:15px;line-height:1;padding:12px 22px;transition:.4s;white-space:nowrap}
.ktb-obtn svg{width:16px;height:16px;fill:currentColor}
.ktb-obtn:hover span{background:var(--ktb-blue);color:#fff}

/* ---------- entrance animations ---------- */
.ktb-up{opacity:0;transform:translateY(30px);animation:ktbUp .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ktbUp{to{opacity:1;transform:none}}
.ktb-title .w{display:inline-block;white-space:nowrap}
.ktb-title .ch{display:inline-block;opacity:0;transform:translateY(70%) rotate(8deg);animation:ktbCh .6s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes ktbCh{to{opacity:1;transform:none}}

/* ---------- road + speed lines ---------- */
.ktb-road{position:absolute;left:0;right:0;bottom:0;height:calc(120px + var(--ktb-off));background:#eef3f8;border-top:3px solid var(--ktb-blue)}
.ktb-road::before{content:"";position:absolute;left:0;top:56px;width:200%;height:5px;background:repeating-linear-gradient(90deg,var(--ktb-blue) 0 60px,transparent 60px 120px);opacity:.45}
.ktb-road::before{left:-120px}
.ktb.is-moving .ktb-road::before{animation:ktbDash .25s linear infinite}
/* bikes face left and ride leftwards, so the road scrolls to the right */
@keyframes ktbDash{to{transform:translateX(120px)}}
.ktb-lines{position:absolute;left:0;right:0;top:120px;bottom:120px;pointer-events:none}
.ktb-lines i{position:absolute;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(66,139,202,.55),transparent);opacity:0}
.ktb.is-moving .ktb-lines i{animation:ktbZip .5s linear infinite}
@keyframes ktbZip{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(500px)}}

/* ---------- bikes ---------- */
.ktb-stage{position:absolute;right:4%;bottom:calc(70px + var(--ktb-off));width:600px;height:420px;z-index:4}
.ktb-bike{position:absolute;left:0;bottom:0;width:100%;transform:translateX(140vw)}
.ktb-bike img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 16px rgba(16,12,8,.25))}
.ktb-bike.is-go{animation:ktbRide 5s cubic-bezier(.3,.7,.3,1) forwards}
.ktb-bike.is-go img{animation:ktbTilt 5s ease forwards}
/* enter from the right, brake, pause, ride off to the left (direction the bikes face) */
@keyframes ktbRide{0%{transform:translateX(140vw)}22%{transform:translateX(-30px)}28%{transform:translateX(8px)}32%,80%{transform:translateX(0)}100%{transform:translateX(-140vw)}}
@keyframes ktbTilt{0%{transform:rotate(0)}22%{transform:rotate(-3deg)}28%{transform:rotate(1.5deg)}34%,80%{transform:rotate(0)}86%{transform:rotate(3deg) translateY(-6px)}100%{transform:rotate(0)}}
.ktb-dust{position:absolute;bottom:4px;right:6%;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(160,170,185,.6),transparent 70%);opacity:0}
.ktb-dust.d2{right:30%}
.ktb-bike.is-go .ktb-dust{animation:ktbDust 1.2s ease-out .9s forwards}
.ktb-bike.is-go .ktb-dust.d2{animation-delay:1s}
@keyframes ktbDust{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(3) translate(30px,-14px)}}

/* ---------- price badge ---------- */
.ktb-badge{position:absolute;right:30%;top:80px;z-index:6;width:140px;height:140px;border-radius:50%;background:var(--ktb-blue);color:#fff;display:grid;place-items:center;text-align:center;font-family:"Rubik",sans-serif;line-height:1.2;box-shadow:0 0 0 8px rgba(66,139,202,.18);transform:scale(0)}
.ktb-badge::after{content:"";position:absolute;inset:-14px;border:2px dashed var(--ktb-gold);border-radius:50%;animation:ktbSpin 8s linear infinite}
@keyframes ktbSpin{to{transform:rotate(360deg)}}
.ktb-badge.is-pop{animation:ktbPop 5s cubic-bezier(.2,.9,.3,1.4) forwards}
@keyframes ktbPop{0%,26%{transform:scale(0) rotate(-90deg)}36%{transform:scale(1.1) rotate(8deg)}40%,80%{transform:scale(1) rotate(0)}90%,100%{transform:scale(0)}}
.ktb-badge small{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.ktb-badge b{display:block;font-size:32px;color:var(--ktb-gold);line-height:1.1}
.ktb-name{position:absolute;right:6%;bottom:calc(22px + var(--ktb-off));z-index:6;font-family:"Rubik",sans-serif;font-weight:600;font-size:17px;color:var(--ktb-ink);overflow:hidden;height:26px;line-height:26px}
.ktb-name span{display:block;transform:translateY(100%);transition:transform .5s}
.ktb-name span.is-on{transform:none}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .ktb-title{font-size:42px}
  .ktb-stage{width:480px;height:330px}
  .ktb-badge{right:34%}
}
@media (max-width:991px){
  .ktb-copy{width:52%}
  .ktb-title{font-size:36px}
  .ktb-lead{font-size:16px}
  .ktb-stage{width:400px;height:280px;right:2%}
  .ktb-badge{right:4%;top:40px;width:110px;height:110px}.ktb-badge b{font-size:26px}
}
@media (max-width:767px){
  .ktb{--ktb-off:56px;height:auto;min-height:calc(640px + var(--ktb-off));padding-bottom:calc(300px + var(--ktb-off))}
  .ktb-copy{position:relative;left:auto;top:auto;width:auto;padding:36px 20px 0}
  .ktb-title{font-size:31px}
  .ktb-lead{font-size:15px;margin-bottom:20px}
  .ktb-btn{padding:13px 20px;font-size:14px}
  .ktb-obtn span{padding:10px 16px;font-size:14px}
  .ktb-stage{width:88vw;height:250px;right:6vw}
  .ktb-badge{top:auto;bottom:calc(240px + var(--ktb-off));right:14px;width:96px;height:96px}
  .ktb-badge b{font-size:22px}.ktb-badge small{font-size:10px}
  .ktb-name{font-size:14px;left:20px;right:auto}
}
@media (prefers-reduced-motion:reduce){
  .ktb *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}