that is a descendant of .section-welcome */
font-size: clamp(1.5rem, 3vw, 2.4rem); /* fluid */
color: var(--dark);
margin-bottom: 18px; /* gap between heading and the paragraph below it */
line-height: 1.3; /* slightly tight — works well for large serif headings */
}
/* Gold word in welcome heading */
.section-welcome h2 span { /* targets a wrapping one word inside the h2 */
color: var(--gold);
}
/* Welcome body text */
.section-welcome p { /* targets all tags inside .section-welcome */
font-size: 1rem;
color: #555; /* medium grey — softer than --dark for long body copy */
line-height: 1.9; /* generous line height for comfortable reading of paragraphs */
}
/* Stats row: 3 numbers side by side */
.welcome-stat {
margin-top: 28px; /* space above the stats row, separating it from the paragraph above */
display: flex; /* places the three .stat children side by side */
gap: 28px; /* horizontal space between each stat block */
flex-wrap: wrap; /* wrap on very small screens */
}
/* Stat number */
.welcome-stat .stat h3 { /* targets the
inside each .stat inside .welcome-stat */
font-size: 1.7rem;
color: var(--terracotta);
}
/* Stat label */
.welcome-stat .stat p { /* targets the
caption under each stat number */
font-size: 0.82rem;
color: #777; /* lighter grey — visually secondary to the stat number */
}
/* =========================================================
HOME — FACT CARDS
Flex row — each card grows equally to fill the full width.
On small screens they wrap to 2 per row, then 1.
========================================================= */
.facts-row {
display: flex;
flex-wrap: wrap; /* allow wrapping on small screens */
margin-top: 50px; /* space above the row, separating it from the welcome text above */
padding-top: 40px; /* inner space above the cards, between the gold divider line and the cards */
border-top: 1px solid rgba(201,168,76,0.25); /* gold divider above */
}
/* Individual fact card — grows equally */
.fact-card {
flex: 1 1 calc(16.66% - 1px); /* 6 cards per row on desktop */
background-color: #fff; /* white card on the cream page background — creates subtle lift */
border-right: 1px solid rgba(201,168,76,0.15); /* vertical divider */
padding: 24px 12px;
text-align: center;
transition: 0.3s ease; /* smooth animation for the hover lift and background change */
}
/* Remove trailing border on last card */
.fact-card:last-child { /* :last-child selects only the final .fact-card in the row so there's no dangling right border */
border-right: none;
}
/* Hover — lift and faint gold tint */
.fact-card:hover {
transform: translateY(-4px); /* lifts the card 4px upward relative to its normal position */
background-color: rgba(201,168,76,0.05); /* extremely faint gold wash on hover */
box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* soft drop shadow below the lifted card */
}
/* Gold icon above label */
.fact-icon {
font-size: 1.4rem;
color: var(--gold);
margin-bottom: 8px; /* gap between the icon and the .fact-label text below it */
}
/* Small uppercase label */
.fact-label {
font-size: 0.7rem;
letter-spacing: 2px;
text-transform: uppercase;
color: #999; /* light grey — least important text in the card hierarchy */
margin-bottom: 5px; /* gap between label and .fact-value below */
}
/* Main value text */
.fact-value {
font-family: var(--font-heading); /* Playfair Display — gives the value a more editorial feel */
font-size: 0.95rem;
font-weight: 700;
color: var(--dark);
}
/* Optional sub-text below the value */
.fact-value span { /* targets an optional inside .fact-value for secondary info */
display: block; /* forces the span onto its own line below the main value */
font-size: 0.75rem;
color: #888;
}
/* =========================================================
HOME — SCROLLING GALLERY
Vertical auto-scroll strip — pauses on hover.
========================================================= */
.scroll-gallery {
width: 100%;
height: 460px; /* fixed clip height */
overflow: hidden; /* hides images outside the visible area */
border-radius: 8px; /* rounded corners on the visible strip */
}
/* Moving track — animates upward continuously */
.scroll-track {
display: flex;
flex-direction: column; /* stacks images vertically inside the track */
gap: 10px; /* vertical spacing between each image */
animation: scrollUp 20s linear infinite; /* infinite upward scroll */
}
/* Pause on hover so user can look at images */
.scroll-gallery:hover .scroll-track { /* targets .scroll-track when the user hovers over its parent .scroll-gallery */
animation-play-state: paused; /* freezes the scrollUp animation without resetting it */
}
/* Each image in the strip */
.scroll-track img { /* targets every ![]()
that is a descendant of .scroll-track */
width: 100%;
height: 210px;
object-fit: cover; /* fills the 210px height without distorting the image */
border-radius: 6px; /* slightly rounded corners on each individual image */
flex-shrink: 0; /* never shrink */
}
/* Keyframe — moves up by exactly 50% (one full set = seamless loop) */
@keyframes scrollUp { /* named animation used by .scroll-track — moves the whole track upward */
0% { transform: translateY(0); } /* starts at its natural position */
100% { transform: translateY(-50%); } /* ends halfway up — works because the image list is duplicated in HTML, creating a seamless loop */
}
/* =========================================================
HOME — WHY VISIT SECTION
Dark background, 4 feature cards.
========================================================= */
.section-why {
padding: 80px 0; /* generous vertical breathing room on this dark section */
background-color: var(--dark);
}
/* Gold label on dark background */
.section-why .section-label { /* overrides .section-label color specifically when inside .section-why */
color: var(--gold);
}
/* Section heading */
.section-why h2 { /* targets the that is a descendant of .section-why */
font-size: clamp(1.5rem, 3vw, 2.4rem); /* fluid */
color: #fff; /* white heading on dark background */
margin-bottom: 40px; /* large gap between heading and the card row below */
}
/* Gold word */
.section-why h2 span { /* targets a wrapping one highlighted word inside the h2 */
color: var(--gold);
}
/* Feature card */
.why-card {
background-color: rgba(255,255,255,0.05); /* subtle white tint on dark */
border: 1px solid rgba(201,168,76,0.2); /* faint gold border — barely visible at rest */
border-radius: 4px;
padding: 28px 20px;
text-align: center;
transition: 0.3s ease; /* smooth animation for the hover lift and border colour change */
height: 100%; /* makes all cards in the same Bootstrap row equal height */
}
/* Hover — lift and gold border */
.why-card:hover {
transform: translateY(-6px); /* lifts the card 6px relative to its resting position */
border-color: var(--gold); /* border becomes fully opaque gold on hover */
}
/* Gold icon */
.why-card .icon { /* targets an element with class .icon inside .why-card */
font-size: 2rem;
color: var(--gold);
margin-bottom: 14px; /* gap between icon and the h4 card title below it */
}
/* Card title */
.why-card h4 { /* targets the heading inside each .why-card */
font-size: 1.1rem;
color: #fff;
margin-bottom: 10px; /* gap between title and the description paragraph below */
}
/* Card description */
.why-card p { /* targets the
description inside each .why-card */
font-size: 0.9rem;
color: #aaa; /* muted grey — secondary to the white card title */
line-height: 1.8;
}
/* =========================================================
FOOTER — identical on every page
========================================================= */
footer {
background-color: var(--cream);
border-top: 1px solid rgba(201,168,76,0.3); /* subtle gold line separating footer from the page content above */
padding: 16px 0 8px; /* compact vertical padding — footer is intentionally short */
}
/* Brand name */
.footer-brand {
font-family: var(--font-heading); /* Playfair Display — matches the navbar brand */
font-size: 1rem;
color: var(--dark);
}
/* Tagline */
.footer-tagline {
font-size: 0.85rem;
color: #888; /* muted grey — secondary to the brand name above it */
}
/* Social icons row */
.footer-social {
display: flex; /* places social icon links side by side */
justify-content: center; /* centres them horizontally within the footer column */
gap: 16px; /* space between each social icon */
}
/* Individual social icon */
.footer-social a { /* targets every link inside .footer-social */
color: var(--dark);
font-size: 1.2rem;
transition: color 0.3s ease, transform 0.2s ease; /* smooth colour and lift animation on hover */
}
/* Hover — gold and lift */
.footer-social a:hover { /* when mouse is over a social icon link */
color: var(--gold);
transform: translateY(-3px); /* lifts the icon 3px upward relative to its resting position */
}
/* Copyright line */
.footer-bottom {
border-top: 1px solid rgba(0,0,0,0.08); /* very faint line separating copyright from the footer content above it */
margin-top: 10px;
padding-top: 8px;
text-align: center;
font-size: 0.75rem;
color: #999; /* lightest grey — least important text on the page */
}
/* =========================================================
DESTINATIONS — HERO BANNER (60vh, shorter than home)
========================================================= */
.dest-hero {
position: relative; /* establishes stacking context so .dest-hero-overlay can be positioned relative to this */
width: 100%;
height: 60vh; /* 60% of the viewport height — shorter than the 100vh home hero */
background-image: url('../images/scrolling-images/sidi-bousaid-d.png'); /* path is relative to the CSS file location */
background-size: cover; /* scales the image to cover the full 60vh area without distortion */
background-position: center; /* centres the image both horizontally and vertically within the hero */
display: flex; /* enables centering of .dest-hero-content */
align-items: center; /* vertically centres .dest-hero-content within the 60vh hero */
justify-content: center; /* horizontally centres .dest-hero-content */
}
/* Dark overlay for text readability */
.dest-hero-overlay {
position: absolute; /* positioned relative to .dest-hero (its nearest positioned ancestor) */
inset: 0; /* covers every edge of .dest-hero exactly */
background: rgba(26, 26, 46, 0.60); /* 60% opacity — darker than the home hero overlay (18%) for better text contrast */
}
/* Text block */
.dest-hero-content {
position: relative; /* lifts this above .dest-hero-overlay in the stacking order */
text-align: center;
z-index: 1; /* ensures text renders on top of the overlay, which has no z-index set */
padding: 0 16px; /* prevent text touching edges on small screens */
}
/* Heading */
.dest-hero-content h1 { /* targets the inside .dest-hero-content */
font-size: clamp(1.6rem, 4vw, 3rem); /* fluid */
color: #fff;
text-shadow: 1px 2px 10px rgba(0,0,0,0.5); /* shadow improves legibility over the background image */
margin-bottom: 10px; /* gap between heading and any subtitle that follows */
}
/* Gold word */
.dest-hero-content h1 span { /* targets a wrapping one highlighted word inside the h1 */
color: var(--gold);
}
/* =========================================================
DESTINATIONS — INTRO
========================================================= */
.dest-intro {
padding: 60px 0 20px; /* generous top padding, smaller bottom — the list section below has its own spacing */
background-color: var(--cream);
}
/* Heading */
.dest-intro h2 { /* targets the that is a descendant of .dest-intro */
font-size: clamp(1.4rem, 3vw, 2.2rem); /* fluid */
color: var(--dark);
margin-bottom: 16px; /* gap between heading and the paragraph below it */
line-height: 1.3;
}
/* Gold word */
.dest-intro h2 span { /* targets a wrapping one word inside the h2 */
color: var(--gold);
}
/* Paragraph */
.dest-intro p { /* targets the description inside .dest-intro */
font-size: 1rem;
color: #555;
line-height: 1.9;
max-width: 700px; /* constrains line length for readability — text won't stretch on very wide screens */
}
/* =========================================================
DESTINATIONS — LIST (magazine rows alternating left/right)
========================================================= */
.dest-list {
background-color: var(--cream);
}
/* Each destination row */
.dest-row {
min-height: 500px; /* guarantees enough height even if the text column is short */
border-bottom: 1px solid rgba(201,168,76,0.15); /* faint gold line separating destination rows from each other */
}
/* Image side */
.dest-img-wrap {
width: 100%; /* fills the full width of its Bootstrap column (col-lg-6) */
height: 100%; /* matches the height of its sibling text column inside the same .dest-row */
min-height: 500px; /* ensures image area never collapses shorter than 500px regardless of content */
overflow: hidden; /* clips the image when it zooms on hover, keeping it within the gold border */
position: relative; /* establishes stacking context for any future absolutely-positioned children */
border: 6px solid var(--gold); /* thick gold picture-frame border around the destination image */
box-shadow: 8px 8px 30px rgba(0,0,0,0.15); /* offset shadow gives a slight 3D lifted-frame effect */
}
/* Image fills frame */
.dest-img-wrap img { /* targets the ![]()
inside .dest-img-wrap */
width: 100%;
height: 100%;
object-fit: cover; /* fills the entire .dest-img-wrap without distorting the image */
transition: 0.5s ease; /* smooth zoom animation triggered by .dest-row:hover below */
}
/* Zoom on row hover */
.dest-row:hover .dest-img-wrap img { /* triggers when the mouse is anywhere on .dest-row, not just the image */
transform: scale(1.04); /* scales the image 4% larger within the overflow:hidden clip boundary */
}
/* Text side */
.dest-text {
padding: 40px 40px; /* equal padding on all sides — creates a comfortable reading area */
}
/* Category badge */
.dest-category {
display: inline-block; /* allows padding and border-radius on what would otherwise be an inline element */
background-color: rgba(201,168,76,0.15); /* very faint gold tint behind the badge text */
color: var(--terracotta);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 14px; /* horizontal padding makes the pill shape wider than the text */
border-radius: 20px; /* large radius on a short element produces a pill shape */
margin-bottom: 14px; /* gap between badge and the destination name h2 below it */
border: 1px solid rgba(201,168,76,0.3); /* thin gold border around the pill */
}
/* Icon inside badge */
.dest-category i { /* targets the Font Awesome icon inside .dest-category */
margin-right: 6px; /* gap between the icon and the badge text beside it */
color: var(--gold);
}
/* Destination name */
.dest-text h2 { /* targets the large destination name heading inside .dest-text */
font-size: clamp(1.4rem, 2.5vw, 2.4rem); /* fluid */
color: var(--dark);
margin-bottom: 14px; /* gap between the name and the description paragraph */
}
/* Description */
.dest-text p { /* targets the description paragraph inside .dest-text */
font-size: 1rem;
color: #555;
line-height: 1.9;
margin-bottom: 24px; /* gap between description and the .dest-info list below */
text-align: justify; /* text stretches to align both left and right edges */
}
/* Info list */
.dest-info {
list-style: none; /* removes the default browser bullet points */
padding: 0; /* removes the default browser indent on */
margin: 0;
display: flex;
flex-direction: column; /* stacks each - vertically */
gap: 10px; /* vertical space between each info row */
}
/* Info list item */
.dest-info li { /* targets each
- inside .dest-info */
font-size: 0.9rem;
color: #666;
display: flex; /* places the icon and the text side by side */
align-items: center; /* vertically centres the icon with the text beside it */
gap: 10px; /* space between the icon and the label text */
}
/* Info icon */
.dest-info li i { /* targets the Font Awesome icon inside each .dest-info list item */
color: var(--gold);
font-size: 1rem;
width: 18px; /* fixed width keeps all icons in a consistent column so labels stay aligned */
flex-shrink: 0; /* never shrink the icon */
}
/* Info bold label */
.dest-info li strong { /* targets the bold key label (e.g. "Best time:") inside each list item */
color: var(--dark); /* darker than the surrounding #666 text, making the label stand out */
}
/* Alternating rows have white background */
.dest-row-reverse { /* added to every second .dest-row to alternate background colour */
background-color: #fff; /* white against the cream of the surrounding .dest-list creates a subtle alternating stripe */
}
/* =========================================================
CONTACT — HERO (dark title block + Google Map)
========================================================= */
.contact-hero {
width: 100%; /* stretches to fill the full page width */
}
/* Dark title block */
.contact-hero-text {
background-color: var(--dark);
text-align: center;
padding: 50px 20px 30px; /* 50px top clears the navbar, 20px sides prevent text touching edges, 30px bottom */
}
/* Heading */
.contact-hero-text h1 { /* targets the
inside the dark contact header */
font-size: clamp(1.6rem, 4vw, 2.8rem); /* fluid */
color: #fff;
margin-bottom: 10px; /* gap between heading and the subtitle below */
}
/* Gold word */
.contact-hero-text h1 span { /* targets the highlighted word wrapped in a inside the h1 */
color: var(--gold);
}
/* Subtitle */
.contact-hero-text .hero-sub { /* reuses the .hero-sub class from the home page hero within the contact header */
font-size: 1rem;
color: rgba(245, 240, 232, 0.8); /* cream at 80% opacity — softer than the white h1 above */
font-weight: 300;
}
/* Google Map container */
.contact-map {
width: 100%;
height: 420px; /* fixed height so the map is tall enough to be usable */
}
/* Map iframe fills container */
.contact-map iframe { /* targets the Google Maps
that is a descendant of .section-why */
font-size: clamp(1.5rem, 3vw, 2.4rem); /* fluid */
color: #fff; /* white heading on dark background */
margin-bottom: 40px; /* large gap between heading and the card row below */
}
/* Gold word */
.section-why h2 span { /* targets a wrapping one highlighted word inside the h2 */
color: var(--gold);
}
/* Feature card */
.why-card {
background-color: rgba(255,255,255,0.05); /* subtle white tint on dark */
border: 1px solid rgba(201,168,76,0.2); /* faint gold border — barely visible at rest */
border-radius: 4px;
padding: 28px 20px;
text-align: center;
transition: 0.3s ease; /* smooth animation for the hover lift and border colour change */
height: 100%; /* makes all cards in the same Bootstrap row equal height */
}
/* Hover — lift and gold border */
.why-card:hover {
transform: translateY(-6px); /* lifts the card 6px relative to its resting position */
border-color: var(--gold); /* border becomes fully opaque gold on hover */
}
/* Gold icon */
.why-card .icon { /* targets an element with class .icon inside .why-card */
font-size: 2rem;
color: var(--gold);
margin-bottom: 14px; /* gap between icon and the h4 card title below it */
}
/* Card title */
.why-card h4 { /* targets the heading inside each .why-card */
font-size: 1.1rem;
color: #fff;
margin-bottom: 10px; /* gap between title and the description paragraph below */
}
/* Card description */
.why-card p { /* targets the
description inside each .why-card */
font-size: 0.9rem;
color: #aaa; /* muted grey — secondary to the white card title */
line-height: 1.8;
}
/* =========================================================
FOOTER — identical on every page
========================================================= */
footer {
background-color: var(--cream);
border-top: 1px solid rgba(201,168,76,0.3); /* subtle gold line separating footer from the page content above */
padding: 16px 0 8px; /* compact vertical padding — footer is intentionally short */
}
/* Brand name */
.footer-brand {
font-family: var(--font-heading); /* Playfair Display — matches the navbar brand */
font-size: 1rem;
color: var(--dark);
}
/* Tagline */
.footer-tagline {
font-size: 0.85rem;
color: #888; /* muted grey — secondary to the brand name above it */
}
/* Social icons row */
.footer-social {
display: flex; /* places social icon links side by side */
justify-content: center; /* centres them horizontally within the footer column */
gap: 16px; /* space between each social icon */
}
/* Individual social icon */
.footer-social a { /* targets every link inside .footer-social */
color: var(--dark);
font-size: 1.2rem;
transition: color 0.3s ease, transform 0.2s ease; /* smooth colour and lift animation on hover */
}
/* Hover — gold and lift */
.footer-social a:hover { /* when mouse is over a social icon link */
color: var(--gold);
transform: translateY(-3px); /* lifts the icon 3px upward relative to its resting position */
}
/* Copyright line */
.footer-bottom {
border-top: 1px solid rgba(0,0,0,0.08); /* very faint line separating copyright from the footer content above it */
margin-top: 10px;
padding-top: 8px;
text-align: center;
font-size: 0.75rem;
color: #999; /* lightest grey — least important text on the page */
}
/* =========================================================
DESTINATIONS — HERO BANNER (60vh, shorter than home)
========================================================= */
.dest-hero {
position: relative; /* establishes stacking context so .dest-hero-overlay can be positioned relative to this */
width: 100%;
height: 60vh; /* 60% of the viewport height — shorter than the 100vh home hero */
background-image: url('../images/scrolling-images/sidi-bousaid-d.png'); /* path is relative to the CSS file location */
background-size: cover; /* scales the image to cover the full 60vh area without distortion */
background-position: center; /* centres the image both horizontally and vertically within the hero */
display: flex; /* enables centering of .dest-hero-content */
align-items: center; /* vertically centres .dest-hero-content within the 60vh hero */
justify-content: center; /* horizontally centres .dest-hero-content */
}
/* Dark overlay for text readability */
.dest-hero-overlay {
position: absolute; /* positioned relative to .dest-hero (its nearest positioned ancestor) */
inset: 0; /* covers every edge of .dest-hero exactly */
background: rgba(26, 26, 46, 0.60); /* 60% opacity — darker than the home hero overlay (18%) for better text contrast */
}
/* Text block */
.dest-hero-content {
position: relative; /* lifts this above .dest-hero-overlay in the stacking order */
text-align: center;
z-index: 1; /* ensures text renders on top of the overlay, which has no z-index set */
padding: 0 16px; /* prevent text touching edges on small screens */
}
/* Heading */
.dest-hero-content h1 { /* targets the inside .dest-hero-content */
font-size: clamp(1.6rem, 4vw, 3rem); /* fluid */
color: #fff;
text-shadow: 1px 2px 10px rgba(0,0,0,0.5); /* shadow improves legibility over the background image */
margin-bottom: 10px; /* gap between heading and any subtitle that follows */
}
/* Gold word */
.dest-hero-content h1 span { /* targets a wrapping one highlighted word inside the h1 */
color: var(--gold);
}
/* =========================================================
DESTINATIONS — INTRO
========================================================= */
.dest-intro {
padding: 60px 0 20px; /* generous top padding, smaller bottom — the list section below has its own spacing */
background-color: var(--cream);
}
/* Heading */
.dest-intro h2 { /* targets the that is a descendant of .dest-intro */
font-size: clamp(1.4rem, 3vw, 2.2rem); /* fluid */
color: var(--dark);
margin-bottom: 16px; /* gap between heading and the paragraph below it */
line-height: 1.3;
}
/* Gold word */
.dest-intro h2 span { /* targets a wrapping one word inside the h2 */
color: var(--gold);
}
/* Paragraph */
.dest-intro p { /* targets the description inside .dest-intro */
font-size: 1rem;
color: #555;
line-height: 1.9;
max-width: 700px; /* constrains line length for readability — text won't stretch on very wide screens */
}
/* =========================================================
DESTINATIONS — LIST (magazine rows alternating left/right)
========================================================= */
.dest-list {
background-color: var(--cream);
}
/* Each destination row */
.dest-row {
min-height: 500px; /* guarantees enough height even if the text column is short */
border-bottom: 1px solid rgba(201,168,76,0.15); /* faint gold line separating destination rows from each other */
}
/* Image side */
.dest-img-wrap {
width: 100%; /* fills the full width of its Bootstrap column (col-lg-6) */
height: 100%; /* matches the height of its sibling text column inside the same .dest-row */
min-height: 500px; /* ensures image area never collapses shorter than 500px regardless of content */
overflow: hidden; /* clips the image when it zooms on hover, keeping it within the gold border */
position: relative; /* establishes stacking context for any future absolutely-positioned children */
border: 6px solid var(--gold); /* thick gold picture-frame border around the destination image */
box-shadow: 8px 8px 30px rgba(0,0,0,0.15); /* offset shadow gives a slight 3D lifted-frame effect */
}
/* Image fills frame */
.dest-img-wrap img { /* targets the ![]()
inside .dest-img-wrap */
width: 100%;
height: 100%;
object-fit: cover; /* fills the entire .dest-img-wrap without distorting the image */
transition: 0.5s ease; /* smooth zoom animation triggered by .dest-row:hover below */
}
/* Zoom on row hover */
.dest-row:hover .dest-img-wrap img { /* triggers when the mouse is anywhere on .dest-row, not just the image */
transform: scale(1.04); /* scales the image 4% larger within the overflow:hidden clip boundary */
}
/* Text side */
.dest-text {
padding: 40px 40px; /* equal padding on all sides — creates a comfortable reading area */
}
/* Category badge */
.dest-category {
display: inline-block; /* allows padding and border-radius on what would otherwise be an inline element */
background-color: rgba(201,168,76,0.15); /* very faint gold tint behind the badge text */
color: var(--terracotta);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 14px; /* horizontal padding makes the pill shape wider than the text */
border-radius: 20px; /* large radius on a short element produces a pill shape */
margin-bottom: 14px; /* gap between badge and the destination name h2 below it */
border: 1px solid rgba(201,168,76,0.3); /* thin gold border around the pill */
}
/* Icon inside badge */
.dest-category i { /* targets the Font Awesome icon inside .dest-category */
margin-right: 6px; /* gap between the icon and the badge text beside it */
color: var(--gold);
}
/* Destination name */
.dest-text h2 { /* targets the large destination name heading inside .dest-text */
font-size: clamp(1.4rem, 2.5vw, 2.4rem); /* fluid */
color: var(--dark);
margin-bottom: 14px; /* gap between the name and the description paragraph */
}
/* Description */
.dest-text p { /* targets the description paragraph inside .dest-text */
font-size: 1rem;
color: #555;
line-height: 1.9;
margin-bottom: 24px; /* gap between description and the .dest-info list below */
text-align: justify; /* text stretches to align both left and right edges */
}
/* Info list */
.dest-info {
list-style: none; /* removes the default browser bullet points */
padding: 0; /* removes the default browser indent on */
margin: 0;
display: flex;
flex-direction: column; /* stacks each - vertically */
gap: 10px; /* vertical space between each info row */
}
/* Info list item */
.dest-info li { /* targets each
- inside .dest-info */
font-size: 0.9rem;
color: #666;
display: flex; /* places the icon and the text side by side */
align-items: center; /* vertically centres the icon with the text beside it */
gap: 10px; /* space between the icon and the label text */
}
/* Info icon */
.dest-info li i { /* targets the Font Awesome icon inside each .dest-info list item */
color: var(--gold);
font-size: 1rem;
width: 18px; /* fixed width keeps all icons in a consistent column so labels stay aligned */
flex-shrink: 0; /* never shrink the icon */
}
/* Info bold label */
.dest-info li strong { /* targets the bold key label (e.g. "Best time:") inside each list item */
color: var(--dark); /* darker than the surrounding #666 text, making the label stand out */
}
/* Alternating rows have white background */
.dest-row-reverse { /* added to every second .dest-row to alternate background colour */
background-color: #fff; /* white against the cream of the surrounding .dest-list creates a subtle alternating stripe */
}
/* =========================================================
CONTACT — HERO (dark title block + Google Map)
========================================================= */
.contact-hero {
width: 100%; /* stretches to fill the full page width */
}
/* Dark title block */
.contact-hero-text {
background-color: var(--dark);
text-align: center;
padding: 50px 20px 30px; /* 50px top clears the navbar, 20px sides prevent text touching edges, 30px bottom */
}
/* Heading */
.contact-hero-text h1 { /* targets the
inside the dark contact header */
font-size: clamp(1.6rem, 4vw, 2.8rem); /* fluid */
color: #fff;
margin-bottom: 10px; /* gap between heading and the subtitle below */
}
/* Gold word */
.contact-hero-text h1 span { /* targets the highlighted word wrapped in a inside the h1 */
color: var(--gold);
}
/* Subtitle */
.contact-hero-text .hero-sub { /* reuses the .hero-sub class from the home page hero within the contact header */
font-size: 1rem;
color: rgba(245, 240, 232, 0.8); /* cream at 80% opacity — softer than the white h1 above */
font-weight: 300;
}
/* Google Map container */
.contact-map {
width: 100%;
height: 420px; /* fixed height so the map is tall enough to be usable */
}
/* Map iframe fills container */
.contact-map iframe { /* targets the Google Maps
inside .dest-hero-content */
font-size: clamp(1.6rem, 4vw, 3rem); /* fluid */
color: #fff;
text-shadow: 1px 2px 10px rgba(0,0,0,0.5); /* shadow improves legibility over the background image */
margin-bottom: 10px; /* gap between heading and any subtitle that follows */
}
/* Gold word */
.dest-hero-content h1 span { /* targets a wrapping one highlighted word inside the h1 */
color: var(--gold);
}
/* =========================================================
DESTINATIONS — INTRO
========================================================= */
.dest-intro {
padding: 60px 0 20px; /* generous top padding, smaller bottom — the list section below has its own spacing */
background-color: var(--cream);
}
/* Heading */
.dest-intro h2 { /* targets the that is a descendant of .dest-intro */
font-size: clamp(1.4rem, 3vw, 2.2rem); /* fluid */
color: var(--dark);
margin-bottom: 16px; /* gap between heading and the paragraph below it */
line-height: 1.3;
}
/* Gold word */
.dest-intro h2 span { /* targets a wrapping one word inside the h2 */
color: var(--gold);
}
/* Paragraph */
.dest-intro p { /* targets the description inside .dest-intro */
font-size: 1rem;
color: #555;
line-height: 1.9;
max-width: 700px; /* constrains line length for readability — text won't stretch on very wide screens */
}
/* =========================================================
DESTINATIONS — LIST (magazine rows alternating left/right)
========================================================= */
.dest-list {
background-color: var(--cream);
}
/* Each destination row */
.dest-row {
min-height: 500px; /* guarantees enough height even if the text column is short */
border-bottom: 1px solid rgba(201,168,76,0.15); /* faint gold line separating destination rows from each other */
}
/* Image side */
.dest-img-wrap {
width: 100%; /* fills the full width of its Bootstrap column (col-lg-6) */
height: 100%; /* matches the height of its sibling text column inside the same .dest-row */
min-height: 500px; /* ensures image area never collapses shorter than 500px regardless of content */
overflow: hidden; /* clips the image when it zooms on hover, keeping it within the gold border */
position: relative; /* establishes stacking context for any future absolutely-positioned children */
border: 6px solid var(--gold); /* thick gold picture-frame border around the destination image */
box-shadow: 8px 8px 30px rgba(0,0,0,0.15); /* offset shadow gives a slight 3D lifted-frame effect */
}
/* Image fills frame */
.dest-img-wrap img { /* targets the ![]()
inside .dest-img-wrap */
width: 100%;
height: 100%;
object-fit: cover; /* fills the entire .dest-img-wrap without distorting the image */
transition: 0.5s ease; /* smooth zoom animation triggered by .dest-row:hover below */
}
/* Zoom on row hover */
.dest-row:hover .dest-img-wrap img { /* triggers when the mouse is anywhere on .dest-row, not just the image */
transform: scale(1.04); /* scales the image 4% larger within the overflow:hidden clip boundary */
}
/* Text side */
.dest-text {
padding: 40px 40px; /* equal padding on all sides — creates a comfortable reading area */
}
/* Category badge */
.dest-category {
display: inline-block; /* allows padding and border-radius on what would otherwise be an inline element */
background-color: rgba(201,168,76,0.15); /* very faint gold tint behind the badge text */
color: var(--terracotta);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 14px; /* horizontal padding makes the pill shape wider than the text */
border-radius: 20px; /* large radius on a short element produces a pill shape */
margin-bottom: 14px; /* gap between badge and the destination name h2 below it */
border: 1px solid rgba(201,168,76,0.3); /* thin gold border around the pill */
}
/* Icon inside badge */
.dest-category i { /* targets the Font Awesome icon inside .dest-category */
margin-right: 6px; /* gap between the icon and the badge text beside it */
color: var(--gold);
}
/* Destination name */
.dest-text h2 { /* targets the large destination name heading inside .dest-text */
font-size: clamp(1.4rem, 2.5vw, 2.4rem); /* fluid */
color: var(--dark);
margin-bottom: 14px; /* gap between the name and the description paragraph */
}
/* Description */
.dest-text p { /* targets the description paragraph inside .dest-text */
font-size: 1rem;
color: #555;
line-height: 1.9;
margin-bottom: 24px; /* gap between description and the .dest-info list below */
text-align: justify; /* text stretches to align both left and right edges */
}
/* Info list */
.dest-info {
list-style: none; /* removes the default browser bullet points */
padding: 0; /* removes the default browser indent on */
margin: 0;
display: flex;
flex-direction: column; /* stacks each - vertically */
gap: 10px; /* vertical space between each info row */
}
/* Info list item */
.dest-info li { /* targets each
- inside .dest-info */
font-size: 0.9rem;
color: #666;
display: flex; /* places the icon and the text side by side */
align-items: center; /* vertically centres the icon with the text beside it */
gap: 10px; /* space between the icon and the label text */
}
/* Info icon */
.dest-info li i { /* targets the Font Awesome icon inside each .dest-info list item */
color: var(--gold);
font-size: 1rem;
width: 18px; /* fixed width keeps all icons in a consistent column so labels stay aligned */
flex-shrink: 0; /* never shrink the icon */
}
/* Info bold label */
.dest-info li strong { /* targets the bold key label (e.g. "Best time:") inside each list item */
color: var(--dark); /* darker than the surrounding #666 text, making the label stand out */
}
/* Alternating rows have white background */
.dest-row-reverse { /* added to every second .dest-row to alternate background colour */
background-color: #fff; /* white against the cream of the surrounding .dest-list creates a subtle alternating stripe */
}
/* =========================================================
CONTACT — HERO (dark title block + Google Map)
========================================================= */
.contact-hero {
width: 100%; /* stretches to fill the full page width */
}
/* Dark title block */
.contact-hero-text {
background-color: var(--dark);
text-align: center;
padding: 50px 20px 30px; /* 50px top clears the navbar, 20px sides prevent text touching edges, 30px bottom */
}
/* Heading */
.contact-hero-text h1 { /* targets the
inside the dark contact header */
font-size: clamp(1.6rem, 4vw, 2.8rem); /* fluid */
color: #fff;
margin-bottom: 10px; /* gap between heading and the subtitle below */
}
/* Gold word */
.contact-hero-text h1 span { /* targets the highlighted word wrapped in a inside the h1 */
color: var(--gold);
}
/* Subtitle */
.contact-hero-text .hero-sub { /* reuses the .hero-sub class from the home page hero within the contact header */
font-size: 1rem;
color: rgba(245, 240, 232, 0.8); /* cream at 80% opacity — softer than the white h1 above */
font-weight: 300;
}
/* Google Map container */
.contact-map {
width: 100%;
height: 420px; /* fixed height so the map is tall enough to be usable */
}
/* Map iframe fills container */
.contact-map iframe { /* targets the Google Maps
description inside .dest-intro */
font-size: 1rem;
color: #555;
line-height: 1.9;
max-width: 700px; /* constrains line length for readability — text won't stretch on very wide screens */
}
/* =========================================================
DESTINATIONS — LIST (magazine rows alternating left/right)
========================================================= */
.dest-list {
background-color: var(--cream);
}
/* Each destination row */
.dest-row {
min-height: 500px; /* guarantees enough height even if the text column is short */
border-bottom: 1px solid rgba(201,168,76,0.15); /* faint gold line separating destination rows from each other */
}
/* Image side */
.dest-img-wrap {
width: 100%; /* fills the full width of its Bootstrap column (col-lg-6) */
height: 100%; /* matches the height of its sibling text column inside the same .dest-row */
min-height: 500px; /* ensures image area never collapses shorter than 500px regardless of content */
overflow: hidden; /* clips the image when it zooms on hover, keeping it within the gold border */
position: relative; /* establishes stacking context for any future absolutely-positioned children */
border: 6px solid var(--gold); /* thick gold picture-frame border around the destination image */
box-shadow: 8px 8px 30px rgba(0,0,0,0.15); /* offset shadow gives a slight 3D lifted-frame effect */
}
/* Image fills frame */
.dest-img-wrap img { /* targets the inside .dest-img-wrap */
width: 100%;
height: 100%;
object-fit: cover; /* fills the entire .dest-img-wrap without distorting the image */
transition: 0.5s ease; /* smooth zoom animation triggered by .dest-row:hover below */
}
/* Zoom on row hover */
.dest-row:hover .dest-img-wrap img { /* triggers when the mouse is anywhere on .dest-row, not just the image */
transform: scale(1.04); /* scales the image 4% larger within the overflow:hidden clip boundary */
}
/* Text side */
.dest-text {
padding: 40px 40px; /* equal padding on all sides — creates a comfortable reading area */
}
/* Category badge */
.dest-category {
display: inline-block; /* allows padding and border-radius on what would otherwise be an inline element */
background-color: rgba(201,168,76,0.15); /* very faint gold tint behind the badge text */
color: var(--terracotta);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 14px; /* horizontal padding makes the pill shape wider than the text */
border-radius: 20px; /* large radius on a short element produces a pill shape */
margin-bottom: 14px; /* gap between badge and the destination name h2 below it */
border: 1px solid rgba(201,168,76,0.3); /* thin gold border around the pill */
}
/* Icon inside badge */
.dest-category i { /* targets the Font Awesome icon inside .dest-category */
margin-right: 6px; /* gap between the icon and the badge text beside it */
color: var(--gold);
}
/* Destination name */
.dest-text h2 { /* targets the large destination name heading inside .dest-text */
font-size: clamp(1.4rem, 2.5vw, 2.4rem); /* fluid */
color: var(--dark);
margin-bottom: 14px; /* gap between the name and the description paragraph */
}
/* Description */
.dest-text p { /* targets the description paragraph inside .dest-text */
font-size: 1rem;
color: #555;
line-height: 1.9;
margin-bottom: 24px; /* gap between description and the .dest-info list below */
text-align: justify; /* text stretches to align both left and right edges */
}
/* Info list */
.dest-info {
list-style: none; /* removes the default browser bullet points */
padding: 0; /* removes the default browser indent on
*/
margin: 0;
display: flex;
flex-direction: column; /* stacks each
inside the dark contact header */
font-size: clamp(1.6rem, 4vw, 2.8rem); /* fluid */
color: #fff;
margin-bottom: 10px; /* gap between heading and the subtitle below */
}
/* Gold word */
.contact-hero-text h1 span { /* targets the highlighted word wrapped in a inside the h1 */
color: var(--gold);
}
/* Subtitle */
.contact-hero-text .hero-sub { /* reuses the .hero-sub class from the home page hero within the contact header */
font-size: 1rem;
color: rgba(245, 240, 232, 0.8); /* cream at 80% opacity — softer than the white h1 above */
font-weight: 300;
}
/* Google Map container */
.contact-map {
width: 100%;
height: 420px; /* fixed height so the map is tall enough to be usable */
}
/* Map iframe fills container */
.contact-map iframe { /* targets the Google Maps