/* ====== Base ====== */
:root{
  --sl-primary: #000080; /* teal */
  --sl-primary-dark:#87CEEB;
  --sl-accent: #14b8a6;
  --sl-dark: #102a43;
  --sl-muted:#6b7280;
  --sl-bg:#f7f8fa;
}

html,body{height:100%}
body{
  font-family:'Open Sans', sans-serif;
  color:#333;
  background:var(--sl-bg);
}

h1,h2,h3,h4,h5{
  font-family:'Poppins', sans-serif;
  color:var(--sl-dark);
  letter-spacing:.2px;
}

/* ====== Navbar ====== */
.navbar{
  backdrop-filter: blur(10px);
}
.navbar .nav-link{
  letter-spacing:.6px;
}
.navbar .nav-link.active, 
.navbar .nav-link:hover{
  color: navy !important;
  letter-spacing: .6px;
  font-weight: 600;
}
.btn--round{ border-radius: 999px; }

/* ====== Hero Slider ====== */
.hero{
  padding-top: 74px; /* navbar height space */
}
.hero .swiper{
  height: calc(100vh - 74px);
}
.hero-slide{
  position:relative;
  background: #000 center/cover no-repeat;
  background-image: var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.55));
}
.hero .container{
  position:relative; z-index:2;
}
.hero .display-4{ text-shadow:0 6px 18px rgba(0,0,0,.35);}
.hero .lead{ color:#e8fbf8;}
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:.25s;
}
.hero-prev{ left:18px; }
.hero-next{ right:18px; }
.hero-nav:hover{ background:rgba(255,255,255,.35);}
.hero-pagination{
  position:absolute; left:0; right:0; bottom:18px; z-index:3;
}

/* scroll button */
.intro__btn-scroll{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  width:28px; height:44px; border:2px solid #fff; border-radius:24px; background:transparent;
  z-index:3; opacity:.9;
}
.intro__btn-scroll span{
  position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px; background:#fff; transform:translateX(-50%);
  animation:scrollDot 1.2s infinite;
}
@keyframes scrollDot{
  0%{ transform:translate(-50%,0); opacity:1 }
  100%{ transform:translate(-50%,12px); opacity:0 }
}

/* ====== Section header ====== */
.section-header__stars{ color:#f5c518; }
.section-header__stars .center{ margin:0 .4rem; }

/* ====== Destinations Carousel (Cards) ====== */
.card-intro{
  position:relative; display:block; color:#fff; text-decoration:none;
  height:420px; border-radius:18px; overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  transition: transform .35s ease, box-shadow .35s ease;
}
.card-intro::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6) 70%);
}
.card-intro:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}
.card-intro__footer{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.25rem;
  z-index:2;
}
.card-intro__local{ font-size:.95rem; opacity:.95 }
.card-hover{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; transition:.3s;
}
.card-intro:hover .card-hover{ opacity:1; }
.card-hover__view{ border-radius:999px; padding:.5rem 1.1rem; }

/* Destinations Swiper controls */
.intro__hotels-controls{
  position:relative; margin: 12px auto 0; text-align:center;
}
.btn-nav{
  border-radius:40px; padding:.55rem .85rem; border:0;
}
.btn-nav--left{ margin-right:.4rem; }
.btn-nav--right{ margin-left:.4rem; }

/* ====== Generic Cards ====== */
.card-hotel, .card-service{
  border:0; border-radius:16px; background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-hotel:hover, .card-service:hover{
  transform: translateY(-6px);
  box-shadow:0 16px 28px rgba(0,0,0,.12);
}
.card-hotel__img img{
  width:100%; height:220px; object-fit:cover; display:block;
  border-radius:16px 16px 0 0;
}

/* ====== Buttons ====== */
.btn-primary{
  background: linear-gradient(135deg, var(--sl-primary), var(--sl-accent));
  border:0;
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--sl-primary-dark), var(--sl-primary));
}

/* scroll-up */
.js-scroll-up{
  position: fixed; right: 18px; bottom: 18px; z-index: 1040; display:none;
}
.js-scroll-up.show{ display:inline-flex; }

/* ====== Footer ====== */
.page-footer{
  position:relative; background:#0b1b2a; color:#cbd5e1;
}
.page-footer__cover{
  position:relative; height:280px; overflow:hidden;
}
.footer-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.2), #0b1b2a 80%);
}
.page-footer .hr{ height:1px; background:rgba(255,255,255,.25); }

/* Social links */
.footer-social .social-link{
  color:#e2e8f0; font-size:1.25rem;
  display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border-radius:50%; transition:.25s;
}
.footer-social .social-link:hover{ background:rgba(255,255,255,.25); color:#fff; }

/* ====== Utilities ====== */
.opacity-90{ opacity:.9; }
.section{ position:relative; }