/* ==========================================================================
   collab.css — styles for collab-with-us.html
   "Our Process" section: self-contained horizontal carousel (Swiper).
   Shows ONE process card at a time, auto-slides, with prev/next arrows.
   Unique btcproc-* classes + a unique .btcproc-slider so main.js's swiper
   inits and the main.css time-table rules never touch it.
   Card look mirrors the index.html testimonial cards.
   ========================================================================== */

.btcproc-section{ padding: 30px 0px 100px 10px;; overflow:hidden; }
.btcproc-section .btcproc-intro{ }
.btcproc-section .btcproc-subtitle{
    display:inline-block; color:#00984a; font-weight:600;
    letter-spacing:1px; text-transform:uppercase; font-size:14px; margin-bottom:14px;
}
.btcproc-section .btcproc-heading{
    font-size:36px; font-weight:700; color:#101828; line-height:1.25; margin-bottom:20px;
}
.btcproc-section .btcproc-lead{
    font-size:17px; line-height:1.8; color:#475467; margin:0 0 34px;
}

/* Prev / next arrows */
.btcproc-nav{ display:-webkit-box; display:-ms-flexbox; display:flex; gap:14px; }
.btcproc-arrow{
    width:54px; height:54px; border-radius:50%;
    border:1px solid rgba(6,3,48,.15); background:#ffffff; color:#101828;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
    font-size:18px; cursor:pointer; padding:0;
    -webkit-transition:all .3s ease; transition:all .3s ease;
}
.btcproc-arrow:hover{ background:#00984a; border-color:#00984a; color:#ffffff; }

/* Slider + card (same visual language as .testimonial-box-items on index.html) */
.btcproc-slider{ width:100%; }
/* Pad the slide (border-box keeps swiper's slide width intact) so the card's
   1px border always sits a few px inside the swiper clip edge on ALL four
   sides — fixes borders being shaved by sub-pixel rounding. */
.btcproc-slider .swiper-slide{
    height:auto;
    padding:4px;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
}
.btcproc-card{
    border-radius:12px;
    border:1px solid #204066;
    background:#ffffff;
    padding:45px 45px;
    min-height:250px;
    height:100%;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
        -ms-flex-direction:column; flex-direction:column;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.btcproc-card .btcproc-step{
    display:inline-block; color:#00984a; font-weight:700;
    font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px;
}
.btcproc-card h3{ font-size:24px; font-weight:600; color:#101828; margin:0 0 14px; }
.btcproc-card p{ font-size:16px; line-height:1.8; color:#475467; margin:0; }

@media (max-width:1199px){
    .btcproc-card{ padding:36px 32px; }
    .btcproc-section .btcproc-heading{ font-size:30px; }
}
@media (max-width:991px){
    .btcproc-section{ padding:0 0 90px 0; }
    .btcproc-section .btcproc-intro{ margin-bottom:34px; }
}
@media (max-width:575px){
    .btcproc-card{ padding:28px 24px; min-height:220px; }
    .btcproc-section .btcproc-heading{ font-size:26px; }
    .btcproc-card h3{ font-size:20px; }
    .btcproc-arrow{ width:48px; height:48px; }
}
