#transletter_page section{margin-block:0 2rem}
.author {overflow: auto; /* Ensure the container wraps around floated content */}
.author img {float: left;margin-right: 2rem;}
.author .h4 {display: block;font-size: 1.25rem;font-weight: bold;margin: 0 0 10px;}
.author p {margin: 0;}
.summary{margin:0;padding:0;}
.transLetter{margin-block:3rem;padding:0;}




/* Initial state of the articles (hidden) */
.transLetter {
opacity: 0;
transform: translateY(20px); /* Slightly lower the article */
transition: all 0.8s ease; /* Smooth transition */
}

/* When articles are visible */
.transLetter.visible {
opacity: 1;
transform: translateY(0); /* Move to original position */
}

.transLetter.visible:before {
display:none
}

.transTitle a{color:#231f20;font-size: clamp(1rem, 5vw, 2rem);text-decoration-skip-ink: none;text-underline-offset: 3px;}
.transLetter ul{display:flex;flex-direction:row;font-size: clamp(.8rem, 2vw, 1.2rem);}
.transLetter ul li{line-height:1.2;padding-inline:0 1rem;display: inline-flex;align-items: center;}
.transLetter ul li img{width:30px;border-radius:50%;margin-inline:0 .5rem}
.transLetter ul li:last-of-type{font-size: clamp(.8rem, 1vw, 1rem);}
.transLetter ul li:first-of-type:before {
font-size: 1.3rem;
font-family: '1stAuto';
display: block;
margin: 0 .5rem 0 0;
font-weight: 100;
content: '\e944';
}


.filter-container {margin-bottom: 20px;text-align: right;}

.filter-container select,
.filter-container input[type="text"] {
appearance: none;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px 15px;
font-size: 16px;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
margin:0;
width: 200px;
padding-left:3rem
}

/* Hover effect */
.filter-container select:hover,
.filter-container input[type="text"]:hover {
background-color: #e0e0e0;
}


.filter-container select:focus,
.filter-container input[type="text"]:focus {
border-color: #007BFF; /* Highlight border on focus */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Glow effect */
}


@media (max-width: 768px) {
.filter-container select,
.filter-container input[type="text"] {
width: 100%; /* Full-width for smaller screens */
margin-bottom: 10px; /* Space between inputs */
}
}


.highlight {
color:green;

}


#intro-paragraph {
transition: opacity 0.5s ease; /* Smooth fade-out effect */
}

#intro-paragraph.faded {
opacity: 0; /* Faded state */
pointer-events: none; /* Prevent interaction with the faded paragraph */
display:none;
}

.custom-dropdown {
position: relative;
display: inline-block;
width:100%;
}
.custom-dropdown::before {
display:none;
}

.custom-dropdown select, .custom-input input {
width: 100%;
padding: 10px;
padding-right: 40px;
appearance: none;
background-image: none;
line-height:2
}
.custom-dropdown select::placeholder, .custom-input input::placeholder {
    color: #231f20;
    padding-left:0;
}

.custom-dropdown::after {
content: '\e911'; /* Replace with your custom icon's code point */
font-family: '1stAuto'; /* Use your custom font */
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size:1.5rem;
color: #888;
pointer-events: none;
font-weight:600;
color:#231f20
}

.custom-dropdown.open::after {
transform: translateY(-50%) rotate(90deg); /* Rotate icon */
}

.custom-input {
    display: flex;
    align-items: start;
    gap: 5px;
    width: 100%;
}

.custom-input input {
    flex: 1; /* Make input take the remaining space */
    padding: 10px 10px 10px 40px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    background: url(/gMap/images/search.svg) no-repeat left 10px center;
    background-size: 20px;
}

.custom-input button {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-left: none;
    background-color: #231f20;
    color: #fff200;
    border-radius: 5px;
    cursor: pointer;
    height: 53px;
}

.custom-input button:hover {
    background-color: #ddd; /* Optional hover effect */
}

@media screen and (min-width:1200px){
.filter-container {display:flex;gap:1rem;}

}