:root {
  --green-900: #123222;
  --green-800: #18432c;
  --green-700: #1f5638;
  --green-600: #2c7048;
  --cream: #fcfaf1;
  --cream-2: #f6f2e4;
  --ink: #1d2620;
  --muted: #5f6b62;
  --line: #e6e0cf;
  --amber: #e08a2c;
  --amber-2: #f0a341;
  --radius: 16px;
  --shadow: 0 12px 30px -18px rgba(18, 50, 34, .45);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6
}

.wrap.nav-inner img {
    width: 252px;
}



/* =========================
   GALLERY SECTION
========================= */

.photo-gallery {
    padding: 80px 20px;
    background: #f5f8fc;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* Heading */

.gallery-heading {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-heading span {
    display: inline-block;
    color: #0b3d91;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.gallery-heading h2 {
    font-size: 36px;
    color: #17233c;
    margin-bottom: 12px;
}

.gallery-heading p {
    color: #666;
    font-size: 16px;
}


/* =========================
   SLIDER
========================= */

.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gallery-track-container {
    width: 100%;
    overflow: hidden;
}

.gallery-track {
    display: flex;
    transition: transform 0.5s ease;
}


/* Gallery Item */

.gallery-item {
    flex: 0 0 33.333333%;
    padding: 10px;
}

.gallery-item img {
    width: 100%;
    height: 280px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    cursor: zoom-in;
    transition: transform 0.4s ease,
                box-shadow 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}


/* =========================
   SLIDER BUTTONS
========================= */

.gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #0b3d91;
    color: #ffffff;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: 0.3s ease;
}

.gallery-btn:hover {
    background: #082d6b;
    transform: translateY(-50%) scale(1.08);
}

.gallery-prev {
    left: -22px;
}

.gallery-next {
    right: -22px;
}


/* =========================
   DOTS
========================= */

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.gallery-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c7cdd7;
    cursor: pointer;
    transition: 0.3s ease;
}

.gallery-dot.active {
    width: 25px;
    border-radius: 10px;
    background: #0b3d91;
}


/* =========================
   LIGHTBOX
========================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.3s ease,
                visibility 0.3s ease;
}

.gallery-lightbox.active {
    visibility: visible;
    opacity: 1;
}

.lightbox-content {
    width: min(90%, 1100px);
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 5px;
    animation: zoomImage 0.3s ease;
}


/* Image zoom animation */

@keyframes zoomImage {

    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}


/* Close */

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}


/* Lightbox arrows */

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s ease;
}

.lightbox-arrow:hover {
    background: rgba(255,255,255,0.3);
}

.lightbox-left {
    left: 30px;
}

.lightbox-right {
    right: 30px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .gallery-item {
        flex: 0 0 50%;
    }

    .gallery-item img {
        height: 250px;
    }

    .gallery-heading h2 {
        font-size: 30px;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .photo-gallery {
        padding: 50px 15px;
    }

    .gallery-heading {
        margin-bottom: 25px;
    }

    .gallery-heading h2 {
        font-size: 26px;
    }

    .gallery-heading p {
        font-size: 14px;
    }

    .gallery-item {
        flex: 0 0 100%;
        padding: 6px;
    }

    .gallery-item img {
        height: 240px;
        border-radius: 10px;
    }

    .gallery-prev {
        left: 5px;
    }

    .gallery-next {
        right: 5px;
    }

    .gallery-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .lightbox-left {
        left: 10px;
    }

    .lightbox-right {
        right: 10px;
    }

    .lightbox-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
    }

}

.heroSlider{
    width:100%;
    height:100vh;
}

.swiper,
.swiper-wrapper,
.swiper-slide{
    width:100%;
    height:100%;
}

