:root{

--primary:#09a7c3;
--primary-dark:#067b92;

--ocean:#032833;
--ocean2:#021d26;

--sand:#f7f4ef;

--white:#ffffff;

--text:#14343b;

--muted:#6d7f84;

--shadow:0 20px 60px rgba(0,0,0,.14);

--radius:24px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Manrope',sans-serif;

color:var(--text);

background:white;

line-height:1.6;

overflow-x:hidden;

}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
color:inherit;
}

.container{

width:min(1180px,92%);

margin:auto;

}




/* ==========================================
HEADER / NAVIGATION BAR
========================================== */

.site-header{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  z-index:1000;

  background:rgba(234,247,248,.96);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(7,61,73,.08);

  box-shadow:
    0 10px 30px rgba(7,61,73,.07);
}

.nav-wrap{
  height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  flex:0 0 170px;

  width:170px;
  height:72px;

  overflow:visible;
}

.nav-island-logo{
  display:block;

  width:54px;
  height:auto;
  max-width:none;

  object-fit:contain;

  transform:scale(2.4);
  transform-origin:left center;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:1;

  gap:34px;

  margin:0;
  padding:0;

  list-style:none;
}

.nav-links li{
  flex-shrink:0;
}

.nav-links a{
  position:relative;

  display:block;

  color:var(--ocean);

  font-weight:700;
  text-decoration:none;
  white-space:nowrap;

  transition:
    color .25s ease,
    transform .25s ease;
}

.nav-links a:link,
.nav-links a:visited{
  color:var(--ocean);
}

.nav-links a::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:-8px;

  width:0;
  height:2px;

  background:var(--primary);

  border-radius:999px;

  transform:translateX(-50%);

  transition:
    width .25s ease;
}

.nav-links a:hover{
  color:var(--primary);

  transform:translateY(-1px);
}

.nav-links a:hover::after{
  width:100%;
}

.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  min-width:138px;
  height:52px;

  padding:0 28px;

  background:var(--primary);
  color:#ffffff;

  border-radius:999px;

  font-weight:800;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;

  box-shadow:
    0 8px 24px rgba(20,145,143,.20);

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.nav-button:link,
.nav-button:visited{
  color:#ffffff;
}

.nav-button:hover{
  color:#ffffff;
  background:var(--primary-dark);

  transform:translateY(-2px);

  box-shadow:
    0 14px 34px rgba(20,145,143,.28);
}


/* ==========================================
NAVIGATION BAR — LAPTOPS / HALF-SCREEN WINDOWS
========================================== */

@media (max-width:1100px){

  .nav-wrap{
    gap:18px;
  }

  .brand{
    flex:0 0 150px;

    width:150px;
  }

  .nav-island-logo{
    width:54px;

    transform:scale(2.4);
  }

  .nav-links{
    gap:20px;
  }

  .nav-links a{
    font-size:.92rem;
  }

  .nav-button{
    min-width:122px;
    height:48px;

    padding:0 22px;

    font-size:.95rem;
  }

}


/* ==========================================
NAVIGATION BAR — SMALL LAPTOPS
========================================== */

@media (max-width:900px){

  .nav-wrap{
    gap:14px;
  }

  .brand{
    flex:0 0 138px;

    width:138px;
  }

  .nav-island-logo{
    width:54px;

    transform:scale(2.4);
  }

  .nav-links{
    gap:14px;
  }

  .nav-links a{
    font-size:.84rem;
  }

  .nav-button{
    min-width:110px;
    height:46px;

    padding:0 18px;

    font-size:.9rem;
  }

}


/* ==========================================
HERO — MAIN LAYOUT
========================================== */

.hero{
  position:relative;
  width:100%;

  height:calc(100vh - 72px);
  height:calc(100svh - 72px);
  min-height:720px;
  max-height:940px;

  margin-top:72px;
  overflow:hidden;

  color:#ffffff;
  background:var(--ocean);
}


/* ==========================================
HERO — BACKGROUND VIDEO
========================================== */

.hero-video{
  position:absolute;
  inset:0;

  display:block;
  width:100%;
  height:100%;
  max-width:none;

  object-fit:cover;
  object-position:center;
}


/* ==========================================
HERO — VIDEO OVERLAY
========================================== */

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(1,20,27,.08) 0%,
      rgba(1,20,27,.17) 48%,
      rgba(1,20,27,.38) 100%
    );
}


/* ==========================================
HERO — CONTENT CONTAINER
========================================== */

.hero-inner{
  position:relative;
  z-index:2;

  width:min(1100px,94%);
  height:100%;
  margin:0 auto;
  padding:20px 0 56px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  transform:translateY(-28px);
}


/* ==========================================
HERO — LOGO CONTAINER
========================================== */

.hero-logo-wrapper{
  position:relative;

  width:min(650px,90vw);
  height:415px;
  flex:0 0 415px;

  margin:0 auto;
  overflow:visible;
}


/* ==========================================
HERO — LOGO IMAGES
========================================== */

