/* Base styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

.email-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
}

.header {
background-color: #fff;
color: #333333;
padding: 20px;
text-align: center;
border-radius: 8px 8px 0 0;
}

.header img {
height: 50px;
}

.content {
padding: 20px;
color: #333333;
}

.content h1 {
color: #000;
}

.content p {
line-height: 1.6;
}

.button {
display: inline-block;
padding: 10px 20px;
margin: 20px 0;
background-color: #FF5733;
color: #ffffff;
text-decoration: none;
border-radius: 30px;
transition: background-color 0.3s ease;
}

.button:hover {
background-color: #e5533d;
}

.otp {
font-size: 24px;
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
border-radius: 4px;
margin: 20px 0;
}

.footer {
padding: 20px;
text-align: center;
font-size: 12px;
color: #666666;
border-top: 1px solid #e0e0e0;
border-radius: 0 0 8px 8px;
}

.footer .social-icons a {
text-decoration: none;
margin: 0 5px;
}

.footer .social-icons img {
height: 24px;
}

.footer-links {
margin: 10px 0;
}

.footer-links a {
color: #1a73e8;
text-decoration: none;
margin: 0 10px;
}

.footer-links a:hover {
text-decoration: underline;
}




/* Responsive styles */
@media screen and (max-width: 600px) {
.content h1 {
    font-size: 20px;
}

.content p,
.content ul {
    font-size: 14px;
}

.button {
    width: 100%;
    text-align: center;
    padding: 12px 0;
}

.footer-links a {
    display: block;
    margin: 5px 0;
}
}