/* -------- Tokens -------- */
:root{
  --accent:#008080;
  --accent-dark:#006c6c;
  --text:#333;
  --muted:#555;
  --light:#f9f9f9;
  --card:#fff;
  --shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* -------- Reset & Base -------- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#fff;
}
img{max-width:100%;height:auto;display:block;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* -------- Navbar -------- */
.navbar{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-content{
  max-width:1200px;margin:0 auto;
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;
}
.branding{display:flex;align-items:center;gap:10px;}
.logo-img{width:100px;height:100px;object-fit:cover;border-radius:6px;background:#ddd;}
.logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:.2px;}
.nav-links a{
  margin-left:1.2rem;text-decoration:none;color:var(--text);font-weight:700;
  transition:color .25s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--accent);}

nav .btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  background-color: #008080;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

nav .btn-primary:hover {
  background-color: #006c6c;
}

.navbar-tagline {
  margin-left: -300px;   /* space between logo and tagline */
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.rem;
  font-weight: 600;
  color: #000000;
  letter-spacing: 0.5px;
}

/* -------- Heroes (plain white) -------- */
/*.hero{
  background:#fff;padding:90px 20px;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.primary-hero{min-height:90vh;}


.secondary-hero{min-height:60vh;}
.hero-text h1{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(2.2rem,4vw,3.6rem);color:#111;line-height:1.15;
}
.hero-subtitle{
  margin:18px auto 26px auto;color:#444;
  font-size:clamp(1.05rem,2.2vw,1.25rem);
  max-width:900px; 
}

*/
.btn-accent{
  display:inline-block;background:var(--accent);color:#fff;
  padding:12px 24px;border-radius:28px;text-decoration:none;font-weight:800;
  transition:background .25s ease,transform .15s ease;
}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-1px);}


/*
.primary-hero {
  position: relative;
  background: url("index_hero.jpg") center center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 8rem 2rem; 
}
.primary-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4); 
}

.primary-hero h1,
.primary-hero p,
.primary-hero a {
  position: relative;
  z-index: 1;
}
*/
.hero {
  background: #fff;
  padding: 90px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.primary-hero {
  min-height: 72vh; /* reduced by 20% */
  padding: 90px 5.5%; /* increased horizontal padding by ~10% */
}

.secondary-hero {
  min-height: 60vh;
  padding: 40px 5.5%; /* increased horizontal padding by ~10% */
}

.hero-text h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  color: #111;
  line-height: 1.15;
}

.hero-subtitle {
  margin: 18px auto 26px auto;
  color: #444;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  max-width: 900px; /* ~2 lines on desktop */
}

/* -------- Slideshow (boxed, split layout, constant height) -------- */
.slideshow-section{background:var(--light);padding:60px 20px;border-top:4px solid #00808010;}
.slideshow-wrapper{position:relative;max-width:1100px;margin:0 auto;padding:0 28px;}
.slideshow{
  position:relative;overflow:hidden;border-radius:12px;background:var(--card);box-shadow:var(--shadow);
}
.slide{
  display:none;gap:24px;align-items:center;padding:36px;
  min-height:420px; /* constant height */
}
.slide-text{flex:1;}
.slide-text h2{
  font-family:'Montserrat',sans-serif;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:10px;color:#111;
}
.slide-text p{color:var(--muted);font-size:1rem;}
.slide-image{flex:1;}
.slide-image img{
  width:100%;height:380px;object-fit:cover;border-radius:10px;
}
/* Centered header whose width hugs the text, so ::after (60%) aligns perfectly */
.slideshow-header {
  text-align: center;
  font-size: 2.2rem;
  color: #006c6c;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;

  /* key bits for centering with % underline */
  display: table;              /* shrink-to-fit width */
  margin: 0 auto 2rem;         /* center the element itself */
}

.slideshow-header::after {
  content: "";
  display: block;
  width: 60%;                  /* 60% of the header’s own width (i.e., text width) */
  height: 3px;
  background: #006c6c;
  margin: 12px auto 0;         /* centers the underline */
}




/* Arrows just outside the card */
.nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:#ffffffcc;border:2px solid var(--accent);color:var(--accent);
  width:44px;height:44px;border-radius:50%;font-size:22px;font-weight:700;line-height:38px;text-align:center;
  cursor:pointer;z-index:5;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
.nav-arrow:hover{background:var(--accent);color:#fff;transform:translateY(-50%) scale(1.05);}
.prev{left:-12px;}
.next{right:-12px;}

.dots-container{text-align:center;margin-top:14px;}
.dot{
  height:12px;width:12px;margin:0 5px;display:inline-block;border-radius:50%;
  background:#c9c9c9;cursor:pointer;transition:background .25s ease,transform .15s ease;
}
.dot.active{background:var(--accent);transform:scale(1.05);}

/* -------- Alternating content sections -------- */
.section-header {
  text-align: center;
  margin: 60px auto 40px auto;
}

.section-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #008080; /* Accent color */
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: "";
  display: block;
  width: 60%;
  height: 3px;
  background: #008080;
  margin: 12px auto 0 auto;
}


.content-section{padding:40px 20px;}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;max-width:1100px;margin:0 auto;
}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}

