@charset "utf-8";
/* CSS Document */
p.estimate {
	font-size: 25px;
	color: #0097FF;
	font-weight: bold;
}
div.title {
	color: #333;
	text-align: left;
}
.price {
	font-size: 25px;
	color: #0097FF;
	font-weight: bold;
}
p.description {
	font-size: 13px;
	text-align: left;
}
p.subtitle {
	color: #0E0E0E;
}

 /* Responsive */
    @media (min-width: 769px) {
		
 .pricing-container {
      display: flex;
      gap: 20px;
      justify-content: center;
    }

}



    .price-card {
      width: 190px; /* Adjusted width */
      height: 80px; /* Adjusted height */
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
      cursor: pointer;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: center;
      border: 2px solid transparent; /* Default border state */
    }

    .price-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    }

    input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      opacity: 0; /* Hide default radio button */
    }

    /* Change background color of the card when selected */
    input[type="radio"]:checked + label .price-card {
      background-color: #007BFF; /* Change background to blue when selected */
      color: #fff; /* Change text color to white */
    }

    /* Add border color when selected */
    input[type="radio"]:checked + label .price-card {
      border-color: #fff;
    }

/* Add color to p text */
    input[type="radio"]:checked + label .price-card-text {
      color: #fff;
    }


    .price-card-header {
      font-size: 16px;
      font-weight: bold;
      color: inherit; /* Inherit color from the card */
    }

    .price-card-price {
      font-size: 18px;
      color: inherit; /* Inherit color from the card */
      font-weight: bold;
    }

    .price-card-description {
      font-size: 10px;
      color: inherit; /* Inherit color from the card */
      margin-top: 5px;
    }

    /* Label text styling */
    label {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      cursor: pointer;
    }

    /* Responsive */
    @media (max-width: 768px) {
		.price-card {
			margin: 10px;
		}	
}