#header {
    background-color: #009fae;;
}

#header h5 {
    font-size: 21px;
    color: #fff;;
}

#content .card {
    width: calc(100vw - 20%);
    max-width: 450px;
    min-width: 300px;
    overflow: hidden;
}

#content .card-header {
    background-color: #b8b8b8;
}

#content .card-header.pack1 {
    background-color: #33adba;
}

#content .card-header.pack2 {
    background-color: #838488;
}

#content .card-header.pack3 {
    background-color: #9e9171;
}

#content .card-header h4 {
    font-size: 26px;
    font-weight: 700;
    color: #fff;;
}

#content .card-body {
    background-color: #f0f0f1;
}

#content .card-body h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 40px 0;
}

#content .swiper-pagination {
    position: relative;
}

#content .swiper-slide-active .card-header {
    background-color: #7f7e82;
}

#content .swiper-slide-active .card-header.pack1 {
    background-color: #2d99a5;
}

#content .swiper-slide-active .card-header.pack2 {
    background-color: #737478;
}

#content .swiper-slide-active .card-header.pack3 {
    background-color: #8b8064;
}

#content .swiper-pagination-bullet {
    margin: 0 3px;
}

#content .swiper-pagination-bullet-active {
    background-color: #009fae;
}