@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500&display=swap');

.lcfht-wrap {
    position: relative;
    width: 100%;
    min-height: 520px; 
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 60px 40px;
    font-family: 'Inter', sans-serif;
}
.lcfht-overlay {
    position: absolute;
    inset: 0; 
    z-index: 0;
}
.lcfht-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* White box */
.lcfht-box {
    background: #fff;
    border-radius: 6px;
    padding: 26px 56px 20px;
    max-width: 660px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}
.lcfht-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: #111;
    margin: 0 0 24px;
    line-height: 1.2;
}

/* Carousel */
.lcfht-carousel-wrap {
    position: relative;
}
.lcfht-slide { display: none; animation: lcfht-fadein 0.4s ease; }
.lcfht-slide.active { display: block; }
@keyframes lcfht-fadein {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Volunteer */
.lcfht-volunteer { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.lcfht-volunteer img { width:118px; height:56px; border-radius:50%; object-fit:cover; border:2px solid #106E44; flex-shrink:0; }
.lcfht-vol-name { font-size:13px; font-weight:600; color:#106E44; }

.lcfht-text   { font-size:14px; color:#444; line-height:1.8; margin:0 0 10px; }
.lcfht-author { font-size:13px; font-weight:500; color:#106E44; margin:0 0 6px; font-style:italic; }

/* Read More / Less */
.lcfht-readmore-btn {
    display: inline-block;
    margin-top: 6px;
    background: none;
    border: none;
    color: #106E44;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.lcfht-readmore-btn:hover { color: #0a5233; }

/* Arrows — hidden by default, show on box hover */
.lcfht-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #106E44;
    background: #fff;
    color: #106E44;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, background 0.2s;
}
.lcfht-arrow svg { width:16px; height:16px; stroke:#106E44; transition: stroke 0.2s; }

/* Show arrows when hovering the white box */
.lcfht-box:hover .lcfht-arrow {
    opacity: 1;
    pointer-events: auto;
}
.lcfht-arrow:hover { background: #106E44; }
.lcfht-arrow:hover svg { stroke: #fff; }

.lcfht-prev { left: -45px; }
.lcfht-next { right: -40px; }

/* Dots */
.lcfht-dots { display:flex; justify-content:center; gap:8px; margin:20px 0 24px; }
.lcfht-dot {
    width:8px; height:8px; border-radius:50%;
    background:#ccc; border:none; cursor:pointer; padding:0;
    transition: all 0.3s;
}
.lcfht-dot.active { background:#106E44; width:24px; border-radius:4px; }

/* CTA Button */
.lcfht-btn {
    display: inline-block;
    background: #106E44;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 13px 28px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.2s;
}
.lcfht-btn:hover { background: #0a5233; color: #fff; }

/* Responsive */
@media (max-width: 768px) {
    .lcfht-wrap { padding:40px 20px; min-height:400px; align-items:flex-start; }
    .lcfht-box  { padding:28px 24px 24px; max-width:100%; }
    .lcfht-arrow { opacity:1; pointer-events:auto; }
    .lcfht-prev { left:-10px; }
    .lcfht-next { right:-10px; }
}
@media (max-width: 480px) {
    .lcfht-wrap { padding:30px 16px; }
    .lcfht-box  { padding:22px 18px 20px; }
    .lcfht-arrow { width:30px; height:30px; }
    .lcfht-arrow svg { width:13px; height:13px; }
}