.slick-list { margin: 0 -1.875rem; } .slick-slide { margin: 0 1.875rem; } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: var(--ayyash-gap-40); height: var(--ayyash-gap-40); padding: 0; transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: #fff; border-radius: 100%; z-index: 1; } .slick-prev { left: var(--ayyash-gap-15); } .slick-next { right: var(--ayyash-gap-15); } .slick-prev::before, .slick-next::before { font-family: "Ayyash"; font-weight: 400; font-style: normal; font-size: 1.25rem; line-height: 1; color: var(--ayyash-color-primary); } .slick-prev::before { content: "\e90c"; } .slick-next::before { content: "\e90d"; } .slick-dots { margin-top: var(--ayyash-gap-15); padding: 0; list-style: none; text-align: center; } .slick-dots li { display: inline-block; margin: 0 5px; width: var(--ayyash-gap-10); height: var(--ayyash-gap-10); padding: 0.3125rem; border: 1px solid #494C51; border-radius: 100%; } .slick-dots button { font-size: 0; line-height: 0; display: block; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots .slick-active { background: var(--ayyash-color-primary); border: 1px solid transparent; }