body {
font-family: "Poppins", sans-serif;
background-color: #fff;
color: #1e1e1e;
text-align: center;
margin: 0;
padding: 0;
}
h2 {
font-size: 1.8rem;
color: #1e1e1e;
font-weight: 800;
margin: 40px 0 20px;
position: relative;
text-align: center;
}
h2::after {
content: "";
display: block;
width: 100px;
height: 2px;
background-color: #f5c518;
margin: 10px auto 0;
border-radius: 2px;
}  .docs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 0 auto 40px;
justify-items: center;
} .doc-btn {
background: #1e1e1e; color: #ffd071; padding: 14px 18px;
border-radius: 12px;
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-weight: 700;
text-decoration: none;
text-align: center;
box-shadow: 0 6px 16px rgba(0,0,0,0.30);
transition: transform .20s ease, box-shadow .20s ease;
border: none;
} @media (pointer: fine) {
.doc-btn:hover {
transform: translateY(-6px);
box-shadow: 0 12px 26px rgba(0,0,0,0.40);
background: #111; color: #ffd071;
}
} .doc-btn .icon-box {
display: block;
}
.doc-btn .icon-box svg { 
stroke: #ffd071; width: 28px;
height: 28px;
display: block;
} .info-wrapper {
max-width: 1100px;
margin: 40px auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
} .info-box {
background: #1e1e1e;
color: #ffffff;
padding: 26px 28px; border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
text-align: center;
min-height: 150px; display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 2px; border: none;
} .info-box .info-icon svg {
stroke: #ffd071;
width: 24px;
height: 24px;
margin: 0 auto -15px; display: block;
} .info-box h2 {
color: #ffd071;
font-size: 22px;
font-weight: 800;
margin: 0 0 2px 0; } .info-box h2::after {
content: "";
display: block;
width: 55px;
height: 3px;
background: #ffd071;
margin: 4px auto 0; border-radius: 3px;
} .info-box p,
.info-box ul,
.info-box li {
color: #f3f1ef;
margin: 2px 0; line-height: 1.25; font-size: 15px;
} .info-box ul { list-style: none; padding: 0; margin-top: 6px; }
.info-box ul li { margin: 3px 0; } @media (max-width: 780px) {
.info-wrapper {
grid-template-columns: 1fr;
gap: 16px;
margin: 24px auto;
}
}