Slick dots & arrows CSS

.slick-dots {.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;}