.hero-logo{
  position:absolute;
  top:-62px;
  left:50%;

  display:block;
  width:110%;
  height:auto;
  max-width:none;

  object-fit:contain;
  transform:translateX(-50%);

  transition:opacity .35s ease;

  filter:drop-shadow(
    0 18px 36px rgba(0,0,0,.30)
  );
}

.hero-logo-white{
  opacity:1;
}

.hero-logo-teal{
  opacity:0;
}

.hero-logo-wrapper:hover .hero-logo-white{
  opacity:0;
}

.hero-logo-wrapper:hover .hero-logo-teal{
  opacity:1;
}


/* ==========================================
HERO — SUBTITLE
========================================== */

.hero-subtitle{
  width:min(820px,90%);
  max-width:820px;

  margin:6px auto 0;

  color:#ffffff;

  font-size:clamp(1.18rem,1.1vw,1.34rem);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.15px;
}


/* ==========================================
HERO — BUTTON ROW
========================================== */

.hero-cta-row{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:24px;

  margin-top:28px;
  margin-bottom:0;
}


/* ==========================================
HERO — BUTTONS
========================================== */

.hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:190px;
  height:52px;
  padding:0 28px;
  box-sizing:border-box;

  border-radius:999px;

  font-size:.94rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.15px;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;

  transition:
    transform .22s ease,
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.hero-cta:hover{
  transform:translateY(-3px);
}

.hero-cta-primary{
  color:var(--ocean);
  background:#ffffff;

  box-shadow:
    0 12px 28px rgba(0,0,0,.18);
}

.hero-cta-primary:link,
.hero-cta-primary:visited{
  color:var(--ocean);
}

.hero-cta-primary:hover{
  color:var(--ocean);
  background:#f5f5f5;
}

