.banner-wrap {
    height: 500px;
    position: relative;
}


.banner-slider {
    height: 100%;
}

    .banner-slider > .banner-slide {
        display: none;
    }

        .banner-slider > .banner-slide:first-child {
            display: block;
        }

.slick-initialized .banner-slide {
    position: relative;
    height: 900px;
    padding-bottom: 300px;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
}

.slick-prev,
.slick-next {
    width: 60px !important; /* Increase size for better visibility */
    height: 60px !important; /* Increase size for better visibility */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    z-index: 2 !important; /* Ensure the arrows are above other elements */
    border: none !important; /* Remove default button border */
    padding: 0 !important; /* Remove default button padding */
}

/* Position the arrows */
    .slick-prev::before,
    .slick-next::before {
        content: '' !important;
        display: block !important;
        width: 48px !important; /* Adjust the SVG icon size as needed */
        height: 48px !important; /* Adjust the SVG icon size as needed */
        background-size: cover !important;
    }

    .slick-prev::before {
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2248px%22%20height%3D%2248px%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22%20fill%3D%22white%22/%3E%3C/svg%3E');
    }

    .slick-next::before {
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2248px%22%20height%3D%2248px%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206z%22%20fill%3D%22white%22/%3E%3C/svg%3E');
    }



    .slick-dots li {
        width: 0.625rem !important;
        height: 0.625rem !important;
        margin: 0 0.25rem !important;
        background-color: #efd5d5 !important;
        border: none !important;
        border-radius: 50% !important;
        display: inline-block !important;
    }

        .slick-dots li button {
            font-size: 0 !important;
            line-height: 0 !important;
            display: block !important;
            width: 1.25rem !important;
            height: 1.25rem !important;
            padding: 0.3125rem !important;
            cursor: pointer !important;
            color: transparent !important;
            border: 0 !important;
            outline: 0 !important;
            background: 0 0 !important;
        }

        .slick-dots li.slick-active {
            transform: scale(1.3) !important;
            transform-origin: center !important;
            background: #3498db !important;
        }

        .slick-dots li button:before {
            color: transparent !important;
        }

        .slick-dots li.slick-active button:before {
            opacity: 0 !important;
            color:  transparent !important;
        }


        .hero-image {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-size: cover;
            background-position: center center;
        }


.hero-overlay {
    background: #081c2d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
}

.hero-content {
    color: #ffffff;
}

.hero-content .cta-btn {
    padding-top: 30px;
}

.hero-content .cta-btn .cta-link.cta-outline-white:hover {
    background: #ffffff;
    color: rgba(0,33,71,1);
}

/*==============================================================
	banner Style end
==============================================================*/

.how-to-use {
    padding: 100px 0;
}