.banner {
    background-color: #F3F3F3;
    text-align: center;
    padding: 40px 0;
    box-shadow: 1px 2px 15px #0000003d;
}

.banner h2 {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 15px
}

.search-input {
    position: relative;
    max-width: 500px;
    margin: 0 auto
}
.search-input input {
    font-size: 18px;
    width: 100%;
    border: none;
    border-radius: 5px;
    padding: 8px 35px;
    color: #9d9e9e
}

.search-input input:focus {
    outline: none
}

.search-input i {
    position: absolute;
    top: 20px;
    right: 13px;
    color: #c5c6c6;
    font-size: 18px;
    cursor: pointer;
}
.search-input i:hover {
    color:var(--main-color);
    font-weight: 700;
}



.card{
    border: 2px solid #9d9e9e;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 0;
    background-color: #fff;
}
.card:has(>div.show){
    border-color:var(--main-color);
}
.card-header{
    padding:15px 25px;
    border:0;
    background: transparent;
}
.card-header h4 {
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    margin:0;
    position: relative;
}
.card-header h4 i{
    position: absolute;
    right: -10px;
    top:3px;
}
.card-body{
    padding: 0 25px 25px;
}

.collapsed{
    background-color: #ebecec;
    border-radius: 10px!important;
}
.card-header.collapsed h4 i{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (max-width: 767px){
    .banner h2 {
        font-size: 24px;
    }
    .card-header h4{
        font-size: 18px!important;
    }
}