/* TransTrade Hero SCF 1.1.0 — slider */
.tth-hero{
  --tth-blue:#0870f8;
  --tth-navy:#071533;
  --tth-muted:#68758e;
  width:100%;
  min-height:620px;
  position:relative;
  overflow:hidden;
  background:#f7fbff;
  font-family:Poppins,Arial,sans-serif;
}
.tth-slider__viewport{
  position:relative;
  min-height:620px;
}
.tth-slide{
  position:absolute;
  inset:0;
  min-height:620px;
  overflow:hidden;
  background-color:#f7fbff;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  opacity:0;
  visibility:hidden;
  transform:scale(1.012);
  transition:opacity .65s ease, visibility .65s ease, transform 1s ease;
  pointer-events:none;
}
.tth-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  pointer-events:auto;
  z-index:2;
}
.tth-slide.has-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.995) 0%,
    rgba(255,255,255,.985) 28%,
    rgba(255,255,255,.94) 39%,
    rgba(255,255,255,.70) 49%,
    rgba(255,255,255,.27) 61%,
    rgba(255,255,255,0) 74%);
}
.tth-hero__container{
  width:calc(100% - 40px);
  max-width:1200px;
  min-height:620px;
  margin:0 auto;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
}
.tth-hero__content{
  width:660px;
  max-width:55%;
  padding:46px 0 150px;
}
.tth-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:25px;
  color:var(--tth-blue);
  font-size:12.5px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.05px;
  text-transform:uppercase;
}
.tth-hero__horse-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border:1.5px solid #0870f8;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0870f8;
  background:rgba(255,255,255,.75);
}
.tth-hero__horse-icon i{
  font-size:15px;
  line-height:1;
  color:#0870f8;
}
.tth-hero__title{
  margin:0;
  color:var(--tth-navy);
  font-size:58px;
  line-height:1.045;
  letter-spacing:-2.15px;
  font-weight:650;
}
.tth-hero__title span,
.tth-hero__title strong{display:block}
.tth-hero__title strong{
  margin-top:14px;
  color:var(--tth-blue);
  font-weight:650;
}
.tth-hero__desc{
  margin-top:28px;
  max-width:560px;
  color:#172444;
  font-size:16px;
  line-height:1.58;
  font-weight:400;
}
.tth-hero__buttons{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:31px;
}
.tth-btn{
  height:63px;
  min-width:238px;
  padding:0 24px;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  text-decoration:none!important;
  font-size:15.5px;
  line-height:1;
  font-weight:450;
  transition:.18s ease;
  box-sizing:border-box;
}
.tth-btn__icon{
  width:27px;
  height:27px;
  display:inline-flex;
  flex:0 0 27px;
}
.tth-btn__icon svg{width:100%;height:100%}
.tth-btn--primary{
  color:#fff!important;
  border:1px solid #086cf4;
  background:linear-gradient(135deg,#0768f1 0%,#1789ff 100%);
  box-shadow:0 10px 24px rgba(8,108,244,.16);
}
.tth-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 27px rgba(8,108,244,.22);
}
.tth-btn--secondary{
  color:#102654!important;
  border:1px solid #5b9aff;
  background:rgba(255,255,255,.92);
  box-shadow:0 5px 14px rgba(8,60,120,.03);
}
.tth-btn--secondary:hover{background:#fff}

/* Pasek korzyści wspólny dla wszystkich slajdów */
.tth-slider__features{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:8;
  pointer-events:none;
}
.tth-slider__features .tth-hero__container{
  min-height:118px;
  align-items:center;
}
.tth-hero__features{
  display:grid;
  grid-template-columns:1fr 1fr 1.08fr;
  gap:0;
  max-width:650px;
  pointer-events:auto;
}
.tth-feature{
  min-height:88px;
  padding:0 19px 0 0;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.tth-feature + .tth-feature{
  padding-left:20px;
  border-left:1px solid #d8e0eb;
}
.tth-feature__icon{
  width:39px;
  height:39px;
  flex:0 0 39px;
  color:var(--tth-blue);
}
.tth-feature__icon svg{width:100%;height:100%}
.tth-feature strong{
  display:block;
  margin-top:1px;
  color:#0c1937;
  font-size:12.5px;
  line-height:1.25;
  font-weight:600;
}
.tth-feature p{
  margin:6px 0 0;
  color:#748097;
  font-size:10.8px;
  line-height:1.5;
}

/* Nawigacja slidera */
.tth-slider__arrow{
  position:absolute;
  top:50%;
  z-index:12;
  width:46px;
  height:46px;
  margin-top:-36px;
  border:1px solid rgba(8,112,248,.22);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.88);
  color:#0870f8;
  box-shadow:0 8px 24px rgba(9,35,80,.12);
  cursor:pointer;
  transition:.2s ease;
}
.tth-slider__arrow:hover{
  background:#0870f8;
  color:#fff;
  transform:translateY(-1px);
}
.tth-slider__arrow--prev{left:max(18px,calc((100vw - 1320px)/2))}
.tth-slider__arrow--next{right:max(18px,calc((100vw - 1320px)/2))}
.tth-slider__dots{
  position:absolute;
  z-index:13;
  left:50%;
  bottom:23px;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
}
.tth-slider__dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:99px;
  background:#bdd3ed;
  cursor:pointer;
  transition:.2s ease;
}
.tth-slider__dot.is-active{
  width:28px;
  background:#0870f8;
}
.tth-slider:focus{outline:none}

