/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS ALL DEVICES */
*#dm *.dmBody div.dmform-error
{
	color:rgba(0,0,0,1) !important;
}
*#dm *.dmBody div.dmforminput textarea
{
	color:rgb(115,111,111) !important;
	font-weight:normal !important;
	text-decoration:none !important;
}
*#dm *.dmBody div.dmforminput *.fileUploadLink
{
	color:rgb(115,111,111) !important;
	font-weight:normal !important;
	text-decoration:none !important;
}
*#dm *.dmBody div.checkboxwrapper span
{
	color:rgb(115,111,111) !important;
	font-weight:normal !important;
	text-decoration:none !important;
}
*#dm *.dmBody div.radiowrapper span
{
	color:rgb(115,111,111) !important;
	font-weight:normal !important;
	text-decoration:none !important;
}
*#dm *.dmBody *.u_1937823242:before
{
	opacity:0.5 !important;
	background-color:rgb(255,255,255) !important;
}
*#dm *.dmBody *.u_1937823242.before
{
	opacity:0.5 !important;
	background-color:rgb(255,255,255) !important;
}
*#dm *.dmBody div.u_1937823242:before
{
	background-color:rgba(69,101,245,1) !important;
	opacity:0.23 !important;
}
*#dm *.dmBody div.u_1937823242.before
{
	background-color:rgba(69,101,245,1) !important;
	opacity:0.23 !important;
}
*#dm *.dmBody a.u_1056003774 *.iconBg
{
	display:none !important;
}*#dm *.dmBody *.u_1056003774 { text-align:LEFT !important; }

*#dm *.dmBody div.u_1859434648 {
  background-color:rgba(255,255,255,0.91) !important;
  box-shadow:rgba(0,0,0,0.25) 0px 3px 11px 0px !important;
  -moz-box-shadow:rgba(0,0,0,0.25) 0px 3px 11px 0px !important;
  -webkit-box-shadow:rgba(0,0,0,0.25) 0px 3px 11px 0px !important;
  border-color:rgba(212,212,212,1) !important;
  border-width:2px !important;
  border-style:solid !important;
  border-radius:21px 21px 21px 21px !important;
}

*#dm *.dmBody div.u_1404524734 {
  background-color:rgba(255,255,255,0.91) !important;
  box-shadow:rgba(0,0,0,0.25) 0px 3px 11px 0px !important;
  -moz-box-shadow:rgba(0,0,0,0.25) 0px 3px 11px 0px !important;
  -webkit-box-shadow:rgba(0,0,0,0.25) 0px 3px 11px 0px !important;
  border-color:rgba(212,212,212,1) !important;
  border-width:2px !important;
  border-style:solid !important;
  border-radius:20px 20px 20px 20px !important;
}

*#dm *.dmBody a.u_1870776834 .iconBg { display:none !important; }

*#dm *.dmBody a.u_1870776834 {
  border-radius:6px !important;
  -moz-border-radius:6px !important;
  -webkit-border-radius:6px !important;
}

*#dm *.dmBody a.u_1983661319 .iconBg { display:none !important; }

*#dm *.dmBody a.u_1983661319 {
  border-radius:6px !important;
  -moz-border-radius:6px !important;
  -webkit-border-radius:6px !important;
}

*#dm *.dmBody a.u_1870776834 span.text { font-family:'Roboto' !important; }

*#dm *.dmBody div.u_1937823242 {
  background-repeat:no-repeat !important;
  background-image:none !important;
  background-size:cover !important;
  background-color:rgba(255,255,255,1) !important;
  -webkit-box-shadow:none !important;
  box-shadow:none !important;
  -moz-box-shadow:none !important;
}

*#dm *.dmBody a.u_1870776834:hover span.text { color:rgba(255,1,218,1) !important; }

*#dm *.dmBody a.u_1870776834.hover span.text { color:rgba(255,1,218,1) !important; }

*#dm *.dmBody a.u_1983661319 span.text {
  font-family:'Roboto' !important;
  color:rgba(255,255,255,1) !important;
}

*#dm *.dmBody a.u_1983661319:hover span.text { color:rgba(250,8,8,1) !important; }

*#dm *.dmBody a.u_1983661319.hover span.text { color:rgba(250,8,8,1) !important; }

*#dm *.dmBody div.u_1904644114 img[dm_changed] {
  -webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  -moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
}

