* {box-sizing: border-box;}
body {margin: 0;font-family: Inter, system-ui, sans-serif;padding-top: 80px;}
a{text-decoration: none;}

:root {
  --blue:#2563eb;
  --orange: #ff7a33;
  --yellow:#FFBF00;
  /* --green: #4ade80; */
  --green: #00ccc1;
  --soft-green:#00ccc1;
  --white:#ffffff;
  --black:#0f172a;

  --text: #475569;
}

/* =============================== TYPOGRAPHY =============================== */

.mt-40{margin-top:40px}
.mt-30{margin-top:30px}
.mt-20{margin-top:20px}
.mt-10{margin-top:10px}
.mt-6{margin-top:6px}
.mt-0{margin-top:0px}

.mb-40{margin-bottom:40px}
.mb-30{margin-bottom:30px}
.mb-20{margin-bottom:20px}
.mb-10{margin-bottom:10px}
.mb-6{margin-bottom:6px}
.mb-0{margin-bottom:0px}

/* =============================== TYPOGRAPHY =============================== */

.big-heading {font-size: 60px;line-height: 1.1;font-weight: 800;color: var(--black);text-transform: capitalize;}
.heading {font-size: 36px;font-weight: 700;color: var(--black);text-transform: capitalize;}
.mid-heading {font-size: 20px;font-weight: 600;line-height: 1.1;}
.small-heading {font-size: 16px;font-weight: 600;}

.big-paragraph {font-size: 17px;line-height: 1.7;}
.mid-paragraph {font-size: 16px;color: var(--text);line-height: 1.5;}
.paragraph {font-size: 14px;color: var(--text);margin-bottom: 0;}
.soft-text {font-size: 14px;color: var(--text);}
.tiny-text {font-size: 10px;color: var(--green);}

.section-badge {display: inline-block;background: rgb(251 202 55 / 10%);color: var(--yellow);padding: 6px 14px;border-radius: 999px;font-size: 13px;font-weight: 600;}
.new-badge {position: absolute;top: 22px;right: 22px;background: var(--black);color: var(--white);font-size: 11px;
  padding: 6px 10px;border-radius: 999px;font-weight: 600;}
.cta-link {font-size: 15px;color: var(--text);}
.cta-link a {color: var(--black);font-weight: 600;text-decoration: underline;}

/* =============================== BUTTON =============================== */

.fill-btn {background: var(--yellow);color: var(--white);text-decoration: none;padding: 0px 20px;border-radius: 999px;font-size: 14px;
  font-weight: 600;height: 40px;line-height: 40px;border: 1px solid var(--yellow);display: inline-flex;white-space: nowrap;}
.outline-btn {background: transparent;color: var(--black);text-decoration: none;padding: 0px 20px;border-radius: 999px;font-size: 14px;
  font-weight: 600;height: 40px;line-height: 40px;border: 1px solid var(--black);display: inline-flex;white-space: nowrap;}
.soft-icon {display: inline-flex;width: 28px;height: 28px;align-items: center;justify-content: center;background: var(--white);
    color: var(--yellow);border-radius: 50%;font-size: 14px;}
.feature-icon {width: 44px;height: 44px;background: var(--white);color: var(--yellow);border-radius: 10px;display: flex;align-items: center;
  justify-content: center;font-size: 20px;flex-shrink: 0;}
.underline {display: inline-block;width: 60px;height: 3px;background: var(--yellow);border-radius: 10px;margin: 10px 0 20px;}

/* =============================== COLOR =============================== */
.yellow {color:var(--yellow);}
.green {color:var(--green);}
.white{color:var(--white);}

/* =============================== SECTION =============================== */

.section{padding: 70px 0;}
.mini-section{padding: 50px 0;}
.btn-group {display: flex;align-items: center;gap: 16px;}
.flex {display: flex;align-items: center;gap: 10px;}
.flex-between{display: flex; align-items: end;justify-content: space-between;}

.w-50{width:50%;}

/* =============================== HEADER =============================== */

.main-header {position: fixed;top: 0;width: 100%;background:var(--white);z-index: 1000;height: 80px;transition: box-shadow 0.3s ease;}
.main-header.scrolled {box-shadow: 0 6px 24px rgba(0,0,0,0.08);}
.logo {font-size: 28px;font-weight: 700;color: var(--yellow);}

.header-nav {display: flex;align-items: center;justify-content: center;gap: 24px;height: 80px;}
.nav-item {position: relative;}
.nav-item > a {font-size: 15px;font-weight: 500;color: var(--text);text-decoration: none;display: flex;align-items: center;gap: 4px;line-height: 80px;}
.dropdown {position: absolute;top: 80px;left: 0;background: var(--white);min-width: 180px;border-radius: 12px;padding: 10px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);opacity: 0;transform: translateY(10px);pointer-events: none;transition: 0.25s ease;}

.dropdown a {display: block;padding: 10px 18px;font-size: 14px;color: var(--text);text-decoration: none;}
.dropdown a:hover {background: #f3f4f6;}
.nav-item:hover .dropdown {opacity: 1;transform: translateY(0);pointer-events: auto;}

.header-right {display: flex;justify-content: end;align-items: center;gap: 16px;height: 80px;}
.header-icon {position: relative;font-size: 20px;cursor: pointer;color: var(--text);}
.cart-badge {position: absolute;top: -6px;right: -8px;background:var(--green);color: #fff;font-size: 11px;padding: 2px 6px;border-radius: 999px;}
.header-avatar {width: 40px;height: 40px;line-height: 36px;background: #ddd;border-radius: 50%;border: 4px solid var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;text-align: center;}


/* =============================== FOOTER =============================== */

.footer {background: radial-gradient(circle at top, #fff3cf 0% 0%, var(--yellow) 60%);color: var(--white);padding: 90px 0 0 0px;position: relative;}
.privacy {
  font-size: 14px;
  color: #aaa;
  display: block;
  margin-bottom: 40px;
}

.footer-card h4 {
  margin-bottom: 20px;
}
.footer-card p,
.footer-card a {
  color: #aaa;
  font-size: 15px;
  text-decoration: none;
}

.footer-card ul {
  list-style: none;
  padding: 0;
}

.footer-card li {
  margin-bottom: 10px;
}

/* BOTTOM */
.footer-bottom {display: flex;justify-content: space-between;align-items: center;font-size: 14px;color: #777;padding: 10px 0 20px 0;}
.legal-menu a {margin-left: 8px;color: #fff;font-size: 13px;text-decoration: none;}