.container-card{
   margin: auto;
   width: 80%;
   padding: 2%; 
}
.header-container{
    text-align: center;
    font-size: 28px;
    margin-bottom: 1%;
}



/*  search  */
.search-container{
    margin: auto;
    width: 100%;
    margin-bottom: 10px;
}
.search-container i{
    position: absolute;
}
.icon {
    padding: 1%;
    min-width: 40px;
    color: #bcbcbc;
}
.search-text{
    border: 2px solid #e2e2e2;
    border-radius: 8px;
    width: 100%;
    padding: 0.5%;
    text-align: center;
}


/*   detail-card   */
.detail-header{
    font-size: 16px;
    color: #929292;
}
.detail-other{
    font-size: 12px;
}
.btn-detail{
background-color: #ED7D31;
width: 100%;
color: white;
font-weight: bold;
border: none;
font-size: 15px;
}

/*   banner-contain   */
.banner-card{
width: 100%;
background-color: #576C81;
padding: 3%;
}
.banner-contain{
    margin: auto;
text-align: center;
width: 70%;
}
.banner{
    background-color: white;
    padding: 1%;
    border-radius: 4px;
}

.page-card{
    margin: auto;
    font-size: 20px;
    background-color: white;
    border: 2px solid rgb(207, 207, 207);
    width: 50%;
    border-radius: 12px;
    padding: 1%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}
.page-select{
    width: 7%;
    border: 1px solid beige;
    border-radius: 20px;
    margin-right: 2%;
    text-align: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    margin-left: auto;
    margin-right: auto;

}