index.css

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;800&display=swap");

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Manrope", sans-serif;
    background: hsl(230, 100%, 99%);
    background-image: url(image/bg-pattern.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px 0px 0px;
    background-size: auto;
    font-size: 15px;
    color: hsl(225, 20%, 60%);
}

.title{
    text-align: center;
    padding: 70px 70px 90px;
    background-image: url(image/pattern-circles.svg);
    background-repeat: no-repeat;
    background-position: center 40px;
}

.container
{
    margin: 0 auto;
    max-width: 500px;
    
}
.wrapper
{
    padding: 1rem;

}
.box
{
    background-color: white;
    margin: 1rem;

}
.content, .range-slider
{
    margin: 1rem;
}
.currency
{
    font-size: 34px;
    font-weight: 800;
    color: hsl(227, 35%, 25%);
}
.views, .currency, .price
{
    margin-bottom: 0;
}
.range-slider
{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
#price-slider {
    width: 100%;
    appearance: none;
    border-radius: 5px;
    height: 10px;
    
    background: linear-gradient(
      to right,
      hsl(174, 77%, 80%) 0%,
      hsl(174, 77%, 80%) 0%,
      hsl(224, 65%, 95%) 0%,
      hsl(224, 65%, 95%) 100%
    );
}

#price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: hsl(174, 86%, 45%);
    background-image: url(image/icon-slider.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 7px 10px 4px rgba(16, 213, 194, 0.2);
}

#price-slider::-webkit-slider-thumb:hover {
    background-color: hsl(174, 77%, 80%);
}

.form-check-input
{
    height: 15pt;
    width: 30pt !important;
}
.form-check-input:checked {
      border-color: hsl(174, 86%, 45%) !important;
      background-color: hsl(174, 86%, 45%) !important;
}

.langganan
{
    margin: 1rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.discount
{
    border-radius: 20%;
    color: hsl(15, 100%, 70%);
    background-color: hsl(14, 92%, 95%);
    padding-right: 5px;
    padding-left: 5px;
}

.sub-button
{
    margin: auto;
}

.langganan-text
{
    padding: 0.5rem;
    font-size: 11pt;
    font-weight: 500;
}
.info
{
    margin: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.hidden
{
    visibility: hidden;
    font-size: 0pt;
    margin: 0;
}
li
{
    list-style-type: none ;
}
.check-icon
{
    margin-right: 10px;
}
.list
{
    padding: 5pt;
}

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

.title
{
    padding: 100px 70px 50px;
}
.container
{
    max-width: 100%;
}
.content
{
    flex-direction: column;
}
.flex-langganan
{
    flex-direction: column;
}
.list
{
    text-align: center;
}
.toggle-flex
{
    flex-direction: column;
    text-align: center;
}
}