body { margin:0; font-family: 'Inter', sans-serif; background: #f0f5f5; color: #333; }

.topnav {
    display:flex; align-items:center; background:#fff; padding:10px 20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08); position:sticky; top:0; z-index:999;
}
.topnav img { height:70px; }
.menu { margin-left:auto; display:flex; align-items:center; gap:12px; }
.menu a { color:#006D56; text-decoration:none; padding:10px 16px; font-size:18px; border-radius:6px; transition: all 0.2s ease; }
.menu a:hover, .menu a.active { background:#04AA6D; color:white; }

.upload-link img { width:24px; height:24px; margin-right:5px; vertical-align:middle; }

.main-content { display:flex; height: calc(100vh - 70px); }
.text-container {
    width:45%; padding:40px; display:flex; flex-direction:column; justify-content:center;
    background:#e6f2f0; color:#004d40; box-sizing:border-box;
}
.text-container h2 { font-size:32px; margin-bottom:20px; line-height:1.4; }
.text-container p { font-size:18px; margin-bottom:30px; line-height:1.6; }
.text-container button {
    width:fit-content; padding:12px 25px; font-size:18px; color:white;
    background:#006D56; border:none; border-radius:8px; cursor:pointer; transition: all 0.3s ease;
}
.text-container button:hover { background:#004d40; transform: scale(1.03); }

.carousel-container {
    width:55%; padding:20px; background:#f4f4f4; position:relative; display:flex; justify-content:center; align-items:center;
}
.carousel {
    width:100%; height:100%; position:relative; overflow:hidden; border-radius:12px;
}
.carousel-img {
    width:100%; height:100%; object-fit:contain; position:absolute; opacity:0;
    transition: opacity 1s ease-in-out;
}
.carousel-img.active { opacity:1; }
.carousel-indicators {
    position:absolute; bottom:15px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px;
}
.carousel-indicators span {
    width:12px; height:12px; border-radius:50%; background:#ccc; cursor:pointer; transition: all 0.3s;
}
.carousel-indicators span.active { background:#006D56; }

.modal-backdrop {
    position: fixed; inset:0; background:rgba(0,0,0,0.4);
    display:none; justify-content:center; align-items:center; z-index:1000;
}
.modal {
    background:#fff; border-radius:12px; padding:20px; width:340px; box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.modal h3 { margin:0 0 12px 0; color:#006D56; }
.modal select, .modal button, .modal input { width:100%; padding:10px; margin:8px 0; border-radius:8px; border:1px solid #ccc; box-sizing:border-box; }
.modal .actions { display:flex; gap:8px; justify-content:flex-end; }
.modal .actions button { width:auto; padding:10px 16px; }

footer { background:#006D56; color:white; text-align:center; padding:4px 0; position:fixed; bottom:0; width:100%; font-size:11px; }

@media (max-width:900px) {
    .main-content { flex-direction:column; height:auto; }
    .text-container, .carousel-container { width:100%; height:auto; padding:25px; }
}