.swiper-slide{
    position:relative;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.swiper-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.content{
    position:relative;
    z-index:2;
    max-width:1200px;
    width:100%;
    margin:auto;
    color:#fff;
    padding:0 40px;
}

.content h1 {
    font-size: 44px;
    margin-bottom: 19px;
    width: 73%;
    line-height: normal;
}

.content p {
    font-size: 15px;
    margin-bottom: 30px;
}

.btn{
    display:inline-block;
    padding:15px 40px;
    background:#ff6b00;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
}

.slide1{
    background-image:url("../images/hero.jpg");
}

.slide2{
    background-image:url("../images/hero1.jpg");
}

.slide3{
    background-image:url("../images/hero2.jpg");
}


.slide4{
    background-image:url("../images/hero3.jpg");
}


.slide5{
    background-image:url("../images/hero4.jpg");
}


.swiper-button-next,
.swiper-button-prev{
    color:#fff;
}

.swiper-pagination-bullet{
    background:#fff;
    opacity:.6;
}

.swiper-pagination-bullet-active{
    background:#ff6b00;
    opacity:1;
}

@media(max-width:768px){

.heroSlider{
    height:70vh;
}

.content{
    text-align:center;
    padding:20px;
}

.content h1{
    font-size:34px;
}

.content p{
    font-size:16px;
}

}

.social-icons{
    display:flex;
    justify-content: start;
    align-items: self-end;
    gap: 16px;
    flex-wrap:wrap;
    margin-top: 26px;
}

.social-icons a{
    width: 30px;
    height: 30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size: 15px;
    text-decoration:none;
    transition:.35s ease;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

/* Brand Colors */
.instagram{
    background:linear-gradient(45deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);
}

.facebook{
    background:#1877F2;
}

.youtube{
    background:#FF0000;
}

.social-icons a:hover{
    transform:translateY(-8px) scale(1.08);
    box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.social-icons span{
    display:block;
    font-size:13px;
    color:#fff;
    margin-top:8px;
}

.social-item{
    display:flex;
    flex-direction:column;
    align-items:center;
}

@media(max-width:576px){
    .social-icons{
        gap:14px;
    }

    .social-icons a{
        width:46px;
        height:46px;
        font-size:20px;
    }
}


img {
  max-width: 100%;
  display: block
}
a {
  color: inherit
}
.wrap {
  width: min(1160px, 92vw);
  margin-inline: auto
}
/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease
}
.btn:hover {
  transform: translateY(-2px)
}
.btn-primary {
  background: var(--green-700);
  color: #fff
}
.btn-primary:hover {
  background: var(--green-600)
}
.btn-accent {
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  color: #3b2306
}
.btn-sm {
  padding: .55rem 1.1rem;
  font-size: .85rem
}
.btn-full {
  width: 100%;
  margin-top: 1rem
}
/* nav */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background .3s ease, box-shadow .3s ease
}
.nav.scrolled {
  background: rgba(252, 250, 241, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line)
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .8rem 0
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff
}
.nav.scrolled .brand {
  color: var(--ink)
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--green-700);
  color: #fff;
  font-size: 1rem
}
.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2
}
.brand small {
  display: block;
  font-size: .68rem;
  opacity: .75
}
.nav-links {
  display: flex;
  gap: 1.15rem;
  margin-left: auto;
  font-size: .85rem
}
.nav-links a {
  color: rgba(255, 255, 255, .9);
  text-decoration: none
}
.nav.scrolled .nav-links a {
  color: var(--muted)
}
.nav-links a:hover {
  color: var(--amber)
}
.burger {
  display: none;
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: inherit;
  cursor: pointer
}
/* hero */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 9rem 0 4.5rem;
  overflow: hidden
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 32, 20, .88), rgba(10, 32, 20, .35))
}
.hero-content {
  position: relative;
  max-width: 100%;
  color: #fff
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  margin: .4rem 0 1rem;
  font-weight: 600
}
.lede {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .86);
  max-width: 56ch
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem
}
/* sections */
.section {
  padding: 5rem 0
}
.band {
  background: var(--cream-2)
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--amber);
  margin: 0
}

