:root{
    --sivustamo-blue-color: 30,62,107;
    --sivustamo-gray-color: #97999b;
}



.hero-wrapper .hero-bg {

    height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;

}



.hero-wrapper .hero-bg .hero-btn{

    background-color: rgba(var(--sivustamo-blue-color), 0.9);
    color: white;
    display: inline-block;
    padding: 20px 40px;
    cursor: pointer;
    font-size: 1.375rem;
    font-weight: 700;

}

.hero-wrapper .hero-bg .hero-btn >p{
    margin:0;
}


@media (max-width: 767px) {
    
    .hero-wrapper .hero-bg {
        height: 280px;
        align-items: end;
    }

    .hero-wrapper .hero-bg .hero-btn{
        font-size: 1.25rem;
    }

}




.slick-dots{
    display: flex;
    padding: 0;
    justify-content: center;
}

.slick-dots li{
    list-style: none;
    padding: 10px 5px;
    border: 0;
    background-color: transparent;

}


.slick-dots li button {
    color: transparent; /* Hide the number */
    font-size: 0; /* Hide text content */
    border: 0;
    background-color: transparent;
}

.slick-dots li:focus-visible,
 .slick-dots li button:focus-visible, .slick-dots li:focus,
 .slick-dots li button:focus{
    outline: none !important;
}

*:focus, *:focus-visible {
    outline: 0 !important;
    outline: none !important;
  }

.slick-dots li button:before {
    content: '⬤'; 
    font-size: 10px; 
    color: var(--sivustamo-gray-color); 
    cursor: pointer;
    
}

.slick-active button{
    border:none;
    background-color: transparent;
    cursor: pointer;

}

.slick-dots li.slick-active button:before {
    color: rgba(var(--sivustamo-blue-color), 1) !important; 
}