html{
  box-sizing: border-box;
  font-size: 16px;
  font-family: "karla";
  font-weight: 400;
}
*, *:before, *:after {
  box-sizing: inherit;
}

h2, h4, p{
  margin:0;
}

ul{
  list-style: none;
  padding: 0;
  font-size: 0.98rem;
  opacity: 0.8;
}

body{
  margin:70px;
}
.card{
  width:600px;
  height:400px;
  border-radius: 9px;
  box-shadow: 0px 2px 5px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.top-section{
  width: 100%;
  height: 45%;
  padding: 25px;
}

.bottom-section{
  width: 100%;
  height: 55%;
}

.bottom-left-section{
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 25px;
  background-color: #2ab2af;
  vertical-align: top;
}

.bottom-right-section{
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 25px;
  background-color: #16c9c5;
  vertical-align: top;
}

.top-section h2{
  padding-bottom: 20px;
  color: #2ab2af;
}

.top-section h4{
  padding-bottom: 15px;
  color: #c0df34;
}

.bottom-left-section h4{
  padding-bottom: 20px;
  color: #e5eff5;
  font-size: 1.1rem;
}

.bottom-left-section p{
  padding-top: 15px;
  padding-bottom: 25px;
  color: #e5eff5;
}
.bottom-right-section h4{
  color: #e5eff5;
  font-size: 1.1rem;
}
.bottom-right-section ul{
  color: #e5eff5;
}
.price{
  color: #e5eff5;
  font-size: 1.7rem;
  font-weight: 700;
}
.price-freq{
  position: relative;
  bottom: 3px;
  color: #e5eff5;
  opacity: 0.7;
}
.top-section p{
  color: #98a6bd;
}
#btn-1{
  width: 87%;
  padding: 10px;
  border-radius: 9px;
  background-color: #c0df34;
  box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.27);
  border: none;
  color: white;
}

#btn-1:hover{
  cursor: pointer;
  transform: scale(1.02);
  background-color: #b4d130;
}