input, textarea {
	width: 80%;
	padding: 7px 20px;
	Margin: 10px 0px;
	border-radius: 5px;
	max-width: 350px;
}

input[type="submit"],input[type="reset"] {
	display: inline-block; /* Make sure they're side by side */
    width: auto;           /* Avoid full-width buttons */
	background-color: #4285f4; 
    color: white;
    padding: 10px 20px;
    margin: 10px 5px 0 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: green;
    }

input[type="reset"]:hover {
    background-color: #e53935;
    }

.success {
    color: green;
    font-weight: bold;
    margin-top: 15px;
}

/* Card Design*/


  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 280px;
    padding: 0px;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
    text-align: center;
	Margin: 10px;
  }
  
.card-logo{
      height:210px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    }

	
  .card-logo img { max-width: 70%; height: auto; margin-bottom: 10px; }
  
  .card-content{
      padding:15px 22px 0 22px;
	  min-height: 200px;
      display:flex;
      gap:12px;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }

.card-footer{
      margin-top:auto;
      padding:0;
      background:transparent;
      display:flex;
      width:100%;
      gap:0;
      align-items:center;
      justify-content:center;
    }
.card-btn{
      width:100%;
      border-radius:8px;
      padding:12px 16px;
      border:0;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 6px 18px rgba(0,0,0,0.06);
      transition:transform .15s;
    }
    .card-btn:active{transform:translateY(1px)}
	
	.price {
    font-weight: 700;
    font-size: 20px;
	margin-bottom: 10px;
	}
	
	
	
.custom-btn {
	all: unset; /* Resets inherited styles (like from Bootstrap or parent a) */
    background-color: #4285f4 !important;      /* Google Blue */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover Effect */
.custom-btn:hover {
    background-color: #3367d6 !important;
    transform: scale(1.03);
}

 button {
	all: unset; /* Resets inherited styles (like from Bootstrap or parent a) */
    background-color: #4285f4 !important;      /* Google Blue */
    color: white;
    padding: 6px 12px;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-pay {
	all: unset; /* Resets inherited styles (like from Bootstrap or parent a) */
    background-color: #4285f4 !important;      /* Google Blue */
    color: white;
    padding: 6px 12px;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #777;
  margin: 20px 0;
  font-size: 14px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.divider::before {
  margin-right: 10px;
}

.divider::after {
  margin-left: 10px;
}
#message {
	text-align: center;
}

/* year message show*/
   .month-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 7px;
      justify-items: center;
      margin-bottom: 10px;
    }

    .month-box {
      width: 100%;
	  min-width: 40px;
	  max-width: 100px;
      aspect-ratio: 1 / 1.2;
      position: relative;
      border: 1px solid #21ADE3;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1em;
      color: #fff;
    }

    .fill {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background-color: #21ADE3;
      z-index: 1;
      height: 0%;
    }

    .label {
      position: absolute;
	  font-family: Aardvark;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-transform: uppercase;
      pointer-events: none;
      font-size: 0.75em;
    }
	.paragraph {
		color: #040489;
      font-size: 1.3em;
	  font-family: ITC Zapf Chancery;
    }
	
	/* year msg end */
	
	
	/* font files */
	@font-face {
    font-family: 'Aardvark';
    src: url('fonts/Aardvark.ttf') format('ttf');
}

@font-face {
    font-family: 'ITC Zapf Chancery';
    src: url('fonts/chanc_.ttf') format('ttf');
}

/* Google Type Input Start*/

.input-container {
      position: relative;
      width: 300px;
      margin-bottom: 10px;
	  width: 100%;
    }

    .android-input {
      width: 100%;
      padding: 14px 12px 14px 40px; /* Left padding for icon */
      font-size: 16px;
      border: 1px solid #000;
      border-radius: 4px;
      outline: none;
      transition: border-color 0.3s;
    }

    .android-input:focus {
      border-color: #000;
    }

    .hint-label {
      position: absolute;
      left: 40px;
      top: 20px;
      color: #000;
      background-color: #fff;
      padding: 0 5px;
      font-size: 16px;
      pointer-events: none;
      transition: 0.2s ease all;
    }

    .android-input:focus + .hint-label,
    .android-input:not(:placeholder-shown) + .hint-label {
      top: 2px;
      left: 36px;
      font-size: 12px;
      color: #000;
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 12px;
      transform: translateY(-50%);
      color: #000;
    }

    .android-input:focus ~ .icon {
      color: #000;
    }
	
/* Google Type Input End */