@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@400;700&display=swap');


html, body {
	overflow-x: hidden;
  }


  :root {
	--sky: #7891ad;
	--sand-img: url("/images/assets/boatbkg.jpg");
  --sand-start: 0vh;       /* gradient cutoff */
  --img-offset: 40vh;       
  }
  
  /* Sky on top, boat background below */

	body {
		  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* layer 1: gradient on top, no-repeat */
  /* layer 2: photo below, centered horizontally, pushed down by --img-offset, keep full image (contain), no-repeat */
  background:
    linear-gradient(to bottom,
      var(--sky) 0,
      var(--sky) var(--sand-start),
      rgba(120,145,173,0) var(--sand-start)
    ) top left / auto no-repeat,
    var(--sand-img)        50% var(--img-offset) / contain no-repeat;

  background-color: var(--sky); /* fallback color */
  background-attachment: scroll, scroll;
}

*:focus {
    box-shadow: none !important;
}

.nohighlight {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.video-wrapper {
	max-width: 900px;   /* adjust as you like */
	width: 100%;        /* keep it responsive */
	margin:50px
  }

.contentwrap {
	padding:20px 50px 10px;
	line-height:2em;
	min-height:650px
}

.contentwrap a {
	color:#222
}

.contentwrap a:hover {
	color:#58b32a
}

.contentwrap a:active {
	color:#fbb126
}

h1 {
	font-weight:bold;
	color:#369115;
	font-size:50px;
		padding:30px 0 0 50px;
}

h2 {
	font-weight:bold;
	color:#0d2758!important;
	font-size:30px;
	margin:40px 0 10px;
	padding:0
}

h5 a {
	font-weight:bold;
	color:#2d3d61!important;
	text-decoration:none
}

h5 a:hover {
	color:#ee364a!important;
}

.contentwrap ul li {
	margin:5px 0
}

.contentwrap ul p {
	margin:0
}

.notice {
	border:solid 2px #ff3f10;
	border-radius:10px;
	padding:5px 15px;
	max-width:520px;
}

.notice p {
	margin:0;
	padding:0;
	font-weight:bold;
	font-size:18px;
	color:#ff3f10
}

.btn {
	border-radius:20px;
	border:0;
	background:#2d3d61;
	color:#fff!important;
}

.btn-primary {
	background:#ee364a;
	
	padding:10px 25px;
	color:#fff!important;
}



.btn:hover {
	background:#58b22a
}

.btn:active {
	background:#eb9d21
}

/*SYSTEM MESSAGES*/

#system-message {
display:none;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width:40%;
min-width: 200px;
max-width: 900px;
text-align: center;
font-size:25px;
z-index:3;
}

#system-message.error {
background-color: #fff;
color: #930000;
border:solid 10px #be0000
}

#system-message.success {
background-color: #fff;
color: #009334;
border:solid 10px #00be43
}


#logo {
max-width:220px;
	position:absolute;
	  animation: floaty 6s ease-in-out infinite,
             pulse  4s ease-in-out infinite;
	left:-35px;
	top:-70px;
	z-index:40
}

#parrots {
max-width:400px;
	position:absolute;
	right:-55px;
	z-index:-1
}

#trees {
max-width:600px;
	position:absolute;
	right:-55px;
	z-index:-1;
	top:-170px;
	  /* pivot point at the bottom center so it waves like from the ground */
  transform-origin: bottom center;

  /* animation */
  animation: sway 6s ease-in-out infinite;
}

@keyframes sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(1.5deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}

#hawksbill {
max-width:700px;
	position:absolute;
	right:-80px;
	top:20px;
	/* animation properties */
    animation: floaty 6s ease-in-out infinite,
             pulse  4s ease-in-out infinite;
  animation-composition: add; /* 👈 experimental but works */
}

#logo img, #trees img, #parrots img, #hawksbill img {
width:100%;
}

@keyframes floaty {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(0,-20px); }
}

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.02); }
}








/* HAMBURGER */

.menu-container .mod-menu.show {
display:block;
text-align:center;
position:absolute;
background:#fff;
border:solid 5px #e6b125;
box-shadow:1px 1px 10px 1px #00000033
}

.menu-container .mod-menu.show .nav-item {
margin:30px;
}

