/*Food tours card CSS */

.cardx img { 
	height: auto;
} /*added by Josip 10.06.2022*/

.cardx {

    font-family: 16px JosefinSans-Regular;
    padding-bottom: 30px;
  
}

.cardx-title {
    font-weight: bold;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 5px;
    padding-top: 5px;
    font: 23px/32px PlayfairDisplay-bold;

}


.cardx-container-details {
    margin: 0 15px;
    background-color: #FAFAFA;
    padding: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-bottom: 15px;
    height: 485px;
}


@media screen and (max-width: 540px) {

    .cardx-container-details {

        height: auto;
    }

}


@media screen and (max-width: 1200px) {

    .cardx-container-details {

        height: auto;
    }

}

.cardx-price {

    padding-top: 15px;
    font: 30px/25px JosefinSans-Regular;
    color: #212529;


}

.cardx-desc {
    color: #212529;
    font: 14px/25px JosefinSans-Regular;
    padding-right: 10px;

}


.cardx-stars-price {
    margin-left: 0;
    font-size: 25px;
    color: #ffb446;
}

.cardx-stars {}




.cardx-tags {
    margin-top: 30px;
    color: #144733;

}

.cardx-tags span {
    padding-right: 8px;
    padding-top: 5px;
    display: inline-block;
    font: 13px/25px JosefinSans-Regular;
}

.cardx-tags img {
    padding-right: 5px;
}


.cardx-buttons {
    margin-top: 30px;
}

.cardx-buttons-one {
    text-align: center;
    margin-top: 26px;
    width: 120px;
    height: 39px;
    display: inline-block;
    background-color: #134633;
    color: #FFFFFF;
    padding-top: 8px;
    border: 1px solid #134633;
    font: 15px/25px JosefinSans-Regular;

}


.cardx-buttons-tow {
    text-align: center;
    margin-top: 26px;
    width: 120px;
    height: 39px;
    display: inline-block;
    background-color: #FFFFFF;
    border: 1px solid black;
    color: #000;
    display: inline-block;
    padding-top: 8px;
    font: 15px/25px JosefinSans-Regular;
}



.rate-tours {
    color: gray;
    font-size: 14px;
    padding-left: 5px
}




.special-tag {
    margin-top: 5px;
    background-color: #161616;
    border-radius: 30px;
    padding: 5px 16px;
    color: white;
    font-size: 13px;
    padding-left: 10px;

}



.star-ratings {

    unicode-bidi: bidi-override;
    color: #c5c5c5;
    font-size: 25px;
    height: 50px;
    width: 105px;
    /* margin: 1em auto; */
    position: relative;
    padding: 0;
    margin: 0;

}


:root {

  --star-color: #CCC;
  --star-background: #ffb446;
}

.star-ratings {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.star-ratings::before {
  content: "★★★★★";
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}