.mask-one{
    mask-image: linear-gradient(black 80%, transparent);
}

.carousel-item {
    height: 600px;
    background-color: #000;
}

.carousel-item img {
    object-fit: cover;
    height: 100%;
}

.carousel-item {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.carousel-caption {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.carousel-control-prev-icon {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-control-next-icon {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    cursor: pointer;
    background-color: #001bb2;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transition: opacity .6s ease;
}


.botones {
    top: 100%;
}

.text-overlay a:hover{
    /*background-color:#253782;*/
}

.text-overlay a:visited{
   color:white;
}

@media (max-width: 768px) {
    .carousel-caption {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    
    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 400px;
    }
    
    .container-fluid.banner {
      background-image: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->id));?>');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height:400px;
    }
    
    .carousel-item img{
        object-fit: cover;
        height: 70%;
    }
}
