/* Adjust the gallery wrapper */
.gallery-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto; /* Center the gallery */
    overflow: hidden; /* Ensure content is within bounds */
}

.gallery-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #dddddd3d;
}

/* Slick carousel specific styles */
.slick-prev, .slick-next {
    background: #444; /* Button background color */
    border: none; /* Remove any border */
    border-radius: 50%; /* Make the buttons circular */
    color: #fff; /* Text color */
    font-size: 18px; /* Font size for the arrow */
    height: 40px; /* Button height */
    width: 40px; /* Button width */
    line-height: 40px; /* Center text vertically */
    text-align: center; /* Center text horizontally */
    z-index: 1000; /* Make sure buttons are above the carousel images */
    position: absolute;
    top: 50%; /* Position vertically centered */
    transform: translateY(-50%);
}

.slick-prev {
    left: 0px;
}

.slick-next {
    right: 0px;
} 

/* Center the dots under the image */
.slick-dots {
    text-align: center;
    margin-top: 15px; /* Space between image and dots */
    padding-left: 0;
    list-style: none;
}

.slick-dots li {
    display: inline-block; /* Align dots horizontally */
    margin: 0 8px; /* Space between dots */
}

.slick-dots li button {
    background: #ccc; /* Dot background color */
    border: none; /* Remove any border */
    border-radius: 50%; /* Make the dots circular */
    width: 12px; /* Dot width */
    height: 12px; /* Dot height */
    position: relative;
}

.slick-dots li button::before {
    content: '';
    display: block;
    width: 16px; /* Adjusted circle width */
    height: 16px; /* Adjusted circle height */
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #ccc; /* Circle border color */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.slick-dots li.slick-active button::before {
    background-color: #fff; /* Active dot background color */
    border-color: #fff; /* Active dot border color */
}

/* This is what I get for global styling and using templates */

/* Override the border-radius to remove rounded corners */
.slick-prev, .slick-next {
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* If you want a specific shape, like a square or a different background */
.slick-prev, .slick-next {
    border-radius: 0 !important;
    background: transparent !important;
}

/* Ensure the active dot buttons are not rounded */
.slick-dots li button {
    border-radius: 0 !important; 
    background: none !important;
}

.slick-dots li button::before {
    border-radius: 0 !important;
}

/* General button override */
button[type="button"][role="tab"] {
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Restore the round shape for the dots */
.slick-dots li button {
    border-radius: 50% !important;
    background: #ccc !important;
    width: 12px;
    height: 12px;
}

/* Ensure the pseudo-element is also circular */
.slick-dots li button::before {
    border-radius: 50% !important;
    background-color: transparent;
    border: 2px solid #ccc;
    width: 16px;
    height: 16px;
}

/* Style for the active dot */
.slick-dots li.slick-active button::before {
    background-color: #fff; 
    border-color: #fff;
}