.hero-cta-secondary{
  color:#ffffff;
  background:rgba(255,255,255,.05);

  border:2px solid rgba(255,255,255,.92);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.hero-cta-secondary:link,
.hero-cta-secondary:visited{
  color:#ffffff;
}

.hero-cta-secondary:hover{
  color:#ffffff;
  background:rgba(255,255,255,.14);
}


/* ==========================================
HERO — LARGE / HIGH-RESOLUTION SCREENS
========================================== */

@media (min-width:1600px){

  .hero{
    min-height:780px;
    max-height:980px;
  }

  .hero-inner{
    width:min(1320px,92%);
    padding:24px 0 64px;

    transform:translateY(-32px);
  }

  .hero-logo-wrapper{
    width:min(740px,46vw);
    height:455px;
    flex-basis:455px;
  }

  .hero-logo{
    top:-70px;
    width:112%;
  }

  .hero-subtitle{
    width:min(900px,88%);
    max-width:900px;

    margin-top:10px;

    font-size:1.34rem;
  }

  .hero-cta-row{
    margin-top:32px;
    gap:28px;
  }

  .hero-cta{
    min-width:205px;
    height:54px;
    padding:0 32px;

    font-size:.98rem;
  }

}


/* ==========================================
HERO — LAPTOPS / HALF-SCREEN WINDOWS
========================================== */

@media (max-width:1100px){

  .hero{
    height:calc(100vh - 72px);
    height:calc(100svh - 72px);

    min-height:690px;
    max-height:820px;
  }

  .hero-inner{
    width:96%;
    padding:16px 0 52px;

    transform:translateY(-24px);
  }

  .hero-logo-wrapper{
    width:min(620px,90vw);
    height:385px;
    flex-basis:385px;
  }

  .hero-logo{
    top:-52px;
    width:110%;
  }

  .hero-subtitle{
    width:min(760px,90%);

    margin-top:6px;

    font-size:1.18rem;
    line-height:1.5;
  }

  .hero-cta-row{
    margin-top:26px;
    gap:26px;
  }

  .hero-cta{
    min-width:184px;
    height:50px;
    padding:0 24px;
  }

}


/* ==========================================
HERO — SMALL LAPTOPS / TABLETS
========================================== */

@media (max-width:800px){

  .hero{
    height:660px;
    min-height:660px;
    max-height:none;
  }

  .hero-inner{
    width:96%;
    padding:12px 0 46px;

    transform:translateY(-18px);
  }

  .hero-logo-wrapper{
    width:min(570px,92vw);
    height:355px;
    flex-basis:355px;
  }

  .hero-logo{
    top:-38px;
    width:108%;
  }

  .hero-subtitle{
    width:90%;

    margin-top:6px;

    font-size:1.1rem;
    line-height:1.5;
  }

  .hero-cta-row{
    margin-top:24px;
    gap:18px;
  }

  .hero-cta{
    min-width:168px;
    height:48px;
    padding:0 20px;

    font-size:.88rem;
  }

}


/* ==========================================
HERO — MOBILE
========================================== */

@media (max-width:560px){

  .hero{
    height:620px;
    min-height:620px;
    max-height:none;

    margin-top:68px;
  }

  .hero-inner{
    width:97%;
    padding:10px 0 34px;

    transform:translateY(-12px);
  }

  .hero-logo-wrapper{
    width:96vw;
    height:315px;
    flex-basis:315px;
  }

  .hero-logo{
    top:-18px;
    width:108%;
  }

  .hero-subtitle{
    width:92%;

    margin-top:4px;

    font-size:1rem;
    line-height:1.45;
  }

  .hero-cta-row{
    width:100%;

    margin-top:20px;
    gap:12px;

    flex-wrap:nowrap;
  }

  .hero-cta{
    width:44%;
    min-width:0;
    height:46px;
    padding:0 10px;

    font-size:.78rem;
  }

}


/* ==========================================
HERO — VERY SMALL MOBILE
========================================== */

@media (max-width:390px){

  .hero{
    height:650px;
    min-height:650px;
  }

  .hero-inner{
    padding-bottom:32px;

    transform:translateY(-8px);
  }

  .hero-logo-wrapper{
    height:300px;
    flex-basis:300px;
  }

  .hero-subtitle{
    font-size:.96rem;
  }

  .hero-cta-row{
    flex-direction:column;

    margin-top:20px;
    gap:12px;
  }

  .hero-cta{
    width:min(280px,88%);

    font-size:.84rem;
  }

}




/* ==========================================
SECTION HEADINGS
========================================== */

section{

padding:110px 0;

}

.section-title{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-title span{

display:inline-block;

margin-bottom:14px;

font-size:.82rem;

font-weight:800;

letter-spacing:.22em;

text-transform:uppercase;

color:var(--primary);

}

.section-title h2{

font-size:clamp(2.5rem,5vw,4.4rem);

line-height:1.05;

margin-bottom:18px;

color:var(--ocean);

}

.section-title p{

font-size:1.15rem;

color:var(--muted);

max-width:700px;

margin:auto;

}






/* ==========================================
FEATURED TOURS + PRODUCT LIST
SHARED CONTINUOUS BACKGROUND
========================================== */

.tour-sections-background{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(91,220,215,.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 76%,
      rgba(15,168,196,.13),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #eaf7f8 0%,
      #dff3f5 48%,
      #eaf7f8 100%
    );
}


/* ==========================================
FEATURED — MAIN SECTION
========================================== */

.featured-section{
  position:relative;
  padding:110px 0;
  overflow:hidden;
  background:transparent;
}


/* ==========================================
FEATURED — SECTION TITLE
========================================== */

.featured-section .section-title{
  width:min(820px,90%);
  max-width:820px;
  margin:0 auto 60px;
  text-align:center;
}

.featured-section .section-title span{
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.featured-section .section-title h2{
  margin:0;
  color:var(--ocean);
  font-size:clamp(2.5rem,5vw,4.4rem);
  line-height:1.04;
}

.featured-section .section-title p{
  max-width:620px;
  margin:20px auto 0;
  color:#52636a;
  font-size:1.12rem;
  line-height:1.7;
}


/* ==========================================
FEATURED — CARD GRID
========================================== */

.featured-grid{
  width:min(1320px,92%);
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
}


/* ==========================================
FEATURED — TOUR CARD
========================================== */

.featured-tour-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;

  background:#ffffff;
  border:1px solid rgba(7,49,62,.08);
  border-radius:28px;

  box-shadow:
    0 16px 44px rgba(6,42,54,.10);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.featured-tour-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 26px 60px rgba(6,42,54,.17);
}


/* ==========================================
FEATURED — CHANGING IMAGE GALLERY
========================================== */

.tour-card-gallery{
  position:relative;
  width:100%;
  height:390px;
  overflow:hidden;
  background:var(--ocean);
}


/* ==========================================
FEATURED — CHANGING IMAGES
========================================== */

.tour-card-slide{
  position:absolute;
  inset:0;

  display:block;
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  opacity:0;

  transform:scale(1.04);
  transition:
    opacity 1.15s ease,
    transform 7s ease;

  pointer-events:none;
}

.tour-card-slide.is-active{
  opacity:1;
  transform:scale(1.13);
}


/* Alternate movement for visual variety */

.tour-card-slide:nth-of-type(even){
  transform-origin:left center;
}

.tour-card-slide:nth-of-type(odd){
  transform-origin:right center;
}


/* ==========================================
FEATURED — IMAGE OVERLAY
========================================== */

.tour-card-image-overlay{
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      180deg,
      rgba(1,20,27,.04) 25%,
      rgba(1,20,27,.18) 65%,
      rgba(1,20,27,.48) 100%
    );

  pointer-events:none;
}


/* ==========================================
FEATURED — PHOTO LABEL
========================================== */

.tour-card-photo-label{
  position:absolute;
  top:22px;
  left:22px;
  z-index:3;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:9px 15px;

  color:#ffffff;
  background:rgba(1,38,48,.52);
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  font-size:.76rem;
  font-weight:800;
  letter-spacing:1.2px;
  line-height:1;
  text-transform:uppercase;
}


/* ==========================================
FEATURED — SLIDESHOW DOTS
========================================== */

.tour-card-dots{
  position:absolute;
  right:22px;
  bottom:20px;
  z-index:4;

  display:flex;
  align-items:center;
  gap:7px;
}

.tour-card-dot{
  width:7px;
  height:7px;

  padding:0;
  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.48);

  transition:
    width .3s ease,
    background-color .3s ease;
}