*#dm *.dmBody div.u_1904644114 img {
  -webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  -moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
}

*#dm *.dmBody div.u_1097100098 img[dm_changed] {
  -webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  -moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
}

*#dm *.dmBody div.u_1097100098 img {
  -webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
  -moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 11px 0px !important;
}

*#dm *.dmBody *.u_1904644114
{
	width:100% !important;
}
*#dm *.dmBody *.u_1097100098
{
	width:100% !important;
}
/* Minimal crossfade slider */
#about-slider.wsn-slider {
  position: relative;
  width: 100%;
  /* keep a nice aspect ratio; tweak as you like or remove and let images define height */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
}

#about-slider.wsn-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* keeps images nicely cropped */
  opacity: 0;
  transition: opacity 0.8s ease;
}

#about-slider.wsn-slider img.active {
  opacity: 1;
}
/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS ALL DEVICES */
*#dm *.dmBody a.span.textonly
{
	color:rgb(255,255,255) !important;
}
*#dm *.dmBody div.dmform-error
{
	font-style:normal !important;
}
*#dm *.dmBody div.dmforminput textarea
{
	font-style:italic !important;
}
*#dm *.dmBody div.dmforminput *.fileUploadLink
{
	font-style:italic !important;
}
*#dm *.dmBody div.checkboxwrapper span
{
	font-style:italic !important;
}
*#dm *.dmBody div.radiowrapper span
{
	font-style:italic !important;
}
*#dm *.dmBody nav.u_1144820115
{
	color:black !important;
}
*#dm *.dmBody div.u_1620665024
{
	background-color:rgba(241,250,255,1) !important;
}
*#dm *.dmBody div.u_1823328844
{
	line-height:1.5 !important;
}
*#dm *.dmBody div.u_1573961559
{
	background-color:rgba(255,255,255,1) !important;
}
*#dm *.dmBody div.u_1768139310 hr
{
	color:rgb(56,56,56) !important;
	background:none !important;
	height:0px !important;
	background-color:transparent !important;
	background-size:initial !important;
	min-height:0px !important;
	border-color:currentColor !important;
	border-width:1px !important;
	border-top-style:solid !important;
	border-top-width:1px !important;
}
/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS DESKTOP AND TABLET DEVICES */
*#dm *.d-page-1716942098 DIV.dmInner
{
	background-repeat:no-repeat !important;
	background-size:cover !important;
	background-attachment:fixed !important;
	background-position:50% 50% !important;
}
*#dm *.d-page-1716942098 DIV#dmSlideRightNavRight
{
	background-repeat:no-repeat !important;
	background-image:none !important;
	background-size:cover !important;
	background-attachment:fixed !important;
	background-position:50% 50% !important;
}
*#dm *.dmBody div.u_1700065657
{
	float:none !important;
	top:0 !important;
	left:0 !important;
	width:calc(100% - 0px) !important;
	position:relative !important;
	height:auto !important;
	padding-top:2px !important;
	padding-left:0 !important;
	padding-bottom:2px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:100% !important;
	margin-top:0 !important;
	margin-bottom:0 !important;
	padding-right:0 !important;
	min-width:25px !important;
}
*#dm *.dmBody div.u_1279808936
{
	float:none !important;
	top:0 !important;
	left:0 !important;
	width:calc(100% - 0px) !important;
	position:relative !important;
	height:auto !important;
	padding-top:2px !important;
	padding-left:0 !important;
	padding-bottom:2px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:100% !important;
	margin-top:11px !important;
	margin-bottom:8px !important;
	padding-right:0 !important;
	min-width:25px !important;
}
*#dm *.dmBody h1.u_1979767937
{
	display:block !important;
	float:none !important;
	top:0px !important;
	left:0 !important;
	width:100% !important;
	position:relative !important;
	height:auto !important;
	padding-top:2px !important;
	padding-left:0px !important;
	padding-bottom:2px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:100% !important;
	margin-top:8px !important;
	margin-bottom:8px !important;
	padding-right:0px !important;
	min-width:0 !important;
	text-align:center !important;
}
*#dm *.dmBody div.u_1979767937
{
	display:block !important;
	float:none !important;
	top:0px !important;
	left:0 !important;
	width:calc(100% - 72px) !important;
	position:relative !important;
	height:auto !important;
	padding-top:2px !important;
	padding-left:0px !important;
	padding-bottom:2px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:816px !important;
	margin-top:8px !important;
	margin-bottom:8px !important;
	padding-right:0px !important;
	min-width:25px !important;
}
*#dm *.dmBody div.u_1823328844
{
	display:block !important;
	float:none !important;
	top:0px !important;
	left:0 !important;
	width:calc(100% - 93px) !important;
	position:relative !important;
	height:auto !important;
	padding-top:2px !important;
	padding-left:0px !important;
	padding-bottom:2px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:774px !important;
	margin-top:20px !important;
	margin-bottom:8px !important;
	padding-right:0px !important;
	min-width:25px !important;
}
*#dm *.dmBody div.u_1768139310
{
	width:468px !important;
	display:block !important;
	float:none !important;
	top:0px !important;
	left:0 !important;
	position:relative !important;
	height:auto !important;
	padding-top:0px !important;
	padding-left:0px !important;
	padding-bottom:0px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:68px !important;
	margin-top:20px !important;
	margin-bottom:0px !important;
	padding-right:0px !important;
	min-width:25px !important;
	text-align:center !important;
}
*#dm *.dmBody div.u_1940756977
{
	margin-left:0px !important;
	padding-top:34px !important;
	padding-left:0px !important;
	padding-bottom:0px !important;
	margin-top:10px !important;
	margin-bottom:10px !important;
	margin-right:0px !important;
	padding-right:0px !important;
}
*#dm *.dmBody div.u_1620665024
{
	float:none !important;
	top:0 !important;
	left:0 !important;
	width:auto !important;
	position:relative !important;
	height:auto !important;
	padding-top:23px !important;
	padding-left:0px !important;
	padding-bottom:100px !important;
	margin-right:0px !important;
	margin-left:0px !important;
	max-width:none !important;
	margin-top:0px !important;
	margin-bottom:0px !important;
	padding-right:0px !important;
	min-width:0 !important;
	text-align:center !important;
}
*#dm *.dmBody div.u_1573961559
{
	float:none !important;
	top:0px !important;
	left:0 !important;
	width:auto !important;
	position:relative !important;
	height:auto !important;
	padding-top:34px !important;
	padding-left:40px !important;
	padding-bottom:100px !important;
	margin-right:0px !important;
	margin-left:0px !important;
	max-width:none !important;
	margin-top:0px !important;
	margin-bottom:0px !important;
	padding-right:40px !important;
	min-width:0 !important;
	text-align:center !important;
}
/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS MOBILE DEVICES */
*#dm *.d-page-1716942098 DIV.dmInner
{
	background-repeat:no-repeat !important;
	background-size:cover !important;
}
*#dm *.d-page-1716942098 DIV#dmSlideRightNavRight
{
	background-repeat:no-repeat !important;
	background-image:none !important;
	background-size:cover !important;
}
*#dm *.dmBody div.u_1620665024
{
	margin-left:0px !important;
	padding-top:50px !important;
	padding-left:0px !important;
	padding-bottom:50px !important;
	margin-top:0px !important;
	margin-bottom:0px !important;
	margin-right:0px !important;
	padding-right:0px !important;
	width:auto !important;
}
*#dm *.dmBody div.u_1700065657
{
	float:none !important;
	top:0px !important;
	left:0 !important;
	width:calc(100% - 0px) !important;
	position:relative !important;
	height:auto !important;
	padding-top:2px !important;
	padding-left:0px !important;
	padding-bottom:2px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:100% !important;
	margin-top:0px !important;
	margin-bottom:8px !important;
	padding-right:0px !important;
	min-width:25px !important;
}
*#dm *.dmBody div.u_1573961559
{
	margin-left:0px !important;
	padding-top:50px !important;
	padding-left:0px !important;
	padding-bottom:50px !important;
	margin-top:0px !important;
	margin-bottom:0px !important;
	margin-right:0px !important;
	padding-right:0px !important;
	width:auto !important;
}
*#dm *.dmBody div.u_1768139310
{
	float:none !important;
	top:0px !important;
	left:0 !important;
	width:calc(100% - 147px) !important;
	position:relative !important;
	height:auto !important;
	padding-top:0px !important;
	padding-left:0px !important;
	padding-bottom:0px !important;
	margin-right:auto !important;
	margin-left:auto !important;
	max-width:49px !important;
	margin-top:0px !important;
	margin-bottom:0px !important;
	padding-right:0px !important;
	min-width:25px !important;
	text-align:center !important;
}
/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS ALL DEVICES */
*#dm *.dmBody a.span.textonly
{
	color:rgb(255,255,255) !important;
}
*#dm *.dmBody div.dmform-error
{
	font-style:normal !important;
}
*#dm *.dmBody div.dmforminput textarea
{
	font-style:italic !important;
}
*#dm *.dmBody div.dmforminput *.fileUploadLink
{
	font-style:italic !important;
}
*#dm *.dmBody div.checkboxwrapper span
{
	font-style:italic !important;
}
*#dm *.dmBody div.radiowrapper span
{
	font-style:italic !important;
}
*#dm *.dmBody nav.u_1144820115
{
	color:black !important;
}
*#dm *.dmBody div.u_1103321394
{
	background-color:rgba(0,0,0,0) !important;
	border-radius:0 0 0 0 !important;
	background-repeat:no-repeat !important;
	background-image:none !important;
	background-size:cover !important;
}
*#dm *.dmBody a.u_1616873620 span.text
{
	font-weight:600 !important;
}
*#dm *.dmBody div.u_1693124990
{
	background-color:rgba(0,0,0,0) !important;
}
*#dm *.dmBody nav.u_1061237793
{
	color:black !important;
}
*#dm *.dmBody nav.u_1272504094
{
	color:white !important;
}
*#dm *.dmBody *.u_1319004858
{
	background-image:url(images\st+pete+rental+photo.png) !important;
}