@media(max-width:1100px){
  .tth-hero__content{max-width:59%}
  .tth-hero__title{font-size:52px}
  .tth-hero__features{max-width:610px}
  .tth-slider__arrow--prev{left:12px}
  .tth-slider__arrow--next{right:12px}
}
@media(max-width:900px){
  .tth-hero,
  .tth-slider__viewport,
  .tth-slide{min-height:680px}
  .tth-slide{background-position:68% center}
  .tth-slide.has-overlay::before{background:rgba(255,255,255,.9)}
  .tth-hero__container{min-height:680px;align-items:flex-start}
  .tth-hero__content{
    width:100%;
    max-width:700px;
    padding:46px 0 190px;
  }
  .tth-slider__features .tth-hero__container{
    min-height:150px;
    align-items:flex-end;
    padding-bottom:20px;
  }
  .tth-slider__arrow{
    top:auto;
    bottom:120px;
    margin:0;
  }
}
@media(max-width:600px){
  .tth-hero,
  .tth-slider__viewport,
  .tth-slide{min-height:850px}
  .tth-hero__container{width:calc(100% - 28px);min-height:850px}
  .tth-hero__content{padding:42px 0 330px}
  .tth-hero__eyebrow{font-size:10px;margin-bottom:18px}
  .tth-hero__title{font-size:39px;letter-spacing:-1.25px}
  .tth-hero__title strong{margin-top:9px}
  .tth-hero__desc{font-size:14px}
  .tth-hero__buttons{flex-direction:column;align-items:stretch}
  .tth-btn{width:100%;min-width:0}
  .tth-slider__features .tth-hero__container{
    min-height:300px;
    align-items:flex-end;
    padding-bottom:38px;
  }
  .tth-hero__features{grid-template-columns:1fr;gap:13px;width:100%}
  .tth-feature,.tth-feature + .tth-feature{
    min-height:auto;
    border-left:0;
    border-top:1px solid #d8e0eb;
    padding:13px 0 0;
  }
  .tth-feature:first-child{border-top:0;padding-top:0}
  .tth-slider__arrow{
    width:40px;
    height:40px;
    bottom:296px;
  }
  .tth-slider__dots{bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .tth-slide,
  .tth-slider__arrow,
  .tth-slider__dot{transition:none!important}
}


/* 1.1.1 — usuwa białe pasy nad i pod sliderem generowane przez odstępy kontenera strony */
.tth-hero.tth-slider{
  margin-top:-24px !important;
  margin-bottom:-24px !important;
  position:relative;
  z-index:1;
}

/* Nie pozwalamy motywowi dodawać marginesów do shortcode'u HERO. */
.tth-hero.tth-slider:first-child{
  margin-top:-24px !important;
}
.tth-hero.tth-slider:last-child{
  margin-bottom:-24px !important;
}

@media(max-width:900px){
  .tth-hero.tth-slider{
    margin-top:-18px !important;
    margin-bottom:-18px !important;
  }
}