.tour-card-dot.is-active{
  width:24px;
  border-radius:999px;
  background:#ffffff;
}


/* ==========================================
FEATURED — CARD CONTENT
========================================== */

.featured-tour-card .tour-content{
  display:flex;
  flex-direction:column;
  flex:1;

  padding:30px 32px 32px;
}


/* ==========================================
FEATURED — CONTENT TAG
========================================== */

.featured-tour-card .tour-tag{
  display:block;
  margin-bottom:12px;

  color:var(--primary);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}


/* ==========================================
FEATURED — TOUR TITLE
========================================== */

.featured-tour-card .tour-content h3{
  margin:0;

  color:var(--ocean);
  font-size:clamp(1.55rem,2.2vw,2rem);
  line-height:1.18;
}


/* ==========================================
FEATURED — TOUR DESCRIPTION
========================================== */

.featured-tour-card .tour-content p{
  margin:16px 0 26px;

  color:#52636a;
  font-size:1rem;
  line-height:1.68;
}


/* ==========================================
FEATURED — CARD BUTTON
========================================== */

.featured-tour-card .card-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:fit-content;
  min-width:176px;
  min-height:48px;
  margin-top:auto;
  padding:12px 22px;
  box-sizing:border-box;

  color:#ffffff;
  background:var(--primary);
  border:0;
  border-radius:999px;

  cursor:pointer;

  font:inherit;
  font-size:.9rem;
  font-weight:800;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;

  box-shadow:
    0 10px 24px rgba(20,145,143,.20);

  transition:
    transform .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

.featured-tour-card .card-button:link,
.featured-tour-card .card-button:visited{
  color:#ffffff;
}

.featured-tour-card .card-button:hover{
  color:#ffffff;
  background:var(--primary-dark);
  transform:translateY(-2px);

  box-shadow:
    0 15px 30px rgba(20,145,143,.28);
}


/* ==========================================
FEATURED — HOVER IMAGE EFFECT
========================================== */

.featured-tour-card:hover .tour-card-slide.is-active{
  transform:scale(1.17);
}


/* ==========================================
FEATURED — LARGE / HIGH-RESOLUTION SCREENS
========================================== */

@media (min-width:1600px){

  .featured-section{
    padding:130px 0;
  }

  .featured-section .section-title{
    width:min(900px,88%);
    max-width:900px;
    margin-bottom:68px;
  }

  .featured-grid{
    width:min(1480px,90%);
    gap:40px;
  }

  .tour-card-gallery{
    height:470px;
  }

  .featured-tour-card .tour-content{
    padding:36px 38px 38px;
  }

}


/* ==========================================
FEATURED — TABLETS
========================================== */

@media (max-width:900px){

  .featured-grid{
    width:min(720px,90%);
    grid-template-columns:1fr;
    gap:26px;
  }

  .tour-card-gallery{
    height:380px;
  }

}


/* ==========================================
FEATURED — MOBILE
========================================== */

@media (max-width:560px){

  .featured-section{
    padding:80px 0;
  }

  .featured-section .section-title{
    width:88%;
    margin-bottom:42px;
  }

  .featured-section .section-title h2{
    font-size:2.35rem;
  }

  .featured-section .section-title p{
    font-size:1rem;
  }

  .featured-grid{
    width:90%;
    gap:22px;
  }

  .featured-tour-card{
    border-radius:22px;
  }

  .tour-card-gallery{
    height:285px;
  }

  .featured-tour-card .tour-content{
    padding:25px;
  }

  .featured-tour-card .tour-content h3{
    font-size:1.55rem;
  }

  .featured-tour-card .card-button{
    width:100%;
  }

}


/* ==========================================
FEATURED — REDUCED MOTION ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion:reduce){

  .tour-card-slide,
  .featured-tour-card,
  .featured-tour-card .card-button{
    transition:none;
  }

  .tour-card-slide.is-active{
    transform:scale(1.04);
  }

}


/* ==========================================
BÓKUN PRODUCT LIST
========================================== */

.product-list-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  padding:120px 0 135px;

  background:transparent;
}


/* ==========================================
SECTION TITLE
========================================== */

.product-list-section .section-title{
  width:min(780px,90%);
  max-width:780px;
  margin:0 auto 54px;

  text-align:center;
}

.product-list-section .section-title span{
  display:inline-block;

  margin-bottom:16px;
  padding:8px 15px;

  color:#087b8c;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(8,123,140,.14);
  border-radius:999px;

  font-size:.78rem;
  font-weight:800;
  letter-spacing:2px;
  line-height:1;
  text-transform:uppercase;

  box-shadow:
    0 8px 24px rgba(5,79,90,.08);
}

