Slick dots & arrows CSS

.slick-dots { display: flex; padding: 0; margin: 20px 0 0; justify-content: center; align-items: center; gap: 5px; list-style-type: none; } .slick-dots li { padding: 0; } .slick-dots li button { background: #f1f1f1; border: none; font-size: 0; width: 30px; height: 2px; transition: all 0.5s ease; } .slick-dots li button:hover, .slick-dots li.slick-active button:hover, .slick-dots li.slick-active button { background: var(--color-primary); height: 4px; transition: all 0.5s ease; } @media (max-width: 767px) { .slick-dots li { flex: 1; max-width: 30px; } .slick-dots li button { width: 100%; } } .slick-prev.slick-arrow:after, .slick-next.slick-arrow:after { content: "\e90f"; font-family: shoptet; font-size: 13px; } .slick-next.slick-arrow:after { content: "\e910"; } .slick-prev.slick-arrow, .slick-next.slick-arrow { transition: all 0.5s ease; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 2; background: #f1f1f1; border: none; font-size: 0; width: 30px; height: 30px; border-radius: 100%; } .slick-next.slick-arrow { left: unset; right: 10px; } .slick-prev.slick-arrow:hover, .slick-next.slick-arrow:hover { transition: all 0.5s ease; background: var(--color-primary); color: #fff; }