@font-face {font-family:"Aston Script Bold";
  src:url("../fonts/Aston_Script.ttf") format("truetype");
  font-weight:normal;font-style:normal;}
body { font-family: Arial, sans-serif; background: #fdfdfb; margin: 0; padding: 0; }
 section, footer { padding: 40px 30px; text-align: center; border-bottom: 1px solid #eee; }
 /* Header */
 .header .content-wrapper {display: flex;justify-content: space-between; align-items: center;padding: 15px 0;background: #fff;border-bottom: 1px solid #ddd;position:relative;}
 .header .menu ul {list-style: none;display: flex;gap: 25px;}
 .header .menu ul li a {text-decoration: none;color: #000;font-weight: 600;transition: color 0.3s;outline: none;}
 .header .menu ul li a:hover {color: #f4c542;}
 .header .logo img {width:120px;}
 .top-bar p{text-align: center;color:#444;font-size: 14px;margin: 0;}
 .top-bar{background-color: #fdf6e3;padding: 15px 0;font-weight: 600;}
 .header .logo a{outline: none;}
 /* Banner section */
 .banner-sec{padding: 110px 40px 130px;text-align: center;border-bottom: 1px solid #eee;position: relative;}
 .banner-sec { background-image:url("../images/hero-banner.jpg");background-position: top;background-size: cover;background-repeat: no-repeat;}
 .banner-sec h1 { font-size: 60px; color: #f4c542; margin-bottom: 10px;font-family: Aston Script Bold;z-index: 1;position: relative;margin-top: 0;}
 .banner-sec p { font-size: 1.2em; color: #fff; z-index: 1;position: relative;}
 .cta { margin-top: 20px;z-index: 1;position: relative;}
 .cta button { padding: 15px 30px; margin: 5px; border: none; border-radius: 6px; font-size: 1em; cursor: pointer; }
 .primary { background: #f4c542; color: white; }
 .secondary { background: #a3d9c9; color: #333; }
 .steps { display: flex; gap: 25px; justify-content: center; flex-wrap: wrap; padding: 20px; }
 .step { flex: 1 1 260px; max-width: 320px; padding: 90px 20px;border-radius: 8px; box-shadow: 0 0 6px rgba(0,0,0,0.05);background-position: bottom;background-repeat: no-repeat;background-size: cover;position: relative;}
 .step h3 { color: #f4c542;position: relative;font-size: 20px;}
 .step p{position: relative;color: #fff;}
 .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
 .steps .step-webpage{background-image:url("../images/web-page.jpg");}
 .steps .step-qr{background-image:url("../images/qr.jpg");}
 .steps .step-gifts{background-image:url("../images/gift.jpg");}
 .step::before {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #00000061;content: "";z-index: 0;border-radius: 8px;}
/* ---------- Product Section ---------- */
.product-sec {padding: 40px 30px 60px;background-color: #f9f9f9;}
.product-sec .container{padding-left: 0;padding-right: 0;}
.product-sec .content-wrap {padding:20px;}
.product-sec h2 {text-align: center;font-size: 24px;font-weight: 600;margin-bottom: 40px;color: #000;}
.product-wrapper {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;}
.product-card {background: #fff;border-radius: 10px;box-shadow: 0 5px 15px rgba(0,0,0,0.08);overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;transition: transform 0.3s ease, box-shadow 0.3s ease;}
/* .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
} */
.product-sec .product-card img {width: 100%;height: 250px;object-fit: cover;object-position: center;}
.product-sec .product-card .product-title {font-size: 20px;font-weight: 600;color: #222;margin-bottom: 8px;margin-top: 0;}
.product-sec .product-card p {font-size: 14px;color: #666;margin: 0 0 15px;line-height: 1.5;}
.product-sec .price {font-size: 22px;font-weight: 700;color: #000;margin-bottom: 10px;}
.product-sec .remaining {font-size: 14px;color: #777;margin: 0 0 20px;}
/* ---------- Quantity + Button Row ---------- */
.product-sec .product-bottom {display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.product-sec .quantity {display: flex;align-items: center;gap: 6px;}
.product-sec .qty-btn {background: #eee;border: none;width: 30px;height: 30px;border-radius: 50px;font-size: 18px;cursor: pointer;transition: background 0.3s;}
.product-sec .qty-btn:hover {background: #ddd;}
.product-sec .quantity input {width: 45px;height: 32px;text-align: center;border: 0;border-radius: 6px;font-size: 14px;outline: none;}
.product-sec .quantity input::-webkit-outer-spin-button,
.product-sec .quantity input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.product-sec .quantity input[type=number] {-moz-appearance: textfield;}
/* ---------- Buttons ---------- */
.product-sec .gift-btn {
  flex: 1;
  text-align: center;
  border: none;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
  background-color: #f4c542;
  color: #fff;
}
/* Menu toggle */
.menu-toggle {display: none;flex-direction: column;justify-content: space-between;width: 35px;height: 20px;background: none;border: none;cursor: pointer;}
.menu-toggle span {display: block;width: 100%;height: 3px;background: #333;border-radius: 3px;transition: 0.3s ease;}
/* Footer */
footer { background: #fdf6e3; font-size: 0.9em; color: #666; }
/* Signup form page */
.signup-form-wrapper {padding: 60px 30px;background: #f9f9f9;}
.signup-form-wrapper .container {max-width: 500px;margin: 0 auto;padding:0;}
.signup-form-wrapper h2 {text-align: center;margin-bottom: 30px;font-size: 24px;font-weight: 600;margin-top: 0;}
.signup-form {background: #fff;border-radius: 10px;box-shadow: 0 5px 15px rgba(0,0,0,0.08);padding: 30px;}
.signup-form-wrapper .form-group {display: flex;flex-direction: column;margin-bottom: 20px;align-items: flex-start;}
.signup-form-wrapper .form-group label {margin-bottom: 8px;font-weight: 600;color: #222;}
.signup-form-wrapper .form-group input {padding: 12px;border: 1px solid #ccc;border-radius: 6px;font-size: 15px;outline: none;transition: border-color 0.3s ease;width: 100%;box-sizing: border-box;}
.signup-form-wrapper .form-group input:focus {border-color: #007bff;}
.submit-btn{width: 100%;background-color:#f4c542;color: #fff;padding: 12px;border: none;border-radius: 6px;font-size: 16px;font-weight: 600;cursor: pointer;}
.signup-form-wrapper .login-link {text-align: center;margin-top: 15px;font-size: 14px;color: #555;}
.signup-form-wrapper .login-link a {color: #007bff;text-decoration: none;}
.signup-form-wrapper .login-link a:hover {text-decoration: underline;}
.signup-form-wrapper label span{color: red;font-size: 16px;}
section.banner-sec::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00000061;
    content: "";
    z-index: 0;
}
/* loader */
.cust-loader-container-main{display:none;}
.cust-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000ab;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cust-loader-container .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }
 @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }    
/* Media queries */
@media only screen and (max-width:992px)
{
  .header .menu-toggle {display: flex;}
  .header .menu {position: absolute;top: 100%;right: 0;background: #fff;width: 100%;max-height: 0;overflow: hidden;transition: max-height 0.3s ease;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);z-index: 99;}
  .header .menu.active {max-height:max-content;}
  .header .menu ul {flex-direction: column;align-items: center;padding:0;gap: 0;margin: 0;}
  .header .menu ul li a {font-size: 16px;color: #333;}
  .header .menu.active ul li {border-bottom: 1px solid #eee;width: 100%;text-align: center;padding: 15px 10px;}
  /* Toggle animation */
  .menu-toggle.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
  .menu-toggle.active span:nth-child(2) {opacity: 0;}
  .menu-toggle.active span:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px);}
}
@media only screen and (max-width:767px)
{
  .banner-sec {padding: 50px 30px;}
  .banner-sec h1{margin-top: 0;}
  h2{margin-top: 10px;}
  .steps{padding-left: 0;padding-right: 0;}
  .signup-form-wrapper {padding: 40px 30px;}
  .banner-sec h1{font-size: 45px;}
}   
@media only screen and (max-width:480px)
{
  .banner-sec h1,.h1-title {font-size: 30px;}
  .banner-sec p {font-size:16px;}
  .product-sec .product-card .product-title {font-size: 18px;}
  .signup-form-wrapper .form-group label{font-size: 14px;}
  .signup-form {padding: 20px;}
} 

.small-note {
	text-align: left;
	font-size: 13px;
	color: #645d5d;
	padding-top: 8px;
}

.login-btn{
  margin-bottom:20px;
}