.product-list-section .section-title h2{
  margin:0;

  color:#073d49;
  font-size:clamp(2.7rem,5vw,4.9rem);
  line-height:1.04;
  letter-spacing:-.03em;
}

.product-list-section .section-title p{
  max-width:680px;
  margin:22px auto 0;

  color:#496a70;
  font-size:1.08rem;
  line-height:1.72;
}


/* ==========================================
BÓKUN — OUTER DARK MENU FRAME
========================================== */

.widget-shell{
  position:relative;

  width:min(1320px,92%);
  min-height:1100px;
  margin:0 auto;
  padding:34px;
  box-sizing:border-box;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(89,219,215,.18),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #0a5360 0%,
      #063944 48%,
      #042f38 100%
    );

  border:1px solid rgba(255,255,255,.14);
  border-radius:38px;

  overflow:hidden;

  box-shadow:
    0 36px 80px rgba(5,55,65,.25),
    0 12px 32px rgba(5,55,65,.16);
}


/* ==========================================
BÓKUN — OUTER FRAME HIGHLIGHT
========================================== */

.widget-shell::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,0) 32%
    );

  pointer-events:none;
}


/* Remove the previous inner outline */

.widget-shell::after{
  display:none;
}


/* ==========================================
BÓKUN — WHITE INNER SHELL
========================================== */

.widget-shell .bokunWidget{
  position:relative;
  z-index:1;

  width:100%;
  min-height:1000px;

  padding:12px;

  background:#ffffff;
  border-radius:22px;

  overflow:visible;

  box-sizing:border-box;

  box-shadow:
    0 8px 24px rgba(0,0,0,.14);
}


/* ==========================================
BÓKUN — IFRAME
========================================== */

.widget-shell iframe{
  display:block;

  width:100% !important;
  max-width:100% !important;

  margin:0;
  padding:0;

  background:#ffffff;

  border:0 !important;
  border-radius:0 !important;

  box-sizing:border-box;
}


/* ==========================================
BÓKUN — NOSCRIPT MESSAGE
========================================== */

.widget-shell noscript{
  position:relative;
  z-index:1;

  display:block;

  padding:40px;

  color:#ffffff;
  font-size:1rem;
  line-height:1.65;
  text-align:center;
}


/* ==========================================
PRODUCT LIST — LARGE / HIGH-RESOLUTION SCREENS
========================================== */

@media (min-width:1600px){

  .product-list-section{
    padding:135px 0 155px;
  }

  .product-list-section .section-title{
    width:min(900px,88%);
    max-width:900px;
    margin-bottom:62px;
  }

  .widget-shell{
    width:min(1480px,90%);
    padding:40px;
    border-radius:42px;
  }

}


/* ==========================================
BÓKUN — TABLET
========================================== */

@media (max-width:900px){

  .widget-shell{
    width:min(740px,90%);
    padding:24px;
    border-radius:30px;
  }

  .widget-shell .bokunWidget{
    min-height:950px;

    padding:10px;

    border-radius:18px;
  }

}


/* ==========================================
BÓKUN — MOBILE
========================================== */

@media (max-width:560px){

  .product-list-section{
    padding:90px 0 105px;
  }

  .product-list-section .section-title{
    width:88%;
    margin-bottom:42px;
  }

  .product-list-section .section-title h2{
    font-size:2.4rem;
  }

  .product-list-section .section-title p{
    font-size:1rem;
  }

  .widget-shell{
    width:92%;
    min-height:930px;
    padding:12px;
    border-radius:24px;
  }

  .widget-shell .bokunWidget{
    min-height:860px;

    padding:7px;

    border-radius:16px;
  }

}


/* ==========================================
ISLAND STORY
========================================== */

.island-story{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background-image:
    linear-gradient(rgba(5,28,34,.55), rgba(5,28,34,.55)),
    url("assets/island-story-bg.png");

  background-repeat:
    no-repeat,
    repeat-y;

  background-position:
    center center,
    center top;

  background-size:
    cover,
    100% auto;
}

.island-story::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(61,211,205,.10), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(61,211,205,.06), transparent 38%);
}

.island-story > *{
  position:relative;
  z-index:1;
}

/* ==========================================
ISLAND TIME
========================================== */

.island-time{
  display:flex;
  align-items:center;

  min-height:620px;
  padding:110px 0 120px;

  background:transparent;
}

.island-time h2{
  max-width:720px;
  margin:0;

  color:#ffffff;
  font-size:clamp(3rem,5vw,5rem);
  line-height:1.02;

  text-shadow:
    0 4px 24px rgba(0,0,0,.36);
}

.island-time p{
  max-width:780px;
  margin:26px 0 0;

  color:rgba(255,255,255,.92);
  font-size:1.13rem;
  line-height:1.75;

  text-shadow:
    0 2px 14px rgba(0,0,0,.32);
}


/* ==========================================
ABOUT
========================================== */

