.swiper-pag { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .slider-button { position: relative; cursor: pointer; width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #fff; background-color: #fff; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; border-radius: 50%; } .slider-button::after { content: ""; width: 8px; height: 8px; -webkit-transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0); -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; border-bottom: 2px solid #10D7CB; border-right: 2px solid #10D7CB; } .slider-button:hover { background-color: #10D7CB; } .slider-button:hover::after { border-color: #fff; } .swiper-button-disabled { opacity: 0.7; cursor: auto; pointer-events: none; } .slider-button_prev::after { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } .slider-button_next::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .swiper-pagination-bullet { background-color: #10D7CB; position: relative; width: 16px; height: 16px; } .swiper-pagination-bullet.swiper-pagination-bullet-active::before { display: block; content: ""; height: 12px; width: 12px; border: 2px solid #fff; position: absolute; top: 50%; right: 50%; -webkit-transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0); border-radius: 50%; } .swiper-pag_around { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -80px; left: -80px; width: calc(100% + 160px); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .swiper-scrollbar-horizontal { position: static; height: 1px; width: 30px; background-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.25); } .swiper-scrollbar-drag { background-color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75); } /* swiper MEDIA */ @media (max-width: 550px) { .slider-button { width: 35px; height: 35px; } }