body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}

.parent {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
min-height: 100vh;
background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.main-content {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 30px;
max-width: 800px;
width: 100%;
overflow-wrap: break-word;
}

img {
height: 60px;
width:60px;
position: relative;
left:50%;
transform: translate(-50%);
margin: 0;
}

h1, h2, h3 {
margin: 10px 0;
color: #1e3c72;
}

h1 {
font-size: 2rem;
text-align: center;
border-bottom: 2px solid #2a5298;
padding-bottom: 10px;
}

h2 {
font-size: 1.5rem;
border-left: 4px solid #2a5298;
padding-left: 10px;
}

h3 {
font-size: 1.2rem;
color: #2a5298;
}

p {
margin: 10px 0;
text-align: justify;
}

ul {
padding-left: 20px;
}

ul li {
margin: 8px 0;
list-style: disc;
}

a {
color: #1e90ff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* Improved Mobile Styling */
@media screen and (max-width: 768px) {
.main-content {
border-radius: 5px;
box-shadow: none;
}

h1 {
font-size: 1.8rem;
padding-bottom: 8px;
}

h2 {
font-size: 1.3rem;
border-left: 3px solid #2a5298;
padding-left: 8px;
}

h3 {
font-size: 1.1rem;
}

p, ul li {
font-size: 1rem;
}

ul {
padding-left: 15px;
}
}

/* Further Optimized for Smaller Phones */
@media screen and (max-width: 480px) {

h1 {
font-size: 1.5rem;
}

h2 {
font-size: 1.2rem;
padding-left: 5px;
}

h3 {
font-size: 1rem;
}

p, ul li {
font-size: 0.95rem;
}

ul {
padding-left: 10px;
}
}