.about-section{
  position:relative;
  padding:120px 0 135px;

  background:transparent;
}

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:72px;
}

.about-media{
  position:relative;
  overflow:hidden;

  width:100%;
  height:520px;

  background:#06333c;
  border-radius:30px;

  box-shadow:
    0 28px 65px rgba(0,0,0,.34);
}

.about-video{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  border-radius:30px;
}

.about-copy{
  max-width:620px;
}

.about-copy .eyebrow{
  display:block;

  margin-bottom:18px;

  color:#59dbd7;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:2px;
  line-height:1.2;
  text-transform:uppercase;
}

.about-copy h2{
  margin:0;

  color:#ffffff;
  font-size:clamp(2.6rem,4.6vw,4.7rem);
  line-height:1.05;

  text-shadow:
    0 4px 24px rgba(0,0,0,.36);
}

.about-copy p{
  margin:24px 0 0;

  color:rgba(255,255,255,.9);
  font-size:1.06rem;
  line-height:1.78;

  text-shadow:
    0 2px 14px rgba(0,0,0,.3);
}

.about-copy .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:50px;
  margin-top:32px;
  padding:13px 25px;

  color:#ffffff;
  background:#0fa8c4;
  border:0;
  border-radius:999px;

  font:inherit;
  font-size:.92rem;
  font-weight:800;
  line-height:1;
  text-align:center;
  text-decoration:none;

  box-shadow:
    0 12px 28px rgba(0,0,0,.25);

  transition:
    transform .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

.about-copy .button:link,
.about-copy .button:visited{
  color:#ffffff;
}

.about-copy .button:hover{
  color:#ffffff;
  background:#0b849a;

  transform:translateY(-2px);

  box-shadow:
    0 17px 36px rgba(0,0,0,.34);
}


/* ==========================================
ISLAND STORY — TABLET
========================================== */

@media (max-width:900px){

  .island-story{
    background-position:center top;
  }

  .island-story::before{
    background:
      linear-gradient(
        180deg,
        rgba(2,18,18,.62) 0%,
        rgba(2,18,18,.72) 100%
      );
  }

  .island-time{
    min-height:560px;
    padding:95px 0;
  }

  .about-section{
    padding:100px 0;
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .about-media{
    height:460px;
  }

  .about-copy{
    max-width:720px;
  }

}


/* ==========================================
ISLAND STORY — MOBILE
========================================== */

@media (max-width:560px){

  .island-story{
    background-size:auto 100%;
    background-position:center top;
  }

  .island-story .container{
    width:min(calc(100% - 36px),1200px);
  }

  .island-time{
    min-height:520px;
    padding:80px 0;
  }

  .island-time h2{
    font-size:2.7rem;
  }

  .island-time p{
    margin-top:21px;
    font-size:1rem;
    line-height:1.67;
  }

  .about-section{
    padding:82px 0;
  }

  .about-grid{
    gap:36px;
  }

  .about-media{
    height:340px;
    border-radius:22px;
  }

  .about-video{
    border-radius:22px;
  }

  .about-copy h2{
    font-size:2.55rem;
  }

  .about-copy p{
    margin-top:20px;
    font-size:1rem;
    line-height:1.68;
  }

  .about-copy .button{
    width:100%;
    margin-top:28px;
  }

}



/* ==========================================
LOGO STORY
========================================== */

.story-section{
  position:relative;
  overflow:hidden;

  padding:120px 0;

  background:transparent;
}


.story-section::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:900px;
  height:900px;

  background:url("assets/logo-outline.png") center center no-repeat;
  background-size:contain;

  opacity:.08;

  filter:brightness(0) invert(1);

  pointer-events:none;
}


.story-grid{
  position:relative;
  z-index:2;

  max-width:900px;

  margin:0 auto;

  text-align:center;
}


.story-copy{
  position:relative;
  z-index:2;
}


.story-copy .eyebrow{
  display:block;

  margin-bottom:18px;

  color:#59dbd7;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:2px;
  line-height:1.2;
  text-transform:uppercase;
}


.story-copy h2{
  margin:0;

  color:#ffffff;
  font-size:clamp(2.6rem,4.6vw,4.7rem);
  line-height:1.05;

  text-shadow:
    0 4px 24px rgba(0,0,0,.36);
}


.story-copy p{
  max-width:820px;

  margin:24px auto 0;

  color:rgba(255,255,255,.90);
  font-size:1.06rem;
  line-height:1.78;

  text-shadow:
    0 2px 14px rgba(0,0,0,.30);
}


.story-art{
  position:relative;
  z-index:2;

  display:flex;
  justify-content:center;
}


.story-logo{
  display:block;

  width:min(440px,80%);

  margin:70px auto 0;

  opacity:.92;
}


/* ==========================================
LOGO STORY — TABLET
========================================== */

@media (max-width:900px){

  .story-section{
    padding:100px 0;
  }

  .story-section::before{
    width:680px;
    height:680px;
  }

  .story-grid{
    max-width:760px;
  }

  .story-logo{
    width:min(400px,78%);
    margin-top:58px;
  }

}


