Blood Bank

/* Wrapper */ .bb-carousel-wrapper{ width:100%; margin:10px auto; position:relative; } /* Card */ .bb-card{ display:flex; gap:20px; align-items:center; padding:15px; border:1px dashed #ddd; border-radius:12px; background:#fff; } /* Image */ .bb-image-box{ flex:0 0 auto; display:flex; justify-content:center; align-items:center; } .bb-image-box img{ width:240px; height:240px; object-fit:cover; aspect-ratio:1/1; border-radius:50%; border:4px solid #eee; display:block; } /* Text */ .bb-text-box{ flex:1; font-family:Arial, sans-serif; } .bb-text-box h2{ margin:0 0 10px; font-size:24px; } .bb-text-box p{ margin:0 0 15px; line-height:1.6; font-size:15px; } /* Buttons */ .bb-btn{ display:inline-block; padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:bold; margin-right:8px; color:#fff; } .bb-whatsapp{ background:#25D366; } .bb-whatsapp:hover{ background:#1ebe5d; } .bb-knowmore{ background:#0073aa; } .bb-knowmore:hover{ background:#005f8d; } /* ================= ARROWS ================= */ .bb-swiper-button-prev, .bb-swiper-button-next{ width:50px; height:50px; background:rgba(255, 0, 0); color:#fff; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); z-index:20; display:flex; align-items:center; justify-content:center; cursor:pointer; } .bb-swiper-button-prev{left:10px;} .bb-swiper-button-next{right:10px;} .bb-swiper-button-prev::after, .bb-swiper-button-next::after{ display:none; } /* Hover */ .bb-swiper-button-prev:hover, .bb-swiper-button-next:hover{ background:#00A300; } /* ================= PAGINATION CENTER FIX ================= */ .bb-swiper-pagination{ position:relative; margin-top:12px; display:flex; justify-content:center; align-items:center; } /* Responsive */ @media (max-width:768px){ .bb-card{ flex-direction:column; text-align:center; } .bb-image-box img{ width:170px; height:170px; } } var swiper = new Swiper(“.bb-mySwiper”, { loop:true, spaceBetween:20, autoplay:{ delay:4000, disableOnInteraction:false, }, pagination:{ el:”.bb-swiper-pagination”, clickable:true, }, navigation:{ nextEl:”.bb-swiper-button-next”, prevEl:”.bb-swiper-button-prev”, }, });