.hero.hero--yt{
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
}

/* “cover” trick for 16:9 YT: make the player bigger than the viewport
   so it always covers, regardless of zoom/aspect */
.yt-wrap{
  position: absolute; inset: 0;
  overflow: hidden;
}

.yt-wrap iframe{
  position: absolute;
  /* 16:9 math:
     width > viewport to cover tall screens; height > viewport to cover wide screens */
  width: 100vw;
  height: 56.25vw;            /* 100 * 9/16 */
  min-width: 177.78vh;        /* 100 * 16/9 */
  min-height: 100vh;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  /* set to auto if you want users to click the player */
  pointer-events: none;
}

.hero__content{ /* same as in A */ 
  position: relative; z-index: 2; display: grid; place-items: center;
  height: 100%; color:#fff; text-align:center;
}

.hero--yt::after{ /* optional contrast */
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:1;
}






        :root {
            --primary: #00d4ff;
            --dark: #0a1f2e;
            --accent: #ff6b35;
            --light: #f8fdfc;
            --gray: #57646f;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family: 'Inter', sans-serif; background: #fff; color: var(--gray); line-height:1.6; overflow-x:hidden; }
        h1, h2, h3, h5 { font-family: 'League Spartan', sans-serif; font-weight:900; color: var(--dark); }
        .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
        .section { padding: 50px 0; position:relative; }
        .text-center { text-align:center; }

        /* Hero */
        .hero {
            height: 100vh; min-height: 800px; background: linear-gradient(rgba(10,31,46,0.75), rgba(10,31,46,0.85)), url('https://img.youtube.com/vi/WZbJnst3ez4/maxresdefault.jpg') center/cover no-repeat;
            display: flex; align-items: center; color: white; position:relative;
        }
        .hero::before { content:''; position:absolute; inset:0; background: rgba(0,0,0,0.3); }
        .hero-content { position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; padding:0 20px; }
        .hero h1 { font-size: clamp(48px, 8vw, 110px); line-height:1; margin-bottom:20px; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }
        .hero .subtitle { font-size: clamp(24px, 4vw, 42px); margin-bottom:30px; font-weight:600; }
        .btn-primary {
            background: var(--primary); color: #000; padding: 22px 60px; font-size: 24px; font-weight:700;
            border-radius: 50px; display:inline-block; margin-top:30px; box-shadow: 0 10px 30px rgba(0,212,255,0.4);
            transition: all 0.3s; text-transform:uppercase; letter-spacing:1px;
        }
        .btn-primary:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,212,255,0.6); }



        /* Trust Badges 
        .trust-bar { background:#0a1f2e; color:white; padding:20px 0; text-align:center; font-size:18px; }
        .trust-bar span { margin:0 30px; font-weight:600; }*/

        /* Collapsibles */
        .collapsible { background:white; border-radius:16px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,0.1); margin:20px 0; }
        .collapsible-header { background:var(--primary); color:#000; padding:25px 40px; font-size:26px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
        .collapsible-content { padding:40px; background:#fafcff; font-size:18px; display:none; }
        .collapsible.active .collapsible-content { display:block; }

        /* Booking Widget Sticky */
        .booking-sidebar {
            position:sticky; top:100px; background:white; border-radius:20px; padding:30px; box-shadow:0 20px 60px rgba(0,0,0,0.15);
            text-align:center; margin-top:50px;
        }
        .price { font-size:48px; font-weight:900; color:var(--accent); margin:20px 0; }

        /* Responsive */
        @media (max-width:992px) {
            .hero h1 { font-size:60px; }
            .section { padding:30px 0; }
        }
/* Creates the dark translucent scrim only behind the text – keeps the vibe but makes text pop */
.hero-content::before {
    content: '';
    position: absolute;
    top: -40px;        /* extends a little above/below the text */
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: rgba(10, 31, 46, 0.78);   /* dark blue from your --dark variable, ~78% opacity */
    border-radius: 24px;
    z-index: -1;       /* sits behind the text but above the water image */
    backdrop-filter: blur(8px);           /* optional – gives that premium frosted-glass look */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Make sure the hero-content is still relative so the ::before works */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 40px 70px;   /* generous padding so text never touches the edge */
}
/* Floating CTA */
        .floating-cta {
            position:fixed; bottom:30px; left:25%; transform:translateX(-50%); z-index:9999;
            background:var(--primary); color:#000; padding:10px 10px; border-radius:100px;
            font-size:18px; font-weight:700; box-shadow:0 10px 20px rgba(0,0,0,0.3); animation: pulse 2s infinite;
        }
		@keyframes pulse { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.05); } }