/* ==========================================
LOGO STORY — MOBILE
========================================== */

@media (max-width:560px){

  .story-section{
    padding:82px 0;
  }

  .story-section::before{
    width:420px;
    height:420px;
  }

  .story-copy .eyebrow{
    margin-bottom:16px;

    font-size:.76rem;
    letter-spacing:1.7px;
  }

  .story-copy h2{
    font-size:2.55rem;
    line-height:1.05;
  }

  .story-copy p{
    margin-top:20px;

    font-size:1rem;
    line-height:1.68;
  }

  .story-logo{
    width:min(310px,82%);
    margin-top:44px;
  }

}






/* ==========================================
REVIEWS
========================================== */

.reviews-section{
  position:relative;
  padding:80px 0;
  background:#eaf7f8;
}


/* ==========================================
REVIEWS — GRID
========================================== */

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;

  margin-top:30px;
}


/* ==========================================
REVIEWS — CARDS
========================================== */

.review-card{
  position:relative;
  overflow:hidden;

  padding:34px;

  background:#ffffff;
  border:1px solid rgba(20,145,143,.18);
  border-top:6px solid var(--primary);
  border-radius:26px;

  box-shadow:
    0 18px 45px rgba(0,0,0,.08);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.review-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 28px 60px rgba(20,145,143,.18);
}

.review-card::before{
  content:"“";

  position:absolute;
  top:12px;
  right:22px;

  color:rgba(20,145,143,.08);
  font-family:Georgia,serif;
  font-size:5.5rem;
  line-height:1;

  pointer-events:none;
}


/* ==========================================
REVIEWS — STARS
========================================== */

.stars{
  display:inline-block;

  margin-bottom:24px;

  color:var(--primary);
  font-size:1.25rem;
  letter-spacing:5px;
}


/* ==========================================
REVIEWS — TEXT
========================================== */

.review-card p{
  position:relative;
  z-index:1;

  margin:0 0 26px;

  color:var(--muted);
  font-size:1.02rem;
  line-height:1.8;
}

.review-card h4{
  position:relative;
  z-index:1;

  margin:0 0 4px;

  color:var(--ocean);
  font-size:1.05rem;
  font-weight:700;
}

.review-card span{
  display:block;

  color:#7c8b90;
  font-size:.9rem;
}


/* ==========================================
REVIEWS — BUTTON
========================================== */

.reviews-button{
  display:flex;
  justify-content:center;

  margin-top:42px;
}

.reviews-button .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:16px 34px;

  color:#ffffff;
  background:var(--primary);
  border:2px solid var(--primary);
  border-radius:999px;

  font-weight:800;
  text-decoration:none;

  box-shadow:
    0 10px 30px rgba(20,145,143,.22);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.reviews-button .button:link,
.reviews-button .button:visited{
  color:#ffffff;
}

.reviews-button .button:hover{
  color:#ffffff;
  background:var(--primary-dark);
  border-color:var(--primary-dark);

  transform:translateY(-3px);

  box-shadow:
    0 18px 40px rgba(20,145,143,.32);
}


/* ==========================================
REVIEWS — TABLET / MOBILE
========================================== */

@media (max-width:900px){

  .reviews-section{
    padding:65px 0;
  }

  .review-grid{
    grid-template-columns:1fr;
    gap:22px;

    margin-top:28px;
  }

  .review-card{
    padding:30px;
  }

  .reviews-button{
    margin-top:34px;
  }

}




/* ==========================================
CONTACT
========================================== */

.contact-section{
  position:relative;

  padding:110px 0;

  color:#ffffff;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(24,193,203,.12),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--ocean),
      var(--ocean2)
    );
}


.contact-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;

  gap:60px;
}


/* ==========================================
CONTACT — HEADING
========================================== */

.contact-section .eyebrow{
  display:block;

  color:#5edce0;

  font-size:.82rem;
  font-weight:800;
  letter-spacing:2px;
  line-height:1;
  text-transform:uppercase;
}


.contact-section h2{
  max-width:720px;

  margin:20px 0;

  color:#ffffff;

  font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:1.25;
}


.contact-section p{
  max-width:650px;

  margin:0;

  color:rgba(255,255,255,.88);

  font-size:1.1rem;
  line-height:1.75;
}


/* ==========================================
CONTACT — ACTION BUTTONS
========================================== */

.contact-buttons{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:16px;

  margin-top:40px;
}


.contact-buttons .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:190px;
  min-height:54px;

  padding:14px 28px;

  border-radius:999px;

  font-size:.96rem;
  font-weight:800;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;

  transition:
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}


/* WhatsApp button */

.contact-buttons .button-primary{
  color:#ffffff;
  background:var(--primary);
  border:2px solid var(--primary);

  box-shadow:
    0 12px 30px rgba(20,145,143,.28);
}


.contact-buttons .button-primary:link,
.contact-buttons .button-primary:visited{
  color:#ffffff;
}


