:root{
  --main-color:#1e6fb8;
  --accent:#2563eb;
  --muted:#6b7280;
  --radius:10px;
  --max-width:1100px;
  font-family:'Open Sans', sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{height:100%;margin:0;display:flex;flex-direction: column;;color:#111;line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased; overflow-y:scroll;min-height: 100vh;}
main {flex: 1;padding: 20px;}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.container-footer{max-width:var(--max-width);margin:0 auto;padding-top: 0px; padding-bottom: 0px; display: flex;}
.header-inner{display:flex;align-items:center;gap:1rem}
.brand{margin:0;font-size:1.25rem;font-weight:700;color:var(--main-color)}

/* NAV */
.nav{display:flex;gap:1rem;margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:var(--muted);padding:0.5rem;border-radius:8px}
.nav div{text-decoration:none;color:var(--muted);padding:0.5rem;border-radius:8px}
.nav a:focus,.nav a:hover{background:#f3f4f6;color:var(--main-color)}
.nav div:focus,.nav div:hover{background:#f3f4f6;color:var(--main-color)}
.nav .active{border-bottom: 2px solid #1e6fb8; border-radius: 0px;border-top: 2px solid #1e6fb8;}

/* Mobile: hide nav by default and show via .open */
.nav-toggle{background:transparent;border:0;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0.5rem;border-radius:6px;margin-left:auto}
.hamburger{display:block;width:22px;height:2px;background:var(--main-color);position:relative;border-radius:2px}
.hamburger:before,.hamburger:after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--main-color);border-radius:2px}
.hamburger:before{top:-7px}
.hamburger:after{top:7px}

/* Hide nav on small screens */
@media(max-width:639px){
  body{font-size:0.75rem;}
  .nav{position:fixed;top:64px;right:0;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.08);flex-direction:column;padding:1rem 1.25rem;border-radius:8px;width:220px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  .nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav a{display:block;padding:.6rem 0;color:#111}
  .nav-toggle{display:flex}
  .container-footer{max-width:var(--max-width);margin:0 auto;padding-top: 0px; padding-bottom: 0px; display: block;}
  .footerleft {
  width: 100% !important;
  text-align: left;
}
.footerright {
  width: 100% !important; 
  text-align: right;
}
}

/* When nav is open, prevent body scroll on small devices */
body.nav-open{overflow:hidden}

/* Hero */
.hero{padding:.5rem 0;background:linear-gradient(180deg,#f8fafc,#fff)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.placeholder{height:180px;width:100%;border-radius:8px;background:linear-gradient(90deg,#e6eef9,#ffffff);display:flex;align-items:center;justify-content:center;color:var(--main-color);font-weight:600}

/* Cards */
.section{padding:2rem 0}
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.card{padding:1rem;border:1px solid #eee;border-radius:var(--radius);background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04)}

/* Contact form */
.contact-form{display:grid;gap:0.8rem;margin-top:1rem}
.contact-form .row{display:grid;grid-template-columns:1fr;gap:0.8rem}
.contact-form .col input{width:100%}
.contact-form input,.contact-form textarea{padding:0.6rem;border:1px solid #ccc;border-radius:8px;font:inherit}
.contact-form button{border:0;cursor:pointer;background:var(--main-color);color:#fff;padding:.6rem 1rem;border-radius:8px}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:1rem 0;text-align:center;font-size:x-small;color:var(--muted)}
.site-footer-v2{padding-top: 0px; padding-bottom: 0px; width: 100%; background-color: #fff; font-size: x-small;}
.footerleft {
  width: 50%; 
  text-align: left;
}
.footerright {
  width: 50%; 
  text-align: right;
}
/* Medium screens */
@media(min-width:640px){
  .nav{display:flex;position:static;background:transparent;box-shadow:none;transform:none;opacity:1;pointer-events:auto;width:auto;padding:0}
  .nav-toggle{display:none}
  .hero-inner{grid-template-columns:1fr 420px;gap:2rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .contact-form .row{grid-template-columns:1fr 1fr}
  .placeholder{height:220px}
}

/* Large screens */
@media(min-width:980px){
  .brand{font-size:1.5rem}
  .container{padding:0.5rem}
  .hero{padding:0.5rem 0}
}
ul, ol {
  list-style-position: outside;
  list-style-type: disc; /* circle or square are also fine */
  margin: 1em 0 1em 1.5em;
  padding-left: 1.5em;
}
.features {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 20px;
}
.features li {
  margin-bottom: 8px;
  text-align: justify;
}
/* --- TEAM PAGE ROW STYLE --- */
.team-section {
  padding: 40px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.team-section h2 {
  text-align: center;
  color: #004aad;
  margin-bottom: 40px;
}

/* Each member in a row */
.team-row {
  display: flex;
  align-items: center;
  gap: 25px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
  padding: 20px;
  transition: transform 0.2s ease;
}

.team-row:hover {
  transform: translateY(-5px);
}

.team-row img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.team-info h3 {
  margin: 0 0 5px;
}

.team-info .role {
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
}

/* Responsive layout for mobile */
@media (max-width: 700px) {
  .team-row {
    flex-direction: column;
    text-align: center;
  }
  .team-row img {
    margin-bottom: 10px;
  }
}

/* --- CONTACT PAGE ROW LAYOUT --- */
.contact-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-section h2 {
  text-align: center;
  margin-bottom: 40px;
}

.office-row {
  display: flex;
  flex-direction: row; /* Address left, map right */
  gap: 30px;
  align-items: flex-start;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 25px;
  margin-bottom: 40px;
}

.office-info {
  flex: 1;
}

.office-info h3 {
  margin-bottom: 10px;
}

.office-info p {
  line-height: 1.6;
  color: #333;
  font-size: 0.95rem;
}

.office-map {
  flex: 1;
}

.office-map iframe {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .office-row {
    flex-direction: column;
  }
  .office-map iframe {
    height: 300px;
  }
}

/* --- GALLERY PAGE --- */
.gallery-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.gallery-section h2 {
  color: #004aad;
  margin-bottom: 10px;
}

.gallery-subtitle {
  color: #555;
  font-size: 1rem;
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.03);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e8edf2 25%, #f4f6f9 50%, #e8edf2 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- ALBUM GRID ---- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.album-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.album-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
}

.album-cover {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.album-card:hover .album-cover img {
  transform: scale(1.06);
}

.album-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e0eaf8, #f0f5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.album-info {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.album-info strong {
  font-size: 0.95rem;
  color: #111;
}

.album-info span {
  font-size: 0.8rem;
  color: #6b7280;
}

/* ---- BREADCRUMB & BACK ---- */
.gallery-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-back {
  background: none;
  border: 1px solid #1e6fb8;
  color: #1e6fb8;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-back:hover {
  background: #eff6ff;
}

.gallery-breadcrumb span {
  font-weight: 600;
  font-size: 1.05rem;
  color: #111;
}

/* ---- LOADING / EMPTY ---- */
.album-loading {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: #9ca3af;
}

.no-content {
  grid-column: 1 / -1;
  text-align: center;
  color: #9ca3af;
  padding: 40px 0;
}

/* ---- LIGHTBOX ---- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-inner img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
}

.lightbox-caption {
  color: #e5e7eb;
  font-size: 0.875rem;
  margin: 10px 0 0;
  text-align: center;
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 6px;
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.25); }