/* ——— FINAL READABLE-BACKDROP – ONLY ONE COPY ——— */
.readable-backdrop {
    background: rgba(248, 253, 252, 0.97);
    border-radius: 28px;
    padding: 70px 40px;           /* inner breathing room – feel free to tweak */
    margin: 10px auto;            /* space above/below each card + between cards */
    max-width: 1400px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.18);
    overflow: hidden;
    position: relative;
}

/* Only remove the huge 100px padding from the card sections – but NOT from the very first section on the page */
.section.readable-backdrop:not(:first-of-type) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Force every readable-backdrop card to be exactly the same width forever */
section.readable-backdrop,
.readable-backdrop {
    max-width: 1400px !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}





/* 1. FORCE HEADER TO STAY NORMAL – kills Duda’s sticky forever */
.dmHeader, #fixHead, .fHeader, .dmHeaderContainer, header {
    position: relative !important;
    top: auto !important;
    z-index: 9999 !important;
}
.stickyHeaderSpacer, #stickyHeaderSpacer { 
    display: none !important; 
    height: 0 !important; 
}
/* BACK TO PERFECT – NON-STICKY, CLEAN, BEAUTIFUL TRUST BAR */
.trust-bar {
    margin-top: 90px !important;       /* perfect small gap under normal header */
    margin-bottom: 1px !important;
    padding: 20px 0 !important;
    background: #0a1f2e !important;
    color: white !important;
    text-align: center;
    font-size: 18px;
}