.contact-buttons .button-primary:hover{
  color:#ffffff;
  background:var(--primary-dark);
  border-color:var(--primary-dark);

  transform:translateY(-3px);

  box-shadow:
    0 18px 40px rgba(20,145,143,.36);
}


/* Email button */

.contact-buttons .button-secondary{
  color:#ffffff;
  background:rgba(255,255,255,.07);

  border:2px solid rgba(255,255,255,.78);

  box-shadow:
    0 10px 26px rgba(0,0,0,.12);
}


.contact-buttons .button-secondary:link,
.contact-buttons .button-secondary:visited{
  color:#ffffff;
}


.contact-buttons .button-secondary:hover{
  color:var(--ocean);
  background:#ffffff;
  border-color:#ffffff;

  transform:translateY(-3px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.2);
}


/* ==========================================
CONTACT — QUICK INFORMATION CARD
========================================== */

.contact-card{
  padding:38px;

  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    0 22px 55px rgba(0,0,0,.16);
}


.contact-card h3{
  margin:0 0 26px;

  color:#ffffff;

  font-size:1.3rem;
}


.contact-card ul{
  display:grid;

  gap:20px;

  margin:0;
  padding:0;

  list-style:none;
}


.contact-card li{
  color:rgba(255,255,255,.92);

  font-size:1rem;
  line-height:1.55;
}


.contact-card a{
  color:rgba(255,255,255,.92);

  text-decoration:none;

  transition:
    color .25s ease,
    transform .25s ease;
}


.contact-card a:link,
.contact-card a:visited{
  color:rgba(255,255,255,.92);
}


.contact-card a:hover{
  color:#66e1e4;
}


/* ==========================================
CONTACT — TABLET
========================================== */

@media (max-width:900px){

  .contact-section{
    padding:90px 0;
  }

  .contact-grid{
    grid-template-columns:1fr;

    gap:48px;
  }

  .contact-card{
    max-width:680px;
  }

}


/* ==========================================
CONTACT — MOBILE
========================================== */

@media (max-width:560px){

  .contact-section{
    padding:76px 0;
  }

  .contact-section h2{
    font-size:2.65rem;
  }

  .contact-section p{
    font-size:1rem;
    line-height:1.68;
  }

  .contact-buttons{
    flex-direction:column;
    align-items:stretch;

    margin-top:32px;
  }

  .contact-buttons .button{
    width:100%;
  }

  .contact-card{
    padding:28px 24px;

    border-radius:22px;
  }

}


/* ==========================================
FOOTER
========================================== */

footer{

background:#01161d;

color:white;

padding:80px 0 40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

}

.footer-logo{

width:180px;

margin-bottom:20px;

}

.footer-grid h4{

margin-bottom:20px;

}

.footer-grid a{

display:block;

margin-bottom:12px;

opacity:.75;

transition:.25s;

}

.footer-grid a:hover{

opacity:1;

color:var(--primary);

}



/* ==========================================
ANIMATIONS
========================================== */

.tour-card,
.private-card,
.review-card,
.insta-photo{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.tour-card:hover,
.private-card:hover,
.review-card:hover,
.insta-photo:hover{

transform:translateY(-8px);

box-shadow:
0 30px 70px rgba(0,0,0,.16);

}




/* ==========================================
RESPONSIVE — GENERAL WEBSITE MOBILE
========================================== */

@media (max-width:560px){

  .site-header{
    position:fixed;
  }

  .nav-wrap{
    height:68px;
  }

  .nav-links,
  .nav-button{
    display:none;
  }

  section{
    padding:80px 0;
  }

  .section-title{
    margin-bottom:44px;
  }

  .section-title h2{
    font-size:2.2rem;
  }

  .section-title p{
    font-size:1rem;
  }

  .featured-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .tour-card > img{
    height:235px;
  }

  .tour-content{
    padding:23px;
  }

  .tour-content h3{
    font-size:1.55rem;
  }

  .card-button{
    width:100%;
  }

  .widget-shell{
    min-height:1200px;
    padding:14px;
    border-radius:18px;
  }

  .about-video{
    height:380px;
  }

  .about-copy h2,
  .story-copy h2{
    color:#ffffff;

    text-shadow:
      0 4px 24px rgba(0,0,0,.35);
  }

  .story-copy h2{
    font-size:2.2rem;
  }

  .story-copy p{
    color:rgba(255,255,255,.90);
    font-size:1.05rem;
    line-height:1.75;

    text-shadow:
      0 2px 12px rgba(0,0,0,.30);
  }

  .story-section::before{
    width:420px;
    height:420px;
  }

  .private-card,
  .review-card,
  .contact-card{
    padding:26px;
  }

  .instagram-grid{
    grid-template-columns:1fr;
  }

  .insta-photo img{
    height:260px;
  }

  .contact-buttons{
    flex-direction:column;
  }

  .contact-buttons .button{
    width:100%;
  }

  .footer-grid{
    gap:34px;
  }

}