:root {
  --accent: #bfa46a;
  --accent-green: #8ca97e;
  --dark: #1e2a1f;
  --light: #fff;
  --bg1: #f9f8f5;
  --bg2: #eef0ec;
}
* {margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;}
body {font-family:"Poppins",sans-serif;color:var(--dark);background:var(--bg1);line-height:1.6;}

/* Header & Mobile Flyout */
header {position:fixed;width:100%;top:0;left:0;background:var(--light);box-shadow:0 2px 8px rgba(0,0,0,0.1);z-index:1000;}
nav {display:flex;justify-content:center;flex-wrap:wrap;gap:15px;padding:1rem;}
nav a {text-decoration:none;color:var(--dark);font-weight:600;padding:8px 18px;border-radius:25px;transition:all 0.3s ease;}
nav a:hover {background:var(--accent-green);color:var(--light);}
.textcenter{text-align:center;}
.menu-toggle {display:none;cursor:pointer;font-size:1.6rem;color:var(--accent-green);padding:1rem;position:absolute;right:20px;top:10px;}
.mobile-menu {position:fixed;top:0;right:-100%;width:70%;height:100%;background:var(--light);box-shadow:-2px 0 10px rgba(0,0,0,0.2);padding-top:80px;transition:right 0.4s ease;display:flex;flex-direction:column;z-index:1200;}
.mobile-menu.open {right:0;}
.mobile-menu a {margin:10px 20px;text-align:center;padding:12px 0;background:var(--accent-green);color:var(--light);border-radius:30px;text-decoration:none;font-weight:600;transition:background 0.3s;}
.mobile-menu a:hover {background:var(--accent); color:#fff !important;}

@media(max-width:768px){nav {display:none;}.menu-toggle {display:block;}}

/* HERO SLIDER */
.swiper {width:100%;height:90vh;}
.swiper-slide {position:relative;}
.swiper-slide img {width:100%;height:100%;object-fit:cover;}
.hero-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--light);}
.hero-overlay h1 {font-size:2.8rem;margin-bottom:10px;}
.hero-overlay p {font-size:1.2rem;}

.swiper-pagination-bullet {background:var(--accent) !important;opacity:0.6;transition:all 0.3s;}
.swiper-pagination-bullet-active {background:var(--accent-green) !important;opacity:1;transform:scale(1.3);}
.swiper-button-prev,.swiper-button-next {color:var(--light) !important;text-shadow:0 0 10px rgba(0,0,0,0.4);transition:all 0.3s;}
.swiper-button-prev:hover,.swiper-button-next:hover {color:var(--accent) !important;text-shadow:0 0 12px rgba(191,164,106,0.8);}

section {width:100%;padding:100px 20px;}
section:nth-of-type(even){background:var(--bg2);}
.container {max-width:1100px;margin:0 auto;}
h2,h3 {color:var(--accent);margin-bottom:15px; text-align: center !important;}
p {margin-bottom:10px;}

.grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:25px;margin-top:25px;}
.card {background:var(--light);padding:20px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.1);transition:all 0.4s ease;}
.card:hover {transform:translateY(-6px);box-shadow:0 6px 18px rgba(0,0,0,0.15);}

img{max-width: 100%;}
.gallery {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:25px;}
.gallery a img {width:100%;height:200px;object-fit:cover;border-radius:8px;transition:transform 0.3s;}
.gallery a:hover img {transform:scale(1.05);}

.btn {display:inline-block;background:var(--accent);color:var(--light);padding:10px 24px;border-radius:30px;text-decoration:none;font-weight:600;transition:all 0.3s ease;}
.btn:hover {background:var(--accent-green);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,0.15);}
a {color:var(--accent-green);text-decoration:none;transition:color 0.3s;}
a:hover {color:var(--accent); color: #fff !important;}

footer {background:var(--dark);color:var(--light);text-align:center;padding:40px 20px;border-top:4px solid var(--accent);}
footer a{color:var(--accent);text-decoration:none;}
footer a:hover{color:var(--accent-green);}

#backToTop {position:fixed;bottom:30px;right:30px;background:var(--accent);color:var(--light);border:none;border-radius:50px;padding:12px 18px;font-weight:600;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,0.2);transition:all 0.3s ease;opacity:0;visibility:hidden;z-index:9999;}
#backToTop:hover {background:var(--accent-green);}
#backToTop.show {opacity:1;visibility:visible;}

@media(max-width:768px){.hero-overlay h1{font-size:1.8rem;}.hero-overlay p{font-size:1rem;}}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: 20px;
}

/* Modal Box */
.modal-content {
  background: var(--light);
  color: var(--dark);
  max-width: 600px;
  width: 100%;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  position: relative;
  line-height: 1.6;
}

/* Close Button (X in corner) */
.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
  color: var(--accent-green);
  cursor: pointer;
}

/* Close Button at bottom */
.modal-content .closeBtn {
  margin-top: 15px;
}
.lang-switcher {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  display: flex;
  gap: 8px;
}

.lang-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 5px 10px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.lang-btn.active,
.lang-btn:hover {
  background: var(--accent-color, #bfa46a);
  color: #000;
  border-color: var(--accent-color, #bfa46a);
}

body {
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* smooth fade both ways */
}

/* fade-in on page load */
body.fade-in {
  opacity: 1;
}

/* fade-out before reload */
body.fade-out {
  opacity: 0;
}