body{
font-family:'Open Sans',sans-serif;
color:#333;
}

.topbar{
background:#0B5C8E;
color:white;
font-size:14px;
}

.topbar a{
color:white;
text-decoration:none;
}

.navbar{
font-family:'Montserrat',sans-serif;
}

.navbar-nav .nav-link{
font-weight:600;
color:#333;
}

.navbar-nav .nav-link:hover{
color:#E91E63;
}

.footer{
background:#0B5C8E;
color:white;
}

.footer a{
color:white;
text-decoration:none;
}
.partner-logo{
max-height:70px;
opacity:0.7;
transition:0.3s;
}

.partner-logo:hover{
opacity:1;
transform:scale(1.05);
}
.hero-section{
height:500px;
background-image:url('/uploads/site/safari-banner.jpg');
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.hero-content{
position:relative;
z-index:2;
}
.gallery-image{

border-radius:10px;
transition:all 0.3s ease;
box-shadow:0 4px 12px rgba(0,0,0,0.15);

}

.gallery-image:hover{

transform:scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,0.3);

}
.diamond-grid{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;

}

.diamond{

width:160px;
height:160px;
overflow:hidden;

transform:rotate(45deg);

}

.diamond img{

width:220px;
height:220px;

object-fit:cover;

transform:rotate(-45deg) scale(1.1);

transition:0.3s;

}

.diamond:hover img{

transform:rotate(-45deg) scale(1.2);

}
@media (max-width:320px){
	.diamond-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; }
	.diamond{ flex:0 0 49%; max-width:49%; width:49%; height:auto; transform:none; }
	.diamond img{ width:100%; height:auto; transform:none; border-radius:8px; }
}
.navbar-nav .nav-link{

font-weight:500;
margin-left:10px;

}

.dropdown-menu{

border-radius:8px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);

}
/* Ensure sticky navbar sits above content and has subtle separation */
.navbar.sticky-top{ z-index:1050; box-shadow:0 6px 18px rgba(3,10,18,0.06); backdrop-filter: saturate(120%) blur(2px); }