.eyebrow.light {
    color: var(--amber-2);
    font-size: 14px;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600;
  margin: .4rem 0 2rem
}
.sub {
  color: var(--muted);
  max-width: 70ch;
  margin: -1.2rem 0 2rem;
  font-size: .95rem
}
.grid {
  display: grid;
  gap: 1.25rem
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr)
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow)
}
.card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: .7rem 0 .4rem;
  font-weight: 600
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem
}
.ico {
  font-size: 1.3rem
}
.mini {
  margin-top: .7rem !important;
  color: var(--green-700) !important;
  font-weight: 600
}
/* about */
.about {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: center
}
.about p {
  color: var(--muted);
  font-size: .95rem
}
.about-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(18, 50, 34, .6)
}
.about-media img {
  aspect-ratio: 4/3;
  object-fit: cover
}
/* packages */
.pkg {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow)
}
.pkg.featured {
  border: 2px solid var(--amber);
  box-shadow: 0 20px 45px -25px rgba(224, 138, 44, .65)
}
.tag {
  position: absolute;
  top: -12px;
  right: 1.2rem;
  background: var(--amber);
  color: #3b2306;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px
}
.pkg h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 .8rem;
  color: var(--green-800);
  font-weight: 600
}
.pkg-note {
  font-size: .82rem;
  color: var(--muted);
  margin: .2rem 0
}
.pkg ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  gap: .55rem
}
.pkg li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .87rem;
  color: var(--muted)
}
.pkg li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--green-600)
}
.price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--green-800);
  margin: auto 0 0;
  font-weight: 700
}
.price span {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--muted);
  font-weight: 400
}
.notebox {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem
}
.notebox h4 {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-weight: 600
}
.notebox p {
  margin: 0;
  font-size: .85rem;
  color: var(--muted)
}
/* rooms */
.room {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow)
}
.room img {
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .5s ease
}
.room:hover img {
  transform: scale(1.05)
}
.room-body {
  padding: 1.3rem
}
.room h3 {
  font-family: var(--font-display);
  margin: 0 0 .4rem;
  font-weight: 600
}
.room p {
  margin: 0;
  font-size: .87rem;
  color: var(--muted)
}
.rates {
  display: flex;
  gap: .6rem;
  margin-top: 1rem
}
.rate {
  flex: 1;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .7rem;
  font-weight: 700;
  color: var(--green-800);
  font-size: 1rem
}
.rate em {
  display: block;
  font-style: normal;
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600
}
.rate small {
  font-weight: 400;
  font-size: .68rem;
  color: var(--muted)
}
.strip {
  margin-top: 1.5rem;
  background: #fff7e8;
  border: 1px solid #f0dcb4;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-size: .85rem;
  color: #7a5312
}
/* steps */
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow)
}
.num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--amber);
  font-weight: 700
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: .3rem 0 .4rem;
  font-weight: 600
}
.step p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem
}
/* rules */
.rules {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow)
}
.rules-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: .4rem 0 0;
  font-weight: 600
}
.rule {
  margin: .3rem 0;
  font-size: .88rem;
  color: var(--muted)
}
/* footer */
.footer {
  background: var(--green-800);
  color: #e8f0e8;
  padding: 3.5rem 0 1.5rem;
  margin-top: 1rem
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2rem
}
.footer h3 {
  font-family: var(--font-display);
  margin: 0 0 .5rem;
  font-weight: 600
}
.footer h4 {
  margin: 0 0 .7rem;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-2)
}
.footer p {
  font-size: .87rem;
  color: rgba(232, 240, 232, .75)
}
.footer a {
  color: inherit
}
.foot-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
  font-size: .87rem
}
.foot-links a {
  text-decoration: none;
  color: rgba(232, 240, 232, .78)
}
.foot-links a:hover {
  color: var(--amber-2)
}
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 2.5rem;
  padding-top: 1rem;
  text-align: center
}
.foot-bottom p {
  margin: 0;
  font-size: .78rem
}
.wa-float {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4)
}
/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease
}
.reveal.in {
  opacity: 1;
  transform: none
}
@media(max-width:900px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr
  }
  .about, .rules, .foot-grid {
    grid-template-columns: 1fr
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--cream);
    padding: 1rem 6vw;
    gap: .8rem;
    display: none;
    box-shadow: var(--shadow)
  }
  .nav-links.open {
    display: flex
  }
  .nav-links a, .nav.scrolled .nav-links a {
    color: var(--ink)
  }
  .burger {
    display: block;
    color: #fff
  }
  .nav.scrolled .burger {
    color: var(--ink)
  }
}
@media(max-width:640px) {
  .grid-3 {
    grid-template-columns: 1fr
  }
  .hero {
    padding-top: 7.5rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}


@media(max-width:767px) {
	
.btn {
  display: none;
}
.eyebrow.light {
  display: none;
}	
.wrap.nav-inner img {
  width: 73%;
}
.content h1 {
  margin-bottom: 0;
  width: 100%;
}	
 .heroSlider {
    height: auto;
  }	
	
.content {
    margin-top: 59px;
  }
	
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  display: none;
}	
.swiper-button-next, .swiper-button-prev {
  display: none;
}
.content p {
    font-size: 15px;
  }	
 .content h1 {
    font-size: 26px;
  }	
	
.swiper-slide::before {
  background: rgba(0,0,0,.68);
}
.section {
  padding: 21px 0;
}
.wrap {
  text-align: center;
}
.foot-links {
  display: none;
}
	
.social-icons {
  justify-content: center;
}
.foot-bottom {
  margin-top: 0;
}
.footer h4 {
  display: none;
}
	
	
}