:root{--bg:#f4f6fb;--card:#fff;--accent:#4a6cf7;--accent-2:#354bdc}
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
*{box-sizing:border-box}
body{background:var(--bg);max-width:1200px;margin:auto;padding:24px;font-family:Arial,Helvetica,sans-serif;color:#222;text-align:center}
.hero{position:relative;width:100%;height:320px;background-image:url("../images/AKYA7989.JPG");background-size:cover;background-position:center;border-radius:12px;margin-bottom:28px;box-shadow:0 8px 20px rgba(20,30,60,.08);background-repeat:no-repeat}
.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:40px;font-weight:700;text-shadow:0 3px 10px rgba(0,0,0,.6)}
.hero-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50}
.logo-fancy{font-family:'Great Vibes', cursive; color:#fff; font-size:56px; text-shadow:0 4px 18px rgba(0,0,0,.6); letter-spacing:1px}
.hero-right{position:absolute;top:14px;right:80px;z-index:60;color:#fff;font-weight:600}
.logo-small{font-family:'Great Vibes', cursive;color:#fff;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.section{margin:28px 0}
button{background:var(--accent);color:#fff;border:none;padding:12px 22px;margin:10px;font-size:16px;border-radius:6px;cursor:pointer;transition:background .18s}
button:hover{background:var(--accent-2)}
.menu-toggle{position:absolute;top:14px;right:14px;z-index:60;background:#000;color:#fff;border:none;padding:8px 10px;border-radius:8px;font-size:20px;box-shadow:0 4px 12px rgba(0,0,0,.35);cursor:pointer}
.mobile-nav{position:fixed;top:0;right:-320px;width:320px;max-width:85%;height:100%;background:#000;color:#fff;box-shadow:-18px 0 40px rgba(0,0,0,.45);transition:right .24s;padding:22px;z-index:55;display:flex;flex-direction:column;gap:12px}
.mobile-nav.open{right:0}
.mobile-nav a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px}
.mobile-nav a:hover{background:rgba(255,255,255,.06)}
.close-btn{position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;color:#fff;cursor:pointer}
.image-grid, .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;align-items:start;margin-top:18px}
.image-grid a, .gallery .item{position:relative;display:block;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(20,30,60,.06);border:1px solid #000;display:flex;flex-direction:column}
.image-grid img,.gallery .item img{width:100%;height:240px;object-fit:cover;display:block;border-radius:8px}

/* slightly smaller thumbnails on small screens */
@media (max-width:720px){
	.image-grid img,.gallery .item img{height:200px}
}
@media (max-width:420px){
	.image-grid img,.gallery .item img{height:160px}
}
.caption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.45);color:#fff;padding:6px 10px;border-radius:6px;font-size:13px}
.image-description{background:#fff;padding:12px;border:1px solid #ddd;border-top:none;border-radius:0 0 10px 10px;font-size:14px;flex-grow:1;display:flex;flex-direction:column;justify-content:center;position:relative}
.image-description p{margin:0;color:#333;font-weight:500;word-wrap:break-word}
.image-description .edit-btn{position:absolute;right:6px;top:6px;padding:4px 8px;font-size:11px;background:var(--accent);color:#fff;border:none;border-radius:4px;cursor:pointer;display:none}
.can-upload .image-description .edit-btn{display:block}
.image-description textarea{width:100%;min-height:60px;padding:8px;border:1px solid #ccc;border-radius:4px;font-family:Arial,sans-serif;font-size:13px;resize:vertical;display:none}
.image-description.editing textarea{display:block}
.image-description.editing p{display:none}
.image-description.editing .edit-btn{display:none}
.image-description .save-btn,.image-description .cancel-btn{padding:6px 12px;font-size:12px;margin-top:6px;cursor:pointer;border:none;border-radius:4px;display:none}
.image-description.editing .save-btn{display:inline-block;background:var(--accent);color:#fff}
.image-description.editing .cancel-btn{display:inline-block;background:#ccc;color:#333}
.intro{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.9));border-radius:10px;padding:18px 20px;box-shadow:0 6px 16px rgba(30,40,80,.05);text-align:left}
footer{background:#e9ecf5;margin-top:40px;padding:20px;border-radius:10px;font-size:15px}
footer a{color:var(--accent);text-decoration:none}
.page-description{background:#f9f9f9;border:1px solid #ddd;border-radius:10px;padding:20px;margin:30px 0;position:relative}
.page-description p{margin:0;color:#333;font-size:15px;line-height:1.6}
.page-description .edit-btn{position:absolute;right:16px;top:16px;padding:8px 14px;font-size:12px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;display:none}
.can-upload .page-description .edit-btn{display:block}
.page-description textarea{width:100%;min-height:140px;padding:12px;border:1px solid #ccc;border-radius:6px;font-family:Arial,sans-serif;font-size:14px;resize:vertical;display:none}
.page-description.editing textarea{display:block}
.page-description.editing p{display:none}
.page-description.editing .edit-btn{display:none}
.page-description .save-btn,.page-description .cancel-btn{padding:8px 16px;font-size:13px;margin-top:10px;margin-right:6px;cursor:pointer;border:none;border-radius:6px;display:none}
.page-description.editing .save-btn{display:inline-block;background:var(--accent);color:#fff}
.page-description.editing .cancel-btn{display:inline-block;background:#ccc;color:#333}
.upload-wrap{position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,.9);padding:6px;border-radius:8px;display:none}
.upload-btn{background:var(--accent);color:#fff;border:none;padding:6px 10px;font-size:13px;border-radius:6px;cursor:pointer}
.upload-btn[disabled]{opacity:.6;cursor:default}
.can-upload .upload-wrap{display:block}
/* Home page button row */
.home-nav{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding:0;margin:0 auto;max-width:100%;width:100%}
.home-nav button{white-space:nowrap}
/* smaller buttons for the home nav */
.home-nav button{padding:8px 12px;font-size:12px;border-radius:6px;background:var(--accent);color:#fff;border:none;margin:6px 4px}
.home-nav button:hover{background:var(--accent-2)}
/* small helpers */
@media(max-width:420px){.hero-text{font-size:26px}.image-grid,.gallery{gap:14px}}
/* Video list styles */
.video-section{margin-top:34px}
.video-header{display:flex;justify-content:space-between;align-items:center}
.video-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:16px}
.video-card{background:var(--card);border-radius:8px;overflow:hidden;border:1px solid #000;box-shadow:0 6px 18px rgba(0,0,0,.06);display:flex;flex-direction:column}
.video-thumb{width:100%;height:0;padding-bottom:56.25%;background-size:cover;background-position:center}
.video-info{padding:12px;text-align:left}
.video-title{font-weight:700;margin:0 0 6px 0}
.video-desc{font-size:13px;color:#444;margin:0 0 8px}
.video-actions{display:flex;gap:8px}
.video-actions button{padding:6px 8px;font-size:13px}
.video-add{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:8px 12px;border-radius:6px;cursor:pointer}

/* Login Modal */
.login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-modal-content {
  background: white;
  border-radius: 10px;
  padding: 30px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.login-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
}

.login-modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #222;
}

.login-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-modal-close:hover {
  color: #000;
}

#loginForm input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

#loginForm button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: #000;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

#loginForm button:hover {
  background: #333;
}

#loginError {
  margin-top: 10px;
  font-size: 13px;
}

#loginError p {
  margin: 0;
}