/* Hide the menu images*/
#footermenu img,
.mod-menu img {
  display: none !important;
}

/* Hamburger menu styles */
.hamburger-menu {
cursor: pointer;
display: none;
padding:33px 0 0;
border-radius:10px;
	border:0
}

.hamburger-menu:hover, .hamburger-menu:active {
background:#007bcb;
}

.hamburger-menu:hover span, .hamburger-menu:active span {
background:#fff;
}

.hamburger-menu span {
display: block;
width: 30px;
height: 4px;
background: #333;
margin-bottom: 6px;
}

/*TOUR PRICE*/
.tour-price.card{
	border:1px solid #e9eef6;
	border-radius:12px;
  }
  .tour-price .h5{
	color:#2F3D62;
	font-weight:700;
  }

.tour-price a {
	color:#222222
}

.tour-price a:hover {
	text-decoration:none
}

/*CONTACT FORM*/

#contactForm {
	background:#fcf9e6;
}

.contactinfo a {
	text-decoration:none;
}

.contactinfo h4 {
	font-weight:bold;
	color:#f13449;
	font-size:28px
}

.contactinfo .jobtitle {
	color:#50b42a;
	font-weight:bold
}


/* TOURS LIST */

.category-list {
	padding:0 35px;
	min-height:550px
}

.category-list a {
	color:#0d2758;
	text-decoration:none;
	padding:5px;
	display:block;
}

.category-list a:hover {
	text-decoration:underline
}

.category-list span.badge.bg-info {
	background:none!important;
	color:#000;
	font-size:14px;
	font-weight:normal
}

/* LOGIN */
.com-users-login {
	padding:80px 100px 100px 100px;
	max-width:800px;
	margin:0 auto
}

.com-users-login .control-label {
	margin:20px 0 5px
}

.com-users-login #Passkey {
	display:none
}

.com-users-login .btn-primary {
	margin:20px 0
}

.com-users-login .form-check {
	margin:10px 0 0
}

.plg_system_webauthn_login_button {
	display:none
}

.com-users-login__options a {
	border:0;
	margin:0;
	padding:5px 0;
	color:#2d3d61
}

.com-users-login__options a:hover {
	text-decoration:underline;
	color:#f3494b
}

/* VERTREK SCHEMA */

.departures {
padding:0 50px 100px
}

.departures .month-heading{
  color:#2F3D62;
  font-weight:700;
  margin: 1.25rem 0 .75rem;
}

/* Card accents */
.tour-card{
  border:1px solid #e9eef6;
  border-left:6px solid #feb125;   /* brand accent */
  border-radius:12px;
}

.tour-card .card-title{
  color:#2F3D62;
  font-weight:700;
}

/* Badge look tweak (optional) */
.tour-card .badge{
  font-size:.9rem;
  padding:.4rem .65rem;
}

.badge.rounded-pill.bg-primary {
	background:#20335e!important
}


/* CONTACT BLOCK */

.contactBlock{
	display: grid;
	grid-template-columns: 1fr auto;   /* text | big image on the right */
	align-items: center;
	gap: 24px;
	padding: clamp(20px, 3vw, 40px);
	background: #fdb227;               /* adjust or remove if you prefer transparent */
	color: #fff;
	margin:0
  }
  
  /* Center the text block */
.contactBlock__text{
	text-align: center;
	margin: 0 auto;
  }
  
  /* Big, attractive headline */
.contactBlock__text p{
	font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 44px);
	line-height: 1.15;
	margin: 0;
  }
  
  /* Link style (optional) */
.contactBlock__text a{
	color: #fff;                 /* tweak brand accent */
	text-decoration: underline;
  }
.contactBlock__text a:hover{
	text-decoration: none;
  }
  
  /* Big profile image on the right */
.contactBlock__img{
	width: clamp(140px, 20vw, 260px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;             /* circle; change to 16px for rounded square */
	box-shadow: 0 10px 24px rgba(0,0,0,.25);
  }
  




/* -------------------------------------------------------
   Global wrapper & typography
------------------------------------------------------- */
#site-wrap{
	max-width: 1275px;         /* your required max width */
	margin: 100px auto 0;            /* center the site */
	
  }
  
  /* -------------------------------------------------------
	 MENU (top bar)
	 - background: #2F3D62
	 - max height: 125px
	 - link text color: #2F3D62 with thick white border
  ------------------------------------------------------- */

  #headerwrapper {
	position:relative
  }

