@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; }

body, html { height: 100%; background-color: #000; color: #fff; }

.hero { background-image: url("/assets/images/hero-bw.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; width: 100%; position: relative; }

.overlay { background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; height: 100%; padding: 3rem 2rem; text-align: center; flex-direction: column; }

.main-title { max-width: 100%; word-break: break-word; font-size: 3.2rem; font-weight: 900; line-height: 1.3; text-transform: uppercase; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); animation: fadeIn 0.8s ease-out both; }

.highlight { color: #f9c000; display: block; font-size: 3.8rem; }

.subtitle { display: block; font-size: 2rem; font-weight: 400; margin-top: 1rem; color: #fff; }

@keyframes fadeIn { from { opacity: 0;
    transform: translateY(10px); }
  to { opacity: 1;
    transform: translateY(0); } }

/* Media Queries */
@media (min-width: 576px) { .main-title { font-size: 4rem; } .highlight { font-size: 4.5rem; } .subtitle { font-size: 2.5rem; } }

@media (min-width: 768px) { .main-title { font-size: 5.5rem; } .highlight { font-size: 6rem; } .subtitle { font-size: 3.5rem; } }

.user-initials-button { width: 40px; height: 40px; border-radius: 50%; color: #303030; display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer; transition: opacity 0.3s; text-decoration: none; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; }

.user-initials-button:hover { opacity: 0.6; }

.action-button { display: inline-flex; align-items: center; gap: 8px; background-color: #ffffff; color: #303030; border-radius: 16px; padding: 10px 16px; font-weight: 600; font-size: 16px; text-decoration: none; height: 60px; width: 192px; transition: background-color 0.2s; line-height: 26px; font-weight: 600; }

.action-button:hover { background-color: #e2e2e2; }

.action-button__icon { width: 40px; height: 40px; display: inline-block; }

.action-button__icon img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 768px) { .action-button { width: 33%; font-size: 14px; display: flex; flex-direction: column; height: auto; text-align: center; line-height: 22px; padding: 16px 8px; } }

.savings-widget { display: block; border-radius: 16px; padding: 16px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); text-decoration: none; color: #303030; transition: box-shadow 0.2s ease; }

@media (max-width: 768px) { .savings-widget-content { display: flex; justify-content: space-between; align-items: center; } }

.savings-widget-content.flex { display: flex; align-items: center; justify-content: space-between; min-height: 55px; }

.savings-widget-content.flex .savings-widget-title { margin-bottom: 0; }

.savings-widget:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }

.savings-widget-title { display: flex; justify-content: space-between; margin-bottom: 8px; }

@media (max-width: 768px) { .savings-widget-title { margin-bottom: 0; } }

.savings-widget__label { display: block; color: #303030; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; }

.savings-widget-cta { background-color: #c5a380; padding: 8px 16px; border-radius: 25px; display: inline-block; line-height: 20px; font-size: 14px; font-style: normal; min-width: 160px; font-weight: 600; text-align: center; letter-spacing: 2px; text-transform: uppercase; }

.savings-widget__amount { font-size: 16px; font-weight: 600; display: flex; align-items: center; }

.savings-widget__amount .arrow-icon { margin-left: 6px; font-size: 20px; }

.savings-widget-details { display: flex; flex-direction: column; gap: 8px; }

.savings-widget-details .balance { display: flex; flex-direction: column; }

.savings-widget-details .balance-label { font-size: 14px; font-weight: 300; line-height: 22px; color: #505050; }

@media (max-width: 768px) { .savings-widget-details .balance-label { display: none; } }

.savings-widget-details .balance-value-wrap { display: flex; align-items: center; gap: 8px; }

.savings-widget-details .balance-value-wrap svg { display: none; }

@media (max-width: 768px) { .savings-widget-details .balance-value-wrap svg { display: block; } }

.savings-widget-details .balance-value { font-size: 24px; font-weight: 600; line-height: 36px; }

.savings-widget-details .net-savings { background: #f6f6f6; padding: 16px; border-radius: 10px; display: flex; justify-content: space-between; }

@media (max-width: 768px) { .savings-widget-details .net-savings { display: none; } }

.savings-widget-details .net-savings-label { font-size: 16px; font-weight: 600; line-height: 26px; }

.savings-widget-details .net-savings-value { color: #067f58; font-size: 18px; font-weight: 600; line-height: 28px; }

.savings-widget.mobile { padding: 12px 16px; }

.savings-widget.mobile .savings-widget__amount { justify-content: space-between; }

.savings-widget.closed .savings-widget-cta { background-color: #c89a6c; }

.savings-widget .view-more { font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; text-decoration: underline; }

@media (max-width: 768px) { .savings-widget .view-more { display: none; } }

.funding-widget { display: flex; background: #1f3b36; color: #fff; border-radius: 14px; padding: 16px; min-width: 420px; text-decoration: none; max-width: 400px; flex-direction: column; background: var(--Gradients-Green-gradient, linear-gradient(135deg, #335456 0.97%, #283835 97.43%)); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.08); }

@media (max-width: 768px) { .funding-widget { width: 100%; min-width: auto; } }

.funding-widget-content { display: flex; justify-content: space-between; align-items: center; }

.funding-widget-title { font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; margin-bottom: 4px; }

.funding-widget-description { font-size: 14px; line-height: 22px; color: #ffffff; font-weight: 300; }

.funding-widget-button { height: 38px; width: 100%; border-radius: 25px; margin-top: 16px; border: 1px solid #c5a380; text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 2px; text-decoration: none; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; }

body, html { height: 100%; background-color: #000; color: #fff; }

body { font-family: "Public Sans", sans-serif; }

/*# sourceMappingURL=styles.css.map */