:root {
--primary-color: #DF6951;
--primary-color-dark: #B05030; /* WCAG AA 4.5:1+ with white text */
--primary-color-hover: #8F3F25;
--secondary-color: #F1A501;
--text-dark: #181E4B;
--text-muted: #5E6282;
--bg-light: #FDFDFC;
--font-sans: 'Inter', system-ui, sans-serif;
--font-serif: 'Playfair Display', Georgia, serif;
--font-manrope: 'Inter', system-ui, sans-serif;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-mulish: 'Mulish', sans-serif;
--container-padding: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1210px;
width: 100%;
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* Header */
.brand-logo img {
border-radius: 50%;
width: 50px;
height: 50px;
object-fit: cover;
margin-top: 10px;
}
.main-header {
height: 50px;
background: var(--bg-light);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
}
.header-inner {
width: 100%;
max-width: 1210px;
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.main-nav {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
list-style: none;
gap: 0px;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 0 8px;
height: 50px;
text-decoration: none;
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
color: var(--text-dark);
transition: 0.3s;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color-dark);
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 2px;
background: var(--primary-color-dark);
border-radius: 2px;
}
.nav-chevron {
font-size: 8px;
color: currentColor;
opacity: 0.65;
transition: transform 0.2s ease;
}
.nav-item-dropdown:hover .nav-chevron,
.nav-item-dropdown:focus-within .nav-chevron {
transform: rotate(180deg);
}
.nav-mega-menu {
position: absolute;
top: 100%;
left: 50%;
display: grid;
grid-template-columns: 180px 190px 230px;
gap: 12px;
min-width: 640px;
padding: 14px;
background: #fff;
border: 1px solid rgba(24, 30, 75, 0.08);
border-radius: 8px;
box-shadow: 0 18px 45px rgba(24, 30, 75, 0.14);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 1002;
}
.nav-item-dropdown:hover .nav-mega-menu,
.nav-item-dropdown:focus-within .nav-mega-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.nav-mega-menu-compact {
grid-template-columns: repeat(2, 190px);
min-width: 420px;
}
.nav-mega-menu-small {
grid-template-columns: 220px;
min-width: 250px;
}
.nav-mega-column {
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-mega-title {
display: block;
margin-bottom: 4px;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.nav-mega-link {
display: flex;
align-items: center;
min-height: 30px;
padding: 6px 8px;
color: var(--text-dark);
text-decoration: none;
font-size: 12px;
font-weight: 500;
line-height: 1.25;
border-radius: 6px;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-mega-link:hover,
.nav-mega-link:focus {
color: var(--primary-color);
background: rgba(223, 105, 81, 0.08);
outline: none;
}
.nav-mega-cta {
padding: 10px;
background: #F8FAFC;
border: 1px solid rgba(24, 30, 75, 0.06);
border-radius: 8px;
}
.nav-mega-cta p {
margin: 0 0 10px;
color: var(--text-muted);
font-size: 11px;
line-height: 1.45;
}
.nav-mega-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 30px;
padding: 6px 10px;
border-radius: 6px;
background: var(--primary-color);
color: #fff;
text-decoration: none;
font-size: 11px;
font-weight: 700;
transition: background 0.2s ease;
}
.nav-mega-action:hover,
.nav-mega-action:focus {
background: #c95843;
outline: none;
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.action-item {
position: relative;
display: flex;
align-items: center;
gap: 3px;
cursor: pointer;
font-size: 11px;
font-weight: 500;
color: var(--text-dark);
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 6px;
list-style: none;
padding: 4px 0;
min-width: 60px;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: 0.3s;
z-index: 100;
}
.action-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li a {
display: block;
padding: 4px 10px;
text-decoration: none;
color: var(--text-dark);
font-size: 11px;
transition: 0.3s;
}
.dropdown-menu li a:hover {
background: var(--bg-light);
color: var(--primary-color);
}
.nav-arrow-wrapper {
margin-left: 2px;
font-size: 7px;
opacity: 0.6;
}
/* Adjust body for larger header */
body {
padding-top: 50px;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 22px;
height: 16px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
transition: all 0.3s ease;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--text-dark);
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover span {
background-color: var(--primary-color);
}
/* Active state - X animation */
.mobile-menu-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Show mobile menu toggle on tablets and mobile */
@media (max-width: 992px) {
.mobile-menu-toggle {
display: flex;
position: relative;
/* Ensure z-index works if needed */
z-index: 1001;
}
.main-nav,
.header-actions .lang-selector {
display: none;
}
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 990;
/* Behind the header (z-index 1000) */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-nav {
position: absolute;
top: 0;
right: 0;
width: 220px;
max-width: 80%;
height: 100%;
background: white;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
padding: 65px 0 20px;
}
.mobile-menu-overlay.active .mobile-nav {
transform: translateX(0);
}
.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-nav-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 13px;
transition: all 0.3s ease;
position: relative;
}
.mobile-nav-link i {
font-size: 13px;
color: var(--text-muted);
transition: color 0.3s ease;
width: 16px;
text-align: center;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
background: linear-gradient(90deg, rgba(223, 105, 81, 0.1) 0%, transparent 100%);
color: var(--primary-color);
}
.mobile-nav-link:hover i,
.mobile-nav-link.active i {
color: var(--primary-color);
}
.mobile-nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.mobile-subnav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 20px 10px 48px;
}
.mobile-subnav a {
display: block;
padding: 5px 0;
color: var(--text-muted);
text-decoration: none;
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
.mobile-subnav a:hover,
.mobile-subnav a:focus {
color: var(--primary-color);
outline: none;
}
/* Mobile Language Selector */
.mobile-lang-selector {
padding: 20px;
margin-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-lang-title {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 10px;
}
.mobile-lang-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-lang-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
text-decoration: none;
color: var(--text-dark);
font-size: 12px;
font-weight: 500;
border-radius: 6px;
transition: all 0.3s ease;
background: var(--bg-light);
}
.mobile-lang-option i {
font-size: 12px;
color: var(--text-muted);
transition: color 0.3s ease;
}
.mobile-lang-option:hover,
.mobile-lang-option.active {
background: var(--primary-color);
color: white;
}
.mobile-lang-option:hover i,
.mobile-lang-option.active i {
color: white;
}
/* Prevent body scroll when menu is open */
body.menu-open {
overflow: hidden;
}
.tours-section-new {
padding: 20px 0 30px;
background: #FFFFFF;
position: relative;
width: 100%;
}
/* Hero Section */
.hero {
position: relative;
padding: 20px 0 50px;
}
.hero-container {
display: flex;
align-items: center;
position: relative;
}
.hero-content {
flex: 1;
}
.hero-tagline {
color: #B05030; /* WCAG AA compliant — 4.8:1 on white */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 20px;
font-size: 14px;
}
.hero-title {
font-family: var(--font-serif);
font-size: 52px;
line-height: 1.1;
margin-bottom: 20px;
color: var(--text-dark);
}
.hero-title span {
position: relative;
display: inline-block;
}
.hero-title span::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 10px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: -1;
}
.hero-description {
color: var(--text-muted);
font-size: 15px;
margin-bottom: 30px;
max-width: 400px;
}
.hero-actions {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 50px;
}
.btn-primary {
background-color: var(--secondary-color);
color: #181E4B;
padding: 12px 25px;
padding: 10px 22px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 13px;
box-shadow: 0 8px 16px rgba(241, 165, 1, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 25px rgba(241, 165, 1, 0.3);
}
.follow-us {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text-muted);
font-weight: 500;
font-size: 14px;
transition: color 0.3s ease;
}
.follow-us:hover {
color: var(--primary-color);
}
.follow-icon {
width: 40px;
height: 40px;
background-color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 5px 15px rgba(223, 105, 81, 0.3);
}
.hero-stats {
display: flex;
gap: 30px;
}
.stat-item {
text-align: center;
}
.stat-item .counter-value {
font-family: var(--font-serif);
font-size: 20px;
color: #B05030; /* WCAG AA compliant — 4.8:1 on white */
margin-bottom: 2px;
}
.stat-item p {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
/* Hero Image */
.hero-image-wrapper {
flex: 1;
position: relative;
display: flex;
justify-content: flex-end;
}
.hero-main-img-container {
position: relative;
width: 100%;
max-width: 450px;
height: 500px;
z-index: 2;
}
.hero-main-img {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 5;
filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.1));
animation: floatingImg 6s ease-in-out infinite;
}
.hero-deco-lines {
position: absolute;
top: -40px;
right: -40px;
z-index: 1;
opacity: 0.5;
transform: scale(0.8);
}
.hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
z-index: 0;
}
.blob-1 {
width: 250px;
height: 250px;
background: rgba(223, 105, 81, 0.15);
top: 40px;
right: 40px;
animation: blobMove 15s infinite alternate;
}
.blob-2 {
width: 200px;
height: 200px;
background: rgba(241, 165, 1, 0.15);
bottom: 40px;
left: 40px;
animation: blobMove 12s infinite alternate-reverse;
}
/* Floating Items */
.floating-item {
position: absolute;
z-index: 10;
font-size: 20px;
color: var(--primary-color);
background: white;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
animation: floatingObj 4s ease-in-out infinite;
}
.item-plane {
top: 15%;
right: 0;
color: var(--secondary-color);
animation-delay: 0s;
}
.item-location {
bottom: 25%;
left: -20px;
color: var(--primary-color);
animation-delay: 0.5s;
}
.item-star {
top: 40%;
left: 10%;
color: #FFD700;
font-size: 18px;
animation-delay: 1s;
}
/* Animations */
@keyframes floatingImg {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes floatingObj {
0%,
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-15px) rotate(5deg);
}
}
@keyframes blobMove {
from {
transform: translate(0, 0) scale(1);
}
to {
transform: translate(40px, 40px) scale(1.1);
}
}
.path-anim {
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: drawPath 3s forwards ease-in-out;
}
.path-anim-slow {
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: drawPath 5s infinite linear;
}
@keyframes drawPath {
to {
stroke-dashoffset: 0;
}
}
@keyframes rotateStar {
from {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.3);
}
to {
transform: rotate(360deg) scale(1);
}
}
@keyframes bouncePin {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes floatCloud {
0%,
100% {
transform: translateX(0) scale(1);
}
50% {
transform: translateX(50px) scale(1.05);
}
}
@keyframes rotateStar {
from {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.3);
}
to {
transform: rotate(360deg) scale(1);
}
}
@keyframes bouncePin {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Sponsors Section */
.sponsors-section {
height: 173px;
background: #FFFFFF;
border-top: 1px solid #E4E6E8;
border-bottom: 1px solid #E4E6E8;
display: flex;
align-items: center;
width: 100%;
}
.sponsors-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1224px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.sponsor-item {
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(1);
opacity: 0.5;
transition: all 0.3s ease;
}
.sponsor-item:hover {
filter: grayscale(0);
opacity: 1;
}
@media (max-width: 992px) {
.sponsors-section {
height: auto;
padding: 40px 0;
}
.sponsors-container {
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
}
/* Tours Section */
.tours-section {
padding: 100px 0;
text-align: center;
position: relative;
background: linear-gradient(180deg, rgba(253, 253, 252, 0) 0%, rgba(255, 241, 218, 0.3) 100%);
}
.section-subtitle {
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin-bottom: 10px;
display: block;
}
.section-title {
font-family: var(--font-serif);
font-size: 42px;
color: var(--text-dark);
margin-bottom: 60px;
}
.tours-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
padding: 20px 0;
}
.tour-card {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
cursor: pointer;
text-align: left;
}
.tour-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}
.tour-image-wrapper {
position: relative;
height: 280px;
overflow: hidden;
}
.tour-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.tour-card:hover .tour-image {
transform: scale(1.1);
}
.tour-badge {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 6px 15px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
color: var(--primary-color);
backdrop-filter: blur(5px);
z-index: 2;
}
.tour-price {
position: absolute;
bottom: 20px;
right: 20px;
background: var(--primary-color);
color: white;
padding: 8px 18px;
border-radius: 12px;
font-weight: 700;
font-size: 18px;
box-shadow: 0 10px 20px rgba(223, 105, 81, 0.3);
z-index: 2;
}
.tour-content {
padding: 25px;
}
.tour-meta {
display: flex;
gap: 15px;
margin-bottom: 12px;
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.tour-meta i {
color: var(--secondary-color);
margin-right: 5px;
}
.tour-title {
font-size: 22px;
font-family: var(--font-serif);
color: var(--text-dark);
margin-bottom: 15px;
line-height: 1.3;
}
.tour-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #f0f0f0;
}
.tour-rating {
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
color: var(--text-dark);
}
.tour-rating i {
color: #FFC107;
}
.btn-view-tour {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease;
}
.btn-view-tour:hover {
gap: 12px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
.delay-4 {
animation-delay: 0.8s;
}
/* Tours Section */
.tours-section {
padding: 100px 0;
text-align: center;
position: relative;
background: linear-gradient(180deg, rgba(253, 253, 252, 0) 0%, rgba(255, 241, 218, 0.3) 100%);
}
.section-subtitle {
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin-bottom: 10px;
display: block;
}
.section-title {
font-family: var(--font-serif);
font-size: 42px;
color: var(--text-dark);
margin-bottom: 60px;
}
.tours-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
padding: 20px 0;
}
.tour-card {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
cursor: pointer;
text-align: left;
}
.tour-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}
.tour-image-wrapper {
position: relative;
height: 280px;
overflow: hidden;
}
.tour-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.tour-card:hover .tour-image {
transform: scale(1.1);
}
.tour-badge {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 6px 15px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
color: var(--primary-color);
backdrop-filter: blur(5px);
z-index: 2;
}
.tour-price {
position: absolute;
bottom: 20px;
right: 20px;
background: var(--primary-color);
color: white;
padding: 8px 18px;
border-radius: 12px;
font-weight: 700;
font-size: 18px;
box-shadow: 0 10px 20px rgba(223, 105, 81, 0.3);
z-index: 2;
}
.tour-content {
padding: 25px;
}
.tour-meta {
display: flex;
gap: 15px;
margin-bottom: 12px;
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.tour-meta i {
color: var(--secondary-color);
margin-right: 5px;
}
.tour-title {
font-size: 22px;
font-family: var(--font-serif);
color: var(--text-dark);
margin-bottom: 15px;
line-height: 1.3;
}
.tour-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #f0f0f0;
}
.tour-rating {
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
color: var(--text-dark);
}
.tour-rating i {
color: #FFC107;
}
.btn-view-tour {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease;
}
.btn-view-tour:hover {
gap: 12px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
:root {
--container-padding: 15px;
}
.hero-container {
flex-direction: column;
padding-top: 50px;
text-align: center;
}
.hero-title {
font-size: 40px;
}
.hero-description {
margin: 0 auto 30px;
}
.hero-actions {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.hero-image {
width: 100%;
max-width: 350px;
margin-top: 50px;
}
.hero-image-bg {
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
right: 0;
left: 0;
margin: 0 auto;
}
.section-title {
font-size: 32px;
}
.footer-content {
grid-template-columns: 1fr !important;
text-align: center;
}
.footer-brand {
margin-bottom: 40px;
}
.social-links {
justify-content: center !important;
}
}
/* Footer Styles */
footer {
padding: 80px 0 30px;
background: var(--text-dark);
position: relative;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 30%;
right: 15%;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 13s infinite;
}
.footer-content {
display: grid;
grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(135px, 1fr));
gap: 28px;
margin-bottom: 38px;
position: relative;
z-index: 1;
}
.footer-brand .logo {
display: block;
margin-bottom: 20px;
font-family: var(--font-serif);
font-size: 24px;
font-weight: 700;
color: #ffffff;
}
.footer-brand .logo img {
border-radius: 50%;
width: 80px;
height: 80px;
object-fit: cover;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
max-width: 250px;
margin-bottom: 25px;
line-height: 1.6;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(223, 105, 81, 0.2);
}
.footer-links h3 {
font-family: var(--font-serif);
font-size: 18px;
margin-bottom: 25px;
color: #ffffff;
font-weight: 700;
}
.footer-links ul {
list-style: none;
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links ul li a {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
}
.footer-links ul li a:hover {
color: var(--primary-color);
transform: translateX(3px);
}
.footer-seo-links {
position: relative;
z-index: 1;
display: grid;
gap: 28px;
margin-bottom: 34px;
}
.footer-seo-links h3,
.footer-featured-links h3 {
font-family: var(--font-serif);
font-size: 17px;
margin-bottom: 14px;
color: #ffffff;
font-weight: 700;
}
.footer-tag-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footer-tag-links a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 11px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer-tag-links a:hover,
.footer-tag-links a:focus {
color: #ffffff;
border-color: rgba(223, 105, 81, 0.4);
background: var(--primary-color);
outline: none;
}
.footer-featured-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.footer-featured-links ul {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 18px;
}
.footer-featured-links li a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
transition: color 0.2s ease;
}
.footer-featured-links li a:hover,
.footer-featured-links li a:focus {
color: var(--primary-color);
outline: none;
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 1;
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
@media (max-width: 1180px) {
.footer-content {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.footer-brand {
grid-column: 1 / -1;
}
.footer-brand p {
max-width: 520px;
}
}
@media (max-width: 768px) {
.footer-featured-links,
.footer-featured-links ul {
grid-template-columns: 1fr;
}
.footer-tag-links {
justify-content: center;
}
}
/* New Tours Section - Matching Design Specs */
.tours-section-new {
padding: 30px 0 40px;
background: #FFFFFF;
position: relative;
}
.tours-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
gap: 30px;
position: relative;
padding: 0 12px;
}
.tours-section-new::before {
content: '';
position: absolute;
top: 50px;
right: 5%;
width: 120px;
height: 120px;
background: radial-gradient(circle, #FFF1DA 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
opacity: 0.6;
animation: pulseBg 8s infinite;
}
.tours-header-content {
flex: 1;
}
.tours-main-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 36px;
line-height: 1.1;
color: var(--text-dark);
margin: 0;
}
.tours-subtitle {
font-family: var(--font-sans);
font-weight: 500;
font-size: 15px;
color: var(--text-muted);
margin: 8px 0 0 0;
}
.tours-navigation {
display: flex;
gap: 10px;
position: absolute;
right: 20px;
bottom: 0;
z-index: 10;
}
.nav-arrow {
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
background: #E4E6E8;
color: #000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 14px;
}
.nav-arrow:hover {
background: #D0D0D0;
}
.tours-carousel-wrapper {
overflow: hidden;
position: relative;
margin-top: 20px;
}
.tours-carousel {
display: flex;
gap: 10px;
padding: 20px 5px 30px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tours-carousel::-webkit-scrollbar {
display: none;
}
.tours-load-more-wrapper {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
}
.btn-load-more-tours {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #c74f36;
border-radius: 8px;
padding: 12px 35px;
color: white;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(199, 79, 54, 0.2);
}
.btn-load-more-tours:hover {
background: #b03f28;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(176, 63, 40, 0.3);
}
.load-more-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
}
.load-more-icon svg {
width: 100%;
height: 100%;
}
.load-more-text {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: #FFFFFF;
}
/* Events Section Styles */
.events-section-new {
padding: 30px 0 40px;
background: #FFFFFF;
position: relative;
}
.events-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
gap: 30px;
position: relative;
padding: 0 12px;
}
.events-section-new::before {
content: '';
position: absolute;
top: 50px;
right: 5%;
width: 120px;
height: 120px;
background: radial-gradient(circle, #FFF1DA 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
opacity: 0.6;
animation: pulseBg 8s infinite;
}
.events-header-content {
flex: 1;
}
.events-main-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 36px;
line-height: 1.1;
color: var(--text-dark);
margin: 0;
}
.events-subtitle {
font-family: var(--font-sans);
font-weight: 500;
font-size: 15px;
color: var(--text-muted);
margin: 8px 0 0 0;
}
.events-navigation {
display: flex;
gap: 10px;
position: absolute;
right: 20px;
bottom: 0;
z-index: 10;
}
.events-carousel-wrapper {
overflow: hidden;
position: relative;
margin-top: 20px;
}
.events-carousel {
display: flex;
gap: 10px;
padding: 20px 5px 30px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.events-carousel::-webkit-scrollbar {
display: none;
}
.events-load-more-wrapper {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
}
.btn-load-more-events {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--primary-color);
border-radius: 8px;
padding: 12px 35px;
color: white;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(223, 105, 81, 0.2);
}
.btn-load-more-events:hover {
background: #c55d48;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(223, 105, 81, 0.3);
}
/* Event Card Styles */
.event-card-new {
flex: 0 0 280px;
width: 280px;
background: #FFFFFF;
border: 1px solid #E4E6E8;
border-radius: 32px;
font-family: 'Manrope', sans-serif;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card-new:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* New Tour Card Styles based on Design Spec */
.tour-card-new {
flex: 0 0 280px;
width: 280px;
background: #FFFFFF;
border: 1px solid #E4E6E8;
border-radius: 32px;
font-family: 'Manrope', sans-serif;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tour-card-new:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.tour-card-img-container {
height: 200px;
position: relative;
overflow: hidden;
}
.tour-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.tour-card-img-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
}
.tour-badge-top-rated {
position: absolute;
top: 15px;
left: 15px;
background: #FFFFFF;
border-radius: 50px;
padding: 4px 12px;
font-weight: 700;
font-size: 12px;
color: #F09814;
}
.tour-badge-heart {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.82);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tour-badge-rating {
position: absolute;
bottom: -18px;
/* Position halfway over the edge */
left: 50%;
transform: translateX(-50%);
height: 36px;
background: #FFFFFF;
border: 1px solid #E4E6E8;
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.07);
border-radius: 50px;
display: flex;
align-items: center;
padding: 0 15px;
font-weight: 700;
font-size: 14px;
color: #000000;
gap: 6px;
white-space: nowrap;
}
.tour-badge-rating .fa-star {
color: #FFC700;
}
.tour-card-body {
padding: 35px 25px 25px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tour-title-v2 {
margin: 0;
margin-bottom: 20px;
}
.tour-title-v2 a {
font-weight: 800;
font-size: 20px;
line-height: 1.33;
color: #000000;
text-decoration: none;
}
.tour-meta-v2 {
display: flex;
gap: 30px;
margin-bottom: auto;
/* Pushes footer to the bottom */
padding-bottom: 20px;
}
.meta-item-v2 {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
font-size: 14px;
color: #737373;
}
.meta-item-v2 i {
color: #D6D7D8;
font-size: 14px;
}
.tour-footer-v2 {
display: flex;
justify-content: space-between;
/* Space out the buttons */
align-items: center;
border-top: 1px solid #E4E6E8;
padding-top: 20px;
gap: 10px;
/* Add space between buttons */
}
.btn-view-details,
.btn-book-now {
flex: 1;
/* Allow buttons to share space */
text-align: center;
background: #F2F4F6;
border: 1px solid #E4E6E8;
border-radius: 50px;
padding: 8px 10px;
color: #000000;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 12px;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-view-details:hover,
.btn-book-now:hover {
background: #e9ecef;
border-color: #d1d5db;
}
/* Differentiate the 'Book Now' button */
.btn-book-now {
background: #000000;
color: #FFFFFF;
border-color: #000000;
}
.btn-book-now:hover {
background: #333333;
border-color: #333333;
}
/* The second .btn-book-now:hover was removed as it was a duplicate/override */
/* Promo Card Specifics */
.tour-card-promo .tour-card-title {
font-weight: 800;
}
.tour-card-promo .tour-card-title {
font-weight: 800;
}
.tour-promotion-timer-inline {
text-align: left;
}
/* Tour Details Page */
.tour-details-header {
height: 400px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
color: white;
position: relative;
}
.tour-details-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}
.tour-details-header .container {
position: relative;
z-index: 2;
padding-bottom: 40px;
}
.tour-title-details {
font-family: var(--font-serif);
font-size: 48px;
margin-bottom: 10px;
}
.tour-details-content {
padding: 60px 0;
}
.tour-details-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
.tour-main-info h2 {
font-family: var(--font-serif);
font-size: 32px;
margin-bottom: 20px;
}
.tour-main-info h3 {
font-family: var(--font-serif);
font-size: 24px;
margin-top: 40px;
margin-bottom: 20px;
}
.itinerary-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.itinerary-item:last-child {
border-bottom: none;
}
.itinerary-item h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.booking-card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
.booking-card h3 {
font-family: var(--font-serif);
font-size: 24px;
margin-bottom: 20px;
}
.price-info {
margin-bottom: 20px;
}
.price-amount {
font-size: 36px;
font-weight: 700;
color: var(--primary-color);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.form-control {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
}
.btn-block {
width: 100%;
padding: 15px;
}
.tour-card-horizontal-link {
text-decoration: none;
color: inherit;
display: block;
}
.tour-promotion-timer-inline .promotion-label {
font-family: var(--font-sans);
font-weight: 700;
font-size: 11px;
line-height: normal;
color: var(--text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tour-promotion-timer-inline .countdown-timer {
display: flex;
gap: 8px;
justify-content: flex-start;
}
.tour-promotion-timer-inline .countdown-item {
display: flex;
flex-direction: column;
align-items: center;
}
.tour-promotion-timer-inline .countdown-value {
background: #fff;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
padding: 0;
width: 32px;
height: 32px;
line-height: 32px;
color: var(--primary-color);
text-align: center;
font-family: var(--font-sans);
border: 1px solid #eee;
}
.tour-promotion-timer-inline .countdown-label {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 600;
line-height: normal;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 4px;
}
/* Responsive adjustments */
@media (max-width: 1210px) {
.tours-main-title {
font-size: 48px;
line-height: 1.2;
}
.tours-navigation {
right: 20px;
}
}
@media (max-width: 768px) {
.tours-header {
flex-direction: column;
}
.tours-navigation {
position: static;
margin-top: 30px;
}
.tour-card-new {
flex: 0 0 320px;
min-width: 300px;
}
.tour-card-title {
font-size: 24px;
line-height: 32px;
height: auto;
min-height: 64px;
}
.btn-book-now {
width: 100%;
margin-top: 15px;
}
.tour-card-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* Popular Destinations Section */
.popular-destinations {
padding: 20px 0 100px;
background: linear-gradient(180deg, rgba(253, 253, 252, 0) 0%, rgba(255, 241, 218, 0.2) 100%);
position: relative;
width: 100%;
margin-top: -40px;
}
/* Decorative elements for popular destinations */
.popular-destinations::before {
content: '';
position: absolute;
top: 100px;
right: 8%;
width: 150px;
height: 150px;
background: radial-gradient(circle, #FFF1DA 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
opacity: 0.6;
animation: pulseBg 10s infinite;
}
.popular-destinations::after {
content: '';
position: absolute;
bottom: 150px;
left: 5%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(223, 105, 81, 0.1) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 8s infinite;
}
.popular-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 60px;
flex-wrap: wrap;
gap: 30px;
position: relative;
z-index: 1;
}
.popular-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 42px;
line-height: 1.2;
color: var(--text-dark);
margin-bottom: 10px;
}
.popular-subtitle {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
}
.popular-filters {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
background: white;
border: 1px solid #f0f0f0;
border-radius: 8px;
height: 40px;
padding: 0 20px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.filter-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(223, 105, 81, 0.2);
}
.filter-btn i {
font-size: 10px;
transition: transform 0.3s ease;
}
.filter-btn:hover i {
transform: rotate(180deg);
}
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
position: relative;
z-index: 1;
}
.destination-card {
background: white;
border: none;
border-radius: 24px;
overflow: hidden;
position: relative;
height: 224px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.destination-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}
.dest-image {
height: 115px;
width: 100%;
background-size: cover;
background-position: center;
background-color: #eee;
transition: transform 0.6s ease;
}
.destination-card:hover .dest-image {
transform: scale(1.1);
}
.dest-content {
padding: 16px;
position: relative;
}
.dest-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 18px;
color: var(--text-dark);
margin-bottom: 5px;
}
.dest-meta {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
.dest-arrow {
width: 32px;
height: 32px;
background: rgba(223, 105, 81, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 12px;
position: absolute;
right: 16px;
bottom: 16px;
transition: all 0.3s ease;
text-decoration: none;
}
.destination-card:hover .dest-arrow {
background: var(--primary-color);
color: white;
transform: translateX(3px);
}
/* CTA Card */
.destination-card.cta-card {
background: linear-gradient(135deg, var(--secondary-color) 0%, #f1b520 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
text-align: center;
border: none;
}
.cta-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: white;
margin-bottom: 20px;
}
.btn-browse-all {
background: white;
border-radius: 8px;
color: var(--text-dark);
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
padding: 12px 24px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn-browse-all:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
gap: 15px;
}
/* Why Choose Us Section */
.why-choose-us {
padding: 60px 0 40px;
margin-top: 0;
background: linear-gradient(135deg, rgba(255, 241, 218, 0.4) 0%, rgba(253, 253, 252, 1) 100%);
position: relative;
width: 100%;
overflow: hidden;
}
/* Decorative elements for why-choose-us */
.why-choose-us::before {
content: '';
position: absolute;
top: 10%;
left: 5%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(241, 165, 1, 0.15) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 12s infinite;
}
.why-choose-us::after {
content: '';
position: absolute;
bottom: 10%;
right: 8%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(223, 105, 81, 0.12) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 10s infinite;
}
.why-container {
display: block;
text-align: center;
position: relative;
z-index: 1;
}
.love-image-wrapper {
flex: 0 0 45%;
position: relative;
padding-left: 50px;
}
.love-bg-shape {
position: absolute;
top: -40px;
left: -40px;
width: 500px;
height: 500px;
background: radial-gradient(circle, #FFF1DA 0%, #ffe4bc 100%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 10s ease-in-out infinite;
}
.love-image {
width: 100%;
max-width: 457px;
height: auto;
position: relative;
z-index: 2;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
animation: floatCharacter 6s ease-in-out infinite;
}
.love-content {
flex: 1;
}
.love-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 56px;
line-height: 1.2;
color: var(--text-dark);
margin-bottom: 20px;
}
.love-subtitle {
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--text-muted);
margin-bottom: 60px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-transform: uppercase;
letter-spacing: 2px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
.feature-item {
display: flex;
gap: 20px;
transition: transform 0.3s ease;
}
.feature-item:hover {
transform: translateX(5px);
}
.feature-icon {
width: 64px;
height: 64px;
background: white;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 28px;
transition: all 0.3s ease;
}
.feature-item:hover .feature-icon {
transform: scale(1.1);
box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.12);
}
.icon-security i {
color: var(--secondary-color);
}
.icon-support i {
color: var(--primary-color);
}
.icon-policy i {
color: #0584E3;
}
.icon-reputation i {
color: var(--secondary-color);
}
.feature-text {
flex: 1;
}
.feature-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 20px;
color: var(--text-dark);
margin-bottom: 10px;
}
.feature-desc {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 12px;
}
.feature-link {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--primary-color);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
}
.feature-link i {
font-size: 10px;
transition: transform 0.3s ease;
}
.feature-link:hover {
color: var(--secondary-color);
gap: 10px;
}
.feature-link:hover i {
transform: translateX(3px);
}
@media (max-width: 992px) {
.why-container {
flex-direction: column;
gap: 50px;
}
.love-image-wrapper {
padding-left: 0;
text-align: center;
}
.love-bg-shape {
left: 50%;
transform: translateX(-50%);
}
.features-grid {
grid-template-columns: 1fr;
}
.love-title {
font-size: 36px;
}
}
/* How It Works Section */
.how-it-works {
padding: 40px 0 30px;
background: linear-gradient(180deg, rgba(253, 253, 252, 0) 0%, rgba(255, 241, 218, 0.25) 100%);
position: relative;
width: 100%;
overflow: hidden;
}
/* Decorative elements for how-it-works */
.how-it-works::before {
content: '';
position: absolute;
top: 15%;
right: 10%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(223, 105, 81, 0.12) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 11s infinite;
}
.how-it-works::after {
content: '';
position: absolute;
bottom: 20%;
left: 8%;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(241, 165, 1, 0.15) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulseBg 9s infinite;
}
.how-container {
position: relative;
z-index: 1;
}
.how-header {
text-align: center;
margin-bottom: 80px;
}
.how-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 56px;
line-height: 1.2;
color: var(--text-dark);
margin-bottom: 20px;
}
.how-subtitle {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
}
.how-content-wrapper {
display: flex;
justify-content: center;
gap: 60px;
}
.how-images {
flex: 1;
position: relative;
height: 600px;
}
/* Image Collage with enhanced styling */
.img-large {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 372px;
background-size: cover;
background-position: center;
border-radius: 24px;
background-color: #eee;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: transform 0.5s ease;
}
.img-large:hover {
transform: scale(1.02);
}
.img-small-1 {
position: absolute;
top: 400px;
left: 0;
width: 268px;
height: 347px;
background-size: cover;
background-position: center;
border-radius: 24px;
background-color: #eee;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: transform 0.5s ease;
}
.img-small-1:hover {
transform: scale(1.02);
}
.img-small-2 {
position: absolute;
top: 400px;
left: 290px;
width: 225px;
height: 291px;
background-size: cover;
background-position: center;
border-radius: 24px;
background-color: #eee;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: transform 0.5s ease;
}
.img-small-2:hover {
transform: scale(1.02);
}
.dec-wave {
position: absolute;
bottom: -20px;
right: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(241, 165, 1, 0.2) 0%, transparent 60%);
border-radius: 50%;
animation: pulseBg 8s infinite;
}
.how-steps {
flex: 1;
display: flex;
flex-direction: row;
gap: 30px;
justify-content: center;
width: 100%;
}
.step-card {
padding: 35px 30px;
border-radius: 24px;
display: flex;
gap: 20px;
align-items: flex-start;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.card-pink {
background: linear-gradient(135deg, rgba(255, 241, 218, 0.6) 0%, rgba(255, 240, 236, 0.8) 100%);
border: 1px solid rgba(223, 105, 81, 0.1);
}
.card-cyan {
background: linear-gradient(135deg, rgba(228, 249, 249, 0.6) 0%, rgba(240, 253, 253, 0.8) 100%);
border: 1px solid rgba(5, 132, 227, 0.1);
}
.card-blue {
background: linear-gradient(135deg, rgba(227, 240, 255, 0.6) 0%, rgba(240, 248, 255, 0.8) 100%);
border: 1px solid rgba(241, 165, 1, 0.1);
}
.step-icon {
width: 64px;
height: 64px;
background: white;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 28px;
transition: all 0.3s ease;
}
.step-card:hover .step-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.12);
}
.step-content {
flex: 1;
}
.step-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 20px;
color: var(--text-dark);
margin-bottom: 10px;
}
.step-desc {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 15px;
}
.step-link {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--primary-color);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
}
.step-link i {
font-size: 10px;
transition: transform 0.3s ease;
}
.step-link:hover {
color: var(--secondary-color);
gap: 10px;
}
.step-link:hover i {
transform: translateX(3px);
}
@media (max-width: 1200px) {
.how-content-wrapper {
flex-direction: column;
align-items: center;
}
.how-images {
width: 100%;
max-width: 520px;
height: 750px;
margin-bottom: 50px;
}
.how-steps {
width: 100%;
max-width: 600px;
flex: auto;
flex-direction: column;
}
.how-title {
font-size: 36px;
}
}
@media (max-width: 600px) {
.img-large {
width: 100%;
}
.img-small-1 {
top: 390px;
width: 48%;
}
.img-small-2 {
top: 390px;
left: 52%;
width: 48%;
}
.how-title {
font-size: 32px;
}
}
/* Testimonials Section */
.testimonials-section {
padding: 30px 0;
background: #FFFFFF;
width: 100%;
position: relative;
overflow: hidden;
}
.testimonials-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.testimonials-content {
flex: 0 0 45%;
}
.testimonials-subtitle {
font-family: var(--font-manrope);
font-weight: 600;
font-size: 18px;
letter-spacing: 2px;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 15px;
}
.testimonials-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 50px;
line-height: 1.2;
color: var(--text-dark);
margin-bottom: 60px;
}
.testimonials-dots {
display: flex;
gap: 15px;
margin-top: 50px;
}
.dot {
width: 12px;
height: 12px;
background-color: #E5E5E5;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background-color: var(--text-dark);
}
.testimonials-cards {
flex: 1;
position: relative;
height: 400px;
/* Space for stacked cards */
}
.testimonial-card {
background: #FFFFFF;
border-radius: 10px;
padding: 30px;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05);
/* Soft shadow */
position: absolute;
transition: all 0.5s ease;
width: 100%;
max-width: 500px;
}
.card-front {
z-index: 2;
top: 0;
left: 0;
border: 1px solid #f0f0f0;
}
.card-back {
z-index: 1;
top: 50px;
left: 50px;
/* Offset for stacked effect */
opacity: 0.5;
border: 1px solid #eee;
}
.testimonial-avatar {
width: 68px;
height: 68px;
position: absolute;
top: -34px;
left: 34px;
border-radius: 50%;
overflow: hidden;
/* Optional: box-shadow or border */
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-text {
margin-top: 20px;
/* Space for avatar overlap */
font-family: var(--font-manrope);
font-weight: 500;
font-size: 16px;
line-height: 32px;
color: var(--text-muted);
margin-bottom: 30px;
}
.testimonial-author {
margin-top: 20px;
}
.author-name {
font-family: var(--font-manrope);
font-weight: 600;
font-size: 18px;
color: var(--text-dark);
margin-bottom: 5px;
}
.author-location {
font-family: var(--font-manrope);
font-weight: 500;
font-size: 14px;
color: var(--text-muted);
}
@media (max-width: 992px) {
.testimonials-container {
flex-direction: column;
text-align: center;
}
.testimonials-content {
margin-bottom: 50px;
}
.testimonials-dots {
justify-content: center;
}
.testimonial-card {
position: relative;
left: 0;
top: 0;
margin: 0 auto 30px;
}
.card-back {
display: none;
/* Hide back card on mobile for simplicity */
}
.testimonials-cards {
height: auto;
}
}
/* Contact Section Styles */
.contact-section {
padding: 100px 0;
background: linear-gradient(180deg, rgba(253, 253, 252, 1) 0%, rgba(255, 241, 218, 0.2) 100%);
position: relative;
width: 100%;
overflow: hidden;
}
.contact-container {
position: relative;
z-index: 1;
}
.contact-header {
text-align: center;
margin-bottom: 80px;
}
.contact-description {
font-family: var(--font-sans);
font-size: 18px;
color: var(--text-muted);
max-width: 700px;
margin: 20px auto 0;
line-height: 1.6;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 40px;
}
.info-title {
font-family: var(--font-serif);
font-size: 32px;
color: var(--text-dark);
margin-bottom: 20px;
}
.info-text {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-muted);
line-height: 1.8;
}
.info-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.info-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.info-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
box-shadow: 0 10px 20px rgba(223, 105, 81, 0.2);
}
.info-content h4 {
font-family: var(--font-serif);
font-size: 18px;
color: var(--text-dark);
margin-bottom: 5px;
}
.info-content p {
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-muted);
}
.reply-badge {
display: inline-block;
margin-top: 10px;
padding: 5px 12px;
background: rgba(39, 174, 96, 0.1);
color: #27ae60;
font-size: 12px;
font-weight: 700;
border-radius: 20px;
}
.contact-stats {
display: flex;
gap: 40px;
padding-top: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.stat-box {
text-align: left;
}
.stat-number {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 700;
color: var(--primary-color);
}
.stat-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Form Card */
.contact-form-card {
background: white;
padding: 50px;
border-radius: 30px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.contact-tabs {
display: flex;
background: #f8f8f8;
padding: 6px;
border-radius: 15px;
margin-bottom: 40px;
}
.tab-btn {
flex: 1;
border: none;
padding: 12px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
color: var(--text-muted);
background: transparent;
cursor: pointer;
border-radius: 12px;
transition: all 0.3s ease;
}
.tab-btn.active {
background: white;
color: var(--text-dark);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form-title {
font-family: var(--font-serif);
font-size: 24px;
color: var(--text-dark);
margin-bottom: 10px;
}
.form-subtitle {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-muted);
margin-bottom: 30px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group label {
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
color: var(--text-dark);
}
.form-group label span {
color: var(--primary-color);
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 15px 20px;
background: #fcfcfc;
border: 1px solid #f0f0f0;
border-radius: 12px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-dark);
transition: all 0.3s ease;
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
background: white;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(223, 105, 81, 0.1);
}
.form-footer-notes {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.form-footer-notes span {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
}
.form-footer-notes i {
color: #27ae60;
margin-right: 5px;
}
.emergency-note {
text-align: center;
font-size: 12px;
color: var(--text-muted);
margin-top: 20px;
}
.transition-opacity {
transition: opacity 0.3s ease;
}
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.contact-form-card {
padding: 30px;
}
}
@media (max-width: 600px) {
.form-row {
grid-template-columns: 1fr;
}
.contact-header .section-title {
font-size: 32px;
}
.form-footer-notes {
flex-direction: column;
gap: 10px;
}
}
/* ================================================
CLASSIC PAGE HERO
================================================ */
.classic-page-hero {
position: relative;
min-height: 260px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
margin-bottom: 0;
color: #ffffff;
}
.classic-page-hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.classic-page-hero .container {
position: relative;
z-index: 2;
width: 100%;
}
.classic-hero-content {
max-width: 620px;
padding: 32px 0;
}
.classic-hero-content h1 {
font-family: var(--font-sans);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.1;
margin: 0 0 12px;
color: #ffffff;
}
.classic-hero-content p {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 18px;
max-width: 520px;
}
.classic-breadcrumb {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 50px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.classic-breadcrumb a {
color: #ffffff;
text-decoration: none;
transition: opacity 0.3s ease;
}
.classic-breadcrumb a:hover {
opacity: 0.75;
}
.classic-breadcrumb i {
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
}
.classic-breadcrumb span {
color: #ffffff;
}
@media (max-width: 768px) {
.classic-page-hero {
min-height: 220px;
}
.classic-hero-content {
padding: 24px 0;
}
.classic-hero-content p {
font-size: 14px;
}
}
/* ================================================
TOURS PAGE HEADER — PREMIUM CINEMATIC
================================================ */
.tours-page-header {
background: linear-gradient(135deg, #0d1b3e 0%, #181E4B 40%, #1a2a5e 70%, #0f1f45 100%);
padding: 70px 0 80px;
color: #ffffff;
margin-bottom: 0;
position: relative;
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Layered radial glow accents */
.tours-page-header::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 80% 40%, rgba(223, 105, 81, 0.18) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 20% 60%, rgba(241, 165, 1, 0.14) 0%, transparent 70%);
pointer-events: none;
}
/* Subtle grid pattern overlay */
.tours-page-header::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
/* Inner layout: two columns */
.tph-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
position: relative;
z-index: 3;
width: 100%;
}
/* Left content */
.tph-content {
max-width: 580px;
}
.tph-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(223, 105, 81, 0.15);
border: 1px solid rgba(223, 105, 81, 0.4);
color: #f5a98a;
padding: 6px 16px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 18px;
backdrop-filter: blur(4px);
}
.tph-badge i {
font-size: 12px;
color: var(--primary-color);
}
.tph-title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.1;
color: #ffffff;
margin-bottom: 14px;
}
.tph-title-accent {
color: var(--primary-color);
position: relative;
display: inline-block;
}
.tph-title-accent::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 6px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
opacity: 0.6;
}
.tph-subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
margin-bottom: 22px;
max-width: 460px;
}
.tph-breadcrumb {
justify-content: flex-start !important;
}
.tph-breadcrumb a {
color: rgba(255, 255, 255, 0.55) !important;
}
.tph-breadcrumb a:hover {
color: var(--primary-color) !important;
}
.tph-breadcrumb i {
color: rgba(255, 255, 255, 0.3) !important;
}
.tph-breadcrumb span {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Right: stats bar */
.tph-stats {
display: flex;
align-items: center;
gap: 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 24px 30px;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.tph-stat-item {
text-align: center;
min-width: 70px;
}
.tph-stat-num {
display: block;
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 700;
color: #ffffff;
line-height: 1;
margin-bottom: 4px;
}
.tph-stat-lbl {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.tph-stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.12);
}
/* Bottom wave transition */
.tph-wave {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
z-index: 4;
line-height: 0;
}
.tph-wave svg {
width: 100%;
height: 60px;
display: block;
}
@media (max-width: 900px) {
.tph-inner {
flex-direction: column;
text-align: center;
}
.tph-content {
max-width: 100%;
}
.tph-subtitle {
max-width: 100%;
}
.tph-breadcrumb {
justify-content: center !important;
}
.tph-stats {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.tours-page-header {
padding: 50px 0 65px;
min-height: 260px;
}
.tph-stat-num {
font-size: 1.4rem;
}
.tph-stats {
padding: 16px 20px;
gap: 12px;
}
}
/* Tours Decorative Lines */
.tours-deco-lines {
position: absolute;
top: -40px;
right: -40px;
z-index: 1;
opacity: 0.4;
transform: scale(0.7);
}
/* Tours Gradient Blobs */
.tours-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
z-index: 0;
}
.tours-blob-1 {
width: 200px;
height: 200px;
background: rgba(223, 105, 81, 0.12);
top: 20px;
right: 20px;
animation: blobMove 15s infinite alternate;
}
.tours-blob-2 {
width: 180px;
height: 180px;
background: rgba(241, 165, 1, 0.12);
bottom: 20px;
left: 20px;
animation: blobMove 12s infinite alternate-reverse;
}
/* Tours Floating Items */
.tours-floating-item {
position: absolute;
z-index: 10;
font-size: 16px;
color: var(--primary-color);
background: white;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
animation: floatingObj 4s ease-in-out infinite;
}
.tours-item-plane {
top: 20%;
right: 10%;
color: var(--secondary-color);
animation-delay: 0s;
}
.tours-item-location {
bottom: 30%;
left: 5%;
color: var(--primary-color);
animation-delay: 0.5s;
}
.tours-item-star {
top: 50%;
left: 8%;
color: var(--secondary-color);
font-size: 14px;
animation-delay: 1s;
}
.tours-item-compass {
bottom: 20%;
right: 6%;
color: #5B6CF8;
font-size: 14px;
animation-delay: 1.5s;
}
.tours-blob-3 {
width: 160px;
height: 160px;
background: rgba(91, 108, 248, 0.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: blobMove 18s infinite alternate;
}
.page-title {
font-size: 1.8rem;
font-family: var(--font-serif);
font-weight: 700;
margin-bottom: 10px;
color: var(--text-dark);
position: relative;
z-index: 2;
}
.breadcrumb {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 500;
font-family: var(--font-sans);
position: relative;
z-index: 2;
}
.breadcrumb a {
color: var(--text-muted);
text-decoration: none;
transition: 0.3s;
}
.breadcrumb a:hover {
color: var(--primary-color);
}
.breadcrumb i {
font-size: 8px;
color: var(--text-muted);
}
.breadcrumb span {
color: var(--text-dark);
font-weight: 600;
}
/* Tours Layout */
.tours-listing-section {
padding: 24px 0 60px;
background-color: #f7f7f5;
}
.tours-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 20px;
}
/* Sidebar Filters */
.tours-sidebar {
display: flex;
flex-direction: column;
gap: 15px;
}
.filter-card {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.filter-title {
font-size: 13px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-dark);
font-family: var(--font-sans);
}
.filter-group {
margin-bottom: 12px;
}
.filter-group label {
display: block;
font-size: 11px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text-dark);
font-family: var(--font-sans);
}
.date-input-wrapper {
position: relative;
}
.filter-input {
width: 100%;
padding: 8px 10px;
border: 1px solid #E8E8E8;
border-radius: 6px;
font-size: 11px;
color: var(--text-dark);
background: var(--bg-light);
font-family: var(--font-sans);
}
.btn-check-availability {
width: 100%;
padding: 10px;
background: var(--secondary-color);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 11px;
cursor: pointer;
transition: 0.3s;
margin-top: 8px;
font-family: var(--font-sans);
box-shadow: 0 2px 8px rgba(241, 165, 1, 0.2);
}
.btn-check-availability:hover {
background: #d69401;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(241, 165, 1, 0.3);
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.filter-header .filter-title {
margin-bottom: 0;
}
.filter-header i {
transition: 0.3s;
font-size: 10px;
}
.collapsed .filter-content {
display: none;
}
.collapsed .filter-header i {
transform: rotate(-180deg);
}
.filter-content {
margin-top: 12px;
}
/* Checkbox Style */
.checkbox-container {
display: block;
position: relative;
padding-left: 24px;
margin-bottom: 10px;
cursor: pointer;
font-size: 11px;
user-select: none;
color: var(--text-muted);
font-family: var(--font-sans);
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 1px;
left: 0;
height: 14px;
width: 14px;
background-color: white;
border: 1px solid #D0D0D0;
border-radius: 3px;
}
.checkbox-container:hover input~.checkmark {
border-color: var(--primary-color);
}
.checkbox-container input:checked~.checkmark {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked~.checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.show-more {
display: block;
margin-top: 10px;
color: var(--primary-color);
text-decoration: none;
font-size: 11px;
font-weight: 600;
font-family: var(--font-sans);
}
.show-more:hover {
color: var(--secondary-color);
}
/* Tours Main Content */
.tours-main {
display: flex;
flex-direction: column;
}
.tours-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.tour-card-horizontal-link {
text-decoration: none;
color: inherit;
display: block;
}
.tour-card-horizontal {
background: white;
border-radius: 8px;
display: flex;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: 0.3s;
}
.tour-card-horizontal:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px rgba(223, 105, 81, 0.15);
}
.tour-image-box {
width: 180px;
min-width: 180px;
height: 140px;
}
.tour-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tour-info-box {
flex: 1;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tour-category-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.tour-category-tag {
background: var(--primary-color);
color: white;
padding: 3px 8px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-sans);
}
.tour-rating-mini {
display: flex;
align-items: center;
gap: 4px;
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
font-size: 10px;
color: #E0E0E0;
}
.stars i.filled {
color: var(--secondary-color);
}
.reviews-count {
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-sans);
}
.tour-title-h {
font-size: 14px;
font-family: var(--font-serif);
font-weight: 700;
color: var(--text-dark);
margin-bottom: 12px;
line-height: 1.3;
}
.tour-details-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.detail-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-sans);
font-weight: 500;
}
.detail-item i {
color: var(--primary-color);
font-size: 10px;
}
.tour-price-box {
width: 120px;
border-left: 1px dashed #E0E0E0;
padding: 15px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
text-align: right;
}
.price-amount {
font-size: 16px;
font-weight: 700;
color: var(--primary-color);
font-family: var(--font-sans);
}
.price-amount .currency {
font-size: 12px;
margin-right: 1px;
}
.price-label {
font-size: 9px;
color: var(--text-muted);
margin-top: 3px;
font-family: var(--font-sans);
}
/* ================================================
TOURS TOOLBAR
================================================ */
.tours-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 12px 16px;
background: white;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.tours-results-count {
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-sans);
}
.tours-results-count strong {
color: var(--text-dark);
font-weight: 700;
}
.view-toggle {
display: flex;
gap: 4px;
background: #f5f5f5;
border-radius: 8px;
padding: 3px;
}
.view-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
transition: all 0.2s ease;
}
.view-btn.active {
background: white;
color: var(--primary-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.view-btn:hover:not(.active) {
color: var(--text-dark);
background: rgba(255, 255, 255, 0.6);
}
/* ================================================
TOURS GRID LAYOUT
================================================ */
.tours-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
}
.tours-grid-container .tour-card-new {
max-width: 100%;
margin-right: 0;
width: 100%;
}
.tours-list-view {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
}
.tour-grid-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.tour-grid-card {
background: white;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.tour-grid-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(223, 105, 81, 0.15);
}
.tgc-image-wrap {
position: relative;
height: 170px;
overflow: hidden;
flex-shrink: 0;
}
.tgc-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.tour-grid-card:hover .tgc-image-wrap img {
transform: scale(1.07);
}
.tgc-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
pointer-events: none;
}
.tgc-badge {
position: absolute;
top: 10px;
left: 10px;
background: white;
color: var(--primary-color);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 3px 9px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.tgc-rating-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--secondary-color);
color: white;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 3px;
}
.tgc-rating-badge i {
font-size: 9px;
}
.tgc-body {
padding: 14px;
display: flex;
flex-direction: column;
flex: 1;
gap: 8px;
}
.tgc-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tgc-duration,
.tgc-type {
display: flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
color: var(--text-muted);
font-family: var(--font-sans);
font-weight: 500;
}
.tgc-duration i,
.tgc-type i {
color: var(--primary-color);
font-size: 10px;
}
.tgc-title {
font-family: var(--font-serif);
font-size: 14.5px;
font-weight: 700;
color: var(--text-dark);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.tgc-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.tgc-stars {
display: flex;
align-items: center;
gap: 2px;
}
.tgc-stars i {
font-size: 9px;
color: #E0E0E0;
}
.tgc-stars i.filled {
color: var(--secondary-color);
}
.tgc-reviews {
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-sans);
margin-left: 3px;
}
.tgc-price {
font-size: 13px;
font-weight: 700;
color: var(--primary-color);
font-family: var(--font-sans);
}
/* No tours state (grid) */
.no-tours-grid {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.no-tours-grid i {
font-size: 48px;
color: #E0E0E0;
margin-bottom: 16px;
display: block;
}
.no-tours-grid p {
font-size: 14px;
font-family: var(--font-sans);
}
.no-tours {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 13px;
font-family: var(--font-sans);
}
/* ================================================
PAGINATION
================================================ */
.tours-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 36px;
flex-wrap: wrap;
}
.page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
font-family: var(--font-sans);
text-decoration: none;
color: var(--text-dark);
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
cursor: pointer;
}
.page-btn:hover:not(.page-btn-active):not(.page-btn-disabled):not(.page-ellipsis) {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(223, 105, 81, 0.25);
}
.page-btn-active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
box-shadow: 0 4px 12px rgba(223, 105, 81, 0.3);
cursor: default;
}
.page-btn-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.page-ellipsis {
border: none;
background: transparent;
color: var(--text-muted);
cursor: default;
pointer-events: none;
}
/* Grid responsive */
@media (max-width: 1100px) {
.tours-grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.tours-grid-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) {
.tours-layout {
grid-template-columns: 1fr;
}
.tour-card-horizontal {
flex-direction: column;
}
.tour-image-box {
width: 100%;
height: 160px;
}
.tour-price-box {
width: 100%;
border-left: none;
border-top: 1px dashed #E0E0E0;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: left;
}
}
@media (max-width: 768px) {
.tours-page-header {
padding: 20px 0;
}
.page-title {
font-size: 1.4rem;
}
.breadcrumb {
font-size: 10px;
}
.tours-listing-section {
padding-bottom: 30px;
}
.tour-image-box {
height: 140px;
}
.tour-title-h {
font-size: 13px;
}
.tour-price-box {
width: 100%;
border-left: none;
border-top: 1px dashed #E0E0E0;
align-items: center;
text-align: center;
padding: 15px;
}
}
/* ========================================
BLOG PAGE STYLES
======================================== */
.blog-page {
padding: 40px 0;
background: #FFFFFF;
}
.blog-header {
text-align: center;
margin-bottom: 50px;
}
.blog-page-title {
font-family: var(--font-serif);
font-size: 28px;
color: var(--text-dark);
margin-bottom: 10px;
}
.blog-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
align-items: start;
}
/* Main Blog Content */
.blog-main {
width: 100%;
}
.blog-post-card {
background: #FFFFFF;
border-radius: 0;
margin-bottom: 30px;
display: flex;
gap: 20px;
transition: transform 0.3s ease;
}
.blog-post-image {
width: 200px;
height: 160px;
flex-shrink: 0;
overflow: hidden;
border-radius: 8px;
}
.blog-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-post-card:hover .blog-post-image img {
transform: scale(1.05);
}
.blog-post-content {
flex: 1;
padding: 10px 0;
}
.blog-post-title {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 8px;
line-height: 1.3;
}
.blog-post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-bottom: 10px;
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-sans);
}
.blog-post-meta i {
margin-right: 5px;
color: var(--secondary-color);
}
.blog-post-meta strong {
color: var(--text-dark);
font-weight: 600;
}
.blog-post-category {
background: rgba(223, 105, 81, 0.1);
color: var(--primary-color);
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
font-family: var(--font-sans);
}
.blog-post-excerpt {
color: var(--text-muted);
font-size: 13px;
line-height: 1.6;
margin-bottom: 15px;
font-family: var(--font-sans);
}
.blog-read-more {
color: var(--primary-color);
font-weight: 600;
font-size: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease;
font-family: var(--font-sans);
}
.blog-read-more:hover {
gap: 12px;
color: var(--secondary-color);
}
/* Sidebar */
.blog-sidebar {
position: sticky;
top: 90px;
}
.sidebar-widget {
background: #FFFFFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.03);
}
.widget-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #E5E5E5;
position: relative;
}
.widget-title::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 60px;
height: 2px;
background: var(--primary-color);
}
/* Popular Posts */
.popular-posts {
display: flex;
flex-direction: column;
gap: 20px;
}
.popular-post-item {
display: flex;
gap: 15px;
text-decoration: none;
align-items: center;
transition: transform 0.3s ease;
}
.popular-post-item:hover {
transform: translateX(5px);
}
.popular-post-item img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.popular-post-info h4 {
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
line-height: 1.4;
margin: 0 0 3px;
font-family: var(--font-serif);
transition: color 0.3s ease;
}
.popular-post-info h4:hover {
color: var(--primary-color);
}
.popular-post-info .post-date {
font-size: 11px;
color: var(--text-muted);
}
/* Social Links */
.social-links {
display: flex;
gap: 10px;
justify-content: flex-start;
}
.social-link {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.social-link.facebook {
background: linear-gradient(135deg, #F1A501 0%, #F8B84E 100%);
}
.social-link.twitter {
background: #1DA1F2;
}
.social-link.instagram {
background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%);
}
.social-link.youtube {
background: #FF0000;
}
/* Subscribe Widget */
.subscribe-widget {
background: linear-gradient(135deg, #F1A501 0%, #F8B84E 100%);
color: white;
}
.subscribe-widget .widget-title {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.subscribe-text {
font-size: 12px;
line-height: 1.5;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.95);
}
.subscribe-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.subscribe-input {
padding: 8px 12px;
border: none;
border-radius: 6px;
font-size: 12px;
font-family: var(--font-sans);
background: white;
color: var(--text-dark);
}
.subscribe-input::placeholder {
color: #999;
}
.subscribe-btn {
padding: 8px 15px;
background: white;
color: var(--secondary-color);
border: none;
border-radius: 6px;
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
font-family: var(--font-sans);
}
.subscribe-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Tags Cloud */
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-item {
display: inline-block;
padding: 4px 10px;
background: #F5F5F5;
color: var(--text-muted);
font-size: 11px;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
}
.tag-item:hover {
background: var(--secondary-color);
color: white;
}
/* Pagination */
.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 40px;
}
.blog-pagination nav {
display: flex;
gap: 8px;
}
.blog-pagination a,
.blog-pagination span {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
background: #F5F5F5;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
font-size: 12px;
transition: all 0.3s ease;
}
.blog-pagination a:hover {
background: var(--secondary-color);
color: white;
}
.blog-pagination .active {
background: var(--secondary-color);
color: white;
}
/* Single Blog Post */
.blog-single {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.blog-single-header {
margin-bottom: 30px;
}
.blog-single-title {
font-family: var(--font-serif);
font-size: 28px;
color: var(--text-dark);
margin-bottom: 15px;
line-height: 1.3;
}
.blog-single-image {
width: 100%;
height: 350px;
margin-bottom: 30px;
border-radius: 8px;
overflow: hidden;
}
.blog-single-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-single-content {
font-size: 14px;
line-height: 1.8;
color: var(--text-muted);
margin-bottom: 30px;
}
.blog-single-content p {
margin-bottom: 20px;
}
.blog-single-tags {
padding-top: 20px;
border-top: 1px solid #E5E5E5;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.blog-single-tags strong {
color: var(--text-dark);
}
/* Related Posts */
.related-posts {
margin-top: 50px;
}
.related-posts .section-subtitle {
font-family: var(--font-serif);
font-size: 22px;
color: var(--text-dark);
margin-bottom: 20px;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.related-post-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.related-post-card img {
width: 100%;
height: 140px;
object-fit: cover;
}
.related-post-card h4 {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
margin: 10px;
line-height: 1.4;
}
.related-post-card p {
font-size: 11px;
color: var(--text-muted);
margin: 0 10px 10px;
line-height: 1.5;
}
/* Responsive Design */
@media (max-width: 1024px) {
.blog-layout {
grid-template-columns: 1fr 320px;
gap: 30px;
}
.blog-post-card {
flex-direction: column;
}
.blog-post-image {
width: 100%;
height: 180px;
}
}
@media (max-width: 768px) {
.blog-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.blog-sidebar {
position: static;
}
.blog-post-card {
margin-bottom: 30px;
}
.blog-page-title {
font-size: 28px;
}
.blog-single-title {
font-size: 28px;
}
.blog-single {
padding: 25px;
}
.blog-single-image {
height: 220px;
}
.related-posts-grid {
grid-template-columns: 1fr;
}
}
/* Tours Listing Page Section */
.tours-listing-section {
padding-top: 24px;
}
/* ==================== Contact Section ==================== */
.contact-section {
padding: 0 0 80px;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 241, 218, 0.2) 100%);
}
.contact-container {
max-width: 1200px;
}
.contact-header {
text-align: center;
margin-bottom: 60px;
}
.contact-header .section-title {
font-family: 'Volkhov', serif;
font-size: 48px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 20px;
line-height: 1.2;
}
.contact-description {
font-size: 16px;
color: var(--text-muted);
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: start;
}
.info-title {
font-family: 'Poppins', sans-serif;
font-size: 28px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 16px;
}
/* Input Focus Styles */
.contact-section input:focus,
.contact-section textarea:focus,
.contact-section select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(223, 105, 81, 0.1);
}
.contact-section input:hover,
.contact-section textarea:hover,
.contact-section select:hover {
border-color: rgba(223, 105, 81, 0.3);
}
/* Button Animation */
.contact-section button[type="submit"] {
background: var(--primary-color-dark) !important;
color: #fff;
}
.contact-section .btn-primary {
color: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-section .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(223, 105, 81, 0.4);
}
.contact-section .btn-primary:active {
transform: translateY(-1px);
}
/* Responsive */
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.contact-header .section-title {
font-size: 36px;
}
}
@media (max-width: 768px) {
.contact-section {
padding: 60px 0;
}
.contact-header {
margin-bottom: 40px;
}
.contact-header .section-title {
font-size: 28px;
}
.info-title {
font-size: 24px;
}
/* Make form inputs stack on mobile */
.contact-section form>div[style*="grid"] {
grid-template-columns: 1fr !important;
}
}
/* Home Blog Section */
.blog-section-home {
padding: 60px 0;
background: #fdfdfc;
}
.blog-header-home {
text-align: center;
margin-bottom: 40px;
}
.blog-grid-home {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.blog-button-container {
text-align: center;
}
/* Home Blog Card */
.home-blog-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.home-blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.home-blog-image {
height: 200px;
position: relative;
overflow: hidden;
}
.home-blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.home-blog-card:hover .home-blog-image img {
transform: scale(1.05);
}
.home-blog-category {
position: absolute;
top: 15px;
right: 15px;
background: white;
color: var(--primary-color);
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.home-blog-content {
padding: 25px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.home-blog-meta {
display: flex;
gap: 15px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 12px;
}
.home-blog-meta i {
color: var(--secondary-color);
margin-right: 5px;
}
.home-blog-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 12px;
line-height: 1.4;
transition: color 0.3s ease;
}
.home-blog-card:hover .home-blog-title {
color: var(--primary-color);
}
.home-blog-excerpt {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.home-blog-link {
font-size: 13px;
font-weight: 600;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease;
}
.home-blog-link i {
font-size: 11px;
}
.home-blog-card:hover .home-blog-link {
gap: 12px;
}
/* ========================================
COMPREHENSIVE MOBILE RESPONSIVE STYLES
======================================== */
/* Tablets and Small Desktops (992px and below) */
@media (max-width: 992px) {
/* Hero Section */
.hero {
padding: 40px 0;
}
.hero-container {
flex-direction: column;
gap: 40px;
}
.hero-content {
text-align: center;
}
.hero-title {
font-size: 40px;
}
.hero-description {
max-width: 100%;
}
.hero-actions {
flex-direction: column;
gap: 20px;
}
.hero-stats {
justify-content: center;
flex-wrap: wrap;
}
.hero-image-wrapper {
order: -1;
width: 100%;
}
.hero-main-img-container {
max-width: 350px;
height: 400px;
margin: 0 auto;
}
/* Tours Section */
.tours-section {
padding: 60px 0;
}
.tours-main-title,
.events-main-title {
font-size: 30px;
}
.tours-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.tour-image-wrapper {
height: 220px;
}
/* Tours Carousel */
.tours-navigation,
.events-navigation {
position: static;
margin-top: 20px;
justify-content: center;
}
.tours-header,
.events-header {
flex-direction: column;
align-items: center;
text-align: center;
}
/* Popular Destinations */
.destinations-section {
padding: 60px 0;
}
/* Why Choose Us */
.why-choose-section {
padding: 60px 0;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
/* How It Works */
.steps-wrapper {
flex-direction: column;
align-items: center;
}
.step-item {
max-width: 350px;
}
/* Testimonials */
.testimonials-section {
padding: 60px 0;
}
.testimonial-card {
padding: 30px;
}
/* Footer */
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.footer-brand {
grid-column: 1 / -1;
text-align: center;
}
.footer-brand p {
margin: 0 auto 25px;
}
.social-links {
justify-content: center;
}
}
/* Tablets (768px and below) */
@media (max-width: 768px) {
/* Global */
:root {
--container-padding: 15px;
}
body {
padding-top: auto;
}
/* Hero Section */
.hero {
padding: 30px 0 40px;
}
.hero-title {
font-size: 32px;
margin-bottom: 15px;
}
.hero-tagline {
font-size: 12px;
margin-bottom: 15px;
}
.hero-description {
font-size: 14px;
margin-bottom: 25px;
}
.btn-primary {
padding: 10px 20px;
font-size: 12px;
}
.follow-us {
font-size: 12px;
}
.follow-icon {
width: 35px;
height: 35px;
}
.hero-stats {
gap: 20px;
}
.stat-item h3 {
font-size: 18px;
}
.stat-item p {
font-size: 11px;
}
.hero-main-img-container {
max-width: 300px;
height: 350px;
}
.floating-item {
width: 35px;
height: 35px;
font-size: 16px;
}
/* Sections */
.section-title {
font-size: 28px;
margin-bottom: 40px;
}
.section-subtitle {
font-size: 12px;
}
/* Tours */
.tours-section,
.events-section {
padding: 50px 0;
}
.tours-section-new,
.events-section-new {
padding: 30px 0;
}
.tours-main-title,
.events-main-title {
font-size: 24px;
}
.tours-subtitle,
.events-subtitle {
font-size: 13px;
}
.tours-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.tour-card-new,
.event-card-new {
max-width: 100%;
flex: 1 1 auto;
margin-right: 0;
}
.tour-image-wrapper {
height: 200px;
}
.tour-content {
padding: 20px;
}
.tour-title {
font-size: 18px;
}
.tour-meta {
font-size: 12px;
gap: 10px;
flex-wrap: wrap;
}
/* Sponsors */
.sponsors-section {
height: auto;
padding: 30px 0;
}
.sponsors-container {
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.sponsor-item img {
max-width: 100px;
}
/* Why Choose Us */
.why-choose-section {
padding: 50px 0;
}
.features-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.feature-card {
padding: 25px;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
/* How It Works */
.how-it-works {
padding: 50px 0;
}
.step-number {
width: 50px;
height: 50px;
font-size: 20px;
}
.step-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.step-title {
font-size: 18px;
}
.step-description {
font-size: 13px;
}
/* Testimonials */
.testimonials-section {
padding: 50px 0;
}
.testimonial-card {
padding: 25px;
}
.testimonial-text {
font-size: 14px;
margin-bottom: 20px;
}
.testimonial-author h4 {
font-size: 16px;
}
.testimonial-author p {
font-size: 12px;
}
.testimonial-nav button {
width: 35px;
height: 35px;
font-size: 12px;
}
/* Blog Section */
.blog-section-home {
padding: 50px 0;
}
.blog-grid-home {
grid-template-columns: 1fr;
gap: 20px;
}
.home-blog-image {
height: 180px;
}
.home-blog-content {
padding: 20px;
}
.home-blog-title {
font-size: 16px;
}
/* Contact Section */
.contact-section {
padding: 50px 0;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.contact-header .section-title {
font-size: 24px;
}
.info-title {
font-size: 20px;
}
/* Footer */
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-links h3 {
font-size: 16px;
}
footer {
padding: 60px 0 20px;
}
/* Tours/Events Page Header */
.tours-page-header {
padding: 60px 0 40px;
}
.page-title {
font-size: 32px;
}
.breadcrumb {
font-size: 12px;
}
/* Popular Destinations */
.destinations-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.destination-card {
height: 200px;
}
.destination-name {
font-size: 16px;
}
.destination-count {
font-size: 11px;
}
}
/* Mobile (480px and below) */
@media (max-width: 480px) {
/* Hero */
.hero {
padding: 20px 0 30px;
}
.hero-title {
font-size: 26px;
}
.hero-tagline {
font-size: 11px;
margin-bottom: 12px;
}
.hero-description {
font-size: 13px;
margin-bottom: 20px;
}
.hero-actions {
width: 100%;
gap: 15px;
}
.btn-primary {
width: 100%;
text-align: center;
padding: 12px 20px;
}
.follow-us {
justify-content: center;
}
.hero-stats {
flex-direction: column;
gap: 15px;
}
.stat-item {
width: 100%;
}
.hero-main-img-container {
max-width: 100%;
height: 300px;
}
.floating-item {
display: none;
}
/* Sections */
.section-title {
font-size: 24px;
margin-bottom: 30px;
}
.section-subtitle {
font-size: 11px;
letter-spacing: 1px;
}
/* Tours and Events */
.tours-section,
.events-section {
padding: 40px 0;
}
.tours-main-title,
.events-main-title {
font-size: 22px;
}
.tours-subtitle,
.events-subtitle {
font-size: 12px;
}
.tour-card {
margin: 0;
}
.tour-image-wrapper {
height: 180px;
}
.tour-content {
padding: 15px;
}
.tour-title {
font-size: 16px;
margin-bottom: 10px;
}
.tour-meta {
font-size: 11px;
flex-direction: column;
gap: 5px;
}
.tour-footer {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.tour-badge {
font-size: 10px;
padding: 4px 10px;
}
.tour-price {
font-size: 14px;
padding: 6px 12px;
}
/* Tour Cards New Style */
.tour-card-new,
.event-card-new {
width: 100%;
max-width: 100%;
}
.nav-arrow {
width: 35px;
height: 35px;
font-size: 12px;
}
/* Sponsors */
.sponsor-item img {
max-width: 80px;
}
/* Why Choose Us */
.feature-card {
padding: 20px;
}
.feature-icon {
width: 45px;
height: 45px;
font-size: 18px;
margin-bottom: 12px;
}
.feature-card h3 {
font-size: 16px;
}
.feature-card p {
font-size: 12px;
}
/* How It Works */
.step-item {
padding: 0;
}
.step-number {
width: 45px;
height: 45px;
font-size: 18px;
}
.step-icon {
width: 50px;
height: 50px;
font-size: 20px;
margin-bottom: 15px;
}
.step-title {
font-size: 16px;
margin-bottom: 8px;
}
.step-description {
font-size: 12px;
}
/* Testimonials */
.testimonial-card {
padding: 20px;
}
.testimonial-text {
font-size: 13px;
margin-bottom: 15px;
}
.testimonial-author img {
width: 45px;
height: 45px;
}
.testimonial-author h4 {
font-size: 14px;
}
.testimonial-author p {
font-size: 11px;
}
.testimonial-nav {
gap: 10px;
}
.testimonial-nav button {
width: 30px;
height: 30px;
font-size: 10px;
}
/* Destinations */
.destinations-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.destination-card {
height: 180px;
}
/* Blog */
.home-blog-image {
height: 160px;
}
.home-blog-content {
padding: 18px;
}
.home-blog-title {
font-size: 15px;
}
.home-blog-excerpt {
font-size: 12px;
}
.home-blog-meta {
font-size: 11px;
flex-direction: column;
gap: 5px;
}
/* Contact */
.contact-header {
margin-bottom: 30px;
}
.contact-header .section-title {
font-size: 22px;
}
.contact-description {
font-size: 13px;
}
.info-title {
font-size: 18px;
margin-bottom: 15px;
}
/* Contact Form Tabs */
.contact-section form>div[style*="grid"] {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.contact-section input,
.contact-section textarea,
.contact-section select {
font-size: 13px !important;
padding: 12px 16px !important;
}
.contact-section button[type="submit"] {
width: 100% !important;
padding: 12px 24px !important;
font-size: 14px !important;
background: var(--primary-color-dark) !important;
}
/* Contact Stats Grid */
.contact-section div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
/* Footer */
footer {
padding: 40px 0 15px;
}
.footer-brand .logo {
font-size: 20px;
}
.footer-links h3 {
font-size: 15px;
margin-bottom: 15px;
}
.footer-links ul li {
margin-bottom: 8px;
}
.footer-links ul li a {
font-size: 13px;
}
.social-links a {
width: 35px;
height: 35px;
font-size: 14px;
}
.footer-bottom p {
font-size: 12px;
}
/* Tours/Events Page Header */
.tours-page-header {
padding: 50px 0 30px;
}
.page-title {
font-size: 26px;
}
.breadcrumb {
font-size: 11px;
}
.breadcrumb a,
.breadcrumb span {
font-size: 11px;
}
/* Floating decorative elements - hide on mobile */
.tours-floating-item,
.tours-deco-lines,
.tours-blob,
.hero-deco-lines,
.hero-blob {
display: none;
}
/* FAQ Section */
.faq-question {
padding: 18px 20px !important;
font-size: 14px !important;
}
.faq-question i {
font-size: 12px !important;
}
.faq-answer {
padding: 0 20px 18px !important;
font-size: 13px !important;
}
/* Map Section */
.map-section {
padding: 40px 0 !important;
}
.map-wrapper iframe {
height: 300px !important;
}
/* Contact FAQ */
.contact-faq-section {
padding: 40px 0 !important;
}
/* Load More Buttons */
.btn-load-more-tours,
.btn-load-more-events {
padding: 10px 25px;
font-size: 13px;
}
/* Carousel Navigation */
.tours-navigation,
.events-navigation {
gap: 8px;
}
}
/* Extra Small Mobile (320px and below) */
@media (max-width: 320px) {
.hero-title {
font-size: 22px;
}
.section-title {
font-size: 20px;
}
.tours-main-title,
.events-main-title {
font-size: 20px;
}
.btn-primary {
font-size: 11px;
padding: 10px 16px;
}
.tour-title {
font-size: 15px;
}
.feature-card h3,
.step-title {
font-size: 15px;
}
}
/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
.hero-main-img-container {
height: 250px;
}
.hero {
padding: 20px 0;
}
.tours-section,
.events-section {
padding: 30px 0;
}
}
/* ================================================
WHY CHOOSE US SECTION
================================================ */
.wcu-section {
padding: 80px 0 90px;
background: #FFFFFF;
position: relative;
overflow: hidden;
}
.wcu-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
position: relative;
}
.wcu-section-header {
text-align: center;
margin-bottom: 20px;
}
.wcu-section-title {
font-family: var(--font-serif);
font-size: 42px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 12px;
}
.wcu-section-subtitle {
font-size: 15px;
color: var(--text-muted);
max-width: 500px;
margin: 0 auto;
}
.wcu-content {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
width: 100%;
}
/* ---- Columns ---- */
.wcu-col {
display: flex;
flex-direction: column;
gap: 40px;
}
.wcu-left {
align-items: flex-end;
padding-right: 30px;
}
.wcu-right {
align-items: flex-start;
padding-left: 30px;
}
/* ---- Cards ---- */
.wcu-card {
display: flex;
align-items: flex-start;
gap: 18px;
max-width: 280px;
background: #FFFFFF;
border-radius: 16px;
padding: 22px 20px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 2;
}
.wcu-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.wcu-card--right {
flex-direction: row;
}
/* ---- Card Icon ---- */
.wcu-card-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.icon-security {
background: rgba(241, 165, 1, 0.12);
color: var(--secondary-color);
}
.icon-support {
background: rgba(223, 105, 81, 0.12);
color: var(--primary-color);
}
.icon-policies {
background: rgba(99, 179, 237, 0.12);
color: #3B82F6;
}
.icon-reputation {
background: rgba(52, 211, 153, 0.12);
color: #10B981;
}
/* ---- Card Body ---- */
.wcu-card-body {
flex: 1;
}
.wcu-card-title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 8px;
line-height: 1.3;
}
.wcu-card-desc {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 12px;
}
.wcu-learn-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease, gap 0.3s ease;
}
.wcu-learn-more i {
font-size: 10px;
transition: transform 0.3s ease;
}
.wcu-learn-more:hover {
color: var(--primary-color);
gap: 10px;
}
.wcu-learn-more:hover i {
transform: translateX(3px);
}
/* ---- Center: Traveler + SVG + Badge ---- */
.wcu-center {
position: relative;
width: 340px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.wcu-dashed-path {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 110%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: visible;
}
.wcu-character-wrap {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 2;
}
.wcu-character-img {
width: 500px;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
animation: wcuFloat 6s ease-in-out infinite;
}
@keyframes wcuFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-14px);
}
}
/* Phone Badge */
.wcu-phone-badge {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
background: #c74f36;
color: white;
border-radius: 30px;
padding: 10px 22px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 8px 24px rgba(199, 79, 54, 0.4);
z-index: 5;
animation: wcuBadgePulse 3s ease-in-out infinite;
}
.wcu-phone-badge i {
font-size: 14px;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
@keyframes wcuBadgePulse {
0%,
100% {
box-shadow: 0 8px 24px rgba(199, 79, 54, 0.4);
}
50% {
box-shadow: 0 12px 36px rgba(199, 79, 54, 0.6);
}
}
/* ================================================
WHY CHOOSE US — RESPONSIVE
================================================ */
@media (max-width: 1024px) {
.wcu-container {
grid-template-columns: 1fr auto 1fr;
gap: 0;
}
.wcu-card {
max-width: 240px;
}
.wcu-center {
width: 280px;
}
.wcu-character-img {
width: 230px;
}
}
@media (max-width: 768px) {
.wcu-section {
padding: 60px 0;
}
.wcu-content {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 40px 0;
justify-items: center;
}
.wcu-left,
.wcu-right {
align-items: center;
padding: 0;
width: 100%;
flex-direction: column;
gap: 20px;
}
.wcu-card {
max-width: 100%;
width: 100%;
min-width: auto;
flex: none;
}
.wcu-center {
order: -1;
width: 100%;
max-width: 300px;
}
.wcu-character-img {
width: 100%;
max-width: 280px;
}
.wcu-dashed-path {
display: none;
}
.wcu-phone-badge {
position: static;
transform: none;
margin-top: 16px;
align-self: center;
}
.wcu-section-title {
font-size: 32px;
}
.wcu-section-subtitle {
font-size: 14px;
}
}
@media (max-width: 480px) {
.wcu-section {
padding: 40px 0;
}
.wcu-section-title {
font-size: 26px;
}
.wcu-card {
padding: 18px 16px;
}
.wcu-card-title {
font-size: 14px;
}
.wcu-card-desc {
font-size: 12px;
}
.wcu-phone-badge {
padding: 8px 18px;
font-size: 12px;
}
.wcu-phone-badge i {
width: 24px;
height: 24px;
font-size: 12px;
}
.wcu-character-wrap {
flex-direction: column;
align-items: center;
}
}
/* ================================================
HOW IT WORKS SECTION
================================================ */
.hiw-section {
padding: 80px 0 100px;
background: #FFFFFF;
position: relative;
overflow: hidden;
}
/* ---- Header ---- */
.hiw-header {
text-align: center;
margin-bottom: 60px;
}
.hiw-title {
font-family: var(--font-serif);
font-size: 40px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 12px;
}
.hiw-subtitle {
font-size: 14px;
color: var(--text-muted);
}
/* ---- Body: two-column grid ---- */
.hiw-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
/* ================================================
LEFT: IMAGE MOSAIC
================================================ */
.hiw-images {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Dashed SVG path that spans full section width */
.hiw-dashed-svg {
position: absolute;
top: 50%;
left: -120px;
width: calc(100% + 240px);
height: 340px;
transform: translateY(-50%);
pointer-events: none;
z-index: 0;
overflow: visible;
}
/* Location pin decoration */
.hiw-pin {
position: absolute;
top: 42%;
left: -56px;
font-size: 30px;
color: var(--text-dark);
z-index: 3;
animation: hiwPinBounce 3s ease-in-out infinite;
}
.hiw-pin::before {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #333;
border-radius: 50%;
}
@keyframes hiwPinBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* Big image */
.hiw-img-big {
border-radius: 20px;
overflow: hidden;
height: 240px;
position: relative;
z-index: 2;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.hiw-img-big img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.hiw-img-big:hover img {
transform: scale(1.04);
}
/* Small images row */
.hiw-img-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
position: relative;
z-index: 2;
}
.hiw-img-sm {
border-radius: 20px;
overflow: hidden;
height: 175px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.hiw-img-sm img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.hiw-img-sm:hover img {
transform: scale(1.04);
}
/* ================================================
RIGHT: STEP CARDS
================================================ */
.hiw-steps {
display: flex;
flex-direction: column;
gap: 20px;
}
.hiw-step-card {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px 26px;
border-radius: 18px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hiw-step-card:hover {
transform: translateX(6px);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}
/* Pastel backgrounds — matching reference */
.hiw-step-pink {
background: #FFF0EE;
}
.hiw-step-cyan {
background: #EEF8FF;
}
.hiw-step-blue {
background: #EEF1FF;
}
/* Step Icon */
.hiw-step-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.hiw-step-pink .hiw-step-icon {
color: var(--secondary-color);
}
.hiw-step-cyan .hiw-step-icon {
color: var(--primary-color);
}
.hiw-step-blue .hiw-step-icon {
color: #5B6CF8;
}
/* Step Body */
.hiw-step-body {
flex: 1;
}
.hiw-step-title {
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 8px;
}
.hiw-step-desc {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 12px;
}
.hiw-learn-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease, gap 0.3s ease;
}
.hiw-learn-more i {
font-size: 10px;
transition: transform 0.3s ease;
}
.hiw-learn-more:hover {
color: var(--primary-color);
gap: 10px;
}
.hiw-learn-more:hover i {
transform: translateX(3px);
}
/* ================================================
HOW IT WORKS — RESPONSIVE
================================================ */
@media (max-width: 1024px) {
.hiw-body {
gap: 30px;
}
.hiw-pin {
left: -30px;
}
}
@media (max-width: 768px) {
.hiw-section {
padding: 60px 0;
}
.hiw-title {
font-size: 30px;
}
.hiw-body {
grid-template-columns: 1fr;
gap: 40px;
}
.hiw-images {
order: 2;
}
.hiw-steps {
order: 1;
}
.hiw-dashed-svg {
display: none;
}
.hiw-pin {
display: none;
}
.hiw-img-big {
height: 200px;
}
.hiw-img-sm {
height: 140px;
}
}
@media (max-width: 480px) {
.hiw-title {
font-size: 26px;
}
.hiw-step-card {
padding: 18px 16px;
}
.hiw-img-row {
grid-template-columns: 1fr;
}
.hiw-img-sm {
height: 160px;
}
}
/* ==========================================
Announcement Bar & Promo Section Styles
========================================== */
/* Announcement Bar */
.announcement-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 35px;
background: #181E4B;
color: #ffffff;
z-index: 1002;
/* Above fixed header and mobile menu */
display: flex;
align-items: center;
font-family: var(--font-sans);
font-size: 13px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.announcement-container {
width: 100%;
max-width: 1210px;
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
justify-content: space-between;
align-items: center;
}
.announcement-content {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
flex: 1;
min-width: 0;
}
.announcement-badge {
background: #FFFFFF;
color: #181E4B; /* dark text on white badge for WCAG AA contrast */
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.announcement-text {
flex: 1;
min-width: 0;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.announcement-link {
flex-shrink: 0;
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.announcement-link:hover {
color: #ffffff;
}
.announcement-link i {
transition: transform 0.3s ease;
}
.announcement-link:hover i {
transform: translateX(4px);
}
.announcement-close {
flex-shrink: 0;
background: transparent;
border: none;
color: #ffffff; /* was 60% opacity, now full white for WCAG AA on dark background */
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.announcement-close:hover {
color: #ffffff;
transform: scale(1.1);
}
body.has-announcement {
padding-top: 85px !important;
}
body.has-announcement .main-header {
top: 35px;
}
@media (max-width: 600px) {
.announcement-container {
gap: 8px;
padding-right: 10px;
padding-left: 10px;
}
.announcement-content {
gap: 8px;
}
.announcement-badge {
flex-shrink: 0;
padding: 3px 7px;
font-size: 9px;
}
.announcement-text {
font-size: 12px;
}
.announcement-link {
display: none;
}
.announcement-close {
width: 26px;
min-width: 26px;
padding: 4px 0 4px 4px;
}
}
/* Promo Section */
.promo-section {
padding: 60px 0;
background-color: var(--bg-light);
}
.promo-banner-wrapper {
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.promo-banner-wrapper:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.promo-banner-link {
display: block;
width: 100%;
text-decoration: none;
}
.promo-banner-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Beautiful custom placeholder banner styling */
.promo-banner-placeholder {
width: 100%;
background: linear-gradient(135deg, #FFF9F3 0%, #FFF2E5 100%);
border: 2px dashed #DF6951;
border-radius: 20px;
padding: 60px 40px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
.placeholder-inner {
max-width: 600px;
}
.placeholder-tag {
background: rgba(223, 105, 81, 0.1);
color: #DF6951;
padding: 4px 12px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
display: inline-block;
margin-bottom: 15px;
}
.placeholder-title {
font-family: var(--font-serif);
font-size: 28px;
color: #181E4B;
margin-bottom: 10px;
}
.placeholder-desc {
font-size: 14px;
color: #5E6282;
line-height: 1.6;
}
@media (max-width: 768px) {
.promo-banner-placeholder {
padding: 40px 20px;
}
.placeholder-title {
font-size: 22px;
}
}
/* Destination Page Hero */
.destination-page-hero {
height: 400px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
margin-bottom: 80px;
}
.destination-page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
}
.destination-page-hero>* {
position: relative;
z-index: 2;
}
.destination-page-hero h1 {
font-family: var(--font-serif);
font-size: 48px;
font-weight: 700;
margin-bottom: 10px;
}
.destination-page-hero p {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
}
.destination-page-hero p span {
color: var(--primary-color);
}
/* Destination Search Bar */
.destination-search-bar {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 12px;
padding: 20px 30px;
display: flex;
gap: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
z-index: 10;
width: 90%;
max-width: 1000px;
align-items: flex-end;
}
.search-field {
flex: 1;
display: flex;
flex-direction: column;
}
.search-field label {
font-family: 'Nothing You Could Do', cursive;
font-size: 16px;
color: var(--text-dark);
margin-bottom: 5px;
}
.search-field .input-group {
display: flex;
align-items: center;
border: 1px solid #E4E6E8;
border-radius: 8px;
padding: 10px 15px;
background: white;
}
.search-field .input-group i {
color: #A0AEC0;
margin-right: 10px;
}
.search-field input {
border: none;
outline: none;
width: 100%;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-muted);
}
.search-field input::placeholder {
color: #CBD5E0;
}
.destination-search-bar .btn-search {
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
padding: 12px 30px;
font-family: var(--font-sans);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
height: 44px;
}
.destination-search-bar .btn-search:hover {
background: #c5533e;
transform: translateY(-2px);
}
/* Destinations Masonry Grid */
.destinations-masonry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 250px;
gap: 20px;
margin-bottom: 80px;
margin-top: 60px;
grid-auto-flow: dense;
}
.destinations-masonry-grid .destination-card {
height: 100%;
}
.dest-card-tall {
grid-row: span 2;
}
.dest-card-wide {
grid-column: span 2;
}
@media (max-width: 992px) {
.destinations-masonry-grid {
grid-template-columns: repeat(3, 1fr);
}
.dest-card-tall,
.dest-card-wide {
grid-row: auto;
grid-column: auto;
}
.destination-search-bar {
flex-wrap: wrap;
bottom: -100px;
}
.destination-page-hero {
margin-bottom: 140px;
}
.search-field {
min-width: 45%;
}
}
@media (max-width: 768px) {
.destinations-masonry-grid {
grid-template-columns: repeat(2, 1fr);
}
.search-field {
min-width: 100%;
}
.destination-search-bar {
bottom: -200px;
}
.destination-page-hero {
margin-bottom: 240px;
}
}
@media (max-width: 480px) {
.destinations-masonry-grid {
grid-template-columns: 1fr;
}
}
/* ================================================
TOUR DETAIL PAGE
================================================ */
.tour-detail-page {
padding: 40px 0 80px;
background: #fff;
font-family: var(--font-sans);
}
.tour-detail-top {
display: grid;
grid-template-columns: 1fr 340px;
gap: 32px;
align-items: start;
margin-bottom: 48px;
}
.tour-detail-hero {
position: relative;
border-radius: 12px;
overflow: hidden;
margin-bottom: 24px;
aspect-ratio: 16 / 9;
}
.td-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.td-gallery-thumb {
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease-in-out;
opacity: 0.6;
}
.td-gallery-thumb:hover {
opacity: 1;
}
.td-gallery-thumb.active {
border-color: var(--primary-color);
opacity: 1;
}
.td-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.td-gallery-more {
position: relative;
}
.td-gallery-more-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(0, 0, 0, .55);
color: #fff;
font-size: 20px;
font-weight: 700;
}
.tour-detail-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.td-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transition: transform 0.2s ease, background 0.2s ease;
z-index: 2;
}
.td-hero-nav:hover {
background: #fff;
transform: translateY(-50%) scale(1.05);
}
.td-hero-nav.prev {
left: 16px;
}
.td-hero-nav.next {
right: 16px;
}
.td-hero-counter {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
padding: 6px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 12px;
font-weight: 700;
z-index: 2;
}
.tour-detail-hero-actions {
position: absolute;
bottom: 16px;
right: 16px;
display: flex;
gap: 10px;
}
.td-hero-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform 0.2s ease;
}
.td-hero-btn:hover {
transform: translateY(-2px);
}
.td-hero-btn.tour-favorite {
position: static;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.td-hero-btn.tour-favorite.is-favorite {
background: #b94d30;
color: #ffffff;
}
.td-hero-btn.tour-favorite.is-favorite i::before {
content: '\f004';
font-weight: 900;
}
/* ── Tour / Excursion detail topline breadcrumb (mirrors article-detail-topline) ── */
.tour-detail-topline { padding-top: 18px; }
.tour-detail-topline .tour-detail-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: #bd812f;
font: 500 11px/1.4 var(--font-manrope, sans-serif);
opacity: 1;
}
.tour-detail-topline .tour-detail-breadcrumb a { color: inherit; text-decoration: none; }
.tour-detail-topline .tour-detail-breadcrumb a:hover { color: var(--primary-color, #DF6951); }
.tour-detail-topline .tour-detail-breadcrumb span {
overflow: hidden; color: #16120e; text-overflow: ellipsis; white-space: nowrap;
}
.tour-detail-topline .tour-detail-breadcrumb i { font-size: 9px; opacity: 0.8; }
@media (max-width: 640px) {
.tour-detail-topline { padding-top: 14px; }
}
/* ── Event detail topline breadcrumb (mirrors article-detail-topline) ── */
.event-detail-topline { padding-top: 18px; }
.event-detail-topline .event-detail-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: #bd812f;
font: 500 11px/1.4 var(--font-manrope, sans-serif);
opacity: 1;
}
.event-detail-topline .event-detail-breadcrumb a { color: inherit; text-decoration: none; }
.event-detail-topline .event-detail-breadcrumb a:hover { color: var(--primary-color, #DF6951); }
.event-detail-topline .event-detail-breadcrumb span {
overflow: hidden; color: #16120e; text-overflow: ellipsis; white-space: nowrap;
}
.event-detail-topline .event-detail-breadcrumb i { font-size: 9px; opacity: 0.8; }
@media (max-width: 640px) {
.event-detail-topline { padding-top: 14px; }
}
/* ── Destination detail topline breadcrumb (mirrors article-detail-topline) ── */
.dest-detail-topline { padding-top: 18px; }
.dest-detail-topline .dest-detail-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: #bd812f;
font: 500 11px/1.4 var(--font-manrope, sans-serif);
opacity: 1;
}
.dest-detail-topline .dest-detail-breadcrumb a { color: inherit; text-decoration: none; }
.dest-detail-topline .dest-detail-breadcrumb a:hover { color: var(--primary-color, #DF6951); }
.dest-detail-topline .dest-detail-breadcrumb span {
overflow: hidden; color: #16120e; text-overflow: ellipsis; white-space: nowrap;
}
.dest-detail-topline .dest-detail-breadcrumb i { font-size: 9px; opacity: 0.8; }
@media (max-width: 640px) {
.dest-detail-topline { padding-top: 14px; }
}
.td-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: #bd812f;
margin: 0 0 10px;
padding: 0;
}
.td-breadcrumb a {
color: #bd812f;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: color 0.2s ease, opacity 0.2s ease;
}
.td-breadcrumb a:hover {
color: var(--primary-color, #DF6951);
}
.td-breadcrumb .fa-house {
font-size: 13px;
color: #bd812f;
line-height: 1;
}
.td-breadcrumb a:hover .fa-house {
color: var(--primary-color, #DF6951);
}
.td-breadcrumb span {
color: #16120e;
font-weight: 600;
}
.td-breadcrumb > i.fa-chevron-right {
font-size: 9px;
color: #bd812f;
opacity: 0.7;
margin: 0 1px;
}
.td-title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
color: var(--text-dark);
line-height: 1.25;
margin: 0 0 20px;
}
.td-meta-bar {
display: flex;
flex-wrap: wrap;
gap: 0;
border: 1px solid #E4E6E8;
border-radius: 10px;
overflow: hidden;
margin-bottom: 32px;
}
.td-meta-item {
flex: 1 1 120px;
padding: 14px 16px;
border-right: 1px solid #E4E6E8;
border-bottom: 1px solid #E4E6E8;
}
.td-meta-item:last-child {
border-right: none;
}
.td-meta-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 4px;
}
.td-meta-value {
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
}
.td-meta-reviews .td-meta-value i {
color: var(--secondary-color);
font-size: 12px;
}
.td-section {
margin-bottom: 48px;
}
.td-section-title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 20px;
}
.td-text {
font-size: 15px;
line-height: 1.8;
color: #5E6282;
margin: 0 0 16px;
}
.td-text:last-child {
margin-bottom: 0;
}
.td-tabs-card {
border: 1px solid #E4E6E8;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.td-tabs-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #f8fafc;
border-bottom: 1px solid #E4E6E8;
}
.td-tab-input {
display: none;
}
.td-tabs-nav .td-tab-label {
position: relative;
min-height: 54px;
padding: 16px 20px;
border: none;
background: transparent;
color: #50627d;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
text-align: center;
box-sizing: border-box;
}
.td-tab-presentation-input:checked~.td-tabs-nav .td-tab-presentation-label,
.td-tab-included-input:checked~.td-tabs-nav .td-tab-included-label,
.td-tab-program-input:checked~.td-tabs-nav .td-tab-program-label,
.td-tab-options-input:checked~.td-tabs-nav .td-tab-options-label {
background: #fff;
color: #000;
}
.td-tab-presentation-input:checked~.td-tabs-nav .td-tab-presentation-label::after,
.td-tab-included-input:checked~.td-tabs-nav .td-tab-included-label::after,
.td-tab-program-input:checked~.td-tabs-nav .td-tab-program-label::after,
.td-tab-options-input:checked~.td-tabs-nav .td-tab-options-label::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--secondary-color, #F1A501);
}
.td-tabs-panel {
display: none;
padding: 28px;
}
.td-panel-title {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 12px;
}
.td-text+.td-panel-title,
.td-highlight-list+.td-panel-title {
margin-top: 26px;
}
.td-highlight-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 18px;
}
.td-highlight-list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: #5E6282;
font-size: 14px;
line-height: 1.55;
}
.td-highlight-list i {
color: var(--primary-color);
margin-top: 4px;
font-size: 12px;
}
.td-tab-presentation-input:checked~.td-panel-presentation,
.td-tab-included-input:checked~.td-panel-included,
.td-tab-program-input:checked~.td-panel-program,
.td-tab-options-input:checked~.td-panel-options {
display: block;
}
/* Booking sidebar */
.tour-detail-sidebar {
position: sticky;
top: 100px;
}
.td-booking-card {
background: #fff;
border: 1px solid #E4E6E8;
border-radius: 12px;
padding: 24px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.td-booking-price {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #E4E6E8;
}
.td-price-amount {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-color);
}
.td-price-unit {
font-size: 14px;
color: var(--text-muted);
}
.td-booking-success {
background: #ecfdf5;
color: #065f46;
padding: 12px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 16px;
border: 1px solid #10b981;
}
.td-form-field {
margin-bottom: 14px;
}
.td-form-field label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 6px;
}
.td-input-wrap {
position: relative;
}
.td-input-wrap i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 14px;
pointer-events: none;
}
.td-input {
width: 100%;
padding: 12px 14px 12px 40px;
border: 1px solid #E4E6E8;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-dark);
background: #fff;
box-sizing: border-box;
}
.td-input.plain {
padding-left: 14px;
}
.td-ticket-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid #E4E6E8;
gap: 12px;
}
.td-ticket-row strong {
display: block;
font-size: 14px;
color: var(--text-dark);
}
.td-ticket-row small {
font-size: 12px;
color: var(--text-muted);
}
.td-ticket-price {
font-size: 13px;
font-weight: 600;
color: var(--primary-color);
margin-top: 2px;
}
.td-qty-control {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid #E4E6E8;
border-radius: 8px;
padding: 4px;
}
.td-qty-control button {
width: 32px;
height: 32px;
border: none;
background: #f5f5f5;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
color: var(--text-dark);
line-height: 1;
}
.td-qty-control button:hover {
background: #eee;
}
.td-qty-control span {
min-width: 20px;
text-align: center;
font-weight: 600;
font-size: 14px;
}
.td-booking-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
font-size: 15px;
}
.td-booking-total strong {
font-size: 1.25rem;
color: var(--primary-color);
}
.td-book-btn {
width: 100%;
padding: 14px;
background: var(--primary-color-dark);
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s ease;
margin-top: 8px;
}
.td-book-btn:hover {
background: var(--primary-color-hover);
}
/* Included / Excluded */
.td-inclusions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.td-inclusions-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.td-col-left,
.td-col-right {
display: flex;
flex-direction: column;
gap: 20px;
}
.td-check-list {
list-style: none;
padding: 0;
margin: 0;
}
.td-check-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
font-size: 14px;
color: #5E6282;
line-height: 1.5;
}
.td-check-list.included li i {
color: #22c55e;
margin-top: 3px;
}
.td-check-list.excluded li i {
color: var(--primary-color);
margin-top: 3px;
}
/* Itinerary accordion */
.td-itinerary {
border: 1px solid #E4E6E8;
border-radius: 10px;
overflow: hidden;
}
.td-itinerary-item {
border-bottom: 1px solid #E4E6E8;
}
.td-itinerary-item:last-child {
border-bottom: none;
}
.td-itinerary-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
background: #f9f9f9;
border: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
text-align: left;
transition: background 0.2s ease;
}
.td-itinerary-item.active .td-itinerary-head {
background: var(--primary-color);
color: #fff;
}
.td-itinerary-head i {
font-size: 12px;
transition: transform 0.3s ease;
}
.td-itinerary-item.active .td-itinerary-head i {
transform: rotate(180deg);
}
.td-itinerary-body {
padding: 20px 24px;
background: #fff;
}
.td-itinerary-body p {
font-size: 14px;
line-height: 1.7;
color: #5E6282;
margin: 0 0 12px;
}
.td-itinerary-body ul {
margin: 0;
padding-left: 18px;
color: #5E6282;
font-size: 14px;
line-height: 1.8;
}
/* Calendar */
.td-calendar {
border: 1px solid #E4E6E8;
border-radius: 12px;
padding: 24px;
background: #fff;
}
.td-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.td-calendar-header h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
margin: 0;
color: var(--text-dark);
}
.td-calendar-header button {
width: 36px;
height: 36px;
border: 1px solid #E4E6E8;
border-radius: 8px;
background: #fff;
cursor: pointer;
color: var(--text-dark);
}
.td-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.td-calendar-weekdays span {
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
padding: 8px 0;
}
.td-calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.td-calendar-day {
min-height: 64px;
border: 1px solid #f0f0f0;
border-radius: 8px;
padding: 6px;
text-align: center;
}
.td-calendar-day.empty {
border-color: transparent;
background: transparent;
}
.td-calendar-day.available {
cursor: pointer;
transition: border-color 0.2s ease;
}
.td-calendar-day.available:hover {
border-color: var(--primary-color);
}
.td-calendar-day .day-num {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.td-calendar-day .day-price {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--primary-color);
}
/* Map */
.td-map {
border-radius: 12px;
overflow: hidden;
border: 1px solid #E4E6E8;
height: 400px;
}
.td-map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Related tours */
.td-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.td-related-card {
text-decoration: none;
color: inherit;
border: 1px solid #E4E6E8;
border-radius: 12px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.td-related-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-4px);
}
.td-related-image {
position: relative;
height: 160px;
}
.td-related-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.td-wishlist {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.td-related-body {
padding: 14px;
}
.td-related-location {
font-size: 12px;
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.td-related-body h3 {
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
margin: 6px 0 8px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.td-related-meta {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 10px;
}
.td-related-meta i {
color: var(--secondary-color);
}
.td-related-price {
text-align: right;
}
.td-related-price small {
display: block;
font-size: 11px;
color: var(--text-muted);
}
.td-related-price strong {
font-size: 15px;
color: var(--primary-color);
}
/* Lightbox */
.td-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
}
.td-lightbox img {
max-width: 90%;
max-height: 85vh;
border-radius: 12px;
object-fit: contain;
}
.td-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
opacity: 0.8;
}
.td-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 18px;
cursor: pointer;
}
.td-lightbox-nav.prev {
left: 20px;
}
.td-lightbox-nav.next {
right: 20px;
}
[x-cloak] {
display: none !important;
}
@media (max-width: 1100px) {
.tour-detail-top {
grid-template-columns: 1fr;
}
.tour-detail-sidebar {
position: static;
}
.td-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.tour-detail-page {
padding: 24px 0 60px;
}
.td-inclusions-grid {
grid-template-columns: 1fr;
}
.td-tabs-nav .td-tab-label {
min-height: 48px;
padding: 12px 8px;
font-size: 13px;
}
.td-tabs-panel {
padding: 20px;
}
.td-highlight-list {
grid-template-columns: 1fr;
}
.td-hero-nav {
width: 36px;
height: 36px;
}
.td-hero-nav.prev {
left: 10px;
}
.td-hero-nav.next {
right: 10px;
}
.td-meta-item {
flex: 1 1 50%;
}
.td-related-grid {
grid-template-columns: 1fr;
}
}
/* Laravel implementation of the supplied Next.js header and hero components. */
body:has(.reference-header):not(.has-announcement) { padding-top: 72px !important; }
body.has-announcement:has(.reference-header) { padding-top: 107px !important; }
body.has-announcement .reference-header { top: 35px !important; }
.reference-header { height: 72px; min-height: 72px; padding: 8px 0; background: rgba(247, 235, 221, .96); border-bottom: 1px solid rgba(233, 221, 205, .75); backdrop-filter: blur(12px); }
.reference-header .header-inner { max-width: 1280px; padding: 0 24px; }
.reference-header .brand-logo { flex: 0 0 auto; }
.reference-header .brand-logo img { width: 78px; max-height: 48px; height: auto; margin: 0; border-radius: 0; object-fit: contain; }
.reference-header .main-nav { flex: 1; justify-content: center; }
.reference-header .nav-list { gap: 20px; }
.reference-header .nav-link { height: auto; min-height: 36px; padding: 8px 0; gap: 5px; font: 500 13px/1.2 var(--font-manrope); color: #212832; }
.reference-header .nav-link:hover,
.reference-header .nav-link.active { color: #df6951; }
.reference-header .nav-link.active::after { left: 0; right: 0; bottom: 0; height: 2px; background: #df6951; }
.reference-header .nav-chevron { font-size: 12px; }
.reference-header .header-actions { flex: 0 0 auto; gap: 8px; }
.reference-header .header-actions > .nav-item > .nav-link { min-height: 36px; padding: 6px 9px; gap: 6px; font-size: 12px; }
.reference-header .header-favorites { height: 36px; gap: 6px; padding: 0 9px; font: 600 12px var(--font-manrope); }
.reference-header .header-favorites > i { font-size: 16px; }
.reference-header .favorites-count { width: 16px; height: 16px; font-size: 9px; }
.reference-header .nav-mega-menu { grid-template-columns: 1fr; gap: 4px; min-width: 240px; max-width: 280px; padding: 8px; border-radius: 12px; }
.reference-header .nav-mega-column { gap: 2px; }
.reference-header .nav-mega-cta { display: none; }
.reference-header .nav-mega-link { min-height: 32px; padding: 7px 9px; font-size: 12px; }
@media (max-width: 1279px) {
.reference-header .header-favorites > span:not(.favorites-count) { display: none; }
}
.hero-morocco { min-height: 0; height: auto; padding: 80px 0 32px; background: #f9f2e8; }
.hero-morocco-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 20px; width: 100%; max-width: 1280px; padding: 0 32px; }
.hero-morocco-copy { grid-column: span 6; display: flex; flex-direction: column; align-items: center; max-width: 590px; text-align: center; }
.hero-morocco .hero-tagline { margin: 0 0 10px; color: #df6951; font: 700 11px/1.4 var(--font-manrope); letter-spacing: .16em; }
.hero-morocco .hero-title { max-width: 590px; margin: 0 0 14px; color: #181e4b; font: 800 clamp(30px, 6.4vw, 48px)/1.05 var(--font-serif); letter-spacing: -.035em; }
.hero-morocco .hero-title span { white-space: nowrap; }
.hero-morocco .hero-title span::after { display: none; }
.hero-morocco .hero-title-highlight { position: relative; display: inline-block; white-space: nowrap; }
.hero-morocco .hero-title-highlight > span { position: relative; z-index: 1; }
.hero-morocco .hero-title-underline { position: absolute; right: 0; bottom: -4px; left: 0; z-index: 0; width: 100%; pointer-events: none; }
.hero-morocco .hero-title span span { position: relative; z-index: 1; }
.hero-morocco .hero-description { max-width: 576px; margin: 0 0 16px; color: #52657c; font: 400 14px/1.7 var(--font-manrope); }
.hero-morocco .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px; }
.hero-morocco .btn-primary { min-height: 40px; padding: 9px 20px; gap: 8px; border-radius: 12px; background: #f1a501; color: #fff; font: 600 13px/1.2 var(--font-manrope); box-shadow: 0 4px 10px rgba(241,165,1,.22); }
.hero-morocco .btn-primary::after { content: '\2192'; font-size: 15px; }
.hero-morocco .follow-us { gap: 12px; color: #334155; font: 500 13px/1.2 var(--font-manrope); }
.hero-morocco .follow-icon { width: 36px; height: 36px; font-size: 16px; }
.hero-morocco .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 490px; gap: 0; text-align: left; }
.hero-morocco .stat-item { min-width: 0; padding: 0 12px; text-align: left; border: 0; }
.hero-morocco .stat-item:first-child { padding-left: 0; }
.hero-morocco .stat-item + .stat-item { border-left: 1px solid #e4c58f; }
.hero-morocco .stat-item .counter-value { margin: 0; color: #df6951; font: 800 24px/1.25 var(--font-manrope); letter-spacing: -.02em; }
.hero-morocco .stat-item p { margin-top: 2px; color: #52657c; font: 500 11px/1.3 var(--font-manrope); }
.hero-morocco-art { display: none; }
.hero-morocco .hero-main-img-container { position: relative; z-index: 1; width: 100%; max-width: 450px; height: 400px; }
.hero-morocco .hero-main-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: none; animation: none; }
.hero-morocco .hero-deco-lines,
.hero-morocco .hero-blob { display: none; }
.hero-morocco-glow { position: absolute; inset: 0; width: min(100%, 440px); height: min(100%, 440px); margin: auto; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,187,.7), rgba(255,248,235,.5) 55%, transparent 75%); filter: blur(24px); }
.hero-morocco-zellige { position: absolute; bottom: -32px; left: -40px; z-index: 0; width: 240px; height: 240px; opacity: .16; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(223,105,81,.22) 11px 12px, transparent 12px 23px), repeating-linear-gradient(-45deg, transparent 0 11px, rgba(241,165,1,.18) 11px 12px, transparent 12px 23px); mask-image: radial-gradient(circle, #000 25%, transparent 75%); }
.hero-morocco .hero-scroll-cue { position: absolute; bottom: 8px; left: 50%; z-index: 2; display: none; width: 38px; height: 42px; transform: translateX(-50%); border: 0; background: transparent; }
.hero-morocco .hero-scroll-cue span { display: none; }
.hero-morocco .hero-scroll-cue::before { content: ''; width: 19px; height: 31px; border: 1.5px solid rgba(82,101,124,.7); border-radius: 11px; }
.hero-morocco .hero-scroll-cue::after { content: ''; position: absolute; top: 11px; width: 2px; height: 6px; border-radius: 2px; background: rgba(82,101,124,.7); }
.reference-header ~ .mobile-menu-overlay { top: 0; }
body:has(.hero-morocco) .floating-devis-btn { left: 29px !important; bottom: 23px !important; min-width: 308px !important; width: auto !important; height: 53px !important; padding: 0 22px !important; border-radius: 28px !important; font-size: 14px !important; }
body:has(.hero-morocco) .floating-whatsapp-btn { right: 34px !important; bottom: 19px !important; width: 76px !important; height: 76px !important; border-width: 5px !important; font-size: 30px !important; }
@media (min-width: 640px) {
.hero-morocco { padding-top: 80px; padding-bottom: 40px; }
.hero-morocco .hero-tagline { margin-bottom: 12px; font-size: 11px; }
.hero-morocco .hero-title { margin-bottom: 16px; font-size: clamp(42px, 2.75vw, 51px); }
.hero-morocco .hero-description { margin-bottom: 20px; font-size: 14px; }
.hero-morocco .hero-actions { margin-bottom: 24px; gap: 20px; }
.hero-morocco .stat-item .counter-value { font-size: 24px; }
}
@media (min-width: 1024px) {
.hero-morocco { height: min(68svh, 650px); min-height: 580px; padding: 32px 0; }
.hero-morocco-grid { gap: 0; padding-left: 32px; padding-right: 32px; }
.hero-morocco-copy { grid-column: span 6; align-items: flex-start; text-align: left; }
.hero-morocco-art { grid-column: 7 / span 6; display: flex; align-items: center; justify-content: center; }
.hero-morocco .hero-scroll-cue { display: flex; }
.hero-morocco-zellige { width: 240px; height: 240px; opacity: .5; }
}
@media (max-width: 1023px) {
.reference-header .main-nav { display: none; }
.reference-header .mobile-menu-toggle { display: flex; }
.hero-morocco-grid { grid-template-columns: minmax(0, 1fr); }
.hero-morocco-copy { grid-column: 1; width: 100%; margin: 0 auto; }
.hero-morocco .hero-title { font-size: clamp(30px, 6.4vw, 48px); }
.hero-morocco-art { display: none; }
}
@media (max-width: 639px) {
.reference-header { min-height: 58px; height: 58px; padding: 6px 0; }
body:has(.reference-header):not(.has-announcement) { padding-top: 58px !important; }
body.has-announcement:has(.reference-header) { padding-top: 93px !important; }
.reference-header .header-inner { padding: 0 16px; }
.reference-header .brand-logo img { width: 68px; max-height: 42px; }
.reference-header .header-actions { gap: 4px; }
.reference-header .header-favorites { display: none; }
.reference-header .header-actions > .nav-item > .nav-link { min-height: 32px; padding: 4px 5px; font-size: 11px; }
.hero-morocco { padding: 80px 0 32px; }
.hero-morocco-grid { gap: 16px; padding: 0 20px; }
.hero-morocco .hero-title { font-size: clamp(30px, 8vw, 40px); }
.hero-morocco .hero-description { font-size: 12px; }
.hero-morocco .hero-actions { margin-bottom: 20px; }
.hero-morocco .stat-item { padding: 0 8px; }
.hero-morocco .stat-item .counter-value { font-size: 20px; }
.hero-morocco .stat-item p { font-size: 10px; }
body:has(.hero-morocco) .floating-devis-btn { left: 16px !important; bottom: 16px !important; min-width: 0 !important; width: 48px !important; height: 48px !important; padding: 0 !important; font-size: 19px !important; }
body:has(.hero-morocco) .floating-devis-btn span { display: none; }
body:has(.hero-morocco) .floating-whatsapp-btn { right: 14px !important; bottom: 14px !important; width: 54px !important; height: 54px !important; font-size: 23px !important; }
}
/* Final compact pass from the supplied browser reference. */
body:has(.reference-header):not(.has-announcement) { padding-top: 62px !important; }
body.has-announcement:has(.reference-header) { padding-top: 97px !important; }
.reference-header { height: 62px; min-height: 62px; padding: 5px 0; }
.reference-header .brand-logo img { width: 70px; max-height: 44px; }
.reference-header .nav-list { gap: 16px; }
.reference-header .nav-link { min-height: 32px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.reference-header .header-actions { gap: 5px; }
.reference-header .header-actions > .nav-item > .nav-link,
.reference-header .header-favorites { min-height: 32px; height: 32px; padding: 4px 7px; font-size: 11px; }
.reference-header .header-favorites { color: #34465e; text-decoration: none; }
.reference-header .header-favorites:hover { color: #b64f2e; }
.reference-header .header-favorites > i { font-size: 15px; }
.reference-header .favorites-count { width: 17px; height: 17px; background: #b64f2e; border-radius: 50%; color: #fff; font-size: 10px; line-height: 17px; text-align: center; }
.hero-morocco { height: min(60svh, 600px); min-height: 520px; }
body:has(.hero-morocco) .floating-devis-btn { left: 24px !important; bottom: 20px !important; min-width: 260px !important; width: auto !important; height: 48px !important; padding: 0 18px !important; gap: 10px !important; border-radius: 26px !important; font-size: 12px !important; box-shadow: 0 6px 14px rgba(80,44,26,.16) !important; animation: none !important; }
body:has(.hero-morocco) .floating-whatsapp-btn { right: 24px !important; bottom: 18px !important; width: 56px !important; height: 56px !important; border-width: 4px !important; font-size: 23px !important; box-shadow: 0 2px 8px rgba(0,168,120,.2) !important; animation: none !important; }
@media (max-width: 639px) {
body:has(.reference-header):not(.has-announcement) { padding-top: 52px !important; }
body.has-announcement:has(.reference-header) { padding-top: 87px !important; }
.reference-header { height: 52px; min-height: 52px; padding: 4px 0; }
.reference-header .brand-logo img { width: 62px; max-height: 38px; }
.hero-morocco { height: auto; min-height: 0; padding-top: 56px; padding-bottom: 24px; }
body:has(.hero-morocco) .floating-devis-btn { left: 14px !important; bottom: 14px !important; width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; }
body:has(.hero-morocco) .floating-devis-btn span { display: none; }
body:has(.hero-morocco) .floating-whatsapp-btn { right: 14px !important; bottom: 14px !important; width: 48px !important; height: 48px !important; font-size: 20px !important; }
}
/* Featured circuits section styled to match the supplied reference. */
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference { padding: 30px 0 10px; overflow: hidden; background: #fffdfa; position: relative; }
.tours-reference-container { max-width: none; padding: 0 30px; }
.tours-reference .tours-header { align-items: flex-start; margin: 0 0 14px; padding: 0; }
.tours-reference .tours-header-content { min-width: 0; }
.tours-reference .tours-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 13px; border: 1px solid #f3d3c9; border-radius: 20px; background: #fff3ef; color: #df624e; font: 700 11px/1.2 var(--font-manrope); letter-spacing: .08em; }
.tours-reference .tours-eyebrow i { font-size: 12px; }
.tours-reference .tours-main-title { color: #181e4b; font: 700 clamp(25px, 2.5vw, 38px)/1.12 var(--font-serif); letter-spacing: -.025em; }
.tours-reference .tours-subtitle { margin-top: 10px; color: #647996; font: 400 14px/1.5 var(--font-manrope); }
.tours-reference .tours-feature-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tours-reference .tours-feature-list span { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 5px 12px; border: 1px solid #efdfd0; border-radius: 18px; background: white; color: #3f5067; font: 500 10px/1.2 var(--font-manrope); white-space: nowrap; }
.tours-reference .tours-feature-list i { color: #df624e; font-size: 11px; }
.tours-reference .tours-navigation { right: 10px; bottom: 0; gap: 10px; }
.tours-reference .nav-arrow { width: 40px; height: 40px; border: 1px solid #e0e7ef; border-radius: 50%; background: #fff; color: #34465e; box-shadow: 0 1px 3px rgba(24,30,75,.06); }
.tours-reference .nav-arrow:hover { background: #fff3ef; color: #df624e; }
.tours-reference .tours-carousel-wrapper { margin: 14px -30px 0; overflow: visible; }
.tours-reference .tours-carousel { gap: 24px; padding: 20px 30px 18px; }
.tours-reference .tours-load-more-wrapper { margin: 20px 0 0; }
.tours-reference .btn-load-more-tours { min-height: 40px; gap: 8px; padding: 9px 17px; border-radius: 11px; background: #d95640; font-size: 11px; }
.tours-reference .btn-load-more-tours .load-more-icon svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
.tours-reference-container { padding: 0 18px; }
.tours-reference .tours-header { display: block; }
.tours-reference .tours-navigation { top: 2px; right: 0; bottom: auto; }
.tours-reference .tours-main-title { max-width: calc(100% - 92px); font-size: clamp(24px, 6vw, 32px); }
.tours-reference .tours-subtitle { max-width: calc(100% - 12px); font-size: 13px; }
.tours-reference .tours-feature-list { gap: 7px; }
.tours-reference .tours-feature-list span { padding: 5px 9px; font-size: 9px; }
.tours-reference .tours-carousel-wrapper { margin-right: -18px; margin-left: -18px; }
.tours-reference .tours-carousel { gap: 14px; padding-right: 18px; padding-left: 18px; }
}
/* Destination tiles follow the supplied regional showcase reference. */
.popular-destinations.destinations-reference { margin-top: 0; padding: 48px 0 42px; background: linear-gradient(180deg, #fbf8f3 0%, #fff 100%); }
.destination-breadcrumb { display: flex; align-items: center; gap: 10px; max-width: 1220px; padding-top: 0; color: #b27636; font: 500 11px/1.4 var(--font-manrope); }
.destination-breadcrumb a { color: inherit; text-decoration: none; }
.destination-breadcrumb a:hover { color: #df624e; }
.destination-breadcrumb > i { color: #df9c58; font-size: 8px; }
.destination-breadcrumb [aria-current="page"] { color: #181e4b; }
.destination-index-reference { padding-top: 34px; }
.destination-index-reference .popular-title { max-width: 760px; font-size: clamp(30px, 3.2vw, 38px); }
.destination-index-reference .popular-subtitle { max-width: 700px; font-size: 13px; }
.destinations-reference-container { max-width: 1220px; }
.destinations-reference .popular-header { display: block; margin: 0 0 34px; }
.destinations-reference .header-text { display: flex; flex-direction: column; align-items: center; }
.destinations-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 6px 13px; border: 1px solid #f3d3c9; border-radius: 20px; background: #fff3ef; color: #df624e; font: 700 10px/1.2 var(--font-manrope); letter-spacing: .07em; }
.destinations-reference .popular-title { margin: 0; color: #181e4b; font: 700 clamp(26px, 3vw, 34px)/1.15 var(--font-serif); letter-spacing: -.025em; }
.destinations-reference .popular-subtitle { max-width: 590px; margin: 10px auto 0; color: #647996; font: 400 13px/1.6 var(--font-manrope); text-transform: none; letter-spacing: 0; }
.destinations-reference .destinations-masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 232px; grid-auto-flow: row; gap: 20px; margin: 0; }
.destinations-reference .dest-card-tall, .destinations-reference .dest-card-wide { grid-row: auto; grid-column: auto; }
.destinations-reference .destination-reference-link { display: block; min-width: 0; }
.destinations-reference .destination-card { height: 100%; border-radius: 17px; box-shadow: 0 9px 22px rgba(25,30,54,.12); }
.destinations-reference .destination-card:hover { transform: translateY(-3px); }
.destinations-reference .destination-card .dest-image { position: absolute; inset: 0; height: 100% !important; }
.destinations-reference .destination-card .dest-image img { transition: transform .45s ease; }
.destinations-reference .destination-card:hover .dest-image img { transform: scale(1.05); }
.destinations-reference .destination-card > .dest-image > div { height: 58% !important; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.03)) !important; }
.destinations-reference .destination-country { position: absolute; top: 15px; left: 15px; z-index: 3; padding: 4px 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(255,255,255,.23); color: #fff; font: 700 8px/1.1 var(--font-manrope); }
.destinations-reference .destination-open { position: absolute; top: 13px; right: 13px; z-index: 3; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(255,255,255,.25); color: white; font-size: 10px; }
.destinations-reference .dest-content { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0 15px 14px; color: #fff; }
.destinations-reference .destination-type { color: #ffc400; font: 800 8px/1.2 var(--font-manrope); text-transform: uppercase; }
.destinations-reference .dest-title { margin: 4px 0 3px; color: #fff; font: 700 16px/1.15 var(--font-serif); }
.destinations-reference .dest-title { margin: 4px 0 3px; color: white; font: 700 16px/1.15 var(--font-serif); }
.destinations-reference .destination-description { display: -webkit-box; margin: 0; overflow: hidden; color: rgba(255,255,255,.82); font: 400 9px/1.3 var(--font-manrope); -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.destinations-reference .tours-load-more-wrapper { margin: 26px 0 0 !important; }
@media (max-width: 900px) {
.destinations-reference .destinations-masonry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
}
@media (max-width: 520px) {
.destination-index-reference { padding-top: 28px; }
.destination-index-reference .popular-title { font-size: 27px; }
.popular-destinations.destinations-reference { padding: 38px 0 30px; }
.destinations-reference-container { padding-right: 16px; padding-left: 16px; }
.destinations-reference .popular-header { margin-bottom: 24px; }
.destinations-reference .popular-title { font-size: 26px; }
.destinations-reference .popular-subtitle { font-size: 12px; }
.destinations-reference .destinations-masonry-grid { gap: 12px; grid-auto-rows: 185px; }
.destinations-reference .dest-content { padding: 0 11px 11px; }
.destinations-reference .dest-title { font-size: 14px; }
.destinations-reference .destination-description { font-size: 8px; }
}
/* Commitment section restyled to match the four benefit card reference. */
.wcu-section.wcu-reference { padding: 48px 0 38px; background: linear-gradient(180deg, #fff 0%, #faf6f0 100%); }
.wcu-reference-container { max-width: 1728px; }
.wcu-reference .wcu-section-header { display: flex; flex-direction: column; align-items: center; margin: 0 0 88px; text-align: center; }
.wcu-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 8px 16px; border: 1px solid #f3d3c9; border-radius: 24px; background: #fff3ef; color: #df624e; font: 700 12px/1.2 var(--font-manrope); letter-spacing: .04em; }
.wcu-reference .wcu-section-title { margin: 0; color: #181e4b; font: 700 clamp(29px, 3.1vw, 46px)/1.15 var(--font-serif); letter-spacing: -.025em; }
.wcu-reference .wcu-section-title span { color: #df6951; }
.wcu-reference .wcu-section-subtitle { margin: 14px 0 0; color: #647996; font: 400 17px/1.5 var(--font-manrope); }
.wcu-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px; }
.wcu-reference-card { min-height: 0; aspect-ratio: 1.18 / 1; padding: 24px; border: 1px solid #efe2d4; border-radius: 20px; background: rgba(255,255,255,.86); box-shadow: 0 8px 24px rgba(55,45,35,.035); }
.wcu-reference-icon { display: grid; width: 48px; height: 48px; margin-bottom: 18px; place-items: center; border: 1px solid #efe2d4; border-radius: 16px; background: #fcf8f2; color: #df624e; font-size: 20px; }
.wcu-reference-card h3 { margin: 0 0 9px; color: #1b244e; font: 700 14px/1.35 var(--font-manrope); letter-spacing: -.02em; }
.wcu-reference-card p { margin: 0; color: #667c99; font: 400 12px/1.55 var(--font-manrope); }
@media (max-width: 1100px) {
.wcu-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.wcu-reference .wcu-section-header { margin-bottom: 52px; }
.wcu-reference-card { min-height: 290px; aspect-ratio: auto; padding: 28px; }
.wcu-reference-icon { margin-bottom: 24px; }
}
@media (max-width: 600px) {
.wcu-section.wcu-reference { padding: 38px 0 28px; }
.wcu-reference-container { padding-right: 18px; padding-left: 18px; }
.wcu-reference .wcu-section-header { margin-bottom: 32px; }
.wcu-reference .wcu-section-title { font-size: 29px; }
.wcu-reference .wcu-section-subtitle { margin-top: 10px; font-size: 14px; }
.wcu-reference-grid { grid-template-columns: 1fr; gap: 14px; }
.wcu-reference-card { min-height: 0; padding: 22px; border-radius: 18px; }
.wcu-reference-icon { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 17px; font-size: 22px; }
.wcu-reference-card h3 { font-size: 17px; }
.wcu-reference-card p { font-size: 14px; }
}
/* Tripadvisor profile and Google review carousel. */
.google-reviews-section { padding: 34px 0 48px; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; background: #f7f7f7; }
.google-reviews-container { max-width: 1376px; }
.tripadvisor-profile { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 224px; margin-bottom: 38px; padding: 26px 28px; border: 1px solid #34e27a; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.04); }
.tripadvisor-copy { min-width: 0; }
.tripadvisor-logo { display: block; width: 190px; height: 40px; margin-bottom: 14px; object-fit: contain; object-position: left center; }
.tripadvisor-copy h2 { margin: 0; color: #181e4b; font: 700 23px/1.3 var(--font-manrope); }
.tripadvisor-copy h2 a { color: inherit; text-decoration-color: #34e27a; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tripadvisor-location { display: flex; align-items: center; gap: 8px; margin: 7px 0 0; color: #52657c; font: 400 12px/1.4 var(--font-manrope); }
.tripadvisor-description { max-width: 700px; margin: 20px 0 0; color: #334155; font: 400 14px/1.5 var(--font-manrope); }
.tripadvisor-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 18px; border-radius: 9px; background: #00aa6c; color: white; font: 700 12px/1.2 var(--font-manrope); text-decoration: none; transition: background .2s ease; }
.tripadvisor-button:hover { background: #008f5b; }
.google-reviews-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.google-reviews-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid #f3d3c9; border-radius: 18px; background: #fff3ef; color: #df624e; font: 700 10px/1.2 var(--font-manrope); letter-spacing: .07em; }
.google-reviews-eyebrow img { width: 18px; height: 18px; object-fit: contain; }
.google-reviews-header h2 { margin: 12px 0 0; color: #181e4b; font: 700 clamp(25px, 2.4vw, 34px)/1.2 var(--font-serif); }
.google-reviews-header p { margin: 7px 0 0; color: #52657c; font: 400 13px/1.5 var(--font-manrope); }
.google-reviews-controls { display: flex; flex: 0 0 auto; gap: 10px; }
.google-reviews-arrow { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #dfe5ec; border-radius: 50%; background: #fff; color: #34465e; cursor: pointer; box-shadow: 0 1px 3px rgba(24,30,75,.07); transition: color .2s, border-color .2s; }
.google-reviews-arrow:hover { border-color: #4285f4; color: #4285f4; }
.google-reviews-track { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; scrollbar-width: none; }
.google-reviews-track::-webkit-scrollbar { display: none; }
.google-review-card { display: flex; flex: 0 0 min(88vw, 410px); min-height: 290px; flex-direction: column; padding: 22px 24px; border-radius: 19px; background: #f1f3f4; scroll-snap-align: start; }
.google-review-author { display: flex; align-items: center; gap: 12px; }
.google-review-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--avatar-color); color: #fff; font: 700 14px/1 var(--font-manrope); }
.google-review-author-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.google-review-author-copy strong { overflow: hidden; color: #111827; font: 700 13px/1.2 var(--font-manrope); text-overflow: ellipsis; white-space: nowrap; }
.google-review-author-copy span { color: #64748b; font: 400 10px/1.2 var(--font-manrope); }
.google-review-logo { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #fff; }
.google-review-logo img { width: 24px; height: 24px; }
.google-review-stars { display: flex; gap: 3px; margin: 14px 0 12px; color: #f4b400; font-size: 16px; }
.google-review-text { display: -webkit-box; flex: 1; margin: 0; overflow: hidden; color: #243247; font: 400 12px/1.6 var(--font-manrope); -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.google-review-link { width: fit-content; margin-top: 14px; color: #64748b; font: 600 10px/1.3 var(--font-manrope); text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 2px; }
.google-review-link:hover { color: #1a73e8; }
@media (max-width: 640px) {
.google-reviews-section { padding: 24px 0 34px; }
.google-reviews-container { padding-right: 16px; padding-left: 16px; }
.tripadvisor-profile { align-items: flex-start; flex-direction: column; gap: 18px; min-height: 0; margin-bottom: 30px; padding: 20px; }
.tripadvisor-copy h2 { font-size: 18px; }
.tripadvisor-description { margin-top: 13px; font-size: 12px; }
.tripadvisor-button { min-height: 42px; }
.google-reviews-header { align-items: flex-start; margin-bottom: 18px; }
.google-reviews-header h2 { font-size: 24px; }
.google-reviews-controls { gap: 6px; }
.google-reviews-arrow { width: 34px; height: 34px; }
.google-review-card { flex-basis: min(86vw, 360px); min-height: 260px; padding: 18px; }
}
/* Event cards match the compact editorial layout in the reference. */
.events-section-new.events-reference { padding: 36px 0 42px; background: #fff; }
.events-reference-container { width: calc(100% - 56px); max-width: 1400px; padding: 0; }
.events-reference .events-header { align-items: flex-end; margin: 0 0 28px; padding: 0; }
.events-reference .events-header-content { min-width: 0; }
.events-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 12px; border: 1px solid #f3d3c9; border-radius: 18px; background: #fff3ef; color: #df624e; font: 700 10px/1.2 var(--font-manrope); letter-spacing: .06em; }
.events-reference .events-main-title { color: #181e4b; font: 700 clamp(28px, 3vw, 38px)/1.15 var(--font-serif); letter-spacing: -.025em; }
.events-reference .events-subtitle { margin-top: 9px; color: #647996; font: 400 13px/1.5 var(--font-manrope); }
.events-view-all { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 38px; padding: 8px 15px; border: 1px solid #dce4ef; border-radius: 9px; color: #27364d; font: 600 10px/1.2 var(--font-manrope); text-decoration: none; transition: border-color .2s, color .2s; }
.events-view-all:hover { border-color: #df6951; color: #df6951; }
.events-view-all i { font-size: 11px; }
.events-reference .events-carousel-wrapper { margin-top: 0; overflow: hidden; }
.events-reference .events-carousel { gap: 32px; padding: 20px 0 22px; scroll-snap-type: x mandatory; }
.events-reference .event-card-premium { width: calc((100% - 64px) / 3); max-width: none; min-width: 300px; margin: 0; border: 1px solid #f0e5da; border-radius: 18px; box-shadow: 0 4px 14px rgba(55,45,35,.045); scroll-snap-align: start; }
.events-reference .event-card-premium:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(55,45,35,.1); }
.events-reference .card-image-section { height: 240px; flex: 0 0 240px; }
.events-reference .badge-overlay { top: 15px; left: 12px; right: 12px; justify-content: flex-start; }
.events-reference .category-badge { padding: 5px 10px; border-radius: 14px; background: #df6951; color: #fff; font-size: 9px; }
.events-reference .featured-badge { display: none; }
.events-reference .image-overlay-gradient { height: 45%; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); }
.events-reference .card-info-section { min-height: 242px; padding: 20px 24px 18px; }
.events-reference .event-card-location { gap: 7px; margin-bottom: 9px; color: #52657c; font-size: 11px; }
.events-reference .event-card-location i { width: 13px; color: #df6951; }
.events-reference .card-title { margin: 0 0 9px; color: #181e4b; font: 700 18px/1.35 var(--font-serif); }
.events-reference .card-description { display: -webkit-box; margin: 0 0 13px; overflow: hidden; color: #647996; font: 400 11px/1.55 var(--font-manrope); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.events-reference .card-footer-action { margin-top: auto; padding-top: 13px; border-top: 1px solid #edf0f3; }
.events-reference .price-value { color: #df624e; font: 600 11px/1.2 var(--font-manrope); }
.events-reference .event-details-link { display: inline-flex; align-items: center; gap: 7px; color: #df624e; font: 700 10px/1.2 var(--font-manrope); text-decoration: none; text-transform: uppercase; }
.events-reference .event-details-link:hover { color: #b64f2e; }
@media (max-width: 760px) {
.events-reference-container { width: calc(100% - 36px); }
.events-reference .events-header { align-items: flex-start; flex-direction: column; gap: 14px; }
.events-reference .events-main-title { font-size: 29px; }
.events-reference .events-carousel { gap: 16px; }
.events-reference .event-card-premium { width: min(84vw, 360px); min-width: min(84vw, 300px); }
.events-reference .card-image-section { height: 210px; flex-basis: 210px; }
}
/* Text-led Morocco exploration links and category tabs. */
.explore-morocco-section { padding: 76px 0 64px; background: linear-gradient(180deg, #fff 0%, #fdfaf6 100%); }
.explore-morocco-container { max-width: 1280px; }
.explore-morocco-header { max-width: 920px; }
.explore-morocco-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 12px; border: 1px solid #f3d3c9; border-radius: 18px; background: #fff7f4; color: #df624e; font: 700 10px/1.2 var(--font-manrope); letter-spacing: .07em; }
.explore-morocco-header h2 { margin: 0; color: #181e4b; font: 700 clamp(28px, 3vw, 38px)/1.18 var(--font-serif); letter-spacing: -.025em; }
.explore-morocco-header p { margin: 12px 0 22px; color: #52657c; font: 400 13px/1.8 var(--font-manrope); }
.explore-morocco-tabs { display: flex; align-items: center; gap: 32px; overflow-x: auto; border-bottom: 1px solid #e1e7ee; scrollbar-width: none; }
.explore-morocco-tabs::-webkit-scrollbar { display: none; }
.explore-tab { position: relative; flex: 0 0 auto; min-height: 42px; padding: 0 0 12px; border: 0; background: transparent; color: #52657c; cursor: pointer; font: 500 12px/1.2 var(--font-manrope); }
.explore-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; content: ''; }
.explore-tab:hover, .explore-tab.is-active { color: #df624e; }
.explore-tab.is-active::after { background: #df624e; }
.explore-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 230px; box-sizing: border-box; column-gap: 36px; row-gap: 30px; padding: 38px 12px 0; }
.explore-panel[hidden] { display: none; }
.explore-link-item { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: inherit; text-decoration: none; }
.explore-link-item strong { overflow: hidden; color: #181e4b; font: 700 12px/1.35 var(--font-manrope); text-overflow: ellipsis; white-space: nowrap; }
.explore-link-item span { display: -webkit-box; overflow: hidden; color: #52657c; font: 400 11px/1.75 var(--font-manrope); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.explore-link-item:hover strong { color: #df624e; }
@media (max-width: 800px) {
.explore-morocco-section { padding: 54px 0 46px; }
.explore-morocco-container { padding-right: 20px; padding-left: 20px; }
.explore-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); min-height: 386px; column-gap: 24px; row-gap: 24px; padding: 28px 4px 0; }
.explore-morocco-tabs { gap: 24px; }
}
@media (max-width: 480px) {
.explore-morocco-section { padding: 42px 0 36px; }
.explore-morocco-header h2 { font-size: 28px; }
.explore-morocco-header p { font-size: 12px; }
.explore-morocco-tabs { gap: 20px; }
.explore-tab { font-size: 11px; }
.explore-panel { column-gap: 16px; row-gap: 20px; }
.explore-link-item strong { font-size: 11px; }
.explore-link-item span { font-size: 10px; }
}
/* Compact two-panel contact section from the supplied reference. */
.contact-section.contact-reference { padding: 44px 0 48px !important; background: linear-gradient(180deg, #fff 0%, #fbf7f2 100%); }
.contact-reference-container { max-width: 1000px; }
.contact-reference .contact-header { margin-bottom: 24px; }
.contact-eyebrow { display: block; margin-bottom: 7px; color: #df624e; font: 700 9px/1.2 var(--font-manrope); letter-spacing: .13em; text-transform: uppercase; }
.contact-reference .contact-header .section-title { margin: 0; color: #181e4b; font: 700 clamp(22px, 2vw, 27px)/1.2 var(--font-serif); }
.contact-reference .contact-grid { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 18px; }
.contact-reference .contact-panel { min-width: 0; padding: 24px !important; border-radius: 18px !important; box-shadow: 0 8px 28px rgba(55,45,35,.08) !important; }
.contact-reference .contact-info-panel .info-title { margin: 0 0 5px; color: #181e4b; font: 700 18px/1.3 var(--font-serif); }
.contact-reference .contact-info-intro { margin: 0 0 18px !important; color: #52657c !important; font: 400 10px/1.7 var(--font-manrope) !important; }
.contact-reference .contact-detail-list { gap: 13px !important; }
.contact-reference .contact-detail-row { align-items: center !important; gap: 10px !important; }
.contact-reference .contact-detail-icon { width: 36px !important; height: 36px !important; flex: 0 0 36px; border-radius: 50% !important; background: rgba(223,105,81,.1) !important; color: #df624e !important; font-size: 14px !important; }
.contact-reference .contact-detail-copy h3 { margin: 0 0 3px !important; color: #181e4b !important; font: 600 10px/1.3 var(--font-manrope) !important; }
.contact-reference .contact-detail-copy p { margin: 0; color: #52657c !important; font: 400 9px/1.5 var(--font-manrope); }
.contact-reference .contact-response-banner { margin-top: 20px !important; padding: 11px 12px !important; border-radius: 9px !important; background: #fff9e9 !important; }
.contact-reference .contact-response-banner > div { gap: 8px !important; }
.contact-reference .contact-response-banner i { font-size: 13px !important; }
.contact-reference .contact-response-banner p { color: #27364d !important; font: 500 9px/1.3 var(--font-manrope); }
.contact-reference .contact-stats { gap: 10px !important; margin-top: 14px !important; }
.contact-reference .contact-stat-card { padding: 11px 8px !important; border-color: #e8edf2 !important; border-radius: 10px !important; }
.contact-reference .contact-stat-card > div { gap: 5px !important; margin-bottom: 4px !important; }
.contact-reference .contact-stat-card i { font-size: 11px; }
.contact-reference .contact-stat-card span { font-size: 16px !important; }
.contact-reference .contact-stat-card p { color: #647996 !important; font: 400 8px/1.3 var(--font-manrope); }
.contact-reference .contact-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.contact-reference .contact-tab { min-height: 34px; padding: 8px 12px; border: 0; border-radius: 9px; background: #f4f5f6; color: #34465e; cursor: pointer; font: 500 9px/1.2 var(--font-manrope); }
.contact-reference .contact-tab.is-active { background: #b94d30; color: #fff; box-shadow: 0 4px 10px rgba(176,80,48,.2); }
.contact-reference .contact-tab i { margin-right: 5px !important; }
.contact-reference .contact-form-panel form[style*="flex-direction"] { gap: 10px !important; }
.contact-reference .contact-form-banner { gap: 10px !important; margin: 0 0 2px !important; padding: 11px 13px !important; border-radius: 10px !important; }
.contact-reference .contact-form-banner > div:first-child { width: 36px !important; height: 36px !important; flex: 0 0 36px; border-radius: 9px !important; }
.contact-reference .contact-form-banner > div:first-child i { font-size: 15px !important; }
.contact-reference .contact-form-banner h2 { font-size: 14px !important; line-height: 1.25; }
.contact-reference .contact-form-banner p { margin-top: 3px !important; font-size: 8px !important; line-height: 1.35; }
.contact-reference .contact-form-panel label { margin-bottom: 4px !important; color: #27364d !important; font: 500 8px/1.3 var(--font-manrope) !important; }
.contact-reference .contact-form-panel input,
.contact-reference .contact-form-panel select,
.contact-reference .contact-form-panel textarea { width: 100%; min-height: 35px; padding: 8px 10px !important; border: 1px solid #e1e3e6 !important; border-radius: 8px !important; outline: none; background-color: #fafafa !important; color: #34465e; font: 400 9px/1.4 var(--font-manrope) !important; }
.contact-reference .contact-form-panel textarea { height: 80px; min-height: 80px; resize: vertical; }
.contact-reference .contact-form-panel form > div[style*="grid-template-columns"] { gap: 10px !important; }
.contact-reference .contact-form-panel button[type="submit"] { min-height: 39px; padding: 10px 16px !important; border-radius: 9px !important; background: #b94d30 !important; box-shadow: 0 6px 15px rgba(176,80,48,.2) !important; font: 600 9px/1.2 var(--font-manrope) !important; }
.contact-reference .contact-trust-row { gap: 12px !important; margin-top: 14px !important; padding-top: 12px !important; }
.contact-reference .contact-trust-row > div { gap: 5px !important; font: 400 8px/1.2 var(--font-manrope) !important; }
.contact-reference .contact-trust-row i { font-size: 10px !important; }
@media (max-width: 760px) {
.contact-section.contact-reference { padding: 36px 0 34px !important; }
.contact-reference-container { padding-right: 18px; padding-left: 18px; }
.contact-reference .contact-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
.contact-reference .contact-panel { padding: 18px !important; }
.contact-reference .contact-reference-header .section-title { font-size: 23px; }
.contact-reference .contact-form-panel form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.contact-reference .contact-trust-row { justify-content: flex-start !important; }
}
/* Footer layout and tone based on the supplied reference. */
.site-footer { padding: 34px 0 16px; overflow: hidden; background: #171d50; color: #fff; }
.site-footer::before { display: none; }
.site-footer > .container { width: calc(100% - 70px); max-width: 1400px; padding: 0; }
.site-footer .footer-content { grid-template-columns: 155px repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; padding-bottom: 28px; }
.site-footer .footer-brand .logo { margin-bottom: 12px; }
.site-footer .footer-brand .logo img { width: 58px; height: 58px; border-radius: 50%; object-fit: contain; }
.site-footer .footer-brand p { max-width: 155px; margin-bottom: 14px; color: rgba(255,255,255,.9); font: 400 10px/1.65 var(--font-manrope); }
.site-footer .social-links { gap: 8px; }
.site-footer .social-links a { width: 30px; height: 30px; background: rgba(255,255,255,.1); color: #fff; font-size: 11px; }
.site-footer .social-links a:hover { background: #df6951; transform: translateY(-2px); }
.site-footer .footer-links h3 { min-height: 30px; margin: 3px 0 12px; color: #fff; font: 700 13px/1.35 var(--font-serif); }
.site-footer .footer-links ul { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.site-footer .footer-links ul li { margin: 0; }
.site-footer .footer-links ul li a { display: inline; color: rgba(255,255,255,.9); font: 400 10px/1.55 var(--font-manrope); }
.site-footer .footer-links ul li a:hover { color: #f7aa65; transform: none; }
.site-footer .footer-seo-links { display: block; margin: 0; padding: 21px 0 23px; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.site-footer .footer-seo-links h3 { margin: 0 0 12px; color: #fff; font: 700 14px/1.3 var(--font-serif); }
.site-footer .footer-tag-links { gap: 7px; }
.site-footer .footer-tag-links a { min-height: 27px; padding: 5px 9px; border-color: rgba(255,255,255,.16); border-radius: 5px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.9); font: 500 9px/1.2 var(--font-manrope); }
.site-footer .footer-tag-links a:hover { border-color: #df6951; background: #b94d30; }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; border: 0; text-align: left; }
.site-footer .footer-bottom p { margin: 0; color: rgba(255,255,255,.72); font: 400 9px/1.4 var(--font-manrope); }
.site-footer .footer-bottom nav { display: flex; align-items: center; gap: 18px; }
.site-footer .footer-bottom nav a { color: rgba(255,255,255,.8); font: 400 9px/1.4 var(--font-manrope); text-decoration: none; }
.site-footer .footer-bottom nav a:hover { color: #f7aa65; }
@media (max-width: 1080px) {
.site-footer .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
.site-footer .footer-brand { grid-column: 1 / -1; }
.site-footer .footer-brand p { max-width: 420px; }
}
@media (max-width: 640px) {
.site-footer { padding-top: 28px; }
.site-footer > .container { width: calc(100% - 36px); }
.site-footer .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
.site-footer .footer-brand { grid-column: 1 / -1; }
.site-footer .footer-links h3 { font-size: 12px; }
.site-footer .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
}
/* Keep the favorites label and count aligned as one compact navbar control. */
.reference-header .header-favorites {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 7px;
min-width: max-content;
white-space: nowrap;
line-height: 1;
}
.reference-header .header-favorites > i { display: block; flex: 0 0 auto; }
.reference-header .favorites-count {
display: inline-flex;
flex: 0 0 23px;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
padding: 0;
border-radius: 50%;
background: #b94d30;
color: #fff;
font: 700 11px/1 var(--font-manrope);
box-sizing: border-box;
}
@media (max-width: 1279px) and (min-width: 640px) {
.reference-header .header-favorites > span:not(.favorites-count) { display: inline; }
}
@media (max-width: 639px) {
.reference-header .header-favorites { display: none; }
}
/* Center the hero mouse scroll cue and its inner wheel. */
.hero-morocco .hero-scroll-cue {
position: absolute;
width: 38px;
height: 56px;
}
.hero-morocco .hero-scroll-cue::before {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 48px;
border: 2px solid rgba(82, 101, 124, .7);
border-radius: 16px;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.hero-morocco .hero-scroll-cue::after {
position: absolute;
top: 9px;
left: 50%;
width: 2px;
height: 8px;
border-radius: 999px;
transform: translateX(-50%);
}
/* Align the Laravel layout sizing and typography with the supplied TSX components. */
.reference-header .header-inner { max-width: 1280px; padding: 0 16px; }
@media (min-width: 640px) {
.reference-header .header-inner { padding-right: 24px; padding-left: 24px; }
}
@media (min-width: 1024px) {
.reference-header .header-inner { padding-right: 32px; padding-left: 32px; }
}
.reference-header .brand-logo img { width: 78px; max-height: none; }
.reference-header .nav-list { gap: 20px; }
.reference-header .nav-link { font-size: 13px; }
.reference-header .header-actions { gap: 12px; }
.reference-header .header-favorites { height: 36px; min-height: 36px; gap: 6px; padding: 0 10px; font-size: 12px; }
.reference-header .header-favorites > i { width: 16px; height: 16px; font-size: 16px; }
.reference-header .favorites-count {
width: auto;
height: 16px;
min-width: 16px;
flex: 0 0 auto;
padding: 0 4px;
border-radius: 999px;
font-size: 10px;
line-height: 16px;
}
.reference-header .header-actions > .nav-item > .nav-link { min-height: 36px; padding: 6px 12px; font-size: 12px; }
@media (min-width: 1280px) {
.reference-header .nav-list { gap: 24px; }
.reference-header .header-favorites > span:not(.favorites-count) { display: inline; }
}
@media (max-width: 1279px) and (min-width: 640px) {
.reference-header .header-favorites > span:not(.favorites-count) { display: none; }
}
@media (max-width: 639px) {
.reference-header .brand-logo img { width: 68px; max-height: none; }
.reference-header .header-favorites { display: none; }
}
.site-footer { background: #181e4b; padding: 0; }
.site-footer > .container { width: 100%; max-width: 1280px; padding: 40px 20px; }
.site-footer .footer-content {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px 28px;
padding-bottom: 0;
}
.site-footer .footer-brand { grid-column: span 2; max-width: 24rem; }
.site-footer .footer-brand .logo { display: inline-flex; margin-bottom: 24px; }
.site-footer .footer-brand .logo img { width: 78px; height: auto; border-radius: 0; object-fit: contain; }
.site-footer .footer-brand p { max-width: none; margin: 0; color: #d7d9e7; font: 400 14px/1.625 var(--font-sans); }
.site-footer .social-links { gap: 10px; margin-top: 20px; }
.site-footer .social-links a { width: 40px; height: 40px; background: rgba(255,255,255,.1); font-size: 16px; }
.site-footer .footer-links h3 { min-height: 0; margin: 0 0 16px; font: 700 16px/1.35 var(--font-serif); }
.site-footer .footer-links ul { gap: 12px; }
.site-footer .footer-links ul li a { color: #d7d9e7; font: 400 14px/1.375 var(--font-sans); }
.site-footer .footer-seo-links { margin-top: 40px; padding: 28px 0 0; border-bottom: 0; }
.site-footer .footer-seo-links h3 { margin-bottom: 16px; font: 700 18px/1.35 var(--font-serif); }
.site-footer .footer-tag-links { gap: 8px; }
.site-footer .footer-tag-links a { min-height: 0; padding: 8px 12px; font: 600 12px/1.35 var(--font-sans); }
.site-footer .footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.site-footer .footer-bottom p,
.site-footer .footer-bottom nav a { color: #aeb3ca; font: 400 12px/1.4 var(--font-sans); }
.site-footer .footer-bottom nav { gap: 20px; }
@media (min-width: 640px) {
.site-footer > .container { padding: 48px 32px; }
.site-footer .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer .footer-brand { grid-column: span 1; }
}
@media (min-width: 1024px) {
.site-footer > .container { padding: 48px 40px; }
.site-footer .footer-content { grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); gap: 36px 28px; }
}
@media (max-width: 639px) {
.site-footer .footer-bottom { align-items: center; }
}
body:has(.hero-morocco) .floating-devis-btn {
left: 24px !important;
bottom: 24px !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100vw - 7rem) !important;
height: auto !important;
min-height: 0 !important;
padding: 12px 16px !important;
gap: 10px !important;
border-radius: 999px !important;
font: 600 14px/1.35 var(--font-sans) !important;
}
body:has(.hero-morocco) .floating-devis-btn i { width: 20px; height: 20px; font-size: 20px; }
body:has(.hero-morocco) .floating-devis-btn span { display: inline !important; }
body:has(.hero-morocco) .floating-whatsapp-btn {
right: 24px !important;
bottom: 24px !important;
width: 56px !important;
height: 56px !important;
border: 0 !important;
font-size: 28px !important;
}
body:has(.hero-morocco) .floating-whatsapp-btn i { font-size: 28px; }
@media (max-width: 639px) {
body:has(.hero-morocco) .floating-devis-btn { left: 24px !important; bottom: 24px !important; width: auto !important; height: auto !important; padding: 12px 16px !important; }
body:has(.hero-morocco) .floating-devis-btn span { display: inline !important; }
body:has(.hero-morocco) .floating-whatsapp-btn { right: 24px !important; bottom: 24px !important; width: 56px !important; height: 56px !important; font-size: 28px !important; }
}
/* Match the responsive text scales used by the supplied home section components. */
.tours-reference .tours-main-title { font-size: clamp(24px, 2.35vw, 32px); }
.tours-reference .tours-subtitle { font-size: 12px; }
@media (min-width: 640px) {
.tours-reference .tours-subtitle { font-size: 14px; }
}
@media (max-width: 760px) {
.tours-reference .tours-main-title { font-size: clamp(24px, 6vw, 30px); }
}
.destinations-reference .popular-title { font-size: clamp(24px, 2.5vw, 32px); }
.destinations-reference .popular-subtitle { font-size: 12px; }
@media (min-width: 640px) {
.destinations-reference .popular-title { font-size: 30px; }
.destinations-reference .popular-subtitle { font-size: 14px; }
}
@media (min-width: 1024px) {
.destinations-reference .popular-title { font-size: 32px; }
}
.events-reference .events-main-title { font-size: clamp(24px, 2.5vw, 34px); }
.events-reference .events-subtitle { font-size: 12px; }
.events-reference .card-title { font-size: 18px; }
.events-reference .card-description { font-size: 12px; }
@media (min-width: 640px) {
.events-reference .events-subtitle { font-size: 14px; }
.events-reference .card-title { font-size: 20px; }
}
@media (max-width: 760px) {
.events-reference .events-main-title { font-size: 29px; }
}
.explore-morocco-header h2 { font-size: clamp(24px, 2.5vw, 34px); }
.explore-morocco-header p { font-size: 14px; line-height: 24px; }
.explore-link-item strong { font-size: 13px; }
.explore-link-item span { font-size: 12px; }
@media (max-width: 480px) {
.explore-morocco-header h2 { font-size: 28px; }
.explore-morocco-header p { font-size: 12px; }
}
/* Benefit cards use the responsive type scale from WhyChooseUs.tsx. */
.wcu-section.wcu-reference { padding: 64px 0; }
.wcu-reference .wcu-section-header { margin-bottom: 48px; }
.wcu-eyebrow { gap: 6px; margin-bottom: 10px; padding: 4px 12px; font-size: 11px; }
.wcu-reference .wcu-section-title { font-size: clamp(24px, 2.5vw, 34px); }
.wcu-reference .wcu-section-subtitle { margin-top: 8px; font-size: 12px; }
.wcu-reference-grid { gap: 24px; }
.wcu-reference-card { padding: 24px; border-radius: 16px; }
.wcu-reference-icon { width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px; font-size: 20px; }
.wcu-reference-card h3 { font-size: 15px; }
.wcu-reference-card p { font-size: 12px; }
@media (min-width: 640px) {
.wcu-section.wcu-reference { padding: 80px 0; }
.wcu-reference .wcu-section-header { margin-bottom: 64px; }
.wcu-reference .wcu-section-title { font-size: 30px; }
.wcu-reference .wcu-section-subtitle,
.wcu-reference-card p { font-size: 14px; }
.wcu-reference-grid { gap: 24px; }
.wcu-reference-card { padding: 28px; }
.wcu-reference-card h3 { font-size: 16px; }
}
@media (min-width: 1024px) {
.wcu-section.wcu-reference { padding: 96px 0; }
.wcu-reference .wcu-section-title { font-size: 34px; }
.wcu-reference-grid { gap: 32px; }
}
@media (max-width: 600px) {
.wcu-section.wcu-reference { padding: 64px 0; }
.wcu-reference .wcu-section-header { margin-bottom: 48px; }
.wcu-reference .wcu-section-title { font-size: 24px; }
.wcu-reference .wcu-section-subtitle { font-size: 12px; }
.wcu-reference-card { padding: 24px; border-radius: 16px; }
.wcu-reference-icon { width: 52px; height: 52px; margin-bottom: 20px; font-size: 20px; }
.wcu-reference-card h3 { font-size: 15px; }
.wcu-reference-card p { font-size: 12px; }
}
/* Match the testimonial profile and review card dimensions in the supplied TSX. */
.google-reviews-section { padding: 48px 0; }
.tripadvisor-profile { min-height: 0; margin-bottom: 36px; padding: 20px; }
.tripadvisor-logo { width: 170px; height: 36px; margin-bottom: 16px; }
.tripadvisor-copy h2 { font-size: 20px; }
.tripadvisor-copy .tripadvisor-description { margin-top: 12px; font-size: 14px; line-height: 24px; }
.google-reviews-header { margin-bottom: 24px; }
.google-reviews-header h2 { font-size: 24px; }
.google-reviews-header p { font-size: 14px; }
.google-review-card { flex-basis: min(88vw, 360px); min-height: 235px; padding: 20px; border-radius: 16px; }
.google-review-avatar { width: 40px; height: 40px; font-size: 14px; }
.google-review-author-copy strong { font-size: 14px; }
.google-review-author-copy span { font-size: 12px; }
.google-review-logo { width: 32px; height: 32px; }
.google-review-stars { gap: 2px; margin: 12px 0; font-size: 18px; }
.google-review-text { font-size: 13px; line-height: 20px; }
.google-review-link { font-size: 12px; }
@media (min-width: 640px) {
.google-reviews-section { padding: 64px 0; }
.tripadvisor-profile { padding: 24px; }
.tripadvisor-copy h2 { font-size: 24px; }
.google-reviews-header { margin-bottom: 32px; }
.google-reviews-header h2 { font-size: 30px; }
.google-review-card { flex-basis: 365px; padding: 24px; }
}
/* Bring contact and tour components in line with the supplied TSX sizing. */
.contact-reference-container { max-width: 1280px; }
.contact-section.contact-reference { padding: 56px 0 64px !important; }
.contact-reference .contact-header { margin-bottom: 32px; }
.contact-reference .contact-header .section-title { font-size: clamp(26px, 2.2vw, 34px); }
.contact-eyebrow { font-size: 12px; }
.contact-reference .contact-grid { gap: 24px; }
.contact-reference .contact-panel { padding: 28px !important; border-radius: 24px !important; }
.contact-reference .contact-info-panel .info-title { font-size: 20px; }
.contact-reference .contact-info-intro { margin-bottom: 24px !important; font-size: 14px !important; line-height: 24px !important; }
.contact-reference .contact-detail-list { gap: 20px !important; }
.contact-reference .contact-detail-row { gap: 12px !important; }
.contact-reference .contact-detail-icon { width: 48px !important; height: 48px !important; flex-basis: 48px; font-size: 18px !important; }
.contact-reference .contact-detail-copy h3 { font-size: 14px !important; }
.contact-reference .contact-detail-copy p { font-size: 14px !important; line-height: 1.5; }
.contact-reference .contact-response-banner { margin-top: 28px !important; padding: 14px 16px !important; border-radius: 12px !important; }
.contact-reference .contact-response-banner p { font-size: 13px !important; }
.contact-reference .contact-stats { gap: 12px !important; margin-top: 16px !important; }
.contact-reference .contact-stat-card { padding: 16px !important; border-radius: 14px !important; }
.contact-reference .contact-stat-card span { font-size: 24px !important; }
.contact-reference .contact-stat-card p { font-size: 12px !important; }
.contact-reference .contact-tabs { gap: 8px; margin-bottom: 20px; }
.contact-reference .contact-tab { min-height: 44px; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.contact-reference .contact-form-panel form[style*="flex-direction"] { gap: 16px !important; }
.contact-reference .contact-form-banner { gap: 16px !important; padding: 18px 20px !important; border-radius: 16px !important; }
.contact-reference .contact-form-banner > div:first-child { width: 48px !important; height: 48px !important; flex-basis: 48px; border-radius: 12px !important; }
.contact-reference .contact-form-banner h2 { font-size: 20px !important; }
.contact-reference .contact-form-banner p { font-size: 12px !important; }
.contact-reference .contact-form-panel label { margin-bottom: 6px !important; font-size: 12px !important; }
.contact-reference .contact-form-panel input,
.contact-reference .contact-form-panel select,
.contact-reference .contact-form-panel textarea { min-height: 44px; padding: 10px 14px !important; border-width: 1px !important; border-radius: 10px !important; font-size: 14px !important; }
.contact-reference .contact-form-panel textarea { height: 100px; min-height: 100px; }
.contact-reference .contact-form-panel form > div[style*="grid-template-columns"] { gap: 16px !important; }
.contact-reference .contact-form-panel button[type="submit"] { min-height: 48px; padding: 14px 20px !important; border-radius: 12px !important; font-size: 14px !important; }
.contact-reference .contact-trust-row { gap: 16px !important; margin-top: 20px !important; padding-top: 16px !important; }
.contact-reference .contact-trust-row > div { gap: 6px !important; font-size: 11px !important; }
body .tours-reference .tour-card-new,
.tours-grid-container .tour-card-new,
.td-related-grid .tour-card-new {
width: min(82vw, 275px);
max-width: min(82vw, 275px);
min-height: 0;
margin: 0;
border-radius: 16px;
}
body .tours-reference .promo-image-wrapper,
.tours-grid-container .promo-image-wrapper,
.td-related-grid .promo-image-wrapper { height: auto; aspect-ratio: 16 / 10.5; }
body .tours-reference .promo-content,
.tours-grid-container .promo-content,
.td-related-grid .promo-content { flex: 1; margin-top: 0; padding: 14px 16px; border-radius: 0; }
body .tours-reference .promo-title,
.tours-grid-container .promo-title,
.td-related-grid .promo-title { min-height: 0; margin-bottom: 6px; font-size: 14px; line-height: 1.4; }
body .tours-reference .promo-rating-row,
.tours-grid-container .promo-rating-row,
.td-related-grid .promo-rating-row { gap: 6px; margin-bottom: 7px; }
body .tours-reference .rating-badge,
.tours-grid-container .rating-badge,
.td-related-grid .rating-badge { padding: 3px 7px; font-size: 10px; }
body .tours-reference .rating-label,
.tours-grid-container .rating-label,
.td-related-grid .rating-label { font-size: 11px; }
body .tours-reference .rating-count,
.tours-grid-container .rating-count,
.td-related-grid .rating-count { font-size: 10px; }
body .tours-reference .promo-meta-row,
.tours-grid-container .promo-meta-row,
.td-related-grid .promo-meta-row { margin-bottom: 6px; }
body .tours-reference .promo-duration,
.tours-grid-container .promo-duration,
.td-related-grid .promo-duration { font-size: 11px; }
body .tours-reference .tour-departure,
.tours-grid-container .tour-departure,
.td-related-grid .tour-departure { margin-bottom: 8px; font-size: 10px; }
body .tours-reference .promo-footer,
.tours-grid-container .promo-footer,
.td-related-grid .promo-footer { margin-top: auto; }
body .tours-reference .btn-book-now,
body .tours-reference .btn-view-details,
.tours-grid-container .btn-book-now,
.tours-grid-container .btn-view-details,
.td-related-grid .btn-book-now,
.td-related-grid .btn-view-details { min-height: 36px; padding: 8px 6px; border-radius: 9px; font-size: 11px; }
body .tours-reference .tour-favorite,
.tours-grid-container .tour-favorite,
.td-related-grid .tour-favorite { width: 40px; height: 40px; font-size: 18px; }
.tours-grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tours-grid-container .tour-card-new { width: 100%; max-width: none; }
.tours-sidebar { width: 100%; max-width: 260px; }
.filter-card { padding: 20px; border-radius: 16px; }
.filter-title { font-size: 16px; }
.filter-header { min-height: 28px; }
.filter-content { gap: 8px; }
.checkbox-container { font-size: 14px; }
.tours-toolbar { margin-bottom: 20px; }
.view-toggle { gap: 4px; padding: 4px; border-radius: 10px; }
.view-btn { width: 36px; height: 36px; font-size: 14px; }
.tour-detail-page { padding: 32px 0 64px; }
.tour-detail-hero { border-radius: 16px; aspect-ratio: 4 / 3; }
.td-gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.td-gallery-thumb { aspect-ratio: 4 / 3; border-radius: 8px; }
.td-tabs-card { border-radius: 16px; }
.td-tabs-nav { display: flex; overflow-x: auto; background: #fff; }
.td-tabs-nav .td-tab-label { flex: 0 0 auto; min-height: 48px; padding: 12px 20px; font-size: 14px; white-space: nowrap; }
.td-tabs-panel { padding: 24px; }
.td-text { font-size: 14px; line-height: 1.75; }
.td-section-title { font-size: 24px; }
.td-panel-title { font-size: 18px; }
.td-highlight-list li,
.td-check-list li { font-size: 14px; line-height: 1.6; }
.td-booking-card { border-radius: 16px; }
.td-form-field label { font-size: 14px; }
.td-input { padding-top: 10px; padding-bottom: 10px; border-radius: 10px; }
.td-book-btn { padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.td-itinerary { border-radius: 16px; }
.td-itinerary-head { padding: 16px 20px; font-size: 16px; }
.td-itinerary-body { padding: 16px 20px; }
.td-itinerary-body p,
.td-itinerary-body ul { font-size: 14px; line-height: 1.7; }
.td-related-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.td-lightbox { background: rgba(0, 0, 0, .95); padding: 16px; box-sizing: border-box; }
.td-lightbox img { max-width: min(100%, 1024px); max-height: 72vh; }
.tour-detail-page .circuit-leaflet-map { height: 400px !important; }
.booking-modal .modal-content { width: calc(100% - 32px); max-width: 512px; max-height: calc(100vh - 32px); padding: 24px; border-radius: 16px; }
.booking-modal .modal-header { margin-bottom: 16px; padding-bottom: 16px; }
.booking-modal .modal-header h3 { font-size: 20px; }
.booking-modal .form-group { margin-bottom: 16px; }
.booking-modal .form-group label { font-size: 14px; }
.booking-modal .form-input { padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.booking-modal .submit-btn { padding: 12px 16px; border-radius: 12px; font-size: 14px; }
@media (min-width: 640px) {
.contact-reference .contact-panel { padding: 32px !important; }
.td-tabs-nav .td-tab-label { font-size: 14px; }
}
@media (max-width: 1023px) {
.tours-grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.contact-section.contact-reference { padding: 40px 0 !important; }
.contact-reference-container { padding-right: 18px; padding-left: 18px; }
.contact-reference .contact-grid { grid-template-columns: 1fr; gap: 16px; }
.contact-reference .contact-panel { padding: 20px !important; }
.contact-reference .contact-form-panel form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.contact-reference .contact-trust-row { justify-content: flex-start !important; flex-wrap: wrap; }
.tours-grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tours-sidebar { max-width: none; }
.td-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tour-detail-page .circuit-leaflet-map { height: 340px !important; }
.td-inclusions-grid,
.td-inclusions-two-col { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 520px) {
.tours-grid-container { grid-template-columns: 1fr; }
.tours-grid-container .tour-card-new { width: min(88vw, 340px); max-width: min(88vw, 340px); margin: 0 auto; }
.td-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tour-detail-page .circuit-leaflet-map { height: 280px !important; }
.td-tabs-panel { padding: 18px; }
.td-highlight-list { grid-template-columns: 1fr; }
}
/* Keep tour departure details close to the card actions and prevent grid stretch gaps. */
.tours-grid-container { align-content: start; grid-auto-rows: max-content; }
.tours-grid-container .tour-card-new,
.td-related-grid .tour-card-new { height: auto; align-self: start; }
body .tours-reference .promo-content,
.tours-grid-container .promo-content,
.td-related-grid .promo-content { flex: 0 0 auto; }
body .tours-reference .tour-departure,
.tours-grid-container .tour-departure,
.td-related-grid .tour-departure { margin: 0 0 8px; }
body .tours-reference .promo-footer,
.tours-grid-container .promo-footer,
.td-related-grid .promo-footer { margin-top: 0; }
/* Keep benefit card copy at the reference scale and let its height fit the text. */
.wcu-reference-card { min-height: 338px; aspect-ratio: auto; padding: 24px; }
.wcu-reference-card h3 { margin-bottom: 9px; font-size: 16px; line-height: 1.4; }
.wcu-reference-card p { font-size: 14px; line-height: 1.6; }
@media (max-width: 767px) {
.wcu-reference-card { min-height: 0; padding: 22px; }
.wcu-reference-card h3 { font-size: 16px; }
.wcu-reference-card p { font-size: 14px; }
}
/* Compact equal-height commitment cards, sized to the longest description. */
.wcu-reference-grid { align-items: stretch; }
.wcu-reference-card { min-height: 0; height: 100%; aspect-ratio: auto; }
.wcu-reference-card p { min-height: 6.4em; }
@media (max-width: 767px) {
.wcu-reference-card { height: auto; }
.wcu-reference-card p { min-height: 0; }
}
/* Event cards share one image crop and compact, consistent content height. */
.events-reference .events-carousel { align-items: stretch; }
.events-reference .event-card-premium { height: auto; align-self: stretch; }
.events-reference .card-image-section { height: 210px; flex: 0 0 210px; overflow: hidden; }
.events-reference .card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.events-reference .card-info-section { min-height: 0; flex-grow: 0; padding: 18px 20px; }
.events-reference .card-title { min-height: 2.7em; margin-bottom: 8px; }
.events-reference .card-description { min-height: 4.65em; margin-bottom: 12px; }
.events-reference .card-footer-action { margin-top: 0; padding-top: 12px; }
@media (max-width: 760px) {
.events-reference .card-image-section { height: 190px; flex-basis: 190px; }
}
/* Keep carousel cards compact and give tour and excursion photos the same crop. */
.tours-reference .tours-carousel { align-items: flex-start; }
body .tours-reference .promo-image-wrapper {
height: 180px !important;
min-height: 180px;
aspect-ratio: auto;
flex: 0 0 180px;
overflow: hidden;
}
body .tours-reference .promo-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body .tours-reference .tour-card-new { height: auto; min-height: 0; align-self: flex-start; }
body .tours-reference .promo-content { flex: 0 0 auto; }
body .tours-reference .promo-title {
min-height: 2.8em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Slightly smaller type across the customer review section. */
.google-reviews-header h2 { font-size: 26px; }
.google-reviews-header p { font-size: 12px; }
.google-reviews-eyebrow { font-size: 10px; }
.tripadvisor-copy h2 { font-size: 22px; }
.tripadvisor-copy .tripadvisor-description { font-size: 12px; line-height: 20px; }
.google-review-author-copy strong { font-size: 13px; }
.google-review-author-copy span { font-size: 11px; }
.google-review-stars { font-size: 16px; }
.google-review-text { font-size: 12px; line-height: 18px; }
.google-review-link { font-size: 11px; }
@media (max-width: 639px) {
.google-reviews-header h2 { font-size: 22px; }
.google-review-card { padding: 18px; }
.google-review-text { font-size: 11px; line-height: 17px; }
}
@keyframes hero-scroll-wheel-down {
0% { top: 9px; opacity: 1; }
70% { top: 24px; opacity: .25; }
100% { top: 24px; opacity: 0; }
}
.hero-morocco .hero-scroll-cue::after {
left: 50%;
transform: translateX(-50%);
animation: hero-scroll-wheel-down 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.hero-morocco .hero-scroll-cue::after { animation: none; }
}
/* Mobile navigation opens downward below the header. */
@media (max-width: 992px) {
.mobile-menu-overlay {
top: 0;
}
.mobile-nav {
top: 62px;
right: auto;
left: 0;
width: 100%;
max-width: none;
height: auto;
max-height: calc(100vh - 62px);
padding: 10px 0 18px;
border-radius: 0 0 18px 18px;
box-shadow: 0 12px 28px rgba(24, 30, 75, .16);
transform: translateY(-18px);
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.mobile-menu-overlay.active .mobile-nav {
transform: translateY(0);
}
.mobile-nav-list {
max-height: min(62vh, 520px);
overflow-y: auto;
}
.mobile-nav-item:has(.mobile-subnav) > .mobile-nav-link::after {
content: '\f078';
margin-left: auto;
color: #8a98aa;
font: 900 10px/1 'Font Awesome 6 Free';
transition: transform .2s ease, color .2s ease;
}
.mobile-nav-item.expanded:has(.mobile-subnav) > .mobile-nav-link::after {
color: var(--primary-color);
transform: rotate(180deg);
}
.mobile-subnav {
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
}
.mobile-nav-item.expanded .mobile-subnav {
max-height: 280px;
padding-bottom: 10px;
opacity: 1;
}
.mobile-subnav a {
padding-top: 7px;
padding-bottom: 7px;
}
.mobile-lang-selector {
display: none;
}
body.has-announcement .mobile-nav {
top: 97px;
max-height: calc(100vh - 97px);
}
}
/* Shared inquiry form field, status, and booking card states. */
.inquiry-error-summary { padding: 12px 14px; border: 1px solid #FDA4AF; border-radius: 10px; background: #FFF1F2; color: #BE123C; font-size: 13px; line-height: 1.5; }
.inquiry-error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.td-booking-form .td-form-field label { color: #334155; font-weight: 600; }
.td-booking-form .td-input {
min-height: 44px;
border: 1px solid #E8E8E8 !important;
border-radius: 10px;
background-color: #FAFAFA;
color: #181E4B;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.td-booking-form .td-input:focus {
border-color: #DF6951 !important;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(223, 105, 81, .15);
}
.td-booking-form textarea.td-input { min-height: 96px; resize: vertical; }
.td-booking-form .td-book-btn {
min-height: 46px;
border-radius: 12px;
background: #B64F2E;
box-shadow: 0 6px 16px rgba(182, 79, 46, .18);
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.td-booking-form .td-book-btn:hover,
.td-booking-form .td-book-btn:focus-visible { background: #9F4227; box-shadow: 0 8px 20px rgba(182, 79, 46, .24); transform: translateY(-1px); }
.td-booking-form .td-book-btn:focus-visible { outline: 3px solid rgba(223, 105, 81, .25); outline-offset: 2px; }
.td-booking-form .td-book-btn:disabled { cursor: wait; opacity: .65; }
.td-booking-form .td-whatsapp-btn { border-color: #6EE7B7; background: #ECFDF5; color: #047857; }
.td-booking-form .td-whatsapp-btn:hover,
.td-booking-form .td-whatsapp-btn:focus-visible { border-color: #34D399; background: #D1FAE5; color: #047857; }
.td-booking-form .inquiry-error-summary { margin: 0 0 4px; }
@media (prefers-reduced-motion: reduce) {
.td-booking-form .td-input,
.td-booking-form .td-book-btn,
.td-booking-form .td-whatsapp-btn { transition: none; }
}
/* Keep tour-card action buttons the same size on narrow screens. */
@media (max-width: 600px) {
.tour-card-new .promo-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
}
.tour-card-new .promo-actions > .btn-book-now,
.tour-card-new .promo-actions > .btn-view-details {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 42px;
min-height: 42px;
width: 100%;
margin: 0;
padding: 0 8px;
line-height: 1.2;
transform: none;
}
}
/* Compact the fixed site navigation while keeping page offsets aligned. */
.reference-header {
height: 56px;
min-height: 56px;
padding: 4px 0;
}
body:has(.reference-header):not(.has-announcement) { padding-top: 56px !important; }
body.has-announcement:has(.reference-header) { padding-top: 91px !important; }
@media (max-width: 639px) {
.reference-header {
height: 48px;
min-height: 48px;
padding: 2px 0;
}
body:has(.reference-header):not(.has-announcement) { padding-top: 48px !important; }
body.has-announcement:has(.reference-header) { padding-top: 83px !important; }
}
@media (max-width: 639px) {
.mobile-nav {
top: 58px;
max-height: calc(100vh - 58px);
}
body.has-announcement .mobile-nav {
top: 93px;
max-height: calc(100vh - 93px);
}
}
/* A calmer, consistent rhythm across homepage sections. */
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference { padding-top: 48px; padding-bottom: 42px; }
.popular-destinations.destinations-reference { padding-top: 60px; padding-bottom: 56px; }
.popular-destinations.destinations-reference.destination-index-reference { padding-top: 18px !important; }
.destinations-listing-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 0 0 20px 0; color: #bd812f; font: 500 11px/1.4 var(--font-manrope); }
.destinations-listing-breadcrumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.destinations-listing-breadcrumb a:hover { color: var(--primary-color, #DF6951); }
.destinations-listing-breadcrumb .fa-house { font-size: 12px; }
.destinations-listing-breadcrumb .fa-chevron-right { font-size: 8px; opacity: 0.75; }
.destinations-listing-breadcrumb span { color: #16120e; font-weight: 500; }
.destination-index-reference .header-text { width: 100%; align-items: center; text-align: center; }
.destination-index-reference .popular-title { width: 100%; text-align: center !important; }
.wcu-section.wcu-reference { padding-top: 72px; padding-bottom: 64px; }
.google-reviews-section { padding-top: 56px; padding-bottom: 56px; background: linear-gradient(180deg, #faf6f0 0%, #f7f7f7 100%); }
.events-section-new.events-reference { padding-top: 58px; padding-bottom: 56px; }
.explore-morocco-section { padding-top: 64px; padding-bottom: 60px; }
.contact-section.contact-reference { padding-top: 64px !important; padding-bottom: 72px !important; }
/* Separate contact form labels, fields, and form groups clearly. */
.contact-reference .contact-form-panel form[style*="flex-direction"] { gap: 18px !important; }
.contact-reference .contact-form-panel label { display: block; margin-bottom: 8px !important; }
.contact-reference .contact-form-panel input,
.contact-reference .contact-form-panel select,
.contact-reference .contact-form-panel textarea { display: block; margin-top: 0; }
.contact-reference .contact-form-panel button[type="submit"] { margin-top: 4px; transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.contact-reference .contact-form-panel button[type="submit"]:hover { background-color: #984322 !important; box-shadow: 0 8px 18px rgba(176,80,48,.24) !important; transform: translateY(-1px); }
.contact-reference .contact-form-panel input,
.contact-reference .contact-form-panel select,
.contact-reference .contact-form-panel textarea { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.contact-reference .contact-form-panel input:focus,
.contact-reference .contact-form-panel select:focus,
.contact-reference .contact-form-panel textarea:focus { border-color: #df6951 !important; box-shadow: 0 0 0 3px rgba(223,105,81,.12); }
/* Harmonize interactive transitions across homepage cards and controls. */
.hero-morocco .btn-primary,
.hero-morocco .follow-icon,
.tours-reference .tour-card-new,
.tours-reference .nav-arrow,
.tours-reference .btn-load-more-tours,
.events-reference .event-card-premium,
.events-reference .events-view-all,
.events-reference .event-details-link,
.google-reviews-section a,
.google-reviews-section button,
.popular-destinations .destination-card,
.wcu-reference-card,
.explore-morocco-section a {
transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.tours-reference .btn-load-more-tours:hover,
.events-reference .events-view-all:hover { transform: translateY(-2px); }
.tours-reference .tour-card-new:hover,
.events-reference .event-card-premium:hover,
.wcu-reference-card:hover { box-shadow: 0 12px 28px rgba(55,45,35,.1); }
@keyframes homepage-section-reveal {
from { opacity: .65; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference,
.popular-destinations.destinations-reference,
.wcu-section.wcu-reference,
.google-reviews-section,
.events-section-new.events-reference,
.explore-morocco-section,
.contact-section.contact-reference {
animation: homepage-section-reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 22%;
}
}
@media (max-width: 767px) {
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference { padding-top: 40px; padding-bottom: 36px; }
.popular-destinations.destinations-reference,
.wcu-section.wcu-reference,
.google-reviews-section,
.events-section-new.events-reference,
.explore-morocco-section,
.contact-section.contact-reference { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (prefers-reduced-motion: reduce) {
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference,
.popular-destinations.destinations-reference,
.wcu-section.wcu-reference,
.google-reviews-section,
.events-section-new.events-reference,
.explore-morocco-section,
.contact-section.contact-reference { animation: none !important; }
.hero-morocco *,
.tours-reference *,
.events-reference *,
.contact-reference * { scroll-behavior: auto; }
}
/* Tour detail panels aligned with BookingForm and TourDetailTabs. */
.td-tabs-card { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.td-tabs-nav { display: flex; justify-content: flex-start; gap: 4px; overflow-x: auto; background: #fff; scrollbar-width: none; }
.td-tabs-nav::-webkit-scrollbar { display: none; }
.td-tabs-nav .td-tab-label { flex: 0 0 auto; min-height: 48px; padding: 12px 16px; color: #64748b; font-size: 13px; white-space: nowrap; }
.td-tab-presentation-input:checked~.td-tabs-nav .td-tab-presentation-label,
.td-tab-included-input:checked~.td-tabs-nav .td-tab-included-label,
.td-tab-program-input:checked~.td-tabs-nav .td-tab-program-label,
.td-tab-options-input:checked~.td-tabs-nav .td-tab-options-label { background: transparent; color: #1e293b; }
.td-tabs-nav .td-tab-label::after { border-radius: 999px; }
.td-tabs-panel { padding: 24px 0; }
.td-booking-card { overflow: hidden; padding: 0; border-color: #e2e8f0; border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.td-booking-price { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 24px 24px 16px; border-bottom-color: #f1f5f9; }
.td-price-amount { color: #c45a3c; font-size: 20px; line-height: 1.35; }
.td-price-unit { color: #64748b; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.td-booking-success { margin: 16px 24px 0; }
.td-booking-form { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
.td-form-field { margin: 0; }
.td-form-field label { margin-bottom: 6px; color: #334155; font-size: 14px; }
.td-input { min-height: 40px; padding: 9px 14px; border-color: #cbd5e1; border-radius: 9px; font-size: 14px; }
.td-booking-form textarea.td-input { min-height: 96px; resize: vertical; }
.td-book-btn { margin-top: 0; padding: 12px 16px; border-radius: 12px; background: #df6951; font-size: 14px; }
.td-book-btn:hover { background: #c45a3c; }
.td-whatsapp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 10px 14px; border: 1px solid #a7f3d0; border-radius: 12px; background: #ecfdf5; color: #047857; font: 600 14px/1.25 var(--font-manrope); text-align: center; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.td-whatsapp-btn:hover { border-color: #6ee7b7; background: #d1fae5; }
/* TSX TourInclusions: separate highlight, included, and option cards. */
.td-inclusions-two-col { gap: 24px; }
.td-inclusions-two-col .td-col-left,
.td-inclusions-two-col .td-col-right { gap: 14px; padding: 24px; border: 1px solid #e7e5e4; border-radius: 20px; background: #fff; box-shadow: 0 2px 8px rgba(26,15,10,.04); }
.td-inclusions-two-col .td-col-left { background: #faf8f5; }
.td-inclusions-two-col .td-panel-title,
.td-inclusions-two-col .td-section-title { margin: 0; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; font-size: 18px; }
.td-highlight-list { grid-template-columns: 1fr; gap: 12px; }
.td-highlight-list li,
.td-check-list li { gap: 10px; font-size: 13px; line-height: 1.55; }
/* Horizontal related tour rail with TSX-style arrow controls. */
.td-related { position: relative; }
.td-related-controls { display: flex; justify-content: flex-end; gap: 8px; margin: -8px 0 12px; }
.td-related-controls button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; color: #334155; box-shadow: 0 1px 3px rgba(15,23,42,.06); cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.td-related-controls button:hover { border-color: #df6951; color: #c45a3c; }
.td-related-grid { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 0 16px; scrollbar-width: none; }
.td-related-grid::-webkit-scrollbar { display: none; }
.td-related-grid .tour-card-new { flex: 0 0 275px; width: 275px; max-width: 275px; scroll-snap-align: start; }
.td-related-grid .promo-image-wrapper { height: auto; min-height: 0; aspect-ratio: 16 / 10.5; flex: 0 0 auto; }
.td-related-grid .promo-content { flex: 1; }
/* TourQuoteModal layout: paired fields, with message and submit full width. */
.booking-modal #bookingForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.booking-modal #bookingForm .form-group { min-width: 0; margin: 0; }
.booking-modal #bookingForm .form-group:first-child,
.booking-modal #bookingForm .form-group:nth-last-of-type(1),
.booking-modal #bookingForm .submit-btn { grid-column: 1 / -1; }
.booking-modal .form-group label { margin-bottom: 6px; font-size: 14px; }
.booking-modal .form-input { min-height: 40px; padding: 9px 14px; font-size: 14px; }
.booking-modal .submit-btn { padding: 12px 16px; border-radius: 10px; font-size: 14px; }
@media (max-width: 560px) {
.td-booking-price { padding: 20px 18px 14px; }
.td-booking-form { gap: 14px; padding: 18px; }
.td-inclusions-two-col .td-col-left,
.td-inclusions-two-col .td-col-right { padding: 20px; }
.td-related-grid .tour-card-new { flex-basis: min(82vw, 275px); width: min(82vw, 275px); max-width: min(82vw, 275px); }
.booking-modal #bookingForm { grid-template-columns: 1fr; }
.booking-modal #bookingForm .form-group,
.booking-modal #bookingForm .submit-btn { grid-column: 1; }
}
/* Tours and excursions listing page reference layout. */
.tour-listing-hero {
position: relative;
padding: 18px 14px 28px;
overflow: hidden;
border-bottom: 1px solid #ead9c6;
background: linear-gradient(112deg, #fffaf4 0%, #fbf1e5 54%, #f8ebdc 100%);
}
.tour-listing-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 1222px;
margin: 0 auto 20px;
color: #bd812f;
font: 500 11px/1.4 var(--font-manrope);
}
.tour-listing-breadcrumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.tour-listing-breadcrumb a:hover { color: var(--primary-color, #DF6951); }
.tour-listing-breadcrumb .fa-house { font-size: 12px; }
.tour-listing-breadcrumb > i { color: #bd812f; font-size: 8px; opacity: 0.75; }
.tour-listing-breadcrumb span { color: #16120e; font-weight: 500; }
.tour-listing-hero-content {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 1222px;
min-height: 228px;
margin: 0 auto;
}
.tour-listing-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.tour-listing-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 10px;
padding: 6px 12px;
border: 1px solid #f3d3c9;
border-radius: 18px;
background: #fff5f0;
color: #df624e;
font: 700 10px/1.2 var(--font-manrope);
letter-spacing: .06em;
}
.tour-listing-hero-copy h1 {
margin: 0 0 10px;
color: #181e4b;
font: 700 clamp(34px, 4vw, 48px)/1.08 var(--font-serif);
letter-spacing: -.03em;
}
.tour-listing-hero-copy p {
max-width: 680px;
margin: 0;
color: #344c69;
font: 400 14px/1.65 var(--font-manrope);
}
.tour-listing-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tour-listing-features span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 30px;
padding: 6px 12px;
border: 1px solid #ecd9c5;
border-radius: 18px;
background: rgba(255,255,255,.88);
color: #34465e;
font: 500 10px/1.2 var(--font-manrope);
}
.tour-listing-features i { color: #d96a3b; font-size: 11px; }
.tour-listing-route-art { position: absolute; top: 50%; right: 8px; width: 150px; height: 70px; transform: translateY(-50%); }
.tours-listing-section { padding: 32px 0 60px; background: #fbf8f3; }
.tours-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.tours-sidebar { display: block; min-width: 0; }
.tour-listing-filter-panel {
padding: 22px 24px;
border: 1px solid #eee2d5;
border-radius: 16px;
background: #fff;
box-shadow: 0 3px 10px rgba(55,45,35,.035);
}
.tour-listing-filter-title { margin: 0 0 16px; color: #181e4b; font: 700 15px/1.3 var(--font-manrope); }
.tour-listing-filter-panel .filter-card {
margin: 0;
padding: 15px 0;
border: 0;
border-bottom: 1px solid #e0e7ef;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.tour-listing-filter-panel .filter-card:last-child { padding-bottom: 0; border-bottom: 0; }
.tour-listing-filter-panel .filter-title { color: #17213f; font-size: 12px; }
.tour-listing-filter-panel .filter-header i { color: #8a9bb1; font-size: 10px; }
.tour-listing-filter-panel .filter-content { margin-top: 12px; }
.tour-listing-filter-panel .checkbox-container { margin-bottom: 10px; padding-left: 25px; color: #52657c; font-size: 12px; font-weight: 400; }
.tour-listing-filter-panel .checkbox-container:last-child { margin-bottom: 0; }
.tour-listing-filter-panel .checkmark { top: 1px; width: 15px; height: 15px; border-radius: 3px; }
.tours-main { min-width: 0; }
.tours-toolbar {
position: relative;
display: block;
min-height: 50px;
margin: 0 0 68px;
padding: 14px 20px;
border: 1px solid #eee2d5;
border-radius: 15px;
background: #fff;
box-shadow: 0 2px 5px rgba(55,45,35,.035);
}
.tours-results-count { color: #72839a; font-size: 12px; }
.tours-results-count strong { color: #181e4b; }
.view-toggle { position: absolute; right: 0; bottom: -44px; background: transparent; }
.view-btn { width: 34px; height: 34px; color: #8091a8; }
.view-btn.active { background: #eef2f7; color: #27364d; box-shadow: none; }
.tours-grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.tours-grid-container .tour-card-new { width: 100%; max-width: none; height: 100%; min-height: 0; border-color: #eee2d5; border-radius: 16px; box-shadow: 0 3px 10px rgba(55,45,35,.04); }
.tours-grid-container .promo-image-wrapper { height: auto; min-height: 0; aspect-ratio: 16 / 10.5; flex: 0 0 auto; }
.tours-grid-container .promo-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tours-grid-container .promo-content { flex: 1; padding: 14px 15px; }
.tours-grid-container .promo-title { min-height: 2.8em; margin-bottom: 7px; font-size: 13px; line-height: 1.4; }
.tours-grid-container .promo-rating-row { gap: 5px; margin-bottom: 6px; }
.tours-grid-container .rating-badge { padding: 3px 6px; font-size: 9px; }
.tours-grid-container .rating-label { font-size: 10px; }
.tours-grid-container .rating-count { font-size: 9px; }
.tours-grid-container .promo-meta-row { margin-bottom: 6px; }
.tours-grid-container .promo-duration { font-size: 10px; }
.tours-grid-container .tour-departure { margin-bottom: 9px; font-size: 10px; }
.tours-grid-container .promo-footer { margin-top: auto; }
.tours-grid-container .btn-book-now,
.tours-grid-container .btn-view-details { min-height: 34px; padding: 7px 5px; border-radius: 8px; font-size: 10px; }
.tours-grid-container .tour-favorite { width: 38px; height: 38px; }
@media (max-width: 1023px) {
.tours-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.tours-grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tour-listing-route-art { right: 0; width: 120px; }
}
@media (max-width: 760px) {
.tour-listing-hero { padding-right: 18px; padding-left: 18px; }
.tour-listing-hero-content { min-height: 220px; }
.tour-listing-hero-copy { max-width: 100%; }
.tour-listing-hero-copy h1 { max-width: 620px; font-size: clamp(32px, 7vw, 42px); }
.tour-listing-hero-copy p { max-width: 580px; font-size: 13px; }
.tour-listing-route-art { right: 0; width: 90px; opacity: .45; }
.tours-layout { grid-template-columns: 1fr; }
.tour-listing-filter-panel { padding: 18px; }
.tours-sidebar { order: 1; }
.tours-main { order: 0; }
}
@media (max-width: 520px) {
.tour-listing-hero-content { min-height: 230px; }
.tour-listing-hero-copy h1 { max-width: 100%; font-size: 31px; }
.tour-listing-route-art { display: none; }
.tours-listing-section { padding: 20px 0 40px; }
.tours-layout { gap: 18px; }
.tours-grid-container { grid-template-columns: 1fr; gap: 14px; }
.tours-grid-container .tour-card-new { width: 100%; max-width: none; height: auto; }
.tours-toolbar { margin-bottom: 60px; }
}
/* Use the homepage TourCard proportions and type scale on listing pages too. */
.tour-listing-hero-content,
.tour-listing-breadcrumb { max-width: 1222px; }
.tours-listing-section > .container.tours-layout { width: calc(100% - 28px); max-width: 1222px; }
.tours-grid-container .tour-card-new {
border: 1px solid #f0e5da;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 12px rgba(76,52,30,.05);
}
.tours-grid-container .tour-card-new:hover { box-shadow: 0 10px 22px rgba(76,52,30,.1); }
.tours-grid-container .promo-content { padding: 14px 16px; }
.tours-grid-container .promo-title {
min-height: 2.8em;
margin: 0 0 6px;
color: #181e4b;
font-size: 14px;
line-height: 1.4;
}
.tours-grid-container .promo-rating-row { gap: 6px; margin-bottom: 7px; }
.tours-grid-container .rating-badge { padding: 3px 7px; font-size: 10px; }
.tours-grid-container .rating-badge i { font-size: 9px; }
.tours-grid-container .rating-label { color: #253248; font-size: 11px; }
.tours-grid-container .rating-count { color: #7d8ea5; font-size: 10px; }
.tours-grid-container .promo-meta-row { margin-bottom: 6px; }
.tours-grid-container .promo-duration { color: #687d9a; font-size: 11px; }
.tours-grid-container .tour-departure { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #687d9a; font-size: 10px; }
.tours-grid-container .tour-departure i { color: #df6951; }
.tours-grid-container .promo-actions { gap: 8px; }
.tours-grid-container .btn-book-now,
.tours-grid-container .btn-view-details { min-height: 36px; padding: 8px 6px; border-radius: 9px; font-size: 11px; }
.tours-grid-container .btn-book-now { background: #df624e; border-color: #df624e; }
.tours-grid-container .btn-view-details { border-color: #dce4ef; color: #34465e; }
.tours-grid-container .tour-favorite { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 18px; }
@media (max-width: 760px) {
.tours-listing-section > .container.tours-layout { width: calc(100% - 36px); }
}
/* Keep circuit and excursion grid cards identical to the homepage cards. */
.tours-grid-container .tour-card-new {
width: 100%;
max-width: none;
min-height: 0;
height: auto;
margin: 0;
border-radius: 16px;
}
.tours-grid-container .promo-image-wrapper {
height: 180px;
min-height: 180px;
aspect-ratio: auto;
flex: 0 0 180px;
}
.tours-grid-container .promo-content {
flex: 0 0 auto;
margin-top: 0;
padding: 14px 16px;
border-radius: 0;
}
.tours-grid-container .promo-title {
min-height: 2.8em;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.4;
}
.tours-grid-container .promo-rating-row { gap: 6px; margin-bottom: 7px; }
.tours-grid-container .rating-badge { padding: 3px 7px; font-size: 10px; }
.tours-grid-container .rating-label { font-size: 11px; }
.tours-grid-container .rating-count { font-size: 10px; }
.tours-grid-container .promo-meta-row { margin-bottom: 6px; }
.tours-grid-container .promo-duration { font-size: 11px; }
.tours-grid-container .tour-departure { margin: 0 0 8px; font-size: 10px; }
.tours-grid-container .promo-footer { margin-top: 0; }
.tours-grid-container .btn-book-now,
.tours-grid-container .btn-view-details {
min-height: 36px;
padding: 8px 6px;
border-radius: 9px;
font-size: 11px;
}
.tours-grid-container .tour-favorite { width: 40px; height: 40px; font-size: 18px; }
/* Match the fixed homepage/detail-card proportions instead of stretching cards. */
.tours-grid-container {
grid-template-columns: repeat(auto-fill, minmax(275px, 275px));
justify-content: start;
}
.tours-grid-container .tour-card-new {
width: min(82vw, 275px);
max-width: min(82vw, 275px);
}
@media (max-width: 520px) {
.tours-grid-container {
grid-template-columns: minmax(0, 1fr);
justify-content: center;
}
.tours-grid-container .tour-card-new {
width: min(82vw, 275px);
max-width: min(82vw, 275px);
margin: 0 auto;
}
}
/* Events listing page follows the supplied editorial card layout. */
body:has(.events-listing-reference) { background: #fcf8f1; }
.events-listing-reference { min-height: 100vh; padding: 0 0 20px; background: #fcf8f1; }
.events-listing-breadcrumb { display: flex; align-items: center; gap: 10px; max-width: none; padding: 20px 38px 0; color: #bd812f; font: 500 11px/1.4 var(--font-manrope); }
.events-listing-breadcrumb a { color: inherit; text-decoration: none; }
.events-listing-breadcrumb > i { color: #dc9b4c; font-size: 8px; }
.events-listing-breadcrumb span { color: #111827; }
.events-listing-content { width: calc(100% - 74px); max-width: 1450px; margin: 28px auto 0; }
.events-listing-header { max-width: 790px; margin-bottom: 48px; }
.events-listing-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 20px; background: #eef1ff; color: #4947ff; font: 800 11px/1.3 var(--font-manrope); letter-spacing: .025em; }
.events-listing-header h1 { margin: 8px 0 12px; color: #100d0a; font: 700 clamp(38px, 4vw, 48px)/1 var(--font-serif); letter-spacing: -.025em; }
.events-listing-header p { max-width: 770px; margin: 0; color: #96552e; font: 400 14px/1.8 var(--font-manrope); }
.events-listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 32px; }
.events-listing-reference .event-card-premium,
.related-events-grid .event-card-premium {
width: 100%;
max-width: none;
min-width: 0;
height: 100%;
margin: 0;
}
@media (max-width: 900px) {
.events-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 600px) {
.events-listing-breadcrumb { padding: 28px 20px 0; }
.events-listing-content { width: calc(100% - 40px); margin-top: 24px; }
.events-listing-header { margin-bottom: 28px; }
.events-listing-header h1 { font-size: 34px; line-height: 1.05; }
.events-listing-header p { font-size: 13px; }
.events-listing-grid { grid-template-columns: 1fr; gap: 20px; }
}
.floating-contact-actions {
position: fixed;
z-index: 1000;
right: 18px;
bottom: 18px;
left: 18px;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
}
.floating-contact-button {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 15px;
border: 1px solid transparent;
border-radius: 999px;
color: #fff;
font: 600 12px/1.2 var(--font-sans, sans-serif);
text-decoration: none;
box-shadow: 0 4px 12px rgba(36, 43, 56, .16);
pointer-events: auto;
transition: transform .2s ease, box-shadow .2s ease;
}
.floating-contact-button:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(36, 43, 56, .25);
}
.floating-contact-button:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
.floating-contact-button--form { background: #b54f2d; }
.floating-contact-button--form i { font-size: 13px; }
.floating-contact-button--whatsapp {
position: relative;
width: 50px;
height: 50px;
min-height: 50px;
padding: 0;
border: 4px solid #fff;
background: #08bd86;
box-shadow: 0 3px 12px rgba(8, 189, 134, .28);
}
.floating-contact-button--whatsapp i { font-size: 22px; }
.floating-contact-button--whatsapp .whatsapp-hover-label {
position: absolute;
top: 50%;
right: calc(100% + 8px);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid #f0d7b4;
border-radius: 999px;
background: #fff;
color: #33251b;
font: 500 11px/1.2 var(--font-sans, sans-serif);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translate(5px, -50%);
transition: opacity .18s ease, transform .18s ease;
}
.floating-contact-button--whatsapp .whatsapp-status-dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #5ed4ad;
animation: whatsapp-dot-blink 1.2s ease-in-out infinite;
}
.floating-contact-button--whatsapp:hover .whatsapp-hover-label,
.floating-contact-button--whatsapp:focus-visible .whatsapp-hover-label {
opacity: 1;
transform: translate(0, -50%);
}
@keyframes whatsapp-dot-blink {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
.floating-contact-button--whatsapp .whatsapp-status-dot { animation: none; }
}
.floating-contact-button .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 600px) {
.floating-contact-actions { right: 14px; bottom: 14px; left: 14px; }
.floating-contact-button { min-height: 36px; gap: 7px; padding: 0 13px; font-size: 11px; }
.floating-contact-button--form i { font-size: 12px; }
.floating-contact-button--whatsapp { width: 48px; height: 48px; min-height: 48px; padding: 0; }
.floating-contact-button--whatsapp i { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.floating-contact-button { transition: none; }
}
/* Shared terracotta interactions for public cards. */
.wcu-reference-card {
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.wcu-reference-card:hover,
.wcu-reference-card:focus-within {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .6);
box-shadow: 0 12px 28px -6px rgba(223, 105, 81, .12);
}
.wcu-reference-icon {
transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.group:hover .wcu-reference-icon,
.group:focus-within .wcu-reference-icon {
transform: scale(1.05);
border-color: #DF6951;
background: #DF6951;
color: #fff;
box-shadow: 0 4px 12px rgba(223, 105, 81, .24);
}
.wcu-reference-card h3 { transition: color .3s ease; }
.group:hover h3,
.group:focus-within h3 { color: #DF6951; }
.destination-card {
box-sizing: border-box;
border: 1px solid transparent;
}
.destination-card:hover,
.destination-reference-link:focus-visible .destination-card {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .7);
box-shadow: 0 16px 32px -8px rgba(223, 105, 81, .16);
}
.dest-title { transition: color .3s ease; }
.group:hover .dest-title,
.group:focus-within .dest-title { color: #DF6951; }
.events-reference .event-card-premium:hover,
.events-reference .event-card-premium:focus-within,
.events-listing-reference .event-card-premium:hover,
.events-listing-reference .event-card-premium:focus-within {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .6);
box-shadow: 0 16px 36px -6px rgba(223, 105, 81, .16);
}
.tours-grid-container .tour-card-new:hover,
.tours-grid-container .tour-card-new:focus-within,
.td-related-grid .tour-card-new:hover,
.td-related-grid .tour-card-new:focus-within {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .7);
box-shadow: 0 16px 32px -8px rgba(223, 105, 81, .16);
}
.destinations-reference .destination-card:hover,
.destinations-reference .destination-reference-link:focus-visible .destination-card {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .7);
box-shadow: 0 16px 32px -8px rgba(223, 105, 81, .16);
}
.feature-card,
.value-card,
.mv-card,
.step-card,
.hiw-step-card,
.home-blog-card,
.blog-post-card,
.article-list-card,
.article-related-card,
.td-related-card,
.tour-grid-card,
.event-card-new {
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feature-card:hover,
.feature-card:focus-within,
.value-card:hover,
.value-card:focus-within,
.mv-card:hover,
.step-card:hover,
.step-card:focus-within,
.hiw-step-card:hover,
.hiw-step-card:focus-within,
.home-blog-card:hover,
.home-blog-card:focus-visible,
.blog-post-card:hover,
.blog-post-card:focus-within,
.article-list-card:hover,
.article-list-card:focus-within,
.article-related-card:hover,
.article-related-card:focus-visible,
.td-related-card:hover,
.td-related-card:focus-within,
.tour-grid-card:hover,
.tour-grid-card-link:focus-visible .tour-grid-card,
.event-card-new:hover,
.related-events-grid .event-card-new:focus-within {
outline: 1px solid rgba(223, 105, 81, .7);
outline-offset: -1px;
}
.home-blog-card:hover .home-blog-title,
.blog-post-card:hover .blog-post-title,
.article-list-card:hover .article-list-title a,
.article-list-card:focus-within .article-list-title a,
.article-related-card:hover .article-related-heading,
.article-related-card:focus-visible .article-related-heading {
color: #DF6951;
transition: color .3s ease;
}
.event-details-link { transition: color .3s ease; }
.event-details-link:hover,
.event-details-link:focus-visible { color: #c94e38; }
.event-details-link i { transition: transform .3s ease; }
.group:hover .event-details-link i,
.group:focus-within .event-details-link i { transform: translateX(4px); }
.tour-card-horizontal {
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tour-card-horizontal-link:hover .tour-card-horizontal,
.tour-card-horizontal-link:focus-visible .tour-card-horizontal {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .7);
box-shadow: 0 16px 32px -8px rgba(223, 105, 81, .16);
}
.tour-image-box img { transition: transform .5s ease-out; }
.group:hover .tour-image-box img,
.group:focus-within .tour-image-box img { transform: scale(1.06); }
.tour-title-h { transition: color .3s ease; }
.group:hover .tour-title-h,
.group:focus-within .tour-title-h { color: #DF6951; }
@media (prefers-reduced-motion: reduce) {
.wcu-reference-card,
.wcu-reference-icon,
.destination-card,
.feature-card,
.value-card,
.mv-card,
.step-card,
.hiw-step-card,
.home-blog-card,
.blog-post-card,
.article-list-card,
.article-related-card,
.td-related-card,
.tour-grid-card,
.event-card-new {
transition: none;
}
}
@supports (animation-timeline: view()) {
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference,
.popular-destinations.destinations-reference,
.wcu-section.wcu-reference,
.google-reviews-section,
.events-section-new.events-reference,
.explore-morocco-section,
.contact-section.contact-reference {
animation: none !important;
animation-timeline: auto !important;
}
}
html.motion-enabled {
scroll-behavior: smooth;
}
html.motion-enabled [data-motion] {
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: opacity .45s ease, transform .45s ease;
transition-delay: var(--motion-delay, 0ms);
will-change: opacity, transform;
}
html.motion-enabled [data-motion="text"] {
transform: translate3d(0, 8px, 0);
}
html.motion-enabled [data-motion="card"] {
transform: translate3d(0, 12px, 0);
}
html.motion-enabled [data-motion="image"] {
overflow: hidden;
transform: translate3d(0, 8px, 0);
}
html.motion-enabled [data-motion].is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
html.motion-enabled [data-parallax] {
transform: none;
}
html.motion-enabled [data-motion="image"] img,
html.motion-enabled [data-motion="image"] picture {
transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .8s ease;
}
html.motion-enabled [data-motion="image"].is-visible img,
html.motion-enabled [data-motion="image"].is-visible picture {
transform: scale(1);
}
.destination-card,
.article-list-card,
.article-related-card,
.blog-post-card,
.wcu-reference-card,
.btn-primary,
.btn-load-more-tours,
.td-book-btn,
.nav-link,
.mobile-nav-link,
.nav-mega-link {
backface-visibility: hidden;
}
.tour-card-new,
.destination-card,
.event-card-premium,
.article-list-card,
.article-related-card,
.blog-post-card {
transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
}
.destination-card:hover,
.destination-card:focus-within,
.article-list-card:hover,
.article-list-card:focus-within,
.article-related-card:hover,
.article-related-card:focus-within,
.blog-post-card:hover,
.blog-post-card:focus-within {
transform: translateY(-4px);
}
.promo-image,
.dest-image img,
.event-image-section img,
.article-list-img-wrap img,
.article-related-image img,
.tour-detail-hero img,
.dest-detail-feature-image {
transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}
.tour-card-new:hover .promo-image,
.tour-card-new:focus-within .promo-image,
.destination-card:hover .dest-image img,
.destination-card:focus-within .dest-image img,
.event-card-premium:hover .card-img,
.article-list-card:hover .article-list-img-wrap img,
.article-related-card:hover .article-related-image img {
transform: scale(1.06);
}
.btn-primary,
.btn-load-more-tours,
.td-book-btn {
transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary:hover,
.btn-load-more-tours:hover,
.td-book-btn:hover {
transform: translateY(-2px);
}
.motion-pressed {
transform: scale(.97) !important;
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
html.motion-enabled [data-motion] {
transition-duration: .45s;
}
}
@media (prefers-reduced-motion: reduce) {
html.motion-enabled [data-motion],
html.motion-enabled [data-parallax] {
opacity: 1;
transform: none;
transition: none;
}
html.motion-enabled [data-motion="image"] img,
html.motion-enabled [data-motion="image"] picture {
transition: none;
}
.tour-card-new:hover,
.tour-card-new:focus-within,
.destination-card:hover,
.destination-card:focus-within,
.event-card-premium:hover,
.event-card-premium:focus-within,
.article-list-card:hover,
.article-list-card:focus-within,
.article-related-card:hover,
.article-related-card:focus-within,
.blog-post-card:hover,
.blog-post-card:focus-within,
.btn-primary:hover,
.btn-book-now:hover,
.btn-view-details:hover,
.btn-load-more-tours:hover,
.td-book-btn:hover {
transform: none;
}
}
/* Keep listing and detail cards identical to homepage cards. */
.tours-grid-container,
.td-related-grid,
.wishlist-grid {
align-items: start;
}
.tours-grid-container {
grid-template-columns: repeat(auto-fill, minmax(275px, 275px));
justify-content: start;
gap: 24px;
}
.tours-grid-container .tour-card-new,
.td-related-grid .tour-card-new,
.wishlist-grid .tour-card-new,
.dest-cards-grid .tour-card-new {
width: min(82vw, 275px);
max-width: min(82vw, 275px);
min-height: 0;
height: auto;
margin: 0;
border: 1px solid #f0e5da;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 12px rgba(76, 52, 30, .05);
}
.tours-grid-container .tour-card-new:hover,
.tours-grid-container .tour-card-new:focus-within,
.td-related-grid .tour-card-new:hover,
.td-related-grid .tour-card-new:focus-within,
.wishlist-grid .tour-card-new:hover,
.wishlist-grid .tour-card-new:focus-within {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .7);
box-shadow: 0 16px 32px -8px rgba(223, 105, 81, .16);
}
.tours-grid-container .promo-image-wrapper,
.td-related-grid .promo-image-wrapper,
.wishlist-grid .promo-image-wrapper {
height: 180px;
min-height: 180px;
aspect-ratio: auto;
flex: 0 0 180px;
overflow: hidden;
}
.tours-grid-container .promo-content,
.td-related-grid .promo-content,
.wishlist-grid .promo-content {
flex: 0 0 auto;
margin-top: 0;
padding: 14px 16px;
border-radius: 0;
}
.tours-grid-container .promo-title,
.td-related-grid .promo-title,
.wishlist-grid .promo-title {
min-height: 2.8em;
margin: 0 0 6px;
color: #181e4b;
font-size: 14px;
line-height: 1.4;
}
.tours-grid-container .btn-book-now,
.tours-grid-container .btn-view-details,
.td-related-grid .btn-book-now,
.td-related-grid .btn-view-details,
.wishlist-grid .btn-book-now,
.wishlist-grid .btn-view-details {
min-height: 36px;
padding: 8px 6px;
border-radius: 9px;
font-size: 11px;
}
.tours-grid-container .btn-book-now,
.td-related-grid .btn-book-now,
.wishlist-grid .btn-book-now {
background: #df624e;
border-color: #df624e;
}
.tours-grid-container .btn-view-details,
.td-related-grid .btn-view-details,
.wishlist-grid .btn-view-details {
border-color: #dce4ef;
color: #34465e;
}
.tours-grid-container .btn-book-now:hover,
.tours-grid-container .btn-view-details:hover,
.td-related-grid .btn-book-now:hover,
.td-related-grid .btn-view-details:hover,
.wishlist-grid .btn-book-now:hover,
.wishlist-grid .btn-view-details:hover {
transform: none;
}
.tours-grid-container .tour-favorite,
.td-related-grid .tour-favorite,
.wishlist-grid .tour-favorite {
width: 40px;
height: 40px;
font-size: 18px;
}
.events-listing-grid .event-card-premium,
.related-events-grid .event-card-premium {
width: 100%;
max-width: none;
min-width: 0;
margin: 0;
border: 1px solid #f0e5da;
border-radius: 18px;
box-shadow: 0 4px 14px rgba(55, 45, 35, .045);
}
.events-listing-grid .event-card-premium:hover,
.events-listing-grid .event-card-premium:focus-within,
.related-events-grid .event-card-premium:hover,
.related-events-grid .event-card-premium:focus-within {
transform: translateY(-4px);
border-color: rgba(223, 105, 81, .6);
box-shadow: 0 16px 36px -6px rgba(223, 105, 81, .16);
}
.events-listing-grid .card-image-section,
.related-events-grid .card-image-section {
height: 210px;
flex: 0 0 210px;
}
.events-listing-grid .category-badge,
.related-events-grid .category-badge {
background: #df6951;
color: #fff;
}
.events-listing-grid .card-title,
.related-events-grid .card-title {
color: #181e4b;
font: 700 18px/1.35 var(--font-serif);
}
.events-listing-grid .card-description,
.related-events-grid .card-description {
color: #647996;
}
@media (max-width: 520px) {
.tours-grid-container {
grid-template-columns: minmax(0, 1fr);
justify-content: center;
}
.tours-grid-container .tour-card-new {
width: min(82vw, 275px);
max-width: min(82vw, 275px);
margin: 0 auto;
}
}
/* Shared luxury travel design tokens and homepage section rhythm. */
body.public-site .btn-primary,
body.public-site a.btn-primary,
body.public-site button.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .625rem 1.25rem;
border: 1px solid transparent;
border-radius: .75rem;
background: linear-gradient(135deg, #DF6951 0%, #c94e38 100%);
color: #fff;
font-size: .8125rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
box-shadow: 0 2px 8px -1px rgba(223, 105, 81, .3);
transition: all .25s cubic-bezier(.2, .8, .2, 1);
}
body.public-site .btn-primary:hover,
body.public-site a.btn-primary:hover,
body.public-site button.btn-primary:hover {
background: linear-gradient(135deg, #c94e38 0%, #a83d2c 100%);
box-shadow: 0 6px 16px -2px rgba(223, 105, 81, .4);
transform: translateY(-1px);
}
body.public-site .btn-primary:active { transform: translateY(0); }
body.public-site .btn-secondary,
body.public-site a.btn-secondary,
body.public-site button.btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .625rem 1.25rem; border: 1px solid transparent; border-radius: .75rem;
background: #F1A501; color: #fff; font-size: .8125rem; font-weight: 600;
line-height: 1.25; text-decoration: none; box-shadow: 0 2px 8px -1px rgba(241, 165, 1, .28);
transition: all .25s cubic-bezier(.2, .8, .2, 1);
}
body.public-site .btn-secondary:hover,
body.public-site a.btn-secondary:hover,
body.public-site button.btn-secondary:hover {
background: #d89300; box-shadow: 0 6px 16px -2px rgba(241, 165, 1, .35); transform: translateY(-1px);
}
body.public-site .btn-outline,
body.public-site a.btn-outline,
body.public-site button.btn-outline {
display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
padding: .5rem 1rem; border: 1px solid #E2E8F0; border-radius: .625rem;
background: #fff; color: #334155; font-size: .75rem; font-weight: 600;
line-height: 1.25; text-decoration: none; transition: all .2s ease;
}
body.public-site .btn-outline:hover,
body.public-site a.btn-outline:hover,
body.public-site button.btn-outline:hover {
border-color: #DF6951; color: #DF6951; background: rgba(223, 105, 81, .04); transform: translateY(-1px);
}
body.public-site .btn-outline:active { transform: translateY(0); }
body.public-site .hero-morocco .btn-primary.btn-hero-cta {
min-height: 2.5rem; gap: .5rem; padding: .625rem 1.25rem; border-radius: .75rem;
background: #F1A501; color: #fff; font-size: .8125rem; box-shadow: 0 4px 10px rgba(241, 165, 1, .25);
}
body.public-site .hero-morocco .btn-primary.btn-hero-cta::after { content: none; }
body.public-site .hero-morocco .btn-primary.btn-hero-cta:hover {
background: #d89300; box-shadow: 0 10px 20px rgba(241, 165, 1, .28); transform: translateY(-2px);
}
/* Reuse one eyebrow treatment for the homepage's existing section labels. */
.tours-reference .tours-eyebrow,
.events-reference .events-eyebrow,
.destinations-reference .destinations-eyebrow,
.wcu-reference .wcu-eyebrow {
display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem;
margin-bottom: .625rem; border: 1px solid rgba(223, 105, 81, .18); border-radius: 9999px;
background: rgba(223, 105, 81, .08); color: #DF6951; font-size: .6875rem;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* Warm section transitions, with the existing dashed route details retained. */
.tours-section-new.tours-reference,
.events-section-new.events-reference {
background: linear-gradient(180deg, #FAF7F2 0%, #fff 42%, #fff 100%);
border-top: 1px solid rgba(240, 230, 216, .6);
}
.excursions-section-new.excursions-reference {
background: linear-gradient(180deg, #FDFBF7 0%, #FDFBF7 35%, #fff 100%);
}
.popular-destinations.destinations-reference {
background: linear-gradient(180deg, #fff 0%, rgba(250, 247, 242, .5) 45%, #FAF7F2 100%);
border-top: 1px solid rgba(240, 230, 216, .6);
}
.wcu-section.wcu-reference {
background: linear-gradient(180deg, #fff 0%, #FAF5EE 70%, #FAF5EE 100%);
border-top: 1px solid rgba(240, 230, 216, .6);
}
.tours-section-new.tours-reference,
.excursions-section-new.excursions-reference,
.events-section-new.events-reference { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.popular-destinations.destinations-reference,
.wcu-section.wcu-reference,
.google-reviews-section { padding-top: 4rem; padding-bottom: 4rem; }
.google-reviews-section { border-color: rgba(240, 230, 216, .6); }
.contact-section.contact-reference { border-top: 1px solid rgba(240, 230, 216, .6); }
.tours-reference .tour-card-new,
.excursions-reference .tour-card-new,
.events-reference .event-card-premium,
.destinations-reference .destination-card,
.wcu-reference .wcu-reference-card {
transition: all .35s cubic-bezier(.16, 1, .3, 1);
box-shadow: 0 4px 20px -4px rgba(26, 15, 10, .06), 0 1px 3px rgba(26, 15, 10, .04);
}
.tours-reference .tour-card-new:hover,
.excursions-reference .tour-card-new:hover,
.events-reference .event-card-premium:hover,
.destinations-reference .destination-card:hover,
.wcu-reference .wcu-reference-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px -8px rgba(223, 105, 81, .14), 0 4px 12px -2px rgba(26, 15, 10, .06);
}
.bg-glass { background: rgba(253, 248, 242, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(201, 150, 60, .18); }
.bg-glass-dark { background: rgba(26, 15, 10, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .12); }
.hero-zellige { background-image: repeating-conic-gradient(from 45deg, transparent 0deg 42deg, rgba(201, 150, 60, .26) 43deg 45deg, transparent 46deg 90deg); background-size: 28px 28px; mask-image: radial-gradient(ellipse at bottom left, #000 8%, transparent 72%); }
@media (prefers-reduced-motion: reduce) {
body.public-site .btn-primary, body.public-site .btn-secondary,
body.public-site .btn-outline, .tours-reference .tour-card-new,
.excursions-reference .tour-card-new, .events-reference .event-card-premium,
.destinations-reference .destination-card, .wcu-reference .wcu-reference-card { transition: none; }
.tours-reference .tour-card-new:hover, .excursions-reference .tour-card-new:hover,
.events-reference .event-card-premium:hover, .destinations-reference .destination-card:hover,
.wcu-reference .wcu-reference-card:hover { transform: none; }
}
@media (max-width: 640px) {
.tours-section-new.tours-reference, .excursions-section-new.excursions-reference,
.events-section-new.events-reference, .popular-destinations.destinations-reference,
.wcu-section.wcu-reference, .google-reviews-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}