#mainmenu {
	position:absolute;
	top:10px;
	z-index:30
}
  
  #site-menu{
	background: #2F3D62;
	min-height: 80px;
	max-height: 125px;
	padding: .75rem 0;
	  border-radius:10px 10px 0 0;
	  box-shadow:5px 5px 10px 1px #0000007a;
	  position:relative;
	  z-index:-1;
  }
  
  /* Make Joomla mod_menu render nicely in a horizontal row (Bootstrap-friendly) */
  #mainmenu .mod-menu{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: center;
  }
  
  /* Menu links: text color #2F3D62 + thick white border.
	 To guarantee readability against the dark bar, we give them a white background. */
  #mainmenu ul {
	  text-decoration:none;
	  list-style:none
  }


#mainmenu .mod-menu {
margin:10px 0 10px 175px	
}

#mainmenu .mod-menu a{
	color: #F55146;
	  border:0;
	padding: .4rem 1rem;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
  -webkit-text-stroke: 0.5px #ffffff; /* width + color */
	  font-size:25px
  }
  
  #mainmenu .mod-menu a:hover{
	  color: #4ab329;
  }

  #mainmenu .mod-menu a:focus{
	  color: #f6b125;
  }
  
  /* -------------------------------------------------------
	 SLIDESHOW (below menu)
  ------------------------------------------------------- */

#slideshow-spacer {
	min-height:40px;
	background:#fff1d3
}

  #site-slideshow {
	position: relative;           /* ← crucial */
	height: 520px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;      /* or space-between if using two columns */
	gap: 20px;
	flex-wrap: nowrap;            /* optional: prevent wrapping that can push dots */
	margin: 0;
	padding: 0;
  /* left + right shadows only */
  box-shadow:
    -8px 0 12px -4px rgba(0,0,0,0.5),   /* left side */
     8px 0 12px -4px rgba(0,0,0,0.5);   /* right side */
  }



  /* Responsive video wrapper */
#site-slideshow .video-container {
	flex: 1 1 45%;               /* allow it to shrink/grow, base ~45% */
	max-width: 600px;            /* limit so it doesn’t get too huge */
	aspect-ratio: 16 / 9;        /* keeps video aspect ratio */
  }
  
  #site-slideshow .video-container iframe {
	width: 100%;
	height: 100%;
	border: none;
  }



/* Cross-fade slides */
  
  /* If using a slider module, many allow setting “image height”. Keep this CSS anyway. */
  
  /* -------------------------------------------------------
	 CONTENT (white bg, black text)
	 - h2 color: #FFF1C6
  ------------------------------------------------------- */
  #site-content{
	background: #FFFFFF;
	color: #000000;
	  box-shadow:5px 5px 10px 1px #0000007a;
  }
  
  /* Spacing for common Joomla article blocks */
  #site-content .item-page,
  #site-content .blog-items{
	padding: 1rem;
  }

  
  /* -------------------------------------------------------
	 FOOTER (min-height: 400px, background: #112859)
  ------------------------------------------------------- */

 #site-footer .mod-menu a {
	 text-decoration:none!important
 }

#site-footer .mod-menu a:hover {
	 text-decoration:underline!important
 }


#site-footer{
	background: #112859;
	min-height: 400px;
	color: #62718e;
	padding: 10px 10px 70px;
	  box-shadow:5px 5px 10px 1px #0000007a;
	  position:relative;
  }


  #site-footer .copyright {
	position: absolute;
	bottom: 20px;   /* distance from footer bottom */
	left: 40px;     /* distance from footer left */
	font-size: 12px;
	color: #62718e;
	  padding:0;
	  margin:0
  }

#site-footer .copyright p {
	margin:0;
	padding:0
}

#site-footer .copyright a {
	color: #828ea4;
	text-decoration:none
}

#site-footer .copyright a:hover {
	text-decoration:underline
}


#site-footer h5 {
	font-size: 25px;
	margin: 20px 0 10px;
	font-weight: 600;
	color:#fff
  }

