@import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css";
@import "https://fonts.googleapis.com/css2?family=Kite+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Outfit:wght@100..900&display=swap";
:root {
  --font-body: "Nunito Sans", sans-serif;
  --font-headings: "Outfit", Helvetica, sans-serif;
  --bs-btn-font-family: "Outfit", Helvetica, sans-serif;
--muted: #6b7280;
      --accent: #2563eb; /* Bright Blue (Option 1) */
      --accent-dark: #1e40af;
      --radius-lg: 14px;
      --shadow-lg: 0 18px 40px rgba(18, 28, 53, 0.08);
      --shadow-sm: 0 6px 18px rgba(18, 28, 53, 0.06);
    
}
body{
    font-family:"Nunito Sans", Helvetica, sans-serif;!important;
}
 .kite-one-regular {
  font-family: "Kite One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  .btn-primary {
    /*background-color: #2563eb;*/
    color: white;
    transition: 0.2s ease;
  }
  .btn-primary:hover {
    /*background-color: #1e40af;*/
  }
  
  a {
    color: inherit;
    text-decoration: none!important;
    font-family:"Nunito Sans", Helvetica, sans-serif;!important;
    
}

.card {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: transparent;
    margin: 1em;
}

.card.card-info {
    margin: 0;
    margin-block-end: 1em;
}

/*

element.style {
    background-repeat: no-repeat;
    background: linear-gradient( 39deg , rgb(179 175 175 / 90%) 12%, rgb(255 255 255 / 60%) 40%, rgba(255, 255, 255, 0) 63%)
            , url(https://cdn.shoplightspeed.com/shops/614837/files/25685577/2020-rebeccas-private-idaho.jpg) no-repeat 0 98%!important;
    background-size: cover!important;
}
*/

.card-body .row {
    flex-direction: column;
}

.card.card-default {
    padding: 0;
    border-radius: inherit;
}

.card-body.p3 {
    margin: 0;
    padding: 0;
}

.card.card-default a.btn.btn-primary.btn-block {
    width: 100%;
    margin-bottom: -50px;
}
.text-dramatic{
    font-family: "Kite One", sans-serif;
    text-transform:none!important;
}

