html {
  background-color: #DEF4EA;
  height: 100%;
  box-sizing: border-box;
  font-size: 16px;
  font-family: "Karla";
}

body {
  padding: 25;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h2, h4, p {
  margin: 0;
}

.card {
  background-color: white;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 400px;
  box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
  border-radius: 7px;
  overflow: hidden;
}

.top-container {
  width: 100%;
  height: 40%;  
  padding: 25px;
}

.top-container h2 {
  color: #2ab2af;
  margin-bottom: 20px;
}

.top-container h4 {
  color: #c0df34;
  margin-bottom: 10px;
}

.top-container p {
  color: #98a6bd;
}

.bottom-container {
  width: 100%;
  height: 60%;  
  color: white;
}

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

.bottom-container-left h4 {
  margin-bottom: 25px;
}

.bottom-container-left p {
  font-size: 0.8rem;
  margin-bottom: 30px;
}

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

.bottom-container-right h4 {
  margin-bottom: 25px;
}

.bottom-container-right ul {
  list-style: none;
  padding: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

button {
  background-color: #c0df34;
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
}

button:hover {
  cursor: pointer;
  background-color: #CEE275;
  trasnform: scale(1.2);
}

.price-container {
  margin: 15px;
}

.price {
  font-weight: 1000;
  font-size: 1.4rem;
}

.price-frequency {
  position: relative;
  top: -3px;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-left: 5px;
}

.price, .price-frequency {
  display: inline-block;
}

@media (max-width:650px) {
  .card {
    position: relative; 
    width: 90%; 
    height: auto; 
    margin: 20px auto; 
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
  }
  
  .bottom-container-left, .bottom-container-right {
    /* Optional: Make children stack or resize better */
    width: 100%;
    box-sizing: border-box;
    height: auto; 
    margin: 20px auto; 
  }
}