body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
.gov-banner {
background-color: #25317b;
color: white;
padding: 4px 0;
}
.gov-banner-content {
margin: 0 300px;
padding: 0 20px;
max-width: 100%;
}
.gov-banner p {
margin: 0;
font-size: 10px;
line-height: 1.2;
}
.flag-icon {
height: 14px;
width: auto;
vertical-align: middle;
margin-right: 6px;
}
.gov-banner button {
background: none;
border: none;
color: #00ffff;
cursor: pointer;
font-weight: bold;
margin-left: 2px;
text-decoration: underline;
font-size: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
}
#toggleArrow {
font-size: 10px;
text-decoration: none;
transition: transform 0.3s ease;
}
#infoExtra {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding-top 0.5s ease;
padding-top: 0;
}
#infoExtra.show {
max-height: 500px;
padding-top: 20px;
}
.info-container {
background-color: #25317b;
padding: 0 15px 10px;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 10px;
}
.info-blocks {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
.info-block {
display: flex;
align-items: flex-start;
gap: 10px;
width: 48%;
}
.icon {
height: 35px;
width: 35px;
flex-shrink: 0;
}
.info-text {
color: white;
font-size: 10px;
line-height: 1.5;
}
.info-text strong {
display: block;
margin-bottom: 6px;
} @media (max-width: 768px) {
.gov-banner-content {
margin: 0 20px;
}
.info-block {
width: 100%;
}
.info-blocks {
flex-direction: column;
gap: 10px;
}
} @media (min-width: 769px) and (max-width: 1300px) {
.gov-banner-content {
margin: 0 40px;
}
.info-block {
width: 48%;
}
.info-blocks {
flex-direction: row;
justify-content: space-between;
gap: 20px;
}
}