/* Subtle background and event view tweaks */
.soft-section{ background-color:#fbfbfb; }
.event-content{ padding:0.75rem 0.25rem; }
.event-content h1{ font-size:2rem; line-height:1.08; color:#0f1720; }
.event-content .lead{ font-size:1rem; color:#3c3c3c; }
.event-content img{ border-radius:10px; box-shadow:0 12px 40px rgba(3,10,18,0.06); }

@media (max-width:575px){
	.event-content h1{ font-size:1.5rem; }
	.event-content{ padding:0.5rem 0; }
}


/* CTA hero styles */
.cta-hero{ position:relative; overflow:hidden; background-image:linear-gradient(120deg, rgba(15,23,32,0.85), rgba(12,18,28,0.8)); }
.cta-hero .container{ position:relative; z-index:3; }
.cta-overlay{
	position:absolute; inset:0; z-index:2;
	/* combine a subtle dark gradient over the image for stronger contrast */
	background: linear-gradient(rgba(3,10,18,0.52), rgba(3,10,18,0.48)), url('/assets/images/mosaic/jeep.jpg');
	background-size:cover; background-position:center;
	filter:grayscale(6%) contrast(0.98) brightness(0.9);
}
.cta-hero h2{ color:#fff; font-family:'Playfair Display', serif; font-size:34px; margin-bottom:8px; }
.cta-hero p{ color:rgba(255,255,255,0.94); font-size:1.05rem; }
.btn-gold{ background:linear-gradient(90deg,var(--deep-safari-blue),var(--ocean-blue)); color:var(--white); border:none; padding:12px 20px; font-weight:800; box-shadow:0 14px 40px rgba(8,20,40,0.18); border-radius:10px; }
.cta-hero .btn-gold{ background:linear-gradient(90deg,var(--deep-safari-blue),var(--ocean-blue)); color:var(--white); box-shadow:0 18px 54px rgba(10,20,30,0.28); border:1px solid rgba(255,255,255,0.06); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 22px 64px rgba(8,20,40,0.36); filter:brightness(1.05); }

@media (max-width:767px){
	/* Keep the background image on mobile but reduce overlay darkness so text remains visible */
	.cta-hero{ /* no change to background-image, keep visual */ }
	.cta-overlay{
		display:block;
		background: linear-gradient(rgba(3,10,18,0.36), rgba(3,10,18,0.28)), url('/assets/images/mosaic/jeep.jpg');
		background-size:cover; background-position:center;
		filter:grayscale(4%) contrast(0.95) brightness(0.95);
	}
	.cta-hero h2{ font-size:24px; text-shadow:0 6px 18px rgba(0,0,0,0.36); }
	.cta-hero .btn-gold{ padding:10px 16px; font-size:15px; }
}

/* Events section: subtle elegant background and title accent */
.events-hero{
	/* stronger, elegant gold-tinted background for better visibility */
	background: linear-gradient(180deg, rgba(196,154,44,0.10) 0%, rgba(245,245,245,0.96) 100%);
	position:relative;
	overflow:visible;
	border-top:1px solid rgba(196,154,44,0.06);
	border-bottom:1px solid rgba(196,154,44,0.04);
}
.events-hero::before{
	/* softer, gold-tinted texture lines with lower overall opacity */
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background-image: repeating-linear-gradient(135deg, rgba(196,154,44,0.018) 0px, rgba(196,154,44,0.018) 1px, transparent 1px, transparent 28px);
	opacity:0.34;
}
.events .container{ position:relative; z-index:2; }
.section-title{ font-family:'Playfair Display', serif; font-size:28px; color:var(--deep-safari-blue); position:relative; }
.section-title::after{ content:""; display:block; width:64px; height:6px; background:linear-gradient(90deg,var(--savannah-gold),var(--savannah-gold-light)); border-radius:6px; margin:12px auto 0; box-shadow:0 8px 20px rgba(196,154,44,0.12); }
.events .card{ border-radius:12px; border:1px solid rgba(47,47,47,0.04); }
.events .card .card-body p{ color:#545454; }
.events .btn-outline-primary{ border-color:rgba(11,92,142,0.12); color:var(--deep-safari-blue); }
.events .btn-outline-primary:hover{ background:linear-gradient(90deg,var(--ocean-blue),var(--wave-teal)); color:var(--white); border-color:transparent; }

@media (max-width:767px){
	.section-title{ font-size:22px; }
	.events-hero::before{ background-image: repeating-linear-gradient(135deg, rgba(15,23,32,0.02) 0px, rgba(15,23,32,0.02) 1px, transparent 1px, transparent 36px); }
}

/* Members section distinctive background */
.members-hero{
	background: linear-gradient(180deg, rgba(54,192,217,0.06), rgba(31,167,214,0.03));
	padding-top:3.5rem; padding-bottom:3.5rem;
}
.members-hero .card{ border-radius:12px; border:1px solid rgba(47,47,47,0.04); box-shadow:0 8px 30px rgba(3,10,18,0.04); }
.members-hero h2{ color:var(--deep-safari-blue); font-family:'Playfair Display', serif; }
.members-hero .btn-success{ background:var(--deep-safari-blue); border-color:var(--deep-safari-blue); }
.members-hero .btn-success:hover{ background:var(--ocean-blue); border-color:var(--ocean-blue); }

@media (max-width:767px){
	.members-hero{ background: linear-gradient(180deg, rgba(54,192,217,0.05), rgba(31,167,214,0.02)); }
}
@media (max-width:767px){
	.section-title{ font-size:22px; }
	.events-hero::before{ background-image: repeating-linear-gradient(135deg, rgba(15,23,32,0.02) 0px, rgba(15,23,32,0.02) 1px, transparent 1px, transparent 36px); }
}
/* Mobile hero heading adjustments so H1 doesn't overflow or hide behind the top */
@media (max-width:575px){
  .carousel-caption{ padding:1rem; bottom:8% !important; }
  .carousel-caption h1{ font-size:1.0rem; line-height:1.0; margin:0 0 0.35rem; text-shadow:0 6px 18px rgba(0,0,0,0.36); }
  .carousel-caption p{ font-size:0.95rem; }
}