.trust-bar span {
    margin: 0 25px;
    font-weight: 600;
}
.tour-info {
        padding-left: 24px;
		padding-right: 24px;
		padding-top: 16px;
		padding-bottom: 0px;
        border-top: 4px solid rgba(255,255,255,0.3);
}

/* FIXED GALLERY GRID - Images will now fill containers properly */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4/3; /* This ensures consistent proportions */
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* This makes the image fill the container */
    transition: transform 0.3s ease;
    pointer-events: none; /* prevents double-click issues */
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* CUSTOM TOURS GRID STYLES */
.custom-tours-grid-container {
    padding: 0 40px; /* Match your readable-backdrop padding */
    max-width: 1400px; /* Match your container width */
    margin: 0 auto;
    box-sizing: border-box;
}

.custom-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.custom-tour-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.custom-tour-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.custom-tour-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-tour-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.custom-tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.custom-tour-item:hover .custom-tour-image img {
    transform: scale(1.05);
}

.custom-tour-title {
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--dark);
    margin: 0;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .custom-tours-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .custom-tours-grid-container {
        padding: 0 20px;
    }
    
    .custom-tours-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    
}

@media (max-width: 480px) {
    .custom-tours-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .custom-tours-grid-container {
        padding: 0 15px;
    }
}
.tours-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Ensure the inner elements stay contained */
.tours-container .dmRespRow {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tours-container .dmRespCol {
    box-sizing: border-box !important;
}

/* Prevent zoom scaling issues */
.tours-container img {
    max-width: 100% !important;
    height: auto !important;
}
#home-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

#home-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}


/*Update css for responsive flex*/
/* Responsive fixes for existing design */
@media screen and (max-width: 768px) {
    /* Fix hero section for mobile */
    .u_1632904768.dmRespRow {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        min-height: 300px !important;
    }
    
    /* Responsive hero text */
    .u_1833668094 h1 {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }
    
    .u_1010462381 h3 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    
    /* Fix button grid layout */
    .u_1817751962 .dmRespColsWrapper {
        flex-direction: column;
    }
    
    .u_1817751962 .dmRespCol {
        margin-bottom: 15px;
    }
    
    /* Fix image grid */
    .u_1568750159 .dmRespColsWrapper {
        flex-wrap: wrap;
    }
    
    .u_1568750159 .dmRespCol {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Fix tours grid */
    .custom-tours-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small devices */
    .u_1833668094 h1 {
        font-size: 28px !important;
    }
    
    .u_1010462381 h3 {
        font-size: 18px !important;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}
body {
    overflow-x: hidden;
    max-width: 100%;
}

.dmBody {
    max-width: 100%;
    overflow-x: hidden;
}
  :root {
    --bg: #f8fcff;
    --dark: #0a1f2e;
    --accent: #ff6b35;
    --gradient: linear-gradient(135deg,#ff8c42,#ff6b35);
  }
  body { background:var(--bg); margin:0; }
  .container { max-width:1400px; margin:0 auto; padding:0 20px; }
  .gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:40px;
    margin:60px auto;
  }
  .gallery-item {
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px40px rgba(0,0,0,0.12);
  }
  .gallery-item img {
    width:100%;
    height:480px;
    object-fit:cover;
    transition:transform .6s;
  }
  .gallery-item img:hover { transform:scale(1.08); }
  .card-top {
    background:var(--gradient);
    color:white;
    text-align:center;
    padding:10px;
    font-weight:900;
    font-size:21px;
  }
  .card-content {
    padding:32px 28px;
    text-align:center;
  }
  .card-content h3 {
    font-size:26px;
    color:var(--dark);
    margin:0 0 12px;
  }
  .card-content p {
    font-size:18px;
    color:#555;
    line-height:1.6;
    margin:0 0 20px;
  }
  .price-duration {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
    margin:20px 0;
  }
  .price {
    font-size:34px;
    color:var(--accent);
  }
  .btn-cta {
    display:block;
    background:var(--accent);
    color:white;
    padding:18px;
    border-radius:50px;
    font-size:19px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(255,107,53,0.4);
    transition:all .3s;
  }
  .btn-cta:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(255,107,53,0.5);
  }
  .big-hero {
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    margin:80px auto;
  }
  .big-hero img {
    width:100%;
    height:auto;
    display:block;
    transition:transform .8s;
  }
  .big-hero img:hover { transform:scale(1.06); }


  /* GLOBAL MOBILE CLICK FIX – MAKES EVERYTHING TAPPABLE ON IPHONE */
@media (max-width: 768px) {
  body, .dmBody, .dmInner, .dmOuter, .dmLayoutWrapper, .dmRespRow, .dmRespColsWrapper, .hero-video-wrapper {
    pointer-events: auto !important;
    touch-action: manipulation !important;  /* Force iOS to listen to touches */
    -webkit-tap-highlight-color: transparent;  /* Remove blue tap highlight */
  }
  
  /* Force hamburger & all links/buttons to work */
  .dmMobileMenuButton, a, button, .btn-primary, .floating-cta, .trust-bar a {
    pointer-events: auto !important;
    z-index: 99999 !important;
    position: relative !important;
  }
  
  /* If hero is blocking, limit it */
  .hero-video-wrapper { pointer-events: none !important; }
  .hero-video-wrapper a, .hero-video-wrapper button { pointer-events: auto !important; }
}



.my-hero-background-image {
  background-image: url('/images/coffeepot9.jpg');
  /* Optional: further customize the background image */
  background-size: cover; /* Scales the image to cover the entire div */
  background-position: center; /* Centers the image within the div */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-color: #f0f0f0; /* Fallback color if image doesn't load or is transparent */
}