.text h2{
  font-family:'Montserrat',sans-serif;font-size:clamp(1.6rem,3vw,2rem);margin-bottom:12px;color:#111;
}
.text p{color:var(--muted);}
.image img{
  width:100%;height:420px;object-fit:cover;border-radius:10px;box-shadow:0 3px 15px rgba(0,0,0,.05);
}

/* -------- Gallery (masonry restored) -------- */
.gallery{padding:60px 20px;max-width:1100px;margin:0 auto;}
.gallery-title{
  font-family:'Montserrat',sans-serif;text-align:center;font-size:clamp(2rem,3.5vw,2.6rem);margin-bottom:24px;color:#111;
}
.gallery-grid.masonry{column-count:3;column-gap:15px;}
.gallery-grid.masonry img{
  width:100%;margin-bottom:15px;border-radius:8px;cursor:pointer;transition:transform .25s ease;break-inside:avoid;
}
.gallery-grid.masonry img:hover{transform:scale(1.03);}
@media (max-width:900px){.gallery-grid.masonry{column-count:2;}}
@media (max-width:600px){.gallery-grid.masonry{column-count:1;}}

/* Lightbox */
.lightbox{
  display:none;position:fixed;z-index:1001;padding-top:60px;left:0;top:0;width:100%;height:100%;
  overflow:auto;background-color:rgba(0,0,0,.9);
}
.lightbox-content{margin:auto;display:block;max-width:90%;max-height:80%;}
.close{position:absolute;top:20px;right:45px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;}

/* CTA*/
.cta-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #e0f5f5;
  margin-top: 40px;
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #333;
}

.cta-section p {
  font-size: 1.1rem;
  margin-bottom: 25px;
  color: #555;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #006c6c;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #005f87;
}


/* -------- Footer -------- */
footer{background:#333;color:#fff;padding:28px 20px;margin-top:40px;}
.footer-content{display:grid;gap:8px;justify-items:center;}
footer a{color:#7fe3e3;text-decoration:none;}
footer a:hover{text-decoration:underline;}
.socials{display:flex;gap:14px;}

/* -------- Scroll reveal animations -------- */
.animate-left,.animate-right,.animate-fade{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease;}
.animate-left.visible,.animate-right.visible,.animate-fade.visible{opacity:1;transform:translateY(0);}

/* -------- Responsive -------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;}
  .image img{height:320px;}
  .slide{flex-direction:column;padding:24px;}
  .slide-image img{height:300px;}
  .prev{left:8px;}
  .next{right:8px;}
}
@media (max-width:600px){
  .hero{padding:72px 18px;}
  .primary-hero{min-height:75vh;}
  .hero-subtitle{max-width:95%;}
  .nav-content{padding:10px 14px;}
  .nav-links a{margin-left:.9rem;}
}