.animal-h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-top: 1rem;
    font-weight: 800;
    color: white;
}
img {
    transition: all .3s;
}
.media {
    display: block;
}
.media-body {
    color: white;
}
.animal-container {
    flex-wrap: wrap;
    gap: 20px;
    background-color: rgba(255, 0, 0, 0) !important;
    justify-content: center;
    width:80% !important;
}
.cock-fighting-banner {
    border-radius: 20px;
    border: 5px solid #FBD747;
    max-height: 250px !important;
    min-height:90px !important;
}
.horse-riding-banner {
    max-height: 250px !important;
    min-height:90px !important;
}
.animal-img-div {
    background-color: #1a1a1a;
    border-radius: 1rem;
    overflow: hidden !important;
    position: relative;
}
.animal-img-div:hover .animal-img-hover-div {
    display: block;
}
.animal-img-div:hover a img {
    transform: scale(1.3);
}
.animal-img-hover-div {
    width: 430px;
    height: 280px !important;
    min-height:140px !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    position: absolute;
    top: 0px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.56);
    display: none;
}
.animal-img-hover-div-text {
    font-size: 1rem;
    color:white;
}
.animal-img-hover-div div button {
    padding: 1px 3px;
    background-color: #3d44d3;
    border-radius: 0.375rem;
    font-size: 1.2rem;
    margin-top: 6.25rem;
    color: white;
}
.animal-img-hover-div div button:hover {
    background-color: gold;
    color: black;
}
.animal-img-div h6 {
    font-size: .8rem;
    text-align: center;
}
.animal-star{
    margin-right: 1rem !important;
}

@media screen and (min-width:570px) and (max-width:600px){
    .animal-img-hover-div {
    width: 100% !important;
    }
}
@media screen and (min-width:500px) and (max-width:569px){
    .animal-img-hover-div {
    width: 100% !important;
    }
}
@media screen and (min-width:426px) and (max-width:480px){
    .animal-img-hover-div {
    width: 100% !important;
    }
}
@media screen and (max-width:425px){
    .animal-img-hover-div div button {
    border-radius: 0.375rem;
    font-size: .8rem;
    margin-top: 5.25rem;
}
.animal-img-hover-div {
    width: 300px !important;
    height: 200px;
    min-height:140px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.cock-fighting-banner {
    border-radius: 10px;
    border: 3px solid #FBD747;
}
.animal-img-hover-div-text {
    font-size: .7rem;
}
.animal-img-div:hover a img {
    transform: scale(1.4);
}
}
@media screen and (max-width:375px){
    .animal-img-hover-div {
    width: 260px !important;
    }
}