.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 10;
}

.slick-prev {
    left: 25px;
}

.slick-next {
    right: 25px;
}

    /* arrow background circle */
    .slick-prev:before,
    .slick-next:before {
        font-size: 26px;
        color: white;
        background: rgba(0,0,0,0.45);
        width: 50px;
        height: 50px;
        line-height: 50px;
        display: block;
        border-radius: 50%;
        transition: 0.3s;
    }

    /* hover effect */
    .slick-prev:hover:before,
    .slick-next:hover:before {
        background: rgba(0,0,0,0.75);
    }

.slick-dots li button:before {
    font-size: 12px;
    color: #cccccc; /* visible inactive dots */
    opacity: 1;
}

.slick-dots li.slick-active button:before {
    color: #00b67a; /* active dot */
    opacity: 1;
}

.slick-dots li {
    margin: 0 6px;
}

@media(max-width:768px) {

    .slide img {
        height: 420px;
    }

    .slide-content {
        left: 20px;
        right: 20px;
        max-width: 100%;
    }

        .slide-content h1 {
            font-size: 30px;
        }

        .slide-content p {
            font-size: 16px;
        }

    .hero-btn {
        padding: 10px 20px;
    }
}