body { background: #F4F1EB; color: #000; margin: 0; padding: 0; font-size: 16px; font-family: "Helvetica Neue", Helvetica, serif; } .header { display: flex; width: 100%; margin: 0 auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* Subtle shadow */ 0 6px 20px rgba(0, 0, 0, 0.1); /* Deeper shadow */ border: 1px solid rgba(0, 0, 0, 0.05); /* Light border */ background: #fff; } .logo { width: 30px; margin: 8px 20px; align-self: center; } .title { flex: 1; font-family: "Helvetica Neue", "Helvetica", serif; margin: 0; align-self: center; } .title-link { font-size: 1.75rem; color: #000; text-decoration: none; } .title-link:hover { color: #666; } .login-container { align-self: center; margin-right: 20px } .content { display: flex; margin: 0; padding: 60px 0 40px; flex-direction: column; } .difference { margin: 0 auto 8px; padding: 0; font-size: 2.5rem; font-family: "Helvetica Neue", Helvetica, serif; color: #457B9D; text-align: center; } .product-description { margin: 0 auto; text-align: center; font-size: 1.25rem; font-family: "Helvetica Neue", Helvetica, serif; width: 50%; line-height: 2rem; color: #6C757D; } .cta-button { display: block; /* Change to block for vertical alignment */ margin: 60px auto 0px; padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-size: 1.5rem; font-family: "Helvetica Neue", Helvetica, serif; width: 15%; text-align: center; font-weight: bold; background-color: #A3C1AD; } .cta-button:hover { background-color: #356081; transform: scale(1.05); transition: all 0.2s ease-in-out; } .primary-btn { background-color: #457B9D; /* Muted blue */ color: #FFFFFF; } .primary-btn:hover { background-color: #356081; } .secondary-button { display: inline-block; padding: 10px 20px; border: none; border-radius: 5px; background-color: #a3c1ad; color: white; font-size: 1em; cursor: pointer; text-decoration: none; } .danger-btn { background-color: #E57373; /* Light muted red */ color: #FFFFFF; } .danger-btn:hover { background-color: #D32F2F; } .btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; } .how-it-works-button:hover { text-decoration: underline; } .how-it-works-button { display: block; /* Change to block for vertical alignment */ margin: 8px auto; border-radius: 5px; color: #457B9D; text-decoration: none; font-size: 1.15rem; font-family: "Helvetica Neue", Helvetica, serif; width: 15%; text-align: center; } .how-it-works-container { display: flex; flex-direction: row; justify-content: space-between; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; border-top: 1px solid #ccc; } .become-a-supporter-container { display: flex; flex-direction: row; justify-content: space-between; max-width: 1200px; margin: 60px auto; flex-wrap: wrap; border-top: 1px solid #ccc; } .headline { width: 100%; text-align: center; font-size: 2em; color: #457b9d; /* Muted blue color */ margin-bottom: 20px; font-family: "Helvetica Neue", Helvetica, serif; } .column { justify-content: space-between; flex: 1; background-color: #ffffff; padding: 20px; margin: 10px; border-radius: 8px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); font-family: "Helvetica Neue", Helvetica, serif; flex-basis: 28% ; } .column h3 { font-size: 1.5em; color: #91A4B1; margin-bottom: 10px; text-align: center; } .column p { font-size: 1.15em; color: #495057; line-height: 1.6; } .footer { background-color: #457B9D; /* Muted blue */ color: #FFFFFF; /* White text */ text-align: center; padding: 15px 10px; } .footer a { color: #A3C1AD; /* Muted green */ text-decoration: none; font-weight: bold; }