.box-1 {

    padding-right: 2rem;

    background-color: #f5d358;

}



.card{

    max-width: 80%;

    margin: 1rem auto!important;

}



.card-body{

    display: flex;

}



.img-col{

    padding: 0!important;

}



.card-image{

    height: 300px;

}



.card-image img{

    width: 100%;

    height: 300px;

    object-fit: cover;

    object-position: center;

    border-radius: .25rem;

}



.text-col{

    padding: 1rem 1rem 0 1rem!important;

    height: 300px;

}



.text-col h3{

    font-weight: bold;

    margin-bottom: 0;

    color: #be000f;

}





.header-underline {

    height: 3px;

    border-radius: 30px;

    background-color: #be000f;

    margin-bottom: 1rem;

    margin-top: 0.5rem;

}





.card-text{

    overflow: auto;

}



.card-text a{

    text-decoration: none;

    color: #f5d358;

    font-weight: bold;

    transition: all 0.3s ease-in-out;

}



.card-text a:hover {

    text-decoration: none;

    color: #ffc800;

    font-weight: bold;

}



.modal-dialog{

    max-width: 1200px!important;

}



.modal-title h4 {

    font-weight: bold;

    margin-bottom: 0;

    color: #be000f;

}



.modal-image{

    height: 400px;

    width: 90%;

    margin: 1rem auto;

    border-radius: 0.5rem;

}



.modal-image img{

    height: 100%;

    width: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: inherit;

}



.modal-quote{

    background-color: rgb(230, 230, 230);

    width: 90%;

    margin: 1rem auto;

    border-radius: 0.25rem;

    padding: 1rem 1rem 0.3rem 1rem;

}



.modal-quote .quote{

    font-weight: 900;

    padding: 0 5px;

    color: rgb(80, 80, 80);

}



.modal-quote .quote-text{

    color: #be000f;

    text-align: center;

    font-size: 22px;

}



.quote-footer{

    font-weight: 500;

    color: rgb(80, 80, 80);

    text-align: end;

}



.close{

    position: absolute;

    top: 1rem;

    right: 2rem;

}



.close span{

    font-size: 2rem;

}



.close-div button{

    background-color: #f5d358;

    padding: 0.5rem 2rem;

    color: #be000f;

    font-weight: bold;

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

}



.close-div button:hover{

    color: #be000f;

    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);

}



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

    .card{

        max-width: 90%;

    }

}



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

    .card-body{

        flex-direction: column;

    }

}





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

    .card {

        max-width: 95%;

    }

}