.img-overlay-tri{
    
    background-repeat: no-repeat;
    background: linear-gradient( 45deg , rgb(255 255 255) 12%, rgb(241 241 241 / 86%) 40%, rgb(255 255 255 / 64%) 53%)
            , url(https://cdn.shoplightspeed.com/shops/670541/themes/17405/v/1114847/assets/slider-3.jpg?20251021025218) no-repeat center 16%!important;
    background-size: cover!important;

}


.faded-bg-service{
     background-repeat: no-repeat;
    background: linear-gradient( 45deg , rgb(255 255 255) 12%, rgb(241 241 241 / 86%) 40%, rgb(255 255 255 / 64%) 53%)
            , url(https://cdn.shoplightspeed.com/shops/614837/files/40573268/tri-town-boise-bicycles-fitting-service.jpg) no-repeat center 80%!important;
    background-size: cover!important;
}
.faded-bg-repair{
     background-repeat: no-repeat;
    background: linear-gradient( 45deg , rgb(255 255 255) 12%, rgb(241 241 241 / 86%) 40%, rgb(255 255 255 / 64%) 53%)
            , url(https://static.shoplightspeed.com/shops/614837/files/009181515/coachingbannerbike.jpg) no-repeat center 80%!important;
    background-size: cover!important;
}
.faded-bg-coaching{
     background-repeat: no-repeat;
    background: linear-gradient( 45deg , rgb(255 255 255) 12%, rgb(241 241 241 / 86%) 40%, rgb(255 255 255 / 64%) 53%)
            , url(https://static.shoplightspeed.com/shops/614837/files/009181515/coachingbannerbike.jpg) no-repeat center 80%!important;
    background-size: cover!important;
}


/*service*/


    
    .kicker{
      display:inline-block;
      background:#e6eefc;
      color:var(--accent);
      padding:6px 10px;
      border-radius:999px;
      font-size:13px;
      font-weight:600;
      margin-bottom:8px;
    }
    h1{font-size:32px;margin:6px 0 0 0;letter-spacing:-0.01em;}
    p.lead{color:var(--muted);margin-top:8px;margin-bottom:18px;line-height:1.6;}

    /* layout */
    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:20px;
    }
    @media(min-width:900px){
      .grid{ grid-template-columns: 1fr 360px; align-items:start; }
    }

    /* main card */
    .card {
      background:var(--card-bg);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-lg);
      padding:20px;
    }

    .card h2{margin:0 0 8px 0;font-size:20px;}
    .price{color:var(--muted);font-style:italic;margin-bottom:12px;}
    .card .meta-list{margin:0 0 12px 18px;color:var(--muted);line-height:1.5;}
    .cta{
      display:inline-block;
      background:var(--accent);
      color:white;
      text-decoration:none;
      padding:10px 14px;
      border-radius:6px;
      font-weight:700;
      transition:transform .12s ease, background-color .12s ease;
    }
    .cta:hover{transform:translateY(-2px); background:var(--accent-dark);color:#fff;}

    
    .muted { color:var(--muted); font-size:14px; line-height:1.45; }

    /* prep & availability */
    .prep{
      margin-top:16px;
      display:grid;
      gap:12px;
    }

    /* schedule buttons area */
    .schedule-grid{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
    }
    .schedule-grid a{ flex:1 1 48%; text-align:center; padding:9px 8px; border-radius:10px; background:#f1f5ff; color:var(--accent); text-decoration:none; font-weight:600; }
    @media(min-width:530px){ .schedule-grid a{ flex:1 1 auto; } }

   

    /* small helper */
    .hr{ height:1px; background:#eef2ff; margin:14px 0; border-radius:4px; }
    
    /*animations*/
    /* Optional: reduce-motion users get no animation */
@media (prefers-reduced-motion: reduce) {
  .animate-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Base class */
.animate-in {
  opacity: 0;
  transform: translate(0,0);
  animation-fill-mode: both;
  --offset: 40px;
  --anim-duration: 0.7s;
  --easing: cubic-bezier(.15,.85,.35,1);
}

/* Direction presets */
.from-left {
  transform: translateX(calc(var(--offset) * -1));
  animation-name: flyLeft;
}
.from-right {
  transform: translateX(var(--offset));
  animation-name: flyRight;
}
.from-top {
  transform: translateY(calc(var(--offset) * -1));
  animation-name: flyTop;
}
.from-bottom {
  transform: translateY(var(--offset));
  animation-name: flyBottom;
}

/* Keyframes */
@keyframes flyLeft {
  to { transform: translateX(0); opacity: 1; }
}
@keyframes flyRight {
  to { transform: translateX(0); opacity: 1; }
}
@keyframes flyTop {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes flyBottom {
  to { transform: translateY(0); opacity: 1; }
}

/* 👇 Progressive enhancement — activates scroll-linked timing */
@supports (animation-timeline: scroll()) {
  :root {
    scroll-timeline-name: mainTimeline;
    scroll-timeline-axis: block;
  }
  .animate-in {
    animation-timeline: mainTimeline;
    animation-duration: 3s;
    animation-range: entry 0% cover 30%;
  }
}
.row.service-item {
    display: flex;
    flex-direction: row;
}

.row.service-item .card-body .row {
    flex-direction: row;
}

.button.with-icon i {
    position: absolute;
    top: 50%;
    transform: translate(-40%,-50%);
    display: inline-block;
    /* line-height: 1; */
    font-size: 17px;
    /* right: -4px; */
    margin: 0;
    height: 30px;
    line-height: 30px;
    transition: transform 0.2s ease;
}

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
     width: auto!important;  
}
    
    .button {
   
    border: none;
    color: white!important;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}
a.banner-content-holder.banner-overlay {
    color: #fff;
}
.button-icon-circle {
    background: var(--small-button-bg-color);
    color: var(--button-text-color);
    width: 22px;
    min-width: 22px;
    text-align: center;
    padding: initial!important;
     height:auto; 
    line-height: 22px;
    margin: 0;
    border-radius: 50px !important; 
    font-size: 10px!important;
    border: 0;
    font-weight: bold;
}

.home-module.mod-slider.gray-bg.container-bar.full-width{display:none;}
a{
    color:#999!important
}
a, a:visited, a:hover, a:focus, nav.desktop .item.active .itemLink, nav .glyphicon-remove, .sidebar .item .itemLink.active, .sidebar .item .itemLink.active:hover, .sidebar .item .subitemLink.active, .sidebar .item .subitemLink.active:hover, footer .social-media .symbol:hover, .products .product .image-wrap .cart, .sidebar .item .active, .sidebar .item .active:hover, .slider-prev:hover span, .slider-next:hover span, .hightlight-color {
    color: #54afe9;
}