#site-footer .footer-block {
	margin:5px 10px
}
  
  #site-footer .footer-block p {
	font-size: 14px;
	margin: 0 0 8px;
	  color:#fff
  }
  
  #site-footer .footer-block a:hover {
	text-decoration: underline;
  }
  
  
  
  /* Optional footer link contrast */
  #site-footer .footer-block a{ color: #FFFFFF; text-decoration: underline; }
  #site-footer .footer-block a:hover{ text-decoration: none; }
  
  /* -------------------------------------------------------
	 Bootstrap niceties inside your 1275px container
  ------------------------------------------------------- */
  /* Reduce horizontal gutters slightly if desired */
  #site-wrap{
	--bs-gutter-x: 1rem;
  }
  
  /* Make sure module chrome doesn’t add unexpected spacing */
  #site-wrap .moduletable{
	margin: 0;
	padding: 0;
  }
  







  @media screen and (max-width: 992px) {
	/* hidden by default */
	#mainmenu .menu-container .mod-menu { display: none; }
  
	/* show when nav-open */
	#mainmenu.nav-open .menu-container .mod-menu {
	  display: block;
	  position: absolute;
	  left: 10%; 
	right: 10%;
		top:100px;
	  background: #ffffff;
	  border: solid 5px #59b429;
	  box-shadow: 1px 1px 10px 1px #00000033;
	  z-index: 9999;
	  text-align: center;
		border-radius:20px;
		padding:0;
		margin:0
	}
  
	#mainmenu.nav-open .menu-container .mod-menu .nav-item { margin: 20px; padding:0 }

	  #mainmenu.nav-open .mod-menu a{
	color: #F55146;
	  border:0;
	padding: .2rem 1rem;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
  -webkit-text-stroke:0px #ffffff; /* width + color */
	  font-size:20px;
  }

	  #mainmenu.nav-open .mod-menu a:hover, #mainmenu.nav-open .mod-menu a:active {
		  color: #5eb329;
	  }
  
	.hamburger-menu {
	  display: block;
	  position: absolute;
	  top: -12px;
	  right: 30px;
		background:none; 
	}
	.hamburger-menu span { background:#fff; }
	.hamburger-menu:hover span { background:#67b228; }
	.hamburger-menu:hover { background:none; }
  }
  
  
  /* Square crop for tour images */
.square-img {
	width: 100%;
	aspect-ratio: 1 / 1;       /* keeps it square */
	overflow: hidden;
  }

  .imagegrid img {
	aspect-ratio: 1 / 1;     /* Always keep square */
	object-fit: cover;       /* Crop instead of stretching */
	width: 100%;             /* Fill the column */
	height: auto;            /* Let aspect-ratio control height */
	border-radius: 6px;      /* Optional: rounded corners */
  }
  
  .square-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;         /* crops image inside square */
  }








@media (max-width: 1040px) {
  #parrots {
	  display:none
  }
}

/* Large devices (desktops, 992px to 1200px) */
@media (max-width: 992px) {
  /* Your styles for large screens */
		#hawksbill {
		display:none
	}
}

/* Medium devices (laptops, 768px to 992px) */
@media (max-width: 768px) {
  /* Your styles for medium screens */

	.contentwrap {
	padding:10px 20px 10px;
		
	}
	.page-header {
	margin:0 20px 0;
	}

	

	h1 {
	font-size:40px;
		padding:30px 0 0 0;
	}

	h2 {
	font-size:25px;
	margin:30px 0 10px;
	}



	.contactBlock{
		grid-template-columns: 1fr;   /* image drops under the text */
		text-align: center;
	  }
	  .contactBlock__img{
		margin-inline: auto;          /* center the image */
	  }

	


	#site-footer .copyright {
	text-align:center;
		left:35px;
		width:80%
  }

#site-footer .copyright p {
	margin:0;
	padding:0
}

#site-slideshow {
	display:none
}

	
#slideshow-spacer {
	min-height:40px;
}
	
}


/* Extra Small devices (phones, up to 576px) */
@media (max-width: 576px) {
  /* Your styles for extra small screens */

	#logo {
		width:120px;
		top:-20px;
		left:-20px
	}

	#site-wrap{
	margin: 20px auto 0;            /* center the site */
	
  }

	h1 {
	font-size:40px;
		padding:10px 0 0 0;
	}

	
#slideshow-spacer {
	min-height:0px;
}

	
}