EXPLORE THE UNDERWATER WORLD
Scuba Diving Around the World
Discover vibrant coral reefs, fascinating marine
life, and unforgettable diving destinations.
Explore Scuba Diving →
DISCOVER MARINE LIFE
Explore Amazing Sea Life
Encounter extraordinary ocean creatures
and experience the beauty beneath the waves.
Discover Sea Life →
YOUR NEXT UNDERWATER ADVENTURE
Dive Into the Extraordinary
Experience new places. Meet new friends.
Gain a new perspective.
Come Join the Adventure →
01 /
03
/* MAIN */
.nst-scuba-hero,
.nst-scuba-hero * {
box-sizing: border-box;
}
.nst-scuba-hero {
width: 100%;
margin: 0;
padding: 0;
font-family: “Montserrat”, Arial, sans-serif;
}
/* SLIDER */
.nst-scuba-hero-slider {
position: relative;
width: 100%;
height: 580px;
overflow: hidden;
background: #063e52;
isolation: isolate;
}
/* SLIDES */
.nst-scuba-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
z-index: 0;
transition: opacity .6s ease, visibility .6s ease;
}
.nst-scuba-hero-slide.active {
opacity: 1;
visibility: visible;
z-index: 1;
}
.nst-scuba-hero-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* DARK OVERLAY */
.nst-scuba-hero-slide::after {
content: “”;
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(4,29,42,.82),
rgba(4,42,58,.42) 55%,
rgba(4,42,58,.12)
);
}
/* TEXT */
.nst-scuba-hero-content {
position: absolute;
z-index: 2;
top: 50%;
left: 9%;
transform: translateY(-50%);
width: min(650px,80%);
color: #fff;
}
.nst-scuba-hero-content span {
display: block;
margin-bottom: 18px;
color: #e9bb82;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.nst-scuba-hero-content h1,
.nst-scuba-hero-content h2 {
font-family: Georgia, serif;
font-size: clamp(36px,5vw,65px);
line-height: 1.12;
margin: 0 0 22px;
color: #fff !important;
}
.nst-scuba-hero-content p {
color: #fff;
font-size: 17px;
line-height: 1.7;
margin: 0 0 28px;
}
/* BUTTON */
.nst-scuba-hero-content a {
display: inline-block;
background: #dca56b;
color: #20362b !important;
padding: 15px 28px;
border-radius: 3px;
text-decoration: none !important;
font-size: 13px;
font-weight: 700;
}
.nst-scuba-hero-content a:hover {
background: #edbf89;
}
/* ARROWS */
.nst-scuba-hero-prev,
.nst-scuba-hero-next {
position: absolute;
z-index: 5;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
padding: 0;
border: 1px solid rgba(255,255,255,.6);
border-radius: 50%;
background: rgba(0,0,0,.3);
color: white;
font-size: 18px;
cursor: pointer;
}
.nst-scuba-hero-prev { left: 20px; }
.nst-scuba-hero-next { right: 20px; }
/* DOTS */
.nst-scuba-hero-dots {
position: absolute;
z-index: 5;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
}
.nst-scuba-hero-dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.55);
cursor: pointer;
}
.nst-scuba-hero-dot.active {
width: 28px;
border-radius: 8px;
background: #dca56b;
}
/* COUNTER */
.nst-scuba-hero-counter {
position: absolute;
z-index: 5;
right: 7%;
bottom: 27px;
color: white;
font-size: 14px;
}
.nst-scuba-current {
color: #e9bb82;
font-size: 21px;
font-weight: bold;
}
/* MOBILE */
@media(max-width:767px) {
.nst-scuba-hero-slider {
height: 510px;
}
.nst-scuba-hero-content {
left: 8%;
width: 84%;
}
.nst-scuba-hero-content h1,
.nst-scuba-hero-content h2 {
font-size: 35px;
}
.nst-scuba-hero-content p {
font-size: 14px;
}
.nst-scuba-hero-prev,
.nst-scuba-hero-next {
top: auto;
bottom: 65px;
transform: none;
width: 35px;
height: 35px;
}
.nst-scuba-hero-prev { left: 8%; }
.nst-scuba-hero-next { right: 8%; }
.nst-scuba-hero-dots {
bottom: 80px;
}
}
.nst-scuba-hero button:focus-visible,
.nst-scuba-hero a:focus-visible {
outline: 3px solid #e9bb82;
outline-offset: 3px;
}
@media(prefers-reduced-motion:reduce) {
.nst-scuba-hero-slide {
transition: none;
}
}
(function () {
function initScubaSlider(slider) {
if (slider.dataset.ready) return;
slider.dataset.ready = “true”;
const slides = Array.from(
slider.querySelectorAll(“.nst-scuba-hero-slide”)
).slice(0, 3);
const dotsWrap = slider.querySelector(“.nst-scuba-hero-dots”);
const currentText = slider.querySelector(“.nst-scuba-current”);
const totalText = slider.querySelector(“.nst-scuba-total”);
const prev = slider.querySelector(“.nst-scuba-hero-prev”);
const next = slider.querySelector(“.nst-scuba-hero-next”);
if (!slides.length) return;
const speed = 2000;
let index = 0;
let timer = null;
const reduceMotion = window.matchMedia(
“(prefers-reduced-motion: reduce)”
).matches;
totalText.textContent =
String(slides.length).padStart(2, “0”);
const dots = slides.map(function (_, i) {
const dot = document.createElement(“button”);
dot.type = “button”;
dot.className = “nst-scuba-hero-dot”;
dot.setAttribute(“aria-label”, “Go to slide ” + (i + 1));
dot.addEventListener(“click”, function () {
show(i);
restart();
});
dotsWrap.appendChild(dot);
return dot;
});
function show(i) {
index = (i + slides.length) % slides.length;
slides.forEach(function (slide, n) {
const active = n === index;
slide.classList.toggle(“active”, active);
slide.setAttribute(“aria-hidden”, String(!active));
if (“inert” in slide) {
slide.inert = !active;
}
slide.querySelectorAll(“a”).forEach(function (link) {
link.tabIndex = active ? 0 : -1;
});
});
dots.forEach(function (dot, n) {
const active = n === index;
dot.classList.toggle(“active”, active);
dot.setAttribute(“aria-current”, String(active));
});
currentText.textContent =
String(index + 1).padStart(2, “0”);
}
function stop() {
clearInterval(timer);
timer = null;
}
function start() {
if (
timer === null &&
slides.length > 1 &&
!reduceMotion &&
!document.hidden
) {
timer = setInterval(function () {
show(index + 1);
}, speed);
}
}
function restart() {
stop();
if (!slider.matches(“:hover”) &&
!slider.contains(document.activeElement)) {
start();
}
}
prev.addEventListener(“click”, function () {
show(index – 1);
restart();
});
next.addEventListener(“click”, function () {
show(index + 1);
restart();
});
slider.addEventListener(“mouseenter”, stop);
slider.addEventListener(“mouseleave”, restart);
slider.addEventListener(“focusin”, stop);
slider.addEventListener(“focusout”, function () {
setTimeout(restart, 0);
});
document.addEventListener(“visibilitychange”, function () {
if (document.hidden) stop();
else restart();
});
show(0);
start();
}
function initialize() {
document.querySelectorAll(“.nst-scuba-hero-slider”)
.forEach(initScubaSlider);
}
if (document.readyState === “loading”) {
document.addEventListener(“DOMContentLoaded”, initialize);
} else {
initialize();
}
})();
