body { font-family: ‘Roboto’, Arial, sans-serif; color: #333333; margin: 0; padding: 0; background-color: #f4f4f4; } .email-container { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .logo { text-align: center; margin-bottom: 20px; } .logo img { max-width: 150px; height: auto; } .header { text-align: center; padding: 20px; background: linear-gradient(135deg, #0052cc, #00aaff); color: #ffffff; border-radius: 15px 15px 0 0; } .header h1 { font-size: 24px; margin: 0; font-weight: 700; } .content { margin-top: 20px; padding: 20px; background-color: #f9f9f9; border-radius: 10px; text-align: justify; /* Text justification applied here */ } .content h2 { font-size: 18px; color: #0052cc; margin-bottom: 10px; padding-left: 10px; font-weight: 600; } .content p { font-size: 16px; line-height: 1.6; color: #444444; margin-bottom: 15px; } .cta { margin-top: 30px; text-align: center; } .cta a { display: inline-block; padding: 12px 25px; font-size: 16px; font-weight: 600; color: #ffffff; background-color: #00aaff; text-decoration: none; border-radius: 25px; box-shadow: 0 6px 15px rgba(0, 170, 255, 0.5); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .cta a:hover { background-color: #0088cc; box-shadow: 0 8px 20px rgba(0, 136, 204, 0.6); } .divider { height: 2px; background-color: #eeeeee; margin: 20px 0; } .footer { margin-top: 30px; text-align: center; font-size: 12px; color: #ffffff; background: linear-gradient(135deg, #0052cc, #00aaff); /* Gradient for footer */ padding: 15px 0; border-radius: 0 0 15px 15px; } .social-links { margin-top: 10px; } .social-links a { margin: 0 5px; text-decoration: none; color: #ffffff; font-weight: 600; } @media only screen and (max-width: 600px) { .email-container { padding: 10px; } .header h1 { font-size: 20px; } .content h2 { font-size: 16px; } .cta a { font-size: 14px; padding: 8px 16px; } }