:root{
    --color-1 : rgb(28, 55, 104); 
}

#contain_top_banner{
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}   

.img_banner{
    height: auto;
    width: 100%;
    object-fit: cover;
    display: block;
}

.overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay h2{
    text-align: center;
    font-weight: bold;
}

.overlay:hover{
    opacity: 0;
}

.card{
    margin-top: 20%;
    background: #f5822021;;
}

.card:hover {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.5);
    background: var(--color-1);
    color: #fff;
}

.card:hover #title{
    color: #fff;
}

.card:hover .btn{
    background: #fff;
    color: #000;
}

.card img{
    border: 2px solid var(--color-1);
    transform: translateY(-50%);
}

.card button {
    background: var(--color-1);
}

.card .card-body{
    transform: translateY(-20%);
}

.card .card-body .card-title {
    color: var(--color-1);
}

.modal-header span {
    color: var(--color-1);
}

.modal-footer a {
    color: var(--color-1);
}

@media(max-width:520px){
    #contain_top_banner {
        height: auto;
    }

    .overlay h2{ 
        